/* ==========================================================================
   FONT CHỮ - tự lưu trữ file (KHÔNG dùng <link> tới fonts.googleapis.com) vì CSP
   của hệ thống chặn cứng style-src/font-src ngoài 'self' (chống chèn tài nguyên
   lạ trên trang thu tiền) - font-src 'self' vẫn cho phép file font nằm trong
   chính /static/ nên không cần nới lỏng CSP.

   Nunito Sans được chọn sau khi tra cứu thực tế Cổng Dịch vụ công Quốc gia
   (dichvucong.gov.vn) - cùng nhóm "dịch vụ công" với dự án này, không phải cổng
   tin tức chính phủ (chinhphu.vn/hanoi.gov.vn dùng Roboto + Merriweather, thiên
   về báo chí trang trọng hơn). Ghi chú: chuẩn Times New Roman theo Nghị định
   30/2020/NĐ-CP chỉ áp dụng cho VĂN BẢN GIẤY/PDF hành chính, không phải giao diện
   web - không cổng dịch vụ công thật nào dùng Times New Roman cho web.

   JetBrains Mono cho mã tra cứu/số tài khoản/số giao dịch - phân biệt rõ
   0/O, 1/l/I khi đọc số. Chỉ tải 2 subset thật sự cần (vietnamese + latin) - bỏ
   latin-ext/cyrillic/greek không dùng tới, giữ tổng dung lượng nhỏ. */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/nunito-sans/nunito-sans-400-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/nunito-sans/nunito-sans-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/nunito-sans/nunito-sans-500-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/nunito-sans/nunito-sans-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/nunito-sans/nunito-sans-600-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/nunito-sans/nunito-sans-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/nunito-sans/nunito-sans-700-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/nunito-sans/nunito-sans-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/nunito-sans/nunito-sans-800-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/nunito-sans/nunito-sans-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono/jetbrains-mono-500-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono/jetbrains-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/jetbrains-mono/jetbrains-mono-600-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/jetbrains-mono/jetbrains-mono-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Màu chủ đạo - GIỮ NGUYÊN đúng mã hex gốc (yêu cầu thiết kế lại vẫn giữ tông màu) */
  --color-primary: #14532d;
  --color-primary-dark: #0f3d21;
  --color-primary-light: #e8f3ec;
  --color-primary-soft: #f2f8f4;
  --color-text: #142019;
  --color-text-muted: #5c6b62;
  --color-text-faint: #8a9790;
  --color-bg: #f6f8f6;
  --color-border: #e3e9e4;
  --color-border-soft: #edf1ee;
  --color-surface: #ffffff;

  /* Màu trạng thái - giữ nguyên tông, tinh chỉnh nhẹ cho hài hoà với nền mới */
  --color-warning-bg: #fdf3d1;
  --color-warning-border: #f2c94c;
  --color-warning-text: #6b4d00;
  --color-danger-bg: #fdecea;
  --color-danger-border: #f5a3a3;
  --color-danger-text: #8a1f1f;
  --color-success-bg: #e6f4ea;
  --color-success-border: #86c99a;
  --color-success-text: #1e6b34;
  --color-info-bg: #eaf1fc;
  --color-info-border: #a7c4f5;
  --color-info-text: #1a4a8a;

  /* Spacing chuẩn */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;

  /* Bo góc + bóng đổ - hệ thống mới dùng bo góc lớn hơn, mềm hơn bản gốc (6px) */
  --radius: 12px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(15, 26, 20, 0.06);
  --shadow-md: 0 10px 28px rgba(15, 26, 20, 0.08);
  --shadow-lg: 0 22px 48px rgba(15, 26, 20, 0.14);

  --font-size-base: 1rem;
  --sidebar-width: 264px;

  /* Nunito Sans/JetBrains Mono tự lưu trữ (xem khối @font-face ở trên) - "Inter"
     và hệ font hệ điều hành làm phương án dự phòng nếu file font lỗi/chưa tải
     xong (Inter chỉ liệt kê tên, không tự lưu trữ file - đúng theo cách
     dichvucong.gov.vn khai báo, ít khi thực sự cần tới vì Nunito Sans luôn tải
     được trước). */
  --font-sans: "Nunito Sans", "Inter", -apple-system, "Segoe UI", "Helvetica Neue", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, Menlo, monospace;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Sticky footer cho trang KHÔNG đăng nhập (header/main.container/footer là
     3 anh em trực tiếp trong body - trang đã đăng nhập dùng .app-shell riêng,
     xem đó): nội dung ngắn (VD trang đăng nhập) vẫn phải đẩy footer xuống sát
     đáy màn hình thay vì hiện ngay dưới nội dung. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-3);
}

/* ---- Hệ chữ dùng chung: tựa đề nổi bật rõ rệt hơn bản gốc (h1 từ 1.5rem/800 lên
   tới ~2.5rem/800 trên PC), letter-spacing âm nhẹ tạo cảm giác hiện đại/chắc chắn.
   Định nghĩa 1 lần ở đây làm NỀN (chỉ dùng selector thẻ thuần, KHÔNG kèm class, để
   độ ưu tiên CSS luôn THẤP HƠN mọi class component khác - các class đó override
   đúng như thiết kế mà không cần !important). */
main h1 {
  margin: 0 0 var(--space-2);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-text);
}

main h2 {
  margin: var(--space-5) 0 var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-soft);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--color-text);
}

main h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

main h3 {
  margin: var(--space-3) 0 var(--space-1);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
}

main p {
  margin: 0 0 var(--space-3);
  max-width: 68ch;
  color: var(--color-text);
}

.lede {
  font-size: 1.08rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

main a {
  color: var(--color-primary);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

main a:hover {
  color: var(--color-primary-dark);
}

.eyebrow {
  display: inline-block;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

/* ---- Chữ mã/số kỹ thuật (mã hộ, mã tra cứu, mã bản ghi...) - dùng font đều nét
   để phân biệt rõ 0/O, 1/l/I khi đọc/đối chiếu số, khác hẳn phần chữ nội dung
   thường xung quanh. ---- */
.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
}

@media (min-width: 640px) {
  main h1 {
    font-size: 2.25rem;
  }

  main h2 {
    font-size: 1.4rem;
  }
}

/* ---- Icon inline SVG dùng chung (thay glyph emoji ở các vị trí xuất hiện trên MỌI
   trang - dải nhận diện, banner demo - để đồng nhất 1 kiểu icon nét mảnh, không phụ
   thuộc font emoji của từng thiết bị) ---- */
.icon {
  display: inline-block;
  vertical-align: -0.15em;
  flex-shrink: 0;
}

/* ---- Dải nhận diện đơn vị chủ quản: đặt TRÊN CÙNG, tách biệt màu với header
   thương hiệu bên dưới - đây là chi tiết các trang giả mạo/lừa đảo thường KHÔNG
   làm đủ (tên đơn vị + địa chỉ trụ sở cụ thể), nên vừa tăng uy tín vừa cho dân 1
   điểm để đối chiếu khi nghi ngờ trang giả. */
.identity-bar {
  background: #0e1712;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.72rem;
  padding: 0.4rem var(--space-3);
}

.identity-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem var(--space-2);
}

.identity-bar-org {
  font-weight: 700;
  color: #fff;
}

.identity-bar-sep {
  opacity: 0.4;
}

/* ==========================================================================
   HEADER - trang dân (chưa đăng nhập): thanh điều hướng ngang kiểu trang giới
   thiệu dịch vụ công, logo + 2 nút hành động chính.
   ========================================================================== */
.site-header {
  background: linear-gradient(155deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  padding: var(--space-3) 0;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.14);
}

.site-header .container {
  position: relative;
}

.site-header .header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: #fff;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
  min-width: 0;
}

.site-header .brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  flex-shrink: 0;
}

.site-header .brand-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-top-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.header-top-actions a.btn-nav-primary,
.header-top-actions a.btn-nav-login {
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.header-top-actions a.btn-nav-primary {
  background: #fff;
  color: var(--color-primary-dark);
  box-shadow: var(--shadow-sm);
}

.header-top-actions a.btn-nav-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.header-top-actions a.btn-nav-login {
  color: #fff;
  font-weight: 600;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  padding: 0.5rem 1rem;
}

.header-top-actions a.btn-nav-login:hover,
.header-top-actions a.btn-nav-login.is-active {
  background: rgba(255, 255, 255, 0.15);
}

/* ==========================================================================
   APP SHELL - trang cán bộ/quản trị (đã đăng nhập): sidebar trái cố định trên
   PC, kéo ra dạng ngăn kéo (drawer) trên điện thoại. Thay cho menu xổ ngang cũ.
   ========================================================================== */
.app-shell {
  display: flex;
  /* stretch (mặc định flexbox, ghi rõ ra đây để không ai vô tình đổi lại) - BẮT
     BUỘC để .app-main cao bằng đúng .app-shell thay vì co về khít nội dung. Nếu
     đổi lại thành flex-start: trang có nội dung NGẮN (VD "Đổi mật khẩu") sẽ
     khiến .app-main chỉ cao bằng nội dung, kéo .site-footer lên hiện giữa
     trang thay vì dính sát đáy màn hình - lỗi thật đã xác nhận qua ảnh chụp
     headless Chrome, không phải suy đoán. Xem thêm flex:1 ở main.container.*/
  align-items: stretch;
  min-height: calc(100vh - 5.5rem);
}

.app-topbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.7rem var(--space-3);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-soft);
  position: sticky;
  top: 0;
  z-index: 90;
}

.app-topbar-brand {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--color-text);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 10px;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle:hover {
  background: var(--color-primary-light);
}

.app-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--color-primary-dark);
  color: rgba(255, 255, 255, 0.86);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 200;
  transform: translateX(-100%);
  transition: transform 0.2s ease;
  box-shadow: var(--shadow-lg);
}

.app-sidebar.is-open {
  transform: translateX(0);
}

.app-sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  flex-shrink: 0;
}

.app-sidebar-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  flex-shrink: 0;
}

.app-sidebar-brand-text {
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
  line-height: 1.2;
}

.app-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--space-2) var(--space-3);
}

.nav-section-label {
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-3) 0.65rem 0.4rem;
}

.app-sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  text-align: left;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.6rem 0.65rem;
  border-radius: 10px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.app-sidebar-nav a:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  text-decoration: none;
}

.app-sidebar-nav a.is-active {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* Khối tài khoản CUỐI sidebar - CỐ Ý thu gọn (avatar nhỏ, đệm mỏng, hành động xếp
   1 hàng ngang thay vì cột) để có "trọng lượng" thị giác ngang hàng với
   `.site-footer` mỏng ở cột nội dung chính, không phình to hơn hẳn 1 dòng chữ. */
.app-sidebar-account {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.account-avatar {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.65rem;
  flex-shrink: 0;
}

.account-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.account-info .nav-user-name {
  color: #fff;
  font-weight: 700;
  font-size: 0.76rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-sidebar-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0.15rem var(--space-2) 0.55rem;
  gap: 0.1rem;
}

.app-sidebar-actions a,
.app-sidebar-actions .btn-link {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.7rem;
  padding: 0.3rem 0.5rem;
  border-radius: 8px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.app-sidebar-actions a:hover,
.app-sidebar-actions .btn-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.app-sidebar-backdrop {
  display: none;
}

/* Lớp phủ mờ sau sidebar khi mở trên điện thoại - dùng :has() để không cần thêm
   JS phụ (trình duyệt không hỗ trợ :has() vẫn dùng được sidebar bình thường, chỉ
   thiếu hiệu ứng phủ mờ - suy giảm nhẹ nhàng, không ảnh hưởng chức năng). */
.app-shell:has(.app-sidebar.is-open) .app-sidebar-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(9, 15, 12, 0.45);
  z-index: 190;
}

.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

@media (min-width: 900px) {
  .app-topbar {
    display: none;
  }

  .app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    transform: none;
    box-shadow: none;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
  }

  .app-shell:has(.app-sidebar.is-open) .app-sidebar-backdrop {
    display: none;
  }
}

/* ==========================================================================
   NỘI DUNG CHUNG
   ========================================================================== */
main.container {
  padding-top: var(--space-4);
  padding-bottom: var(--space-5);
  min-height: 60vh;
  /* Đẩy .site-footer xuống sát đáy khi nội dung ngắn hơn 1 màn hình - cần cả
     body (trang dân, không đăng nhập) LẪN .app-shell/.app-main (trang cán bộ)
     là flex column với item này flex:1 mới có tác dụng, xem 2 chỗ tương ứng. */
  flex: 1 0 auto;
}

.app-main main.container {
  padding-top: var(--space-4);
  /* Trang cán bộ: bỏ hẳn max-width (khác trang dân dùng chung .container 1280px) -
     luôn lấp đầy đúng phần không gian còn lại sau sidebar, không giữ trần cứng nào
     nữa. Bảng/lưới nhiều cột (Hộ dân, Chờ xác nhận online...) hưởng lợi trực tiếp
     từ màn hình càng rộng càng đỡ phải cuộn ngang/rút gọn cột. */
  max-width: none;
  /* BẮT BUỘC ghi đè margin:0 auto kế thừa từ .container: .app-main là flex
     column, và margin trái/phải "auto" chính là trục CHÉO (cross-axis) của flex
     item này - theo đặc tả flexbox, margin auto ở trục chéo tắt hẳn hành vi
     align-items:stretch, khiến phần tử co về đúng khít nội dung rồi tự canh giữa
     bằng chính margin auto đó (max-width:none ở trên vì vậy KHÔNG có tác dụng gì
     - đã tự bắt lỗi này bằng DevTools, không phải suy đoán). Đặt lại margin:0 để
     stretch hoạt động đúng, lấp đầy toàn bộ chiều rộng .app-main. */
  margin: 0;
}

.flash-messages {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.flash {
  padding: 0.7rem var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  font-size: 0.9rem;
}

.flash-warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning-text);
}

.flash-danger {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  color: var(--color-danger-text);
}

.flash-success {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success-text);
}

.flash-info {
  background: var(--color-info-bg);
  border-color: var(--color-info-border);
  color: var(--color-info-text);
}

/* ---- Form ---- */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 440px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.form-group label {
  font-weight: 700;
  font-size: 0.86rem;
}

.form-control {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font-size: 1rem;
  font-family: inherit;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-text);
}

.form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3.5px rgba(20, 83, 45, 0.14);
}

.form-control.is-invalid {
  border-color: var(--color-danger-border);
}

.form-hint {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.field-error {
  display: block;
  min-height: 1.1em;
  font-size: 0.8rem;
  color: var(--color-danger-text);
}

.form-message {
  padding: 0.75rem var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  font-size: 0.9rem;
}

.form-message-danger {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  color: var(--color-danger-text);
}

.form-message-success {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success-text);
}

.form-message-info {
  background: var(--color-info-bg);
  border-color: var(--color-info-border);
  color: var(--color-info-text);
}

.form-message-warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning-text);
}

.form-message[hidden] {
  display: none;
}

/* ---- Radio group (VD chọn kiểu xác thực khi tra cứu) ---- */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.radio-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 400;
  cursor: pointer;
}

.radio-option input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--color-primary);
}

/* ---- Danh sách "cam kết với dân" (trang chủ) ---- */
.cam-ket-list {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 68ch;
}

.cam-ket-list li {
  position: relative;
  padding-left: 2rem;
  color: var(--color-text);
}

.cam-ket-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--color-success-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231e6b34' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / 60%;
}

/* ---- Khối thông tin hỗ trợ (cố định trên mọi trang tra cứu của dân) ---- */
.ho-tro-box {
  background: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}

.ho-tro-tieu-de {
  font-weight: 800;
  color: var(--color-info-text);
  margin: 0 0 var(--space-1);
}

.ho-tro-list {
  margin: 0 0 var(--space-2);
  padding-left: 1.2rem;
  font-size: 0.9rem;
}

.ho-tro-box .auth-note {
  margin-bottom: 0;
}

/* ---- Button ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.7rem 1.35rem;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: inherit;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border);
  cursor: pointer;
  text-decoration: none;
  background: #fff;
  color: var(--color-text);
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.btn:hover {
  text-decoration: none;
  background: var(--color-bg);
}

.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  box-shadow: 0 8px 20px rgba(20, 83, 45, 0.22);
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(20, 83, 45, 0.28);
}

.btn-block {
  width: 100%;
}

.btn:disabled,
.btn.is-loading {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none !important;
}

/* ---- Kết quả tra cứu theo tên/địa chỉ (nhiều hộ khớp) ---- */
.ho-khop-wrap {
  margin-top: var(--space-4);
}

.danh-sach-ho {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.danh-sach-ho-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.danh-sach-ho-item form {
  margin: 0;
}

/* ---- Table ---- */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

th,
td {
  padding: 0.75rem var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-border-soft);
  white-space: nowrap;
}

/* Cột "Chủ hộ" (danh sách hộ dân): tên dài (VD hộ kinh doanh có tên công ty)
   không giới hạn độ rộng trước đây khiến cả bảng bị đẩy tràn ra ngoài, phải cuộn
   ngang mới thấy hết các cột sau - giới hạn lại + cho xuống dòng thay vì kéo dài
   mãi (khác với các cột khác vẫn giữ nowrap vì nội dung vốn ngắn). */
.col-chu-ho {
  max-width: 220px;
  white-space: normal;
  overflow-wrap: break-word;
}

th {
  background: var(--color-bg);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}

tbody tr:last-child td {
  border-bottom: none;
}

/* ---- Tiêu đề cột bấm để sắp xếp (VD danh sách hộ dân) ---- */
.th-sap-xep {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}

.th-sap-xep:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.th-sap-xep.is-active {
  color: var(--color-primary);
}

/* ---- Card dùng cho form đăng nhập/đổi mật khẩu ---- */
.auth-card {
  max-width: 440px;
  margin: 0 auto;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.auth-card h1 {
  font-size: 1.5rem;
  margin-top: 0;
}

.auth-note {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  line-height: 1.55;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  /* Viền cùng tông màu - BẮT BUỘC để badge còn thấy được khi đặt trên nền CÙNG
     màu nhạt (VD badge-warning "Còn nợ" nằm trong hàng tr.row-warning, nền 2
     bên giống hệt nhau - đã thấy tận mắt lúc kiểm tra qua Chrome thật, badge
     gần như biến mất nếu không có viền này). */
  border: 1px solid transparent;
}

.badge-admin {
  background: var(--color-info-bg);
  color: var(--color-info-text);
  border-color: var(--color-info-border);
}

.badge-staff {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border-color: var(--color-success-border);
}

/* badge-admin/badge-staff (xanh dương/xanh lá) ban đầu chỉ đặt tên theo vai trò
   tài khoản (Quản trị/Nhân viên) nhưng bị dùng lại cho nhiều trạng thái KHÔNG
   liên quan (Còn nợ, Quá hạn, Từ chối, Chưa ký...) - khiến MỌI mức độ nghiêm
   trọng khác nhau đều ra cùng 1 màu xanh dương, không phân biệt được trạng thái
   cần chú ý (vàng) với trạng thái thực sự có vấn đề (đỏ). Thêm 2 màu còn thiếu
   (đỏ/vàng đã có sẵn token dùng cho flash message) để badge phản ánh đúng mức
   độ, hài hoà với hệ màu chung thay vì gò về 2 màu có sẵn. */
.badge-danger {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  border-color: var(--color-danger-border);
}

.badge-warning {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border-color: var(--color-warning-border);
}

.site-footer {
  margin-top: var(--space-5);
  border-top: 1px solid var(--color-border-soft);
  background: var(--color-surface);
  padding: var(--space-4) 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.footer-col p {
  margin: 0 0 var(--space-1);
}

.footer-org {
  font-weight: 800;
  color: var(--color-text);
}

.footer-canh-bao {
  padding: var(--space-3);
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);
  border-radius: var(--radius);
}

.footer-canh-bao-tieu-de {
  font-weight: 800;
  color: var(--color-danger-text);
}

.footer-canh-bao p {
  color: var(--color-danger-text);
}

.footer-note {
  margin: var(--space-3) 0 0;
  text-align: center;
  font-size: 0.78rem;
}

@media (min-width: 720px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- Tìm kiếm / bộ lọc ---- */
.search-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.search-bar .form-group {
  flex: 1;
}

.ket-qua-tim {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
  font-size: 0.875rem;
  box-shadow: var(--shadow-sm);
}

.filter-toolbar label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  cursor: pointer;
}

.filter-toolbar [data-table-search] {
  flex: 1 1 100%;
  min-width: 200px;
}

@media (min-width: 640px) {
  .filter-toolbar [data-table-search] {
    flex: 1 1 240px;
  }
}

[data-table-count] {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0 0 var(--space-2);
}

.col-wrap {
  white-space: normal !important;
  max-width: 240px;
  min-width: 140px;
}

/* Bảng dữ liệu import NHIỀU CỘT trên điện thoại: chuyển thành thẻ dọc dưới 640px. */
@media (max-width: 639px) {
  .table-cards-mobile,
  .table-cards-mobile tbody {
    display: block;
    width: 100%;
  }

  .table-cards-mobile thead {
    display: none;
  }

  .table-cards-mobile tr {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
  }

  .table-cards-mobile tr.row-error {
    border-color: var(--color-danger-border);
    border-width: 2px;
  }

  .table-cards-mobile tr.row-warning {
    border-color: var(--color-warning-border);
    border-width: 2px;
  }

  .table-cards-mobile td {
    display: flex;
    gap: var(--space-2);
    align-items: baseline;
    padding: 0.3rem 0;
    border-bottom: 1px dashed var(--color-border);
    white-space: normal !important;
    max-width: none;
    min-width: 0;
  }

  .table-cards-mobile td:last-child {
    border-bottom: none;
  }

  .table-cards-mobile td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 40%;
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: 0.8rem;
  }
}

/* ---- Lưới thông tin chi tiết (hộ dân, tiền dư...) ---- */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
  font-size: 0.9rem;
  box-shadow: var(--shadow-sm);
}

/* ---- Phân trang ---- */
.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  font-size: 0.9rem;
}

.pagination a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 700;
}

.pagination a:hover {
  text-decoration: underline;
}

.pagination button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--color-primary);
  font-weight: 700;
  cursor: pointer;
}

.pagination button:hover:not(:disabled) {
  text-decoration: underline;
}

.pagination button:disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
  text-decoration: none;
}

/* ---- Dòng dữ liệu import: lỗi (đỏ) / cảnh báo (vàng) ---- */
tr.row-error {
  background: var(--color-danger-bg);
}

tr.row-warning {
  background: var(--color-warning-bg);
}

tr.sub-row td {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  background: var(--color-bg);
}

/* Dòng "Tổng" chốt lại bảng so sánh theo loại hộ (VD Hoa hồng) - tách khỏi các
   dòng dữ liệu bằng nền nhẹ + viền dày hơn phía trên, không cần màu sắc riêng. */
tr.tong-hop-row td {
  background: var(--color-bg);
  border-top: 2px solid var(--color-border-soft);
}

.msg-loi {
  color: var(--color-danger-text);
  white-space: normal;
}

.msg-canh-bao {
  color: var(--color-warning-text);
  white-space: normal;
}

/* ---- Chi tiết mở rộng (khớp chắc chắn, hộ mới...) ---- */
details {
  margin-bottom: var(--space-3);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
}

details summary {
  cursor: pointer;
  font-weight: 700;
}

/* ---- Cảnh báo QR demo: phải thật nổi bật, dễ chụp màn hình ---- */
.qr-demo-warning {
  background: var(--color-danger-bg);
  border: 2px solid var(--color-danger-border);
  color: var(--color-danger-text);
  font-weight: 700;
  padding: var(--space-3);
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
  text-align: center;
}

.canh-bao-doi-chieu {
  background: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
  color: var(--color-info-text);
  padding: var(--space-3);
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* ---- Trang thanh toán: 2 cột trên desktop (QR bên trái, thông tin/xác nhận bên
   phải) - trên điện thoại xếp dọc như 1 luồng duy nhất. Tránh việc .qr-box (căn
   giữa nội dung nhỏ bên trong) kéo full chiều rộng trang để lại khoảng trắng lớn 2
   bên khi màn hình rộng. ---- */
.payment-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.payment-main,
.payment-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.payment-side .form,
.payment-main .form {
  max-width: none;
}

@media (min-width: 900px) {
  .payment-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: var(--space-4);
  }

  .qr-box {
    position: sticky;
    top: var(--space-3);
  }
}

/* ---- QR thanh toán: to, rõ, dễ chụp gửi qua group chat ---- */
.qr-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow-md);
}

.qr-image {
  width: 100%;
  max-width: 280px;
  height: auto;
  image-rendering: pixelated;
  border-radius: var(--radius-sm);
}

.qr-so-tien {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-primary);
  margin: 0;
}

.form-chon-so-tien {
  max-width: 100%;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.form-chon-so-tien .form-group {
  flex: 1;
}

/* ---- Ô có nút sao chép (nội dung chuyển khoản, số tài khoản demo...) ---- */
.copy-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.copy-row .form-control {
  flex: 1;
  font-weight: 700;
  font-family: var(--font-mono);
}

.copy-row .btn {
  width: 100%;
}

@media (min-width: 400px) {
  .copy-row {
    flex-direction: row;
  }

  .copy-row .btn {
    width: auto;
    flex-shrink: 0;
  }
}

/* ---- Danh sách kết quả tìm nhanh (thu tại nhà) - to, dễ bấm trên điện thoại ---- */
.quick-result-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.quick-result-item {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  padding: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

.quick-result-item:active {
  background: var(--color-bg);
}

.quick-result-item.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

/* ==========================================================================
   THU TẠI NHÀ: tìm + kết quả bên TRÁI, chi tiết hộ/ghi nhận bên PHẢI trên desktop
   (master-detail thật, không phải 1 cột dài kéo giãn) - cột trái cố định vừa đủ
   đọc, cột phải nhận hết phần còn lại.
   ========================================================================== */
.master-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (min-width: 860px) {
  .master-detail {
    display: grid;
    grid-template-columns: 340px 1fr;
    align-items: start;
    gap: var(--space-4);
  }
}

.quick-obligation-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  box-shadow: var(--shadow-sm);
}

.form-inline {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.form-inline .form-control {
  min-width: 140px;
}

/* ---- Dashboard: thẻ số liệu (stat card) - bỏ viền trái màu (mô-típ cũ), thay bằng
   icon chip tròn màu nhạt ở góc trên để hiện đại và bớt rối hơn. ---- */
.stat-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  box-shadow: var(--shadow-sm);
  position: relative;
}

.stat-card::before {
  content: "";
  display: block;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 10px;
  background: var(--color-primary-light);
  margin-bottom: var(--space-2);
}

.stat-card-label {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.stat-card-value {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.stat-card-success::before {
  background: var(--color-success-bg);
}

.stat-card-warning::before {
  background: var(--color-warning-bg);
}

/* Chữ cảnh báo trong bảng (VD "X đ đang treo, chưa có người nhận") - dùng chung
   màu chữ với .stat-card-warning/badge cảnh báo, không cần cả khối nền. */
.canh-bao-text {
  color: var(--color-warning-text);
  font-weight: 600;
}

.stat-card-info::before {
  background: var(--color-info-bg);
}

.stat-card-danger::before {
  background: var(--color-danger-bg);
}

/* Biến thể gọn cho trang phụ (2-3 thẻ, VD Hộ dân/Số dư cấn trừ/Chờ xác nhận) - lấp
   đầy chiều rộng có sẵn bằng auto-fit thay vì kế thừa lưới tới 6 cột của dashboard,
   tránh 2-3 thẻ bị co hẹp lại bên trái với khoảng trống bên phải. */
.stat-card-grid-sm {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

@media (min-width: 560px) {
  .stat-card-grid-sm {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

/* ---- Dashboard: bố cục các khối biểu đồ/bảng ---- */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.dashboard-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.dashboard-panel h2 {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  font-size: 1.05rem;
}

/* ---- Biểu đồ cột CSS đơn giản (VD tỷ lệ đã thu theo khu phố) ---- */
.bar-chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.bar-row {
  display: grid;
  grid-template-columns: 5rem 1fr 3.5rem;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.875rem;
}

.bar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-track {
  background: var(--color-bg);
  border: 1px solid var(--color-border-soft);
  border-radius: 999px;
  height: 0.65rem;
  overflow: hidden;
}

.bar-fill {
  background: var(--color-primary);
  height: 100%;
  border-radius: 999px;
}

.bar-value {
  text-align: right;
  font-weight: 700;
}

/* ---- Biểu đồ tròn CSS (conic-gradient) đơn giản, không cần thư viện JS ---- */
.donut-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.donut-chart {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}

.donut-chart::after {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: var(--color-surface);
}

.donut-legend {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.legend-dot {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  margin-right: var(--space-1);
}

/* ---- Nhật ký thay đổi (audit log) ---- */
.audit-data-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.8rem;
}

/* ---- Mobile-first: mở rộng dần cho màn hình lớn hơn ---- */
@media (min-width: 640px) {
  .container {
    padding: 0 var(--space-4);
  }

  main.container {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
  }

  .btn {
    width: auto;
  }

  .btn-block {
    width: 100%;
  }

  .search-bar {
    flex-direction: row;
    align-items: flex-end;
  }

  .search-bar .btn-block {
    flex: 0 0 auto;
    width: auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .detail-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-chon-so-tien {
    flex-direction: row;
    align-items: flex-end;
  }

  .quick-obligation-item {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .quick-obligation-item .btn-block {
    width: auto;
  }

  .stat-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


@media (min-width: 960px) {
  .auth-card {
    padding: var(--space-5);
  }

  .stat-card-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Nút nổi (floating action button) dùng chung ---- */
.fab-cum {
  position: fixed;
  bottom: var(--space-3);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.fab-nut {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: none;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  transition: transform 0.15s ease;
}

.fab-nut:hover {
  transform: scale(1.08);
  color: #fff;
}

.fab-cum-cuon {
  left: var(--space-3);
}

.fab-cum-cuon .fab-nut {
  background: var(--color-primary);
}

.fab-cum-cuon .fab-nut:hover {
  background: var(--color-primary-dark);
}

.fab-cum-lien-he {
  right: var(--space-3);
}

.fab-nut-phone {
  background: var(--color-primary);
}

.fab-nut-zalo {
  background: #0068ff;
}

.fab-nut-facebook {
  background: #1877f2;
}

/* Số đếm nổi bật cạnh mục menu (VD "Chờ xác nhận online (3)"). */
.badge-cho-xu-ly {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 0.4rem;
  margin-left: auto;
  border-radius: 999px;
  background: #dc4c4c;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
}

/* ==========================================================================
   TRANG CHỦ - hero giới thiệu
   ========================================================================== */
.hero {
  background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  margin: 0 0 var(--space-5);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.hero::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
}

.hero::after {
  content: "";
  position: absolute;
  bottom: -90px;
  left: -70px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
}

.hero-inner {
  position: relative;
  max-width: 46ch;
}

.hero h1 {
  color: #fff;
  font-size: 2rem;
  margin-bottom: var(--space-3);
}

.hero .eyebrow {
  color: #bfe3cc;
}

.hero p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.02rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.hero .btn-primary {
  background: #fff;
  color: var(--color-primary-dark);
  border-color: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.hero .btn-primary:hover {
  background: var(--color-bg);
}

.hero .auth-note {
  color: rgba(255, 255, 255, 0.7);
  margin: var(--space-2) 0 0;
}

/* ---- Khối "các bước" bên phải hero trên desktop - tránh mảng nền xanh trống khi
   hero kéo full chiều rộng container mà chỉ có 1 cột chữ hẹp (46ch) bên trái. Trên
   điện thoại xếp NGAY BÊN DƯỚI phần giới thiệu, dùng chung 1 khối HTML - không lặp
   nội dung theo breakpoint. ---- */
.hero-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  padding: var(--space-4);
}

.hero-step {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.hero-step-num {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: #fff;
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.hero-step-text {
  margin: 0;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
}

.hero-step-text span {
  display: block;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.8rem;
  font-weight: 400;
  margin-top: 0.15rem;
}

@media (min-width: 640px) {
  .hero {
    padding: 3.25rem 3rem;
  }

  .hero h1 {
    font-size: 2.6rem;
  }
}

@media (min-width: 960px) {
  .hero {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: var(--space-5);
  }
}

/* ---- Cam kết với dân: lưới thẻ thay vì danh sách phẳng trên màn rộng - PHẢI đè
   max-width:68ch kế thừa từ .cam-ket-list (dùng chung 2 class), nếu không lưới 3
   cột bị bó lại trong khung hẹp ~68ch thay vì trải đều hết chiều rộng trang. Mỗi
   mục cũng đổi thành thẻ có nền/bóng đổ thật (không chỉ text + dấu tick) để 3 cột
   nhìn cân đối, đều nhau kể cả khi độ dài nội dung khác nhau. ---- */
.cam-ket-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  max-width: none;
}

.cam-ket-grid li {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-3) var(--space-4) 3rem;
}

.cam-ket-grid li::before {
  left: var(--space-3);
}

@media (min-width: 720px) {
  .cam-ket-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   TRANG ĐĂNG NHẬP - bố cục 2 cột trên màn rộng (thương hiệu + form), 1 cột trên
   điện thoại.
   ========================================================================== */
.auth-split {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 0;
  margin: calc(var(--space-4) * -1) calc(var(--space-3) * -1) 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.auth-split-brand {
  display: none;
  background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  padding: 3rem;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.auth-split-brand::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
}

.auth-split-brand h2 {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-3);
  color: #fff;
  font-size: 1.9rem;
  max-width: 15ch;
  position: relative;
}

.auth-split-brand p {
  color: rgba(255, 255, 255, 0.78);
  position: relative;
}

.auth-split-points {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
}

.auth-split-point {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.9rem;
}

.auth-split-point-icon {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.auth-split-form {
  background: var(--color-surface);
  padding: 2.25rem var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-split-form .auth-card {
  box-shadow: none;
  border: none;
  padding: 0;
  width: 100%;
}

@media (min-width: 900px) {
  .auth-split {
    grid-template-columns: 1fr 1fr;
    min-height: 34rem;
  }

  .auth-split-brand {
    display: flex;
  }

  .auth-split-form {
    padding: 3rem;
  }
}

/* ==========================================================================
   TRANG CÁN BỘ: "danh sách/bảng + form thêm mới" (Kỳ thu, Loại phí...) - 2 cột
   trên desktop (bảng bên trái, form thêm mới bên phải) thay vì form bị bỏ mồ côi
   dưới 1 bảng đầy chiều rộng, co lại 440px một mình giữa trang trống.
   ========================================================================== */
.panel-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.panel-card > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.data-with-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.data-with-form .form {
  max-width: none;
}

@media (min-width: 960px) {
  .data-with-form {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    align-items: start;
  }
}

/* ==========================================================================
   UPLOAD EXCEL: khối kéo-thả thay cho <input type="file"> trần một mình giữa
   trang trống (Cập nhật dữ liệu hộ dân).
   ========================================================================== */
.upload-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-4);
  background: var(--color-bg);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.upload-dropzone:hover,
.upload-dropzone.is-dragover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.upload-dropzone-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  background: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: var(--space-1);
}

.upload-dropzone-title {
  margin: 0;
  font-weight: 700;
  font-size: 1rem;
}

.upload-dropzone-hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.upload-dropzone-filename {
  margin: var(--space-1) 0 0;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-primary-dark);
}

.upload-dropzone input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.upload-tip {
  background: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius);
  padding: var(--space-3);
}

.upload-tip p {
  margin: 0;
  color: var(--color-info-text);
  font-size: 0.85rem;
  line-height: 1.55;
}

.upload-tip p:first-child {
  font-weight: 800;
  margin-bottom: 0.3rem;
}

/* ==========================================================================
   NHẬT KÝ THAY ĐỔI: dạng timeline (thời gian + người thực hiện + trước/sau) thay
   cho bảng nhiều cột hẹp.
   ========================================================================== */
.timeline-day-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: var(--space-4) 0 var(--space-2);
}

.timeline-day-label:first-child {
  margin-top: 0;
}

.timeline-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--color-border-soft);
}

.timeline-item:last-child {
  border-bottom: none;
}

.timeline-avatar {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.72rem;
  flex-shrink: 0;
  background: var(--color-info-bg);
  color: var(--color-info-text);
}

.timeline-body {
  flex: 1;
  min-width: 0;
}

.timeline-desc {
  margin: 0;
  font-size: 0.88rem;
}

.timeline-meta {
  margin: 0.15rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.78rem;
}

.timeline-badge {
  flex-shrink: 0;
}

.diff-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
  font-size: 0.78rem;
}

.diff-key {
  color: var(--color-text-faint);
  font-family: var(--font-mono);
  min-width: 9ch;
}

.diff-chip {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.1rem 0.45rem;
  border-radius: 6px;
  background: var(--color-bg);
  color: var(--color-text-muted);
}

.diff-chip-old {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  text-decoration: line-through;
}

.diff-chip-new {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

/* ==========================================================================
   THU TẠI NHÀ: chi tiết hộ + form ghi nhận đặt cạnh nhau trên desktop, tránh 1
   khối .detail-grid rộng + form 440px lẻ loi bên dưới.
   ========================================================================== */
.field-work-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.field-work-layout .form {
  max-width: none;
}

@media (min-width: 900px) {
  .field-work-layout {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    align-items: start;
  }
}