/* =====================================================================================================
   site.css - bộ thiết kế GĐ9 + GĐ9C (hướng C "bảng điều khiển đậm, ấm áp": nền giấy kem, dải xanh ngọc có lưới mờ,
   hổ phách cho hành động chính, cam đất cho nợ / cảnh báo; Be Vietnam Pro 17px; mobile-first; sáng / tối).
   Mục lục:
     0  Font
     1  Biến màu / hình khối (sáng, tối)
     2  Ghi đè Bootstrap
     3  Nền tảng (cỡ chữ gốc, thang chữ, liên kết, focus)
     4  Layout (topbar + menu ngang, lưới <main>, bottom nav, trang khách)
     5  Thành phần (đầu trang = dải hero thấp, hero trang chủ, ô thống kê, trạng thái rỗng, danh sách liên kết, huy hiệu, nút,
                    form, card, sơ đồ ô phòng, bảng, chip, chọn tháng, phân trang, toast, modal)
     6  Tiện ích cũ còn dùng (kèm 6.1: số tiền, thanh tiến độ, thao tác nhanh, cần làm, sổ cái tổng quan)
     7  Phiếu thu (cố định, không theo dark mode)
     8  Báo cáo (--bc-*)
   Trang mẫu kiểm bằng mắt: docs/ui/mau-giao-dien.html (cập nhật khi đổi CSS). Bản gốc thị giác: docs/ui/huong-c/.
   Không dùng overflow-x: hidden để che lỗi tràn ngang. Màu chỉ qua biến CSS (ngoại lệ: phiếu thu).
   ===================================================================================================== */

/* ---------------------------------------------------------------------------------------------------
   0. Font Be Vietnam Pro (OFL), tự host qua LibMan (wwwroot/lib/be-vietnam-pro). unicode-range lấy từ
   400.css của gói @fontsource/be-vietnam-pro 5.2.8. Đường dẫn tương đối để chạy được cả trong trang mẫu file://.
   --------------------------------------------------------------------------------------------------- */
@font-face {
    font-family: "Be Vietnam Pro";
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url("../lib/be-vietnam-pro/files/be-vietnam-pro-vietnamese-400-normal.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: "Be Vietnam Pro";
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url("../lib/be-vietnam-pro/files/be-vietnam-pro-latin-ext-400-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Be Vietnam Pro";
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url("../lib/be-vietnam-pro/files/be-vietnam-pro-latin-400-normal.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: "Be Vietnam Pro";
    font-style: normal;
    font-display: swap;
    font-weight: 500;
    src: url("../lib/be-vietnam-pro/files/be-vietnam-pro-vietnamese-500-normal.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: "Be Vietnam Pro";
    font-style: normal;
    font-display: swap;
    font-weight: 500;
    src: url("../lib/be-vietnam-pro/files/be-vietnam-pro-latin-ext-500-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Be Vietnam Pro";
    font-style: normal;
    font-display: swap;
    font-weight: 500;
    src: url("../lib/be-vietnam-pro/files/be-vietnam-pro-latin-500-normal.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: "Be Vietnam Pro";
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url("../lib/be-vietnam-pro/files/be-vietnam-pro-vietnamese-600-normal.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: "Be Vietnam Pro";
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url("../lib/be-vietnam-pro/files/be-vietnam-pro-latin-ext-600-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Be Vietnam Pro";
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url("../lib/be-vietnam-pro/files/be-vietnam-pro-latin-600-normal.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: "Be Vietnam Pro";
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: url("../lib/be-vietnam-pro/files/be-vietnam-pro-vietnamese-700-normal.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: "Be Vietnam Pro";
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: url("../lib/be-vietnam-pro/files/be-vietnam-pro-latin-ext-700-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Be Vietnam Pro";
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: url("../lib/be-vietnam-pro/files/be-vietnam-pro-latin-700-normal.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;
}

/* ---------------------------------------------------------------------------------------------------
   1. Biến (GĐ9C: bảng màu hướng C "bảng điều khiển đậm, ấm áp", nguồn gốc docs/ui/huong-c/style.css).
   Khối tối đặt sau khối sáng (cùng độ ưu tiên) nên thắng khi data-bs-theme="dark".
   Tương phản đã tính bằng node (chữ >= 4.5:1, viền / icon >= 3:1) cho từng cặp ở cả hai chế độ; bảng ở README GĐ9C.
   --------------------------------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
    /* Kích thước layout */
    --app-topbar-cao: 64px;
    --app-bottom-nav-cao: 64px;
    --app-noi-dung-rong: 1360px;
    --le-trang: .75rem;
    --khoang-trang: 1rem;
    /* Bề rộng trang hẹp (form) */
    --trang-hep-rong: 720px;
    /* Phần hero trang chủ bị khối kế tiếp chồng lên */
    --dai-chong: 4rem;

    /* Bề mặt: giấy kem ấm */
    --qlpt-be-mat: #fffdf9;
    --qlpt-be-mat-2: #f3ece0;
    /* Viền thành phần (ô nhập, nút phụ) >= 3:1: #8a7f6e = 3.9:1 trên #fffdf9 */
    --qlpt-vien-o-nhap: #8a7f6e;
    --qlpt-vien-nut: #8a7f6e;
    --qlpt-vien-nut-hover: #6e6455;

    /* Màu chính: xanh ngọc đậm */
    --qlpt-primary: #115e59;
    --qlpt-primary-hover: #0d4a46;
    --qlpt-primary-active: #0a3a37;
    --qlpt-primary-subtle: #d9efea;
    --qlpt-primary-emphasis: #0c4f4a;
    --qlpt-primary-vien: #9fcdc6;
    --qlpt-btn-bg: #115e59;
    --qlpt-btn-hover: #0d4a46;
    --qlpt-btn-active: #0a3a37;
    --qlpt-btn-chu: #ffffff;

    /* Màu nhấn ấm: hổ phách (nút chính nổi bật, huy hiệu "thu một phần") */
    --qlpt-nhan: #f2a93b;
    --qlpt-tren-nhan: #2a1804;
    --qlpt-nhan-day: #9a5b0a;
    --qlpt-nhan-nhat: #fdefd2;
    --qlpt-nhan-chu: #7a4700;
    --qlpt-nhan-sang: #fbc463;
    --qlpt-nhan-hover: #f6b957;
    --qlpt-nhan-active: #e89a2c;

    /* Cảnh báo: cam đất (nợ, chưa thu, cần làm) */
    --qlpt-canh-bao: #b4441b;
    --qlpt-tren-canh-bao: #ffffff;
    --qlpt-canh-bao-nhat: #fbe6dc;
    --qlpt-canh-bao-chu: #8f3412;
    --qlpt-canh-bao-hover: #9a3815;
    --qlpt-canh-bao-active: #7f2e10;

    /* Lỗi nhập liệu / thao tác xóa: đỏ */
    --qlpt-nguy-hiem: #b42318;

    /* Dải đậm (thanh trên, hero, trang khách) */
    --qlpt-hero-1: #115e59;
    --qlpt-hero-2: #0d4a46;
    --qlpt-hero-chu: #ffffff;
    --qlpt-hero-phu: #cfe6e1;
    --qlpt-hero-nav: #d5ece8;
    --qlpt-hero-luoi: rgb(255 255 255 / .05);
    --qlpt-hero-vach: rgb(255 255 255 / .16);
    --qlpt-hero-nut: rgb(255 255 255 / .10);
    --qlpt-hero-nut-hover: rgb(255 255 255 / .18);
    --qlpt-focus-tren-dam: #fbc463;

    /* Sơ đồ ô phòng */
    --qlpt-o-thue-nen: #115e59;
    --qlpt-o-thue-chu: #ffffff;
    --qlpt-o-trong-nen: #fff6e2;
    --qlpt-o-trong-vien: #b0700f;
    --qlpt-o-trong-chu: #6e4200;
    --qlpt-o-sua-1: #ece6dc;
    --qlpt-o-sua-2: #ddd4c4;
    --qlpt-o-sua-vien: #857c6e;
    --qlpt-o-sua-chu: #3f403b;
    --qlpt-o-ngung-nen: #e6e2da;
    --qlpt-o-ngung-vien: #7a766c;
    --qlpt-o-ngung-chu: #55564f;

    /* Viền trên của card theo loại */
    --qlpt-vien-the-chinh: #115e59;
    --qlpt-vien-the-nhan: #b0700f;
    --qlpt-vien-the-canh-bao: #b4441b;

    --qlpt-vong-focus: rgb(17 94 89 / .35);
    --qlpt-bong: 0 1px 2px rgb(60 40 10 / .06), 0 10px 28px rgb(60 40 10 / .10);
    --qlpt-bong-len: 0 -6px 20px rgb(60 40 10 / .08);
    --qlpt-bong-noi: 0 8px 24px rgb(60 40 10 / .18);
    /* Gờ dưới của nút kiểu phím bấm */
    --qlpt-go-nut: rgb(0 0 0 / .26);
    --qlpt-go-nut-phu: rgb(60 40 10 / .20);

    /* Ghi đè biến Bootstrap */
    --bs-font-sans-serif: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.55;
    --bs-body-bg: #f8f3e9;
    --bs-body-bg-rgb: 248, 243, 233;
    --bs-body-color: #1d2826;
    --bs-body-color-rgb: 29, 40, 38;
    --bs-secondary-color: #5a5f58;
    --bs-secondary-color-rgb: 90, 95, 88;
    --bs-secondary-bg: #ebe3d3;
    --bs-secondary-bg-rgb: 235, 227, 211;
    --bs-tertiary-color: #5a5f58;
    --bs-tertiary-bg: #f3ece0;
    --bs-tertiary-bg-rgb: 243, 236, 224;
    --bs-emphasis-color: #121c1a;
    --bs-emphasis-color-rgb: 18, 28, 26;
    --bs-border-color: #e6dccb;
    --bs-border-color-translucent: rgb(29 40 38 / .12);
    --bs-border-radius: .625rem;
    --bs-border-radius-sm: .5rem;
    --bs-border-radius-lg: .75rem;
    --bs-border-radius-xl: 1rem;

    --bs-primary: #115e59;
    --bs-primary-rgb: 17, 94, 89;
    --bs-primary-text-emphasis: #0c4f4a;
    --bs-primary-bg-subtle: #d9efea;
    --bs-primary-border-subtle: #9fcdc6;
    --bs-link-color: #115e59;
    --bs-link-color-rgb: 17, 94, 89;
    --bs-link-hover-color: #0d4a46;
    --bs-link-hover-color-rgb: 13, 74, 70;
    --bs-focus-ring-color: rgb(17 94 89 / .35);

    /* Tông icon / huy hiệu / thanh tiến độ (nền nhạt + chữ đậm cùng tông). thanh-cong là bí danh của chinh,
       nguy-hiem là bí danh của canh-bao (bảng màu chỉ có xanh ngọc, hổ phách, cam đất) */
    --tong-chinh-mau: #0c4f4a;
    --tong-chinh-nen: #d9efea;
    --tong-chinh-vien: #115e59;
    --tong-thanh-cong-mau: #0c4f4a;
    --tong-thanh-cong-nen: #d9efea;
    --tong-thanh-cong-vien: #115e59;
    --tong-nhan-mau: #7a4700;
    --tong-nhan-nen: #fdefd2;
    --tong-nhan-vien: #b0700f;
    --tong-canh-bao-mau: #8f3412;
    --tong-canh-bao-nen: #fbe6dc;
    --tong-canh-bao-vien: #b4441b;
    --tong-nguy-hiem-mau: #8f3412;
    --tong-nguy-hiem-nen: #fbe6dc;
    --tong-nguy-hiem-vien: #b4441b;
    --tong-trung-tinh-mau: #4a4f48;
    --tong-trung-tinh-nen: #eee7da;
    --tong-trung-tinh-vien: #8a7f6e;
    /* Màu đầy của thanh tiến độ (>= 3:1 trên rãnh) */
    --tien-do-chinh: #115e59;
    --tien-do-thanh-cong: #115e59;
    --tien-do-nhan: #b0700f;
    --tien-do-canh-bao: #b4441b;
    --tien-do-nguy-hiem: #b4441b;
    --tien-do-rang: #e9e1d2;

    /* Success / warning / danger / info giữ màu Bootstrap ở chế độ sáng (emphasis và subtle đã đủ AA) */
}

[data-bs-theme="dark"] {
    /* Xanh than ấm */
    --qlpt-be-mat: #1c2524;
    --qlpt-be-mat-2: #243030;
    --qlpt-vien-o-nhap: #6f7d7a;
    --qlpt-vien-nut: #6f7d7a;
    --qlpt-vien-nut-hover: #8d9a97;

    --qlpt-primary: #6fd0c2;
    --qlpt-primary-hover: #8fe0d3;
    --qlpt-primary-active: #a9ece1;
    --qlpt-primary-subtle: #183d39;
    --qlpt-primary-emphasis: #8fe0d3;
    --qlpt-primary-vien: #2a5a54;
    --qlpt-btn-bg: #6fd0c2;
    --qlpt-btn-hover: #8fe0d3;
    --qlpt-btn-active: #a9ece1;
    --qlpt-btn-chu: #062a26;

    --qlpt-nhan: #f4b24c;
    --qlpt-tren-nhan: #241503;
    --qlpt-nhan-day: #a87420;
    --qlpt-nhan-nhat: #3a2d14;
    --qlpt-nhan-chu: #f5c26b;
    --qlpt-nhan-sang: #fbc463;
    --qlpt-nhan-hover: #f8c46c;
    --qlpt-nhan-active: #e5a03c;

    --qlpt-canh-bao: #f08a62;
    --qlpt-tren-canh-bao: #2a1208;
    --qlpt-canh-bao-nhat: #3a2219;
    --qlpt-canh-bao-chu: #f6a585;
    --qlpt-canh-bao-hover: #f4a183;
    --qlpt-canh-bao-active: #f7b79f;

    --qlpt-nguy-hiem: #f87171;

    --qlpt-hero-1: #0e4a46;
    --qlpt-hero-2: #0a3835;
    --qlpt-hero-chu: #ffffff;
    --qlpt-hero-phu: #cfe6e1;
    --qlpt-hero-nav: #d5ece8;
    --qlpt-hero-luoi: rgb(255 255 255 / .04);
    --qlpt-hero-vach: rgb(255 255 255 / .14);

    --qlpt-o-thue-nen: #1d7a72;
    --qlpt-o-thue-chu: #ffffff;
    --qlpt-o-trong-nen: #2c2615;
    --qlpt-o-trong-vien: #c8902e;
    --qlpt-o-trong-chu: #f5c26b;
    --qlpt-o-sua-1: #2b3433;
    --qlpt-o-sua-2: #222a29;
    --qlpt-o-sua-vien: #7a8582;
    --qlpt-o-sua-chu: #d2d7d1;
    --qlpt-o-ngung-nen: #262e2d;
    --qlpt-o-ngung-vien: #76847f;
    --qlpt-o-ngung-chu: #b6bdb7;

    --qlpt-vien-the-chinh: #2fa596;
    --qlpt-vien-the-nhan: #f4b24c;
    --qlpt-vien-the-canh-bao: #f08a62;

    --qlpt-vong-focus: rgb(111 208 194 / .40);
    --qlpt-bong: 0 1px 2px rgb(0 0 0 / .35), 0 12px 30px rgb(0 0 0 / .35);
    --qlpt-bong-len: 0 -6px 20px rgb(0 0 0 / .35);
    --qlpt-bong-noi: 0 8px 24px rgb(0 0 0 / .55);
    --qlpt-go-nut: rgb(0 0 0 / .38);
    --qlpt-go-nut-phu: rgb(0 0 0 / .40);

    --bs-body-bg: #131a19;
    --bs-body-bg-rgb: 19, 26, 25;
    --bs-body-color: #eee8dc;
    --bs-body-color-rgb: 238, 232, 220;
    --bs-secondary-color: #aab2ab;
    --bs-secondary-color-rgb: 170, 178, 171;
    --bs-secondary-bg: #2a3534;
    --bs-secondary-bg-rgb: 42, 53, 52;
    --bs-tertiary-color: #aab2ab;
    --bs-tertiary-bg: #243030;
    --bs-tertiary-bg-rgb: 36, 48, 48;
    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-border-color: #33403e;
    --bs-border-color-translucent: rgb(255 255 255 / .12);

    --tong-chinh-mau: #8fe0d3;
    --tong-chinh-nen: #183d39;
    --tong-chinh-vien: #2fa596;
    --tong-thanh-cong-mau: #8fe0d3;
    --tong-thanh-cong-nen: #183d39;
    --tong-thanh-cong-vien: #2fa596;
    --tong-nhan-mau: #f5c26b;
    --tong-nhan-nen: #3a2d14;
    --tong-nhan-vien: #f4b24c;
    --tong-canh-bao-mau: #f6a585;
    --tong-canh-bao-nen: #3a2219;
    --tong-canh-bao-vien: #f08a62;
    --tong-nguy-hiem-mau: #f6a585;
    --tong-nguy-hiem-nen: #3a2219;
    --tong-nguy-hiem-vien: #f08a62;
    --tong-trung-tinh-mau: #cfd5cf;
    --tong-trung-tinh-nen: #2a3433;
    --tong-trung-tinh-vien: #6f7d7a;
    --tien-do-chinh: #2fa596;
    --tien-do-thanh-cong: #2fa596;
    --tien-do-nhan: #f4b24c;
    --tien-do-canh-bao: #f08a62;
    --tien-do-nguy-hiem: #f08a62;
    --tien-do-rang: #2e3a39;

    --bs-primary: #6fd0c2;
    --bs-primary-rgb: 111, 208, 194;
    --bs-primary-text-emphasis: #8fe0d3;
    --bs-primary-bg-subtle: #183d39;
    --bs-primary-border-subtle: #2a5a54;
    --bs-link-color: #6fd0c2;
    --bs-link-color-rgb: 111, 208, 194;
    --bs-link-hover-color: #8fe0d3;
    --bs-link-hover-color-rgb: 143, 224, 211;
    --bs-focus-ring-color: rgb(111 208 194 / .40);

    /* Chỉnh emphasis / subtle để chữ trên nền nhạt đủ AA ở chế độ tối */
    --bs-success-text-emphasis: #86d9ae;
    --bs-success-bg-subtle: #0a2a1b;
    --bs-success-border-subtle: #14532d;
    --bs-warning-text-emphasis: #ffd96b;
    --bs-warning-bg-subtle: #33270a;
    --bs-warning-border-subtle: #6b5210;
    --bs-danger-text-emphasis: #fca5a5;
    --bs-danger-bg-subtle: #35100f;
    --bs-danger-border-subtle: #7f1d1d;
    --bs-info-text-emphasis: #7dd3fc;
    --bs-info-bg-subtle: #082a3b;
    --bs-info-border-subtle: #0c4a6e;
}

@media (min-width: 600px) {
    :root {
        --le-trang: 1.25rem;
    }
}

@media (min-width: 992px) {
    :root {
        /* Từ 992px topbar cao thêm một hàng menu ngang 52px (64 + 52) */
        --app-topbar-cao: 116px;
        --khoang-trang: 1.25rem;
        --dai-chong: 4.25rem;
    }
}

/* ---------------------------------------------------------------------------------------------------
   2. Ghi đè Bootstrap.
   Bootstrap đã biên dịch ghi cứng màu xanh cũ (#0d6efd, 13,110,253, #0a58ca, #0b5ed7, #0a53be, #86b7fe, #cfe2ff,
   #9ec5fe, #052c65, #6ea8fe, #031633, 49,132,253, %2386b7fe, %236ea8fe, %23052c65). Các nhóm đã ghi đè dưới đây:
     :root / [data-bs-theme] (primary, link, focus-ring) · .btn-primary · .btn-outline-primary · .btn-link
     .btn-outline-danger · .btn-outline-secondary (chữ phụ + viền nhạt, đủ hover / active / disabled) · .btn-light (tối)
     .text-danger / .text-success (tối, vì Bootstrap dùng !important) · viền ô nhập >= 3:1 (--qlpt-vien-o-nhap) cho
     .form-control · .form-select · .form-check-input · .input-group-text
     .form-control:focus · .form-select:focus · .form-check-input:focus / :checked / indeterminate
     .form-switch (ảnh nền svg data URI, viết lại bằng %23) · .form-range · .nav-pills · .nav-link:focus-visible
     .page-link / .page-item.active · .list-group-item.active · .dropdown-item.active / :active · .text-bg-primary
     .bg-primary · .border-primary · .link-primary · .progress-bar · .accordion (focus + icon) · .btn-close focus
     .table-primary · .spinner-* (đi theo currentColor, không cần ghi đè) · .toast (kiểu mới ở mục 5)
     nền bề mặt: .card · .modal-content · .dropdown-menu · .list-group · .form-control · .form-select · .table
   --------------------------------------------------------------------------------------------------- */
.btn-primary {
    --bs-btn-color: var(--qlpt-btn-chu);
    --bs-btn-bg: var(--qlpt-btn-bg);
    --bs-btn-border-color: var(--qlpt-btn-bg);
    --bs-btn-hover-color: var(--qlpt-btn-chu);
    --bs-btn-hover-bg: var(--qlpt-btn-hover);
    --bs-btn-hover-border-color: var(--qlpt-btn-hover);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: var(--qlpt-btn-chu);
    --bs-btn-active-bg: var(--qlpt-btn-active);
    --bs-btn-active-border-color: var(--qlpt-btn-active);
    --bs-btn-disabled-color: var(--qlpt-btn-chu);
    --bs-btn-disabled-bg: var(--qlpt-btn-bg);
    --bs-btn-disabled-border-color: var(--qlpt-btn-bg);
}

.btn-outline-primary {
    --bs-btn-color: var(--qlpt-primary);
    --bs-btn-border-color: var(--qlpt-primary);
    --bs-btn-hover-color: var(--qlpt-btn-chu);
    --bs-btn-hover-bg: var(--qlpt-btn-bg);
    --bs-btn-hover-border-color: var(--qlpt-btn-bg);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: var(--qlpt-btn-chu);
    --bs-btn-active-bg: var(--qlpt-btn-active);
    --bs-btn-active-border-color: var(--qlpt-btn-active);
    --bs-btn-disabled-color: var(--qlpt-primary);
    --bs-btn-disabled-border-color: var(--qlpt-primary);
}

.btn-link {
    --bs-btn-color: var(--bs-link-color);
    --bs-btn-hover-color: var(--bs-link-hover-color);
    --bs-btn-active-color: var(--bs-link-hover-color);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

/* Nút phụ (GĐ9C): nền bề mặt phụ, chữ đậm, viền >= 3:1 (kiểu phím bấm như ô thao tác nhanh); hover / active đổi nền */
.btn-outline-secondary {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: var(--qlpt-be-mat-2);
    --bs-btn-border-color: var(--qlpt-vien-nut);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-secondary-bg);
    --bs-btn-hover-border-color: var(--qlpt-vien-nut-hover);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: var(--bs-body-color);
    --bs-btn-active-bg: var(--bs-secondary-bg);
    --bs-btn-active-border-color: var(--qlpt-vien-nut-hover);
    --bs-btn-disabled-color: var(--bs-secondary-color);
    --bs-btn-disabled-bg: var(--qlpt-be-mat-2);
    --bs-btn-disabled-border-color: var(--qlpt-vien-nut);
}

/* .btn-light: ở chế độ tối Bootstrap để nền trắng chói, đưa về nền tertiary */
[data-bs-theme="dark"] .btn-light {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: var(--bs-tertiary-bg);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-secondary-bg);
    --bs-btn-hover-border-color: var(--qlpt-vien-nut-hover);
    --bs-btn-active-color: var(--bs-body-color);
    --bs-btn-active-bg: var(--bs-secondary-bg);
    --bs-btn-active-border-color: var(--qlpt-vien-nut-hover);
    --bs-btn-disabled-color: var(--bs-secondary-color);
    --bs-btn-disabled-bg: var(--bs-tertiary-bg);
    --bs-btn-disabled-border-color: var(--bs-border-color);
}

/* Nút nguy hiểm (GĐ9C): cam đất đậm; viền / chữ đạt >= 4.5:1 trên nền bề mặt ở cả hai chế độ */
.btn-outline-danger {
    --bs-btn-color: var(--qlpt-canh-bao-chu);
    --bs-btn-border-color: var(--qlpt-canh-bao);
    --bs-btn-hover-color: var(--qlpt-tren-canh-bao);
    --bs-btn-hover-bg: var(--qlpt-canh-bao);
    --bs-btn-hover-border-color: var(--qlpt-canh-bao);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: var(--qlpt-tren-canh-bao);
    --bs-btn-active-bg: var(--qlpt-canh-bao-hover);
    --bs-btn-active-border-color: var(--qlpt-canh-bao-hover);
    --bs-btn-disabled-color: var(--qlpt-canh-bao-chu);
    --bs-btn-disabled-border-color: var(--qlpt-canh-bao);
}

.btn-danger {
    --bs-btn-color: var(--qlpt-tren-canh-bao);
    --bs-btn-bg: var(--qlpt-canh-bao);
    --bs-btn-border-color: var(--qlpt-canh-bao);
    --bs-btn-hover-color: var(--qlpt-tren-canh-bao);
    --bs-btn-hover-bg: var(--qlpt-canh-bao-hover);
    --bs-btn-hover-border-color: var(--qlpt-canh-bao-hover);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: var(--qlpt-tren-canh-bao);
    --bs-btn-active-bg: var(--qlpt-canh-bao-active);
    --bs-btn-active-border-color: var(--qlpt-canh-bao-active);
    --bs-btn-disabled-color: var(--qlpt-tren-canh-bao);
    --bs-btn-disabled-bg: var(--qlpt-canh-bao);
    --bs-btn-disabled-border-color: var(--qlpt-canh-bao);
}

/* Nền bề mặt: Bootstrap dùng --bs-body-bg cho card, ô nhập... nhưng nền trang giờ là màu xám nhạt */
/* Card (GĐ9C): bo 12px, bóng mềm, viền trên 4px theo loại: mặc định xanh ngọc; .card--nhan hổ phách (thu tiền, hành động chính);
   .card--canh-bao cam đất (nợ, hủy, nguy hiểm). Ý nghĩa nằm ở tiêu đề / chữ; màu chỉ là điểm nhấn (viền trang trí). */
.card {
    --the-mau: var(--qlpt-vien-the-chinh);
    --bs-card-bg: var(--qlpt-be-mat);
    --bs-card-border-radius: .75rem;
    --bs-card-inner-border-radius: calc(.75rem - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-cap-padding-x: 1rem;
    --bs-card-spacer-x: 1rem;
    --bs-card-spacer-y: 1rem;
    border-top: 4px solid var(--the-mau);
    box-shadow: var(--qlpt-bong);
}

.card--chinh {
    --the-mau: var(--qlpt-vien-the-chinh);
}

.card--nhan {
    --the-mau: var(--qlpt-vien-the-nhan);
}

.card--canh-bao {
    --the-mau: var(--qlpt-vien-the-canh-bao);
}

/* Card là một dòng trong danh sách thẻ: viền trên mảnh (tránh cả danh sách đầy vạch 4px) */
.luoi-the > .card {
    border-top: 1px solid var(--bs-border-color);
}

.modal {
    --bs-modal-bg: var(--qlpt-be-mat);
    --bs-modal-border-radius: var(--bs-border-radius-lg);
    --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - 1px);
    --bs-modal-box-shadow: var(--qlpt-bong-noi);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--qlpt-be-mat);
    --bs-dropdown-border-radius: var(--bs-border-radius);
    --bs-dropdown-link-active-color: var(--qlpt-btn-chu);
    --bs-dropdown-link-active-bg: var(--qlpt-btn-bg);
    --bs-dropdown-box-shadow: var(--qlpt-bong-noi);
}

.dropdown-menu-dark {
    --bs-dropdown-link-active-bg: var(--qlpt-btn-bg);
}

.list-group {
    --bs-list-group-bg: var(--qlpt-be-mat);
    --bs-list-group-active-color: var(--qlpt-btn-chu);
    --bs-list-group-active-bg: var(--qlpt-btn-bg);
    --bs-list-group-active-border-color: var(--qlpt-btn-bg);
}

.form-control,
.form-select {
    min-height: 44px;
    background-color: var(--qlpt-be-mat);
    border-color: var(--qlpt-vien-o-nhap);
}

.input-group-text {
    border-color: var(--qlpt-vien-o-nhap);
}

.form-control-sm,
.form-select-sm {
    min-height: 36px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--qlpt-primary);
    box-shadow: 0 0 0 .1875rem var(--qlpt-vong-focus);
}

.form-check-input {
    background-color: var(--qlpt-be-mat);
    border-color: var(--qlpt-vien-o-nhap);
}

/* Khoảng cách ô chọn - nhãn: Bootstrap chỉ chừa 0.5em nên chữ dính sát ô (kể cả ô to 1.4em trên màn hình cảm ứng) */
.form-check:not(.form-switch):not(.form-check-inline) {
    padding-left: 2.125em;
}

.form-check:not(.form-switch):not(.form-check-inline) .form-check-input {
    margin-left: -2.125em;
}

.form-check-input:focus {
    border-color: var(--qlpt-primary);
    box-shadow: 0 0 0 .1875rem var(--qlpt-vong-focus);
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--qlpt-btn-bg);
    border-color: var(--qlpt-btn-bg);
}

/* Dấu tick / chấm trong checkbox, radio: đổi sang màu tối ở chế độ tối vì nền ô là xanh ngọc sáng */
[data-bs-theme="dark"] .form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23042f2e' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .form-check-input:checked[type="radio"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23042f2e'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .form-check-input[type="checkbox"]:indeterminate {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23042f2e' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}

/* Công tắc: viết lại ảnh nền svg với màu mới (# phải là %23 trong data URI) */
.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2352a8a0'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%235eead4'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23042f2e'/%3e%3c/svg%3e");
}

.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px var(--qlpt-be-mat), 0 0 0 .25rem var(--qlpt-vong-focus);
}

.form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px var(--qlpt-be-mat), 0 0 0 .25rem var(--qlpt-vong-focus);
}

.form-range::-webkit-slider-thumb {
    background-color: var(--qlpt-btn-bg);
}

.form-range::-moz-range-thumb {
    background-color: var(--qlpt-btn-bg);
}

.nav-pills {
    --bs-nav-pills-link-active-color: var(--qlpt-btn-chu);
    --bs-nav-pills-link-active-bg: var(--qlpt-btn-bg);
}

.nav-link:focus-visible {
    box-shadow: 0 0 0 .1875rem var(--qlpt-vong-focus);
}

.pagination {
    --bs-pagination-bg: var(--qlpt-be-mat);
    --bs-pagination-active-color: var(--qlpt-btn-chu);
    --bs-pagination-active-bg: var(--qlpt-btn-bg);
    --bs-pagination-active-border-color: var(--qlpt-btn-bg);
    --bs-pagination-focus-box-shadow: 0 0 0 .1875rem var(--qlpt-vong-focus);
}

.progress,
.progress-stacked {
    --bs-progress-bar-bg: var(--qlpt-btn-bg);
}

.accordion {
    --bs-accordion-bg: var(--qlpt-be-mat);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .1875rem var(--qlpt-vong-focus);
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23134e4a'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .accordion {
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2399f6e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
}

.btn-close {
    --bs-btn-close-focus-shadow: 0 0 0 .1875rem var(--qlpt-vong-focus);
}

/* .text-bg-primary / .bg-primary / .border-primary / .link-primary đi theo --bs-primary-rgb (đã đổi ở mục 1);
   .text-bg-primary cần chữ tương phản với nền ở cả hai chế độ */
.text-bg-primary {
    color: var(--qlpt-btn-chu) !important;
    background-color: var(--qlpt-btn-bg) !important;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgb(var(--bs-body-color-rgb) / .03);
    --bs-table-hover-bg: rgb(var(--bs-body-color-rgb) / .04);
    --bs-table-border-color: var(--bs-border-color);
}

.table-primary {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: var(--bs-primary-bg-subtle);
    --bs-table-border-color: var(--bs-primary-border-subtle);
    --bs-table-striped-bg: var(--bs-primary-bg-subtle);
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-active-bg: var(--bs-primary-border-subtle);
    --bs-table-active-color: var(--bs-body-color);
    --bs-table-hover-bg: var(--bs-primary-border-subtle);
    --bs-table-hover-color: var(--bs-body-color);
}

/* .text-danger / .text-success của Bootstrap có !important nên đè màu thiết kế; ghi đè lại để đủ AA ở chế độ tối */
.field-validation-error.text-danger {
    color: var(--qlpt-nguy-hiem) !important;
}

[data-bs-theme="dark"] .text-danger {
    color: var(--qlpt-nguy-hiem) !important;
}

[data-bs-theme="dark"] .text-success {
    color: var(--bs-success-text-emphasis) !important;
}

/* ---------------------------------------------------------------------------------------------------
   3. Nền tảng. Chữ gốc 17px (html 106,25%) cho người dùng trung niên; các cỡ rem còn lại co giãn theo.
   --------------------------------------------------------------------------------------------------- */
html {
    font-size: 106.25%;
    /* Luôn chừa chỗ thanh cuộn: trang dài / ngắn không làm cả bố cục dịch ngang khi chuyển trang */
    scrollbar-gutter: stable;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-feature-settings: "tnum" 0;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

/* Số tiền, số liệu: chữ số đều nhau */
.so {
    font-variant-numeric: tabular-nums;
}

.min-w-0 {
    min-width: 0;
}

/* Thang chữ (GĐ9C, theo hướng C). Lớp riêng, không thay h1..h6 của Bootstrap */
.tieu-de-trang {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--bs-emphasis-color);
}

.phu-de-trang {
    margin: .375rem 0 0;
    font-size: .97rem;
    color: var(--bs-secondary-color);
}

.tieu-de-muc {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--bs-emphasis-color);
}

.so-lon {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    color: var(--bs-emphasis-color);
}

.nhan-nho {
    font-size: .875rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
}

@media (min-width: 992px) {
    .tieu-de-trang {
        font-size: 2.1rem;
    }

    .phu-de-trang {
        font-size: 1.06rem;
    }

    .so-lon {
        font-size: 1.75rem;
    }
}

/* Liên kết (GĐ9B 4.6): mặc định không gạch chân, gạch khi hover / focus. Liên kết trong đoạn văn, ghi chú form và alert
   luôn gạch chân vì không thể chỉ dựa vào màu (WCAG 1.4.1). Thành phần có class (nút, thẻ, menu) tự quyết định. */
a {
    text-decoration: none;
}

a:not([class]):hover,
a:not([class]):focus-visible,
a.link-xem:hover,
a.link-xem:focus-visible {
    text-decoration: underline;
}

p a:not(.btn),
.form-text a,
.alert a:not(.btn),
.form-check-label a,
dd a:not(.btn),
li a:not([class]) {
    text-decoration: underline;
}

/* Focus: luôn thấy vòng focus khi dùng bàn phím (không bỏ outline) */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
.btn:focus-visible,
.chip-loc:focus-visible,
.app-bottom-link:focus-visible,
.muc-lien-ket:focus-visible,
.o-thong-ke:focus-visible,
.o-phong:focus-visible,
.thao-tac:focus-visible,
.viec-can-lam__muc:focus-visible {
    outline: 2px solid var(--qlpt-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 .3125rem var(--qlpt-vong-focus);
}

.dropdown-item:focus-visible {
    outline-offset: -2px;
    box-shadow: none;
}

/* reCAPTCHA v3: ẩn badge, đã có dòng chữ thay thế (_ReCaptcha.cshtml) */
.grecaptcha-badge {
    visibility: hidden;
}

/* ---------------------------------------------------------------------------------------------------
   4. Layout
   --------------------------------------------------------------------------------------------------- */
/* Liên kết "Bỏ qua tới nội dung chính": chỉ hiện khi nhận focus bàn phím */
.bo-qua:focus {
    position: fixed;
    top: .5rem;
    left: .5rem;
    z-index: 2000;
    width: auto;
    height: auto;
    margin: 0;
    padding: .75rem 1.125rem;
    border-radius: .625rem;
    background-color: var(--qlpt-nhan);
    color: var(--qlpt-tren-nhan);
    font-weight: 700;
    clip: auto;
    box-shadow: var(--qlpt-bong-noi);
}

/* <main tabindex="-1"> nhận focus từ skip link: không vẽ viền quanh cả trang */
#noi-dung:focus {
    outline: none;
}

.app-body {
    padding-top: var(--app-topbar-cao);
    padding-bottom: calc(var(--app-bottom-nav-cao) + env(safe-area-inset-bottom, 0px));
}

/* Thanh trên: dải xanh ngọc đậm cố định. Từ 992px thêm hàng menu ngang ngay dưới (thay cho sidebar dọc). */
.app-topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    background-color: var(--qlpt-hero-1);
    color: var(--qlpt-hero-chu);
}

.app-topbar__dong {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    max-width: calc(var(--app-noi-dung-rong) + 2 * var(--le-trang));
    height: 64px;
    margin-inline: auto;
    padding-inline: var(--le-trang);
}

.thuong-hieu {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    min-height: 44px;
    font-size: 1.06rem;
    font-weight: 700;
    color: var(--qlpt-hero-chu);
}

.thuong-hieu:hover,
.thuong-hieu:focus-visible {
    color: var(--qlpt-hero-chu);
}

.logo {
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-color: var(--qlpt-nhan);
    color: var(--qlpt-tren-nhan);
    font-size: .94rem;
    font-weight: 700;
    letter-spacing: .03em;
    box-shadow: inset 0 -3px 0 rgb(0 0 0 / .16);
}

.ten-tro {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dieu-khien {
    display: flex;
    flex: none;
    align-items: center;
    gap: .5rem;
}

/* Nút người dùng: vòng tròn 44px viền hổ phách, chữ cái đầu hoặc icon */
.nut-nguoi-dung {
    --bs-btn-color: var(--qlpt-hero-chu);
    --bs-btn-hover-color: var(--qlpt-hero-chu);
    --bs-btn-active-color: var(--qlpt-hero-chu);
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: transparent;
    --bs-btn-active-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-box-shadow: none;
    --bs-btn-active-shadow: none;
    gap: .5rem;
    min-height: 44px;
    padding: 0 .25rem;
    border: 0;
    transform: none;
}

.nut-nguoi-dung::after {
    display: none;
}

.nguoi-dung-chu-cai {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 2px solid var(--qlpt-nhan-sang);
    border-radius: 50%;
    background-color: var(--qlpt-nhan-nhat);
    color: var(--qlpt-nhan-chu);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
}

.nguoi-dung-ten {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

/* Nút đổi sáng / tối (GĐ9B 4.1): vòng 44px trên nền dải đậm; icon đổi theo data-bs-theme, không cần JS */
.nut-doi-giao-dien {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--qlpt-hero-nut);
    color: var(--qlpt-hero-chu);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}

.nut-doi-giao-dien:hover {
    background-color: var(--qlpt-hero-nut-hover);
    color: var(--qlpt-hero-chu);
}

.nut-doi-giao-dien .bi-sun,
[data-bs-theme="dark"] .nut-doi-giao-dien .bi-moon-stars {
    display: none;
}

[data-bs-theme="dark"] .nut-doi-giao-dien .bi-sun {
    display: inline-block;
}

/* Vòng focus trên nền dải đậm: hổ phách sáng (đạt >= 3:1 trên xanh ngọc đậm) */
.app-topbar :focus-visible,
.khach-goc-giao-dien :focus-visible,
.dai-hero :focus-visible,
:is(.dai-hero, .app-main > .khoi-trang > .dau-trang:first-child) :focus-visible {
    outline: 3px solid var(--qlpt-focus-tren-dam);
    outline-offset: 2px;
    box-shadow: none;
}

/* Menu ngang (>= 992px): các tab trên nền dải đậm, cuộn ngang trong thanh nếu quá nhiều mục */
.nav-ngang {
    position: relative;
    border-top: 1px solid var(--qlpt-hero-vach);
}

.nav-ngang__ds {
    position: relative;
    display: flex;
    gap: 2px;
    width: 100%;
    max-width: calc(var(--app-noi-dung-rong) + 2 * var(--le-trang));
    margin: 0 auto;
    padding: 0 var(--le-trang);
    overflow-x: auto;
    list-style: none;
    scrollbar-width: none;
}

.nav-ngang__ds::-webkit-scrollbar {
    display: none;
}

.nav-ngang__lien-ket {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    gap: .5rem;
    min-height: 51px;
    padding: 0 .875rem;
    border-radius: .5rem .5rem 0 0;
    color: var(--qlpt-hero-nav);
    font-size: .94rem;
    font-weight: 500;
    white-space: nowrap;
}

.nav-ngang__lien-ket:hover {
    background-color: var(--qlpt-hero-nut);
    color: var(--qlpt-hero-chu);
}

.nav-ngang__lien-ket:focus-visible {
    outline-offset: -3px;
}

.nav-ngang__lien-ket.active {
    background-color: var(--qlpt-hero-nut);
    color: var(--qlpt-hero-chu);
    font-weight: 700;
}

.nav-ngang__lien-ket.active::after {
    content: "";
    position: absolute;
    right: .625rem;
    bottom: 0;
    left: .625rem;
    height: 4px;
    border-radius: 4px 4px 0 0;
    background-color: var(--qlpt-nhan-sang);
}

/* Nội dung chính: lưới 3 cột (lề co giãn | nội dung <= --app-noi-dung-rong | lề co giãn). Dải đầu trang / hero tràn cả 3 cột,
   các khối còn lại nằm ở cột giữa. .khoi-trang gốc dùng display: contents để con của nó thành ô lưới của <main>
   (không dùng 100vw / margin âm nên không sinh thanh cuộn ngang). .khoi-trang lồng trong card vẫn là cột flex. */
.app-main {
    display: grid;
    grid-template-columns: minmax(var(--le-trang), 1fr) minmax(0, var(--app-noi-dung-rong)) minmax(var(--le-trang), 1fr);
    align-content: start;
    row-gap: var(--khoang-trang);
    min-width: 0;
    padding-bottom: 1.5rem;
}

.app-main > .khoi-trang {
    display: contents;
}

.app-main > :not(.khoi-trang),
.app-main > .khoi-trang > * {
    grid-column: 2;
    min-width: 0;
}

/* Trang hẹp (form): các khối rộng tối đa --trang-hep-rong, canh giữa */
.trang-hep {
    max-width: var(--trang-hep-rong);
    margin-inline: auto;
}

.app-main > .khoi-trang.trang-hep > :not(.dau-trang:first-child) {
    width: 100%;
    max-width: var(--trang-hep-rong);
    justify-self: center;
}

/* Nút / khối lẻ canh trái (.align-self-start) trong trang hẹp: không kéo giãn hết cột hẹp, nằm sát mép trái của cột */
.app-main > .khoi-trang.trang-hep > .align-self-start {
    width: fit-content;
    justify-self: start;
    margin-left: max(0px, calc((100% - var(--trang-hep-rong)) / 2));
}

/* Khối đầu tiên của trang không phải dải: cách mép dưới topbar */
.app-main > :first-child:not(.khoi-trang),
.app-main > .khoi-trang:first-child > :first-child:not(.dau-trang):not(.dai-hero) {
    margin-top: var(--khoang-trang);
}

/* Các khối trong trang cách nhau đều (quy ước: bọc nội dung trang bằng .khoi-trang) */
.khoi-trang {
    display: flex;
    flex-direction: column;
    gap: var(--khoang-trang);
    min-width: 0;
}

/* Bottom nav (< lg) */
.app-bottom-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    display: flex;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background-color: var(--qlpt-be-mat);
    border-top: 1px solid var(--bs-border-color);
    box-shadow: var(--qlpt-bong-len);
}

.app-bottom-link {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1875rem;
    min-width: 0;
    min-height: var(--app-bottom-nav-cao);
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--bs-secondary-color);
}

.app-bottom-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.app-bottom-link .bi {
    font-size: 1.35rem;
    line-height: 1;
}

.app-bottom-link.active {
    color: var(--qlpt-primary);
    font-weight: 700;
}

/* Mục đang chọn: vạch hổ phách phía trên + icon đặc (icon đặc do _DieuHuong chọn) */
.app-bottom-link.active::before {
    content: "";
    position: absolute;
    top: 0;
    right: 24%;
    left: 24%;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background-color: var(--qlpt-nhan);
}

@media (min-width: 992px) {
    .app-body {
        padding-bottom: 0;
    }

    .app-main {
        padding-bottom: 3.5rem;
    }
}

/* Trang công khai (đăng nhập, lỗi, offline): nửa trên là dải xanh ngọc có lưới mờ, card chồng lên */
.khach-body {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.khach-body::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    left: 0;
    height: 17rem;
    background-color: var(--qlpt-hero-1);
    background-image:
        linear-gradient(var(--qlpt-hero-luoi) 1px, transparent 1px),
        linear-gradient(90deg, var(--qlpt-hero-luoi) 1px, transparent 1px),
        linear-gradient(170deg, var(--qlpt-hero-1) 0%, var(--qlpt-hero-2) 100%);
    background-size: 32px 32px, 32px 32px, 100% 100%;
}

/* Hàng trên cùng của trang khách (đăng nhập, offline), nằm trong luồng trang nên không đè lên toast hay card */
.khach-goc-giao-dien {
    display: flex;
    justify-content: flex-end;
    padding: max(.5rem, env(safe-area-inset-top, 0px)) .75rem 0;
}

.khach-khung {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex: 1 1 auto;
    padding: .5rem 1rem 2rem;
}

.khach-the {
    width: 100%;
    max-width: 420px;
}

.khach-the .card-body {
    padding: 1.5rem;
}

/* Nút lớn trong card khách (Google / Facebook / số điện thoại): cỡ chữ vừa để không gãy dòng ở 360 đến 375px */
.khach-the .btn-lg {
    --bs-btn-font-size: 1rem;
    --bs-btn-padding-x: .625rem;
}

.khach-logo {
    border-radius: .875rem;
}

.khach-ten {
    margin-top: .75rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bs-emphasis-color);
}

.khach-mo-ta {
    margin-top: .125rem;
    font-size: .875rem;
    color: var(--bs-secondary-color);
}

/* Dải phân cách "hoặc" giữa form và nút đăng nhập ngoài */
.dai-hoac {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1rem 0;
    font-size: .8125rem;
    color: var(--bs-secondary-color);
}

.dai-hoac::before,
.dai-hoac::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background-color: var(--bs-border-color);
}

/* ---------------------------------------------------------------------------------------------------
   5. Thành phần
   --------------------------------------------------------------------------------------------------- */

/* 5.1 Đầu trang: <div class="dau-trang"> [quay lại] <div class="dau-trang__hang"> tiêu đề + nút </div> </div>
   GĐ9C: .dau-trang đầu tiên của .khoi-trang gốc tự thành DẢI hero thấp (xanh ngọc, lưới mờ, tràn hết bề ngang, chữ trắng),
   chỉ bằng CSS: view giữ nguyên markup. Dải nằm ở hàng đầu của lưới <main> (xem mục 4). .dau-trang ở chỗ khác
   (không phải con đầu của .khoi-trang gốc) vẫn hiển thị như đầu trang thường.
   .dai-hero (trang chủ) dùng cùng nền dải, kèm các số lớn. */
.dau-trang {
    --dt-chu: var(--bs-emphasis-color);
    --dt-phu: var(--bs-secondary-color);
    --dt-lien-ket: var(--bs-secondary-color);
    min-width: 0;
}

.dau-trang .tieu-de-trang {
    color: var(--dt-chu);
}

.dau-trang .phu-de-trang {
    color: var(--dt-phu);
}

.dau-trang__quay-lai a {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    min-height: 44px;
    padding-right: .75rem;
    font-size: .94rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--dt-lien-ket);
}

.dau-trang__quay-lai a:hover {
    color: var(--dt-chu);
    text-decoration: underline;
}

.dau-trang__hang {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem 1rem;
}

.dau-trang__hang > .min-w-0 {
    flex: 1 1 14rem;
}

.dau-trang__nut {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* Nền dải: lưới kẻ mờ gợi bản vẽ mặt bằng nhà trọ (chỉ bằng gradient, không ảnh, không inline) */
.dai-hero,
.app-main > .khoi-trang > .dau-trang:first-child {
    --dt-rong: var(--app-noi-dung-rong);
    --dt-le: max(var(--le-trang), calc((100% - var(--dt-rong)) / 2));
    --dt-chu: var(--qlpt-hero-chu);
    --dt-phu: var(--qlpt-hero-phu);
    --dt-lien-ket: var(--qlpt-hero-nav);
    color: var(--qlpt-hero-chu);
    background-color: var(--qlpt-hero-1);
    background-image:
        linear-gradient(var(--qlpt-hero-luoi) 1px, transparent 1px),
        linear-gradient(90deg, var(--qlpt-hero-luoi) 1px, transparent 1px),
        linear-gradient(170deg, var(--qlpt-hero-1) 0%, var(--qlpt-hero-2) 100%);
    background-size: 32px 32px, 32px 32px, 100% 100%;
}

.app-main > .khoi-trang.trang-hep > .dau-trang:first-child {
    --dt-rong: var(--trang-hep-rong);
}

.app-main > .khoi-trang > .dau-trang:first-child {
    grid-column: 1 / -1;
    padding: .5rem var(--dt-le) 2.25rem;
}

/* Nội dung đầu tiên dạng card / lưới chồng lên mép dưới dải khoảng 24px; khối không có nền (form, chip...) thì không chồng */
.app-main > .khoi-trang > .dau-trang:first-child + :is(.card, .alert, .list-group, .khoi-loc, .luoi-thong-ke, .luoi-hai-cot, .luoi-cot, .luoi-the, .so-do-phong, .bang, .danh-sach-lien-ket, .trang-thai-rong) {
    position: relative;
    margin-top: calc(-1 * (var(--khoang-trang) + 1.5rem));
}

/* Khối lọc / công cụ đứng đầu trang (form lọc, ô tìm, hàng nút): cùng dạng bề mặt như card để chồng lên mép dải */
.khoi-loc {
    padding: .875rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background-color: var(--qlpt-be-mat);
    box-shadow: var(--qlpt-bong);
}

/* Nút trong dải (nền xanh đậm): nút chính thành hổ phách, nút phụ thành kính mờ chữ trắng */
:is(.dai-hero, .app-main > .khoi-trang > .dau-trang:first-child) .btn-primary {
    --bs-btn-color: var(--qlpt-tren-nhan);
    --bs-btn-bg: var(--qlpt-nhan);
    --bs-btn-border-color: var(--qlpt-nhan-day);
    --bs-btn-hover-color: var(--qlpt-tren-nhan);
    --bs-btn-hover-bg: var(--qlpt-nhan-hover);
    --bs-btn-hover-border-color: var(--qlpt-nhan-day);
    --bs-btn-active-color: var(--qlpt-tren-nhan);
    --bs-btn-active-bg: var(--qlpt-nhan-active);
    --bs-btn-active-border-color: var(--qlpt-nhan-day);
    --bs-btn-disabled-color: var(--qlpt-tren-nhan);
    --bs-btn-disabled-bg: var(--qlpt-nhan);
    --bs-btn-disabled-border-color: var(--qlpt-nhan-day);
    --btn-go: var(--qlpt-nhan-day);
}

:is(.dai-hero, .app-main > .khoi-trang > .dau-trang:first-child) .btn-outline-secondary,
:is(.dai-hero, .app-main > .khoi-trang > .dau-trang:first-child) .btn-outline-danger {
    --bs-btn-color: var(--qlpt-hero-chu);
    --bs-btn-bg: var(--qlpt-hero-nut);
    --bs-btn-border-color: rgb(255 255 255 / .6);
    --bs-btn-hover-color: var(--qlpt-hero-chu);
    --bs-btn-hover-bg: var(--qlpt-hero-nut-hover);
    --bs-btn-hover-border-color: var(--qlpt-hero-chu);
    --bs-btn-active-color: var(--qlpt-hero-chu);
    --bs-btn-active-bg: var(--qlpt-hero-nut-hover);
    --bs-btn-active-border-color: var(--qlpt-hero-chu);
    --bs-btn-disabled-color: var(--qlpt-hero-chu);
    --bs-btn-disabled-bg: var(--qlpt-hero-nut);
    --bs-btn-disabled-border-color: rgb(255 255 255 / .6);
    --btn-go: rgb(0 0 0 / .25);
}

:is(.dai-hero, .app-main > .khoi-trang > .dau-trang:first-child) .btn-link {
    --bs-btn-color: var(--qlpt-hero-chu);
    --bs-btn-hover-color: var(--qlpt-hero-chu);
}

/* Chữ khác trong dải (đều phải >= 4.5:1 trên nền xanh ngọc): số lớn, nhãn nhỏ, đơn vị tiền, tiện ích màu của Bootstrap, liên kết */
.dau-trang .so-lon {
    color: var(--dt-chu);
}

.dau-trang .nhan-nho,
.dau-trang .don-vi {
    color: var(--dt-phu);
}

:is(.dai-hero, .app-main > .khoi-trang > .dau-trang:first-child) :is(.text-body, .text-dark, .text-emphasis, .text-success) {
    color: var(--qlpt-hero-chu) !important;
}

:is(.dai-hero, .app-main > .khoi-trang > .dau-trang:first-child) :is(.text-body-secondary, .text-secondary, .text-muted) {
    color: var(--qlpt-hero-phu) !important;
}

:is(.dai-hero, .app-main > .khoi-trang > .dau-trang:first-child) :is(.text-danger, .text-warning) {
    color: var(--qlpt-nhan-sang) !important;
}

:is(.dai-hero, .app-main > .khoi-trang > .dau-trang:first-child) a:not(.btn):not(.huy-hieu) {
    color: var(--qlpt-hero-chu);
}

@media (max-width: 575.98px) {
    /* Điện thoại: nhóm nút xuống dòng và giãn đều */
    .dau-trang__nut {
        flex: 1 1 100%;
    }

    .dau-trang__nut > .btn,
    .dau-trang__nut > form {
        flex: 1 1 auto;
    }

    .dau-trang__nut > form > .btn {
        width: 100%;
    }
}

/* 5.1b Hero trang chủ: lời chào + ba số lớn (Còn phải thu hổ phách, Đã thu, Lợi nhuận) */
.dai-hero {
    padding: 1rem var(--dt-le) calc(var(--dai-chong) + 1.25rem);
}

.app-main > .khoi-trang > .dai-hero {
    grid-column: 1 / -1;
}

.dai-hero + * {
    position: relative;
    margin-top: calc(-1 * (var(--khoang-trang) + var(--dai-chong)));
}

.dai-hero .tieu-de-trang {
    color: var(--qlpt-hero-chu);
}

.dai-hero__phu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
    margin: .375rem 0 0;
    color: var(--qlpt-hero-phu);
    font-size: .97rem;
}

.dai-hero__so {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.375rem 0 0;
}

.dai-hero__o {
    min-width: 0;
}

.dai-hero__o dd {
    margin: 0;
}

.dai-hero__o--chinh {
    grid-column: 1 / -1;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--qlpt-hero-vach);
}

.dai-hero__o--chinh + .dai-hero__o + .dai-hero__o {
    padding-left: 1rem;
    border-left: 1px solid var(--qlpt-hero-vach);
}

.dai-hero__nhan {
    color: var(--qlpt-hero-phu);
    font-size: .9rem;
    font-weight: 600;
}

.dai-hero__gia {
    margin-top: .125rem;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    /* Số tiền không bao giờ bị cắt: nếu quá hẹp thì cho xuống dòng thay vì tràn */
    overflow-wrap: anywhere;
}

.dai-hero__o--chinh .dai-hero__gia {
    color: var(--qlpt-nhan-sang);
    font-size: clamp(2.1rem, 10vw, 3.3rem);
    line-height: 1.1;
    letter-spacing: -.02em;
}

.dai-hero .don-vi {
    color: var(--qlpt-hero-phu);
}

.dai-hero__o--chinh .don-vi {
    color: var(--qlpt-nhan-sang);
}

.dai-hero__ghi {
    margin-top: .25rem;
    color: var(--qlpt-hero-phu);
    font-size: .88rem;
}

.dai-hero__ghi a {
    color: var(--qlpt-hero-chu);
}

.dai-hero .tien-do {
    --tien-do-rang: rgb(255 255 255 / .2);
    --tien-do-mau: var(--qlpt-nhan-sang);
    height: .5rem;
    margin-top: .5rem;
}

@media (min-width: 992px) {
    .dai-hero {
        padding-top: 2rem;
    }

    .dai-hero__so {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
        gap: 1.75rem;
        max-width: 980px;
        margin-top: 1.75rem;
    }

    .dai-hero__o--chinh {
        grid-column: auto;
        padding-bottom: 0;
        border-bottom: 0;
    }

    .dai-hero__o + .dai-hero__o,
    .dai-hero__o--chinh + .dai-hero__o + .dai-hero__o {
        padding-left: 1.75rem;
        border-left: 1px solid var(--qlpt-hero-vach);
    }

    .dai-hero__phu {
        font-size: 1.06rem;
    }

    .dai-hero__gia {
        font-size: 1.9rem;
    }

    .dai-hero__o--chinh .dai-hero__gia {
        font-size: 3.1rem;
    }
}

/* 5.2 Ô thống kê. Card nhỏ có viền trên 4px theo tông (GĐ9C); ô nằm trong .card tự bỏ viền / bóng, nền bề mặt phụ.
   Tông màu lấy từ --tong-* (mục 1): icon đậm trên nền nhạt cùng tông, rõ ở cả hai chế độ.
   Bảng tông: chinh / thanh-cong = xanh ngọc, nhan = hổ phách, canh-bao / nguy-hiem = cam đất, trung-tinh = nâu xám. */
.o-thong-ke,
.tong-trung-tinh {
    --tk-mau: var(--tong-trung-tinh-mau);
    --tk-nen: var(--tong-trung-tinh-nen);
    --tk-vien: var(--tong-trung-tinh-vien);
}

/* Bố cục gọn (2026-10-27): icon nhỏ cùng hàng với nhãn, số (và ghi chú, thanh tỷ lệ) chiếm cả bề rộng ở hàng dưới.
   .o-thong-ke__than dùng display: contents để nhãn / số thành ô của lưới. */
.o-thong-ke {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    align-content: start;
    gap: .25rem .5rem;
    min-width: 0;
    padding: .625rem .875rem;
    border: 1px solid var(--bs-border-color);
    border-top: 4px solid var(--tk-vien);
    border-radius: .75rem;
    background-color: var(--qlpt-be-mat);
    box-shadow: var(--qlpt-bong);
    color: var(--bs-body-color);
    text-decoration: none;
}

.card .o-thong-ke {
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    background-color: var(--qlpt-be-mat-2);
    box-shadow: none;
}

.o-thong-ke--chinh,
.tong-chinh {
    --tk-mau: var(--tong-chinh-mau);
    --tk-nen: var(--tong-chinh-nen);
    --tk-vien: var(--tong-chinh-vien);
}

.o-thong-ke--thanh-cong,
.tong-thanh-cong {
    --tk-mau: var(--tong-thanh-cong-mau);
    --tk-nen: var(--tong-thanh-cong-nen);
    --tk-vien: var(--tong-thanh-cong-vien);
}

.o-thong-ke--nhan,
.tong-nhan {
    --tk-mau: var(--tong-nhan-mau);
    --tk-nen: var(--tong-nhan-nen);
    --tk-vien: var(--tong-nhan-vien);
}

.o-thong-ke--canh-bao,
.tong-canh-bao {
    --tk-mau: var(--tong-canh-bao-mau);
    --tk-nen: var(--tong-canh-bao-nen);
    --tk-vien: var(--tong-canh-bao-vien);
}

.o-thong-ke--nguy-hiem,
.tong-nguy-hiem {
    --tk-mau: var(--tong-nguy-hiem-mau);
    --tk-nen: var(--tong-nguy-hiem-nen);
    --tk-vien: var(--tong-nguy-hiem-vien);
}

.o-thong-ke__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    background-color: var(--tk-nen);
    color: var(--tk-mau);
    font-size: 1rem;
}

.o-thong-ke__than {
    display: contents;
}

/* Ô không có icon: nhãn bắt đầu từ cột đầu */
.o-thong-ke__than > *,
.o-thong-ke__nhan:first-child {
    grid-column: 1 / -1;
}

.o-thong-ke__icon + .o-thong-ke__than > .o-thong-ke__nhan {
    grid-column: 2;
}

/* Số trong ô thống kê KHÔNG bao giờ bị cắt: cỡ chữ co theo màn hình, nhóm số được phép xuống dòng (phương án cuối) */
.o-thong-ke .so-lon {
    font-size: clamp(1.15rem, .9rem + 1.2vw, 1.5rem);
    overflow-wrap: anywhere;
}

/* Cờ Rong không còn chiếm 2 cột: ô đã gọn nên mọi ô cùng bề rộng (giữ lớp để không phải sửa nơi gọi) */
.o-thong-ke--rong {
    grid-column: auto;
}

.o-thong-ke__nhan {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.o-thong-ke__ghi-chu {
    display: block;
    margin-top: .125rem;
    font-size: .85rem;
    color: var(--bs-secondary-color);
}

.o-thong-ke .tien-do {
    width: 100%;
    margin-top: .25rem;
}

a.o-thong-ke {
    transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
}

a.o-thong-ke:hover {
    border-right-color: var(--qlpt-vien-o-nhap);
    border-bottom-color: var(--qlpt-vien-o-nhap);
    border-left-color: var(--qlpt-vien-o-nhap);
    color: var(--bs-body-color);
}

.o-thong-ke--chon,
a.o-thong-ke[aria-current="true"] {
    border-right-color: var(--qlpt-primary);
    border-bottom-color: var(--qlpt-primary);
    border-left-color: var(--qlpt-primary);
    box-shadow: 0 0 0 1px var(--qlpt-primary), var(--qlpt-bong);
}

/* Lưới thẻ trong .khoi-trang. KHÔNG dùng .row / g-* của Bootstrap trực tiếp trong .khoi-trang: .row có margin âm
   (-gutter/2) nên làm khối cha tràn 4-8px vì .khoi-trang không có padding để hấp thụ. Dùng các lưới dưới đây (dùng gap). */
/* Danh sách thẻ (hóa đơn, chi phí, phòng chưa đóng, nhập chỉ số): tự chia cột theo bề rộng, mỗi thẻ >= 19rem.
   auto-fit: ít thẻ thì thẻ giãn ra lấp hàng, không để một thẻ nhỏ nằm một góc. */
.luoi-the {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    gap: .75rem;
}

/* Ô nhập giới hạn phòng (quản trị hệ thống): đủ rộng để đọc hết chữ gợi ý */
.o-gioi-han {
    width: 10.5rem;
}

/* Thẻ nhiều ô nhập (nhập chỉ số) hoặc nhiều số liệu (quản trị hệ thống): thẻ >= 24rem */
.luoi-the--rong {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}

/* Hai cột cố định (HoaDon/ChiTiet): .luoi-cot__trai và .luoi-cot__phai.
   < 992px: hai khối dùng display: contents nên các card là con trực tiếp của .luoi-cot (flex dọc) và được xếp theo
   .thu-tu-1..5 để điện thoại đọc đúng thứ tự (chi tiết, thu tiền, thêm khoản, thông tin, lịch sử).
   >= 992px: grid 2 cột, mỗi cột là flex dọc có gap; card không nhảy cột khi nội dung đổi chiều cao. */
.luoi-cot {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.luoi-cot__trai,
.luoi-cot__phai {
    display: contents;
}

.thu-tu-1 { order: 1; }
.thu-tu-2 { order: 2; }
.thu-tu-3 { order: 3; }
.thu-tu-4 { order: 4; }
.thu-tu-5 { order: 5; }

@media (min-width: 992px) {
    .luoi-cot {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 1.5rem;
    }

    .luoi-cot__trai,
    .luoi-cot__phai {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        min-width: 0;
    }
}

/* Khối tổng tiền đầu hóa đơn */
.tong-tien-lon {
    font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    /* Trong dải đầu trang chữ trắng (--dt-chu); ngoài dải thì màu nhấn mạnh thường */
    color: var(--dt-chu, var(--bs-emphasis-color));
}

.hd-tong__phu {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 2rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color);
}

.hd-tong__phu > * {
    min-width: 0;
}

.hd-tong__phu .so-lon {
    overflow-wrap: anywhere;
}

/* Trạng thái rỗng nằm trong card: bỏ khung nét đứt lồng nhau */
.card .trang-thai-rong {
    padding: 1rem;
    border: 0;
    background-color: transparent;
}

.luoi-hai-cot {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 1rem;
}

@media (min-width: 992px) {
    .luoi-hai-cot {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Lưới ô thống kê: 2 cột điện thoại; từ 768px tự chia cột, mỗi ô >= 14rem (không còn ô rộng nửa trang). */
.luoi-thong-ke {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

@media (min-width: 768px) {
    .luoi-thong-ke {
        grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
        gap: 1rem;
    }
}

/* Ô có số tiền (Tien / Rong): số luôn chiếm cả bề rộng ô ở hàng dưới (bố cục chung của .o-thong-ke), không xuống dòng giữa số */

/* 5.3 Trạng thái rỗng: khung nét đứt, ô icon vuông hổ phách (như ô "+" trong mẫu), nút chính hổ phách */
.trang-thai-rong {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 2rem 1.25rem;
    border: 2px dashed var(--qlpt-vien-o-nhap);
    border-radius: .75rem;
    background-color: var(--qlpt-be-mat);
    text-align: center;
}

.trang-thai-rong__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: .25rem;
    border: 2px solid var(--qlpt-nhan-day);
    border-radius: .875rem;
    background-color: var(--qlpt-nhan-nhat);
    color: var(--qlpt-nhan-chu);
    font-size: 2.25rem;
    line-height: 1;
}

.trang-thai-rong__tieu-de {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--bs-emphasis-color);
}

.trang-thai-rong__mo-ta {
    max-width: 28rem;
    margin: 0;
    font-size: .94rem;
    color: var(--bs-secondary-color);
}

.trang-thai-rong .btn {
    margin-top: .5rem;
}

/* 5.4 Danh sách liên kết */
.danh-sach-lien-ket {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: .875rem;
    background-color: var(--qlpt-be-mat);
    box-shadow: var(--qlpt-bong);
}

.muc-lien-ket {
    display: flex;
    align-items: center;
    gap: .875rem;
    min-height: 56px;
    padding: .75rem 1rem;
    color: var(--bs-body-color);
    text-decoration: none;
}

.muc-lien-ket + .muc-lien-ket {
    border-top: 1px solid var(--bs-border-color);
}

/* Biến thể lưới (trang Cài đặt): từ 768px mỗi mục là một ô riêng, 2 cột; từ 1200px 3 cột */
@media (min-width: 768px) {
    .danh-sach-lien-ket--luoi {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background-color: transparent;
        box-shadow: none;
    }

    .danh-sach-lien-ket--luoi .muc-lien-ket,
    .danh-sach-lien-ket--luoi .muc-lien-ket + .muc-lien-ket {
        min-height: 72px;
        border: 1px solid var(--bs-border-color);
        border-radius: .75rem;
        background-color: var(--qlpt-be-mat);
        box-shadow: var(--qlpt-bong);
    }

    .danh-sach-lien-ket--luoi .muc-lien-ket:hover {
        background-color: var(--bs-tertiary-bg);
    }
}

@media (min-width: 1200px) {
    .danh-sach-lien-ket--luoi {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.muc-lien-ket:hover {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.muc-lien-ket__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .625rem;
    background-color: var(--qlpt-primary-subtle);
    color: var(--qlpt-primary-emphasis);
    font-size: 1.125rem;
}

.muc-lien-ket__than {
    flex: 1 1 auto;
    min-width: 0;
}

.muc-lien-ket__tieu-de {
    display: block;
    font-weight: 600;
}

.muc-lien-ket__mo-ta {
    display: block;
    font-size: .8125rem;
    color: var(--bs-secondary-color);
}

.muc-lien-ket__chevron {
    flex: none;
    color: var(--bs-secondary-color);
}

/* 5.5 Huy hiệu trạng thái: nền nhạt + chữ đậm cùng tông (đủ AA ở cả hai chế độ), luôn kèm icon + chữ.
   chinh / thanh-cong = xanh ngọc (đã thu, đang thuê), nhan = hổ phách (thu một phần, trống), canh-bao / nguy-hiem = cam đất (chưa thu) */
.huy-hieu {
    --hh-mau: var(--tong-trung-tinh-mau);
    --hh-nen: var(--tong-trung-tinh-nen);
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
    padding: .1875rem .625rem;
    border-radius: 999px;
    background-color: var(--hh-nen);
    color: var(--hh-mau);
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.huy-hieu--chinh,
.huy-hieu--thanh-cong {
    --hh-mau: var(--tong-chinh-mau);
    --hh-nen: var(--tong-chinh-nen);
}

.huy-hieu--nhan {
    --hh-mau: var(--tong-nhan-mau);
    --hh-nen: var(--tong-nhan-nen);
}

.huy-hieu--canh-bao,
.huy-hieu--nguy-hiem {
    --hh-mau: var(--tong-canh-bao-mau);
    --hh-nen: var(--tong-canh-bao-nen);
}

.huy-hieu--thong-tin {
    --hh-mau: var(--bs-info-text-emphasis);
    --hh-nen: var(--bs-info-bg-subtle);
}

.huy-hieu--trung-tinh {
    --hh-mau: var(--tong-trung-tinh-mau);
    --hh-nen: var(--tong-trung-tinh-nen);
}

/* 5.6 Nút. 4 loại: chính (btn-primary xanh ngọc), phụ (btn-outline-secondary / btn-light), nguy hiểm (btn-outline-danger / btn-danger),
   văn bản (btn-link). Thêm .btn-nhan (hổ phách) cho MỘT hành động chính nổi bật của trang.
   GĐ9C: nút kiểu phím bấm: gờ dưới bằng box-shadow inset (không đổi kích thước nút), :active thì gờ lún xuống 2px.
   Không áp cho .btn-link, .btn-link-dong, nút người dùng; nút trong input-group giữ gờ nhưng không lún (khỏi lệch hàng). */
.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--bs-border-radius);
    --btn-go: var(--qlpt-go-nut-phu);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    box-shadow: inset 0 -3px 0 var(--btn-go);
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .12s ease, transform .12s ease;
}

.btn-primary,
.btn-danger,
.btn-success,
.btn-secondary {
    --btn-go: var(--qlpt-go-nut);
}

.btn:focus-visible {
    box-shadow: inset 0 -3px 0 var(--btn-go), 0 0 0 .3125rem var(--qlpt-vong-focus);
}

.btn:not(.btn-link):not(:disabled):not(.disabled):active {
    transform: translateY(2px);
    box-shadow: inset 0 -1px 0 var(--btn-go);
}

.input-group > .btn:not(:disabled):not(.disabled):active {
    transform: none;
}

.btn-link,
.btn-link-dong,
.nut-nguoi-dung {
    box-shadow: none;
    transform: none;
}

.btn-link:focus-visible,
.nut-nguoi-dung:focus-visible {
    box-shadow: 0 0 0 .3125rem var(--qlpt-vong-focus);
}

.btn-link:not(:disabled):not(.disabled):active,
.nut-nguoi-dung:not(:disabled):not(.disabled):active {
    transform: none;
    box-shadow: none;
}

/* Nút hổ phách: hành động chính nổi bật (Lập hóa đơn, Thu tiền, Lưu...). Mỗi trang tối đa một nút. */
.btn-nhan {
    --bs-btn-color: var(--qlpt-tren-nhan);
    --bs-btn-bg: var(--qlpt-nhan);
    --bs-btn-border-color: var(--qlpt-nhan-day);
    --bs-btn-hover-color: var(--qlpt-tren-nhan);
    --bs-btn-hover-bg: var(--qlpt-nhan-hover);
    --bs-btn-hover-border-color: var(--qlpt-nhan-day);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: var(--qlpt-tren-nhan);
    --bs-btn-active-bg: var(--qlpt-nhan-active);
    --bs-btn-active-border-color: var(--qlpt-nhan-day);
    --bs-btn-disabled-color: var(--qlpt-tren-nhan);
    --bs-btn-disabled-bg: var(--qlpt-nhan);
    --bs-btn-disabled-border-color: var(--qlpt-nhan-day);
    --btn-go: var(--qlpt-nhan-day);
}

.btn-lg {
    min-height: 48px;
}

/* Ngoại lệ: nút dạng liên kết nằm GIỮA dòng chữ (ví dụ "Gửi lại mã" trong câu) dùng btn btn-link btn-link-dong,
   không ép cao 44px / không thành flex để không phá dòng chữ. btn-link đứng riêng vẫn cao 44px. */
.btn-link-dong {
    display: inline;
    min-height: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    text-align: inherit;
}

/* btn-sm chỉ dùng trong bảng / dòng dày; trên màn hình cảm ứng vẫn có vùng chạm 44px */
.btn-sm {
    min-height: 36px;
    --bs-btn-font-size: .8125rem;
}

@media (pointer: coarse) {
    .btn-sm,
    .form-control-sm,
    .form-select-sm {
        min-height: 44px;
    }

    .form-check-input {
        width: 1.4em;
        height: 1.4em;
    }
}

.btn .spinner-border {
    vertical-align: -.125em;
}

.huy-hieu .btn-close {
    margin: -.75rem -.5rem -.75rem -.25rem;
}

.btn-close {
    min-width: 44px;
    min-height: 44px;
    box-sizing: border-box;
    background-origin: content-box;
    padding: 14px;
}

/* Hàng nút cuối form: điện thoại xếp dọc (nút chính trên), desktop nằm ngang (nút chính bên phải) */
.hang-nut-form {
    display: flex;
    flex-direction: column-reverse;
    gap: .5rem;
    margin-top: 1.25rem;
}

.hang-nut-form > .btn {
    width: 100%;
}

@media (min-width: 576px) {
    .hang-nut-form {
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }

    .hang-nut-form > .btn {
        width: auto;
    }
}

/* 5.7 Form */
.form-label {
    margin-bottom: .375rem;
    font-size: .94rem;
    font-weight: 600;
}

/* Dấu * đỏ cho ô bắt buộc: site.js gắn .bat-buoc vào nhãn của ô có thuộc tính required
   (hoặc view gắn tay cho nhóm không có ô required, ví dụ ô tìm người ở). Trình đọc màn hình đã biết
   ô bắt buộc qua required nên dấu * có văn bản thay thế rỗng. */
.bat-buoc::after {
    content: " *";
    content: " *" / "";
    color: var(--qlpt-nguy-hiem);
    font-weight: 700;
}

.form-text {
    font-size: .8125rem;
    color: var(--bs-secondary-color);
}

.input-group-text {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
}

/* Ô nhập sai (lớp do ASP.NET Core sinh ra): viền đỏ + icon, như .is-invalid của Bootstrap */
.input-validation-error {
    border-color: var(--qlpt-nguy-hiem) !important;
}

input.input-validation-error:not([type="checkbox"]):not([type="radio"]),
textarea.input-validation-error {
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23b42318'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23b42318' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

[data-bs-theme="dark"] input.input-validation-error:not([type="checkbox"]):not([type="radio"]),
[data-bs-theme="dark"] textarea.input-validation-error {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23f87171'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23f87171' stroke='none'/%3e%3c/svg%3e");
}

.input-validation-error:focus {
    box-shadow: 0 0 0 .1875rem rgb(180 35 24 / .25);
}

/* Thông báo lỗi dưới ô nhập */
.field-validation-error {
    display: block;
    margin-top: .25rem;
    font-size: .8125rem;
    color: var(--qlpt-nguy-hiem);
}

.field-validation-error::before {
    content: "\f333";
    content: "\f333" / ""; /* văn bản thay thế rỗng: trình đọc màn hình không đọc ký tự icon */
    display: inline-block;
    margin-right: .25rem;
    font-family: bootstrap-icons;
    font-weight: 400;
    line-height: 1;
    vertical-align: -.125em;
}

.field-validation-error:empty {
    display: none;
}

/* Alert lỗi chung của form (_LoiChung) */
.alert-loi-form {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.alert-loi-form .bi {
    flex: none;
    margin-top: .125rem;
}

/* 5.8 Card (viền trên theo loại: xem .card ở mục 2). Tiêu đề card có ô icon vuông 32px nền nhạt:
   markup mới dùng .the-icon; markup cũ <h2 class="tieu-de-muc"><i class="bi ... me-1"> trong .card-header tự được vuốt thành ô icon. */
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .875rem 1rem;
    background-color: transparent;
    border-bottom: 1px solid var(--bs-border-color);
}

.the-icon,
.card-header .tieu-de-muc > .bi:first-child {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 2rem;
    height: 2rem;
    margin-right: .625rem !important;
    border-radius: .5rem;
    background-color: var(--qlpt-primary-subtle);
    color: var(--qlpt-primary-emphasis);
    font-size: 1rem;
    line-height: 1;
    vertical-align: middle;
}

.card--nhan .the-icon,
.card--nhan > .card-header .tieu-de-muc > .bi:first-child {
    background-color: var(--qlpt-nhan-nhat);
    color: var(--qlpt-nhan-chu);
}

.card--canh-bao .the-icon,
.card--canh-bao > .card-header .tieu-de-muc > .bi:first-child {
    background-color: var(--qlpt-canh-bao-nhat);
    color: var(--qlpt-canh-bao-chu);
}

@media (min-width: 768px) {
    .card-body {
        --bs-card-spacer-x: 1.25rem;
        --bs-card-spacer-y: 1.25rem;
    }

    .card-header {
        padding: 1rem 1.25rem;
    }
}

/* 5.9 Sơ đồ ô phòng (GĐ9C, theo hướng C). Mỗi ô là một link tới phòng: số phòng + icon theo trạng thái; trạng thái luôn có nhãn
   chữ (ẩn với mắt thường ở ô nhỏ, hiện ở biến thể --lon) và khác nhau cả về kiểu viền / nền, không chỉ dựa vào màu:
     thuê = tô đặc + bi-person-fill · trống = viền đứt + bi-door-open · sửa = sọc chéo + bi-tools · ngừng = xám + nhãn "Ngừng".
   Markup: <ol class="so-do-phong [so-do-phong--lon]"><li><a class="o-phong o-phong--thue"><i class="bi ..."></i>
           <span class="o-phong__so">A101</span><span class="o-phong__tt">Đang thuê</span></a></li>...</ol> */
.so-do-phong {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
    gap: .375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.o-phong,
.mau-phong {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    border-radius: .5rem;
}

.o-phong {
    position: relative;
    gap: .1875rem;
    min-height: 44px;
    padding: .25rem;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: transform .12s ease;
}

.so-do-phong:not(.so-do-phong--lon) .o-phong {
    aspect-ratio: 1 / 1;
}

.o-phong .bi {
    font-size: .9rem;
}

.o-phong:hover {
    transform: translateY(-2px);
}

/* Nhãn trạng thái bằng chữ: chỉ trình đọc màn hình đọc ở ô nhỏ */
.o-phong__tt {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.o-phong__phu {
    display: none;
}

.o-phong--thue,
.mau-phong--thue {
    background-color: var(--qlpt-o-thue-nen);
    color: var(--qlpt-o-thue-chu);
}

.o-phong--trong,
.mau-phong--trong {
    border: 2px dashed var(--qlpt-o-trong-vien);
    background-color: var(--qlpt-o-trong-nen);
    color: var(--qlpt-o-trong-chu);
}

.o-phong--sua,
.mau-phong--sua {
    border: 2px solid var(--qlpt-o-sua-vien);
    background: repeating-linear-gradient(135deg, var(--qlpt-o-sua-1) 0 6px, var(--qlpt-o-sua-2) 6px 12px);
    color: var(--qlpt-o-sua-chu);
}

.o-phong--ngung,
.mau-phong--ngung {
    border: 2px solid var(--qlpt-o-ngung-vien);
    background-color: var(--qlpt-o-ngung-nen);
    color: var(--qlpt-o-ngung-chu);
}

/* Biến thể lớn (trang Phòng, trang chủ): ô rộng, hiện giá thuê / người đại diện và nhãn trạng thái.
   8.5rem: điện thoại 360px vẫn đủ 2 cột trong card */
.so-do-phong--lon {
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: .75rem;
}

.so-do-phong--lon .o-phong {
    align-items: flex-start;
    justify-content: flex-start;
    gap: .25rem;
    min-height: 6.5rem;
    padding: .75rem;
    font-size: .9rem;
    letter-spacing: 0;
    text-align: left;
}

.so-do-phong--lon .o-phong > .bi {
    position: absolute;
    top: .625rem;
    right: .625rem;
    font-size: 1.15rem;
}

.so-do-phong--lon .o-phong__so {
    padding-right: 1.5rem;
    font-size: 1.35rem;
    line-height: 1.15;
}

.so-do-phong--lon .o-phong__phu {
    display: block;
    font-size: .85rem;
    font-weight: 500;
}

.so-do-phong--lon .o-phong__tt {
    position: static;
    width: auto;
    height: auto;
    margin: auto 0 0;
    overflow: visible;
    clip: auto;
    font-size: .84rem;
    white-space: normal;
}

/* Ô lớn giãn đều chiều cao trong một hàng; số phòng dài ("Phòng 1 - C4") xuống dòng theo khoảng trắng, không cắt giữa chữ */
.so-do-phong--lon > li {
    display: flex;
}

/* Trang Phòng (một dãy, ít phòng): ô to hơn, 4 ô / hàng từ 768px, 6 ô / hàng từ 1200px */
.so-do-phong--to .o-phong {
    min-height: 7.5rem;
    padding: .875rem 1rem;
}

.so-do-phong--to .o-phong__so {
    font-size: 1.45rem;
}

.so-do-phong--to .o-phong__phu {
    font-size: .95rem;
}

@media (min-width: 768px) {
    .so-do-phong--to {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
    }
}

@media (min-width: 1200px) {
    .so-do-phong--to {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.so-do-phong--lon .o-phong {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
}

/* Ô đang thuê ở trang chủ là <button> mở hộp người thuê: bỏ kiểu nút mặc định, giữ kiểu ô */
button.o-phong {
    width: 100%;
    cursor: pointer;
}

/* Tên người đại diện: tối đa 2 dòng */
.so-do-phong--lon .o-phong__ten {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    max-width: 100%;
    font-size: .92rem;
    font-weight: 600;
}

/* Tiền chưa thu trên ô đang thuê: nhãn hổ phách nhạt (chữ / nền >= 4.5:1 ở cả sáng và tối) */
.o-phong__no {
    display: none;
}

.so-do-phong--lon .o-phong__no {
    display: inline-block;
    max-width: 100%;
    padding: .125rem .5rem;
    border-radius: 999px;
    background-color: var(--qlpt-nhan-nhat);
    color: var(--qlpt-nhan-chu);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.35;
}

/* Hộp người thuê (_NguoiThuePhong) */
.nguoi-thue__muc {
    margin: 0 0 .5rem;
    color: var(--bs-secondary-color);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.nguoi-thue {
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.nguoi-thue__dong {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .625rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.nguoi-thue__dong:last-child {
    border-bottom: 0;
}

.nguoi-thue__dong > .btn {
    flex: none;
}

.nguoi-thue__ten {
    color: var(--bs-emphasis-color);
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.thong-tin-thue {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .5rem 1rem;
    margin: 0;
}

.thong-tin-thue dt {
    color: var(--bs-secondary-color);
    font-weight: 400;
}

.thong-tin-thue dd {
    margin: 0;
    text-align: right;
}

.thong-tin-thue__no {
    color: var(--tong-canh-bao-mau);
    font-weight: 700;
}

/* Chú thích màu kèm số đếm */
.chu-thich-phong {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.125rem;
    margin: .875rem 0 .125rem;
    padding: 0;
    list-style: none;
}

.chu-thich-phong li {
    font-size: .94rem;
}

.chu-thich-phong__muc {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    color: inherit;
    text-decoration: none;
}

.chu-thich-phong__muc:hover,
.chu-thich-phong__muc:focus-visible {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.chu-thich-phong strong {
    font-variant-numeric: tabular-nums;
}

.mau-phong {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: .4375rem;
    font-size: .85rem;
}

/* Nhóm theo dãy */
.day-phong {
    margin-top: 1.125rem;
}

.day-phong__ten {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .125rem .625rem;
    margin: 0 0 .5rem;
    font-size: 1rem;
    font-weight: 700;
}

.day-phong__dem {
    color: var(--bs-secondary-color);
    font-size: .88rem;
    font-weight: 400;
}

/* Số phòng / dòng phụ dùng chung ở các danh sách (hóa đơn, hợp đồng, chưa đóng) */
.phong-the__so {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--bs-emphasis-color);
}

.phong-the__phu {
    font-size: .875rem;
    color: var(--bs-secondary-color);
}

@media (min-width: 760px) and (max-width: 991.98px), (min-width: 1180px) {
    .so-do-phong:not(.so-do-phong--lon) {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .o-phong:hover {
        transform: none;
    }
}

/* 5.10 Bảng: <div class="bang table-responsive"><table class="table"> */
.bang {
    position: relative;
    overflow-x: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background-color: var(--qlpt-be-mat);
    box-shadow: var(--qlpt-bong);
}

/* Khung cuộn phải được định vị: .visually-hidden (position absolute) bên trong th / caption nếu không có tổ tiên
   định vị sẽ thoát khỏi vùng cuộn và kéo giãn cả trang trên điện thoại */
.table-responsive,
.hang-chip,
.tim-nguoi-ketqua {
    position: relative;
}

.bang .table {
    margin-bottom: 0;
    font-size: .9375rem;
}

.bang .table > thead > tr > th {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    background-color: var(--qlpt-be-mat-2);
    font-size: .84rem;
    font-weight: 700;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.bang .table > tbody > tr > td {
    padding: .75rem 1rem;
    height: 52px;
    vertical-align: middle;
}

.bang .table > tbody > tr:last-child > td {
    border-bottom: 0;
}

.bang .table-hover > tbody > tr:hover > * {
    --bs-table-hover-bg: var(--bs-tertiary-bg);
}

/* 5.11 Chip lọc: cuộn ngang trên điện thoại, không xuống dòng */
.hang-chip {
    display: flex;
    flex-wrap: nowrap;
    gap: .5rem;
    padding-bottom: .25rem;
    overflow-x: auto;
    scrollbar-width: thin;
}

@media (min-width: 992px) {
    .hang-chip {
        flex-wrap: wrap;
        overflow-x: visible;
    }
}

.chip-loc {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: .375rem;
    min-height: 44px;
    padding: 0 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background-color: var(--qlpt-be-mat);
    color: var(--bs-body-color);
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.chip-loc:hover {
    border-color: var(--qlpt-primary);
    color: var(--bs-body-color);
}

.chip-loc[aria-current="true"],
.chip-loc.active {
    border-color: var(--qlpt-primary);
    background-color: var(--qlpt-primary-subtle);
    color: var(--qlpt-primary-emphasis);
    font-weight: 600;
}

.chip-loc__dem {
    font-variant-numeric: tabular-nums;
    color: var(--bs-secondary-color);
}

/* 5.12 Chọn tháng ‹ Tháng 10/2026 › */
.chon-thang {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .125rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background-color: var(--qlpt-be-mat);
}

.chon-thang__nut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--bs-body-color);
    text-decoration: none;
}

.chon-thang__nut:hover {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.chon-thang__nhan {
    min-width: 8rem;
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* 5.13 Phân trang */
.phan-trang {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.phan-trang__thong-tin {
    font-size: .875rem;
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
}

.phan-trang .btn.disabled {
    pointer-events: none;
}

/* 5.14 Toast: điện thoại ở đáy, trên bottom nav; desktop ở góc trên phải, dưới topbar */
/* Bootstrap thêm margin-bottom cho .toast-container > :not(:last-child); đã có gap nên bỏ margin */
#vung-toast > :not(:last-child) {
    margin-bottom: 0;
}

#vung-toast {
    position: fixed;
    right: 0;
    bottom: calc(var(--app-bottom-nav-cao) + env(safe-area-inset-bottom, 0px) + .75rem);
    left: 0;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    width: auto;
    padding: 0 .75rem;
    pointer-events: none;
}

/* Trang khách: toast giữa, trên cùng */
.khach-body #vung-toast {
    top: calc(env(safe-area-inset-top, 0px) + .75rem);
    bottom: auto;
}

@media (min-width: 992px) {
    #vung-toast {
        top: calc(var(--app-topbar-cao) + .75rem);
        right: 1rem;
        bottom: auto;
        left: auto;
        align-items: stretch;
        width: 380px;
        padding: 0;
    }

    .khach-body #vung-toast {
        top: 1rem;
        right: 0;
        bottom: auto;
        left: 0;
        align-items: center;
        width: auto;
        padding: 0 .75rem;
    }
}

.qlpt-toast {
    --tt-mau: var(--bs-info-text-emphasis);
    --tt-nen: var(--bs-info-bg-subtle);
    --tt-vien: var(--bs-info-border-subtle);
    --bs-toast-bg: var(--tt-nen);
    --bs-toast-color: var(--tt-mau);
    --bs-toast-border-color: var(--tt-vien);
    --bs-toast-border-width: 1px;
    --bs-toast-border-radius: var(--bs-border-radius);
    --bs-toast-box-shadow: var(--qlpt-bong-noi);
    --bs-toast-max-width: 100%;
    width: 100%;
    max-width: 380px;
    pointer-events: auto;
}

.qlpt-toast--success {
    --tt-mau: var(--bs-success-text-emphasis);
    --tt-nen: var(--bs-success-bg-subtle);
    --tt-vien: var(--bs-success-border-subtle);
}

.qlpt-toast--warning {
    --tt-mau: var(--bs-warning-text-emphasis);
    --tt-nen: var(--bs-warning-bg-subtle);
    --tt-vien: var(--bs-warning-border-subtle);
}

.qlpt-toast--danger {
    --tt-mau: var(--bs-danger-text-emphasis);
    --tt-nen: var(--bs-danger-bg-subtle);
    --tt-vien: var(--bs-danger-border-subtle);
}

.qlpt-toast__icon {
    flex: none;
    margin-left: .875rem;
    font-size: 1.125rem;
    line-height: 1;
}

/* Nút trong toast: chữ / viền theo màu emphasis của loại toast (7.2-10.7:1 trên nền subtle, đã tính cả sáng và tối) */
.qlpt-toast .btn-outline-secondary {
    --bs-btn-color: var(--tt-mau);
    --bs-btn-border-color: var(--tt-mau);
    --bs-btn-hover-color: var(--tt-nen);
    --bs-btn-hover-bg: var(--tt-mau);
    --bs-btn-hover-border-color: var(--tt-mau);
    --bs-btn-active-color: var(--tt-nen);
    --bs-btn-active-bg: var(--tt-mau);
    --bs-btn-active-border-color: var(--tt-mau);
}

.qlpt-toast .toast-body {
    padding: .875rem .75rem;
    font-weight: 500;
}

/* 5.15 Modal xác nhận (site.js dựng, có data-xac-nhan-loai) */
.modal-xac-nhan__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-right: .75rem;
    border-radius: 50%;
    background-color: var(--qlpt-canh-bao-nhat);
    color: var(--qlpt-canh-bao-chu);
    font-size: 1.25rem;
}

.modal-content {
    border-color: var(--bs-border-color);
    border-top: 4px solid var(--qlpt-vien-the-chinh);
    border-radius: .75rem;
}

/* Modal xác nhận thao tác nguy hiểm (có icon cảnh báo): viền trên cam đất */
.modal-content:has(.modal-xac-nhan__icon) {
    border-top-color: var(--qlpt-vien-the-canh-bao);
}

.modal-footer {
    gap: .5rem;
}

.modal-footer > * {
    margin: 0;
}

.modal-title {
    font-weight: 600;
}

/* ---------------------------------------------------------------------------------------------------
   6. Tiện ích cũ còn dùng (view / JS đang tham chiếu)
   --------------------------------------------------------------------------------------------------- */
/* Vùng chạm >= 44px */
.app-touch {
    min-height: 44px;
}

/* Nút gửi form đang chờ: xem .btn .spinner-border ở mục 5.6 */

/* Giữ nguyên xuống dòng trong ghi chú nhiều dòng */
.giu-xuong-dong {
    white-space: pre-line;
}

/* Kết quả tìm nhanh người ở: cuộn khi dài */
.tim-nguoi-ketqua {
    max-height: 16rem;
    overflow-y: auto;
}

/* Lưới ảnh / PDF đính kèm */
.tep-luoi {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: .75rem;
}

.tep-anh {
    display: block;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    background-color: var(--bs-tertiary-bg);
}

.tep-anh img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.tep-pdf {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    color: var(--qlpt-nguy-hiem);
}

.tep-the {
    min-width: 0;
}

.tep-the .btn {
    min-width: 44px;
}

/* Ô chỉ số (nhập chỉ số điện / nước): chữ lớn, căn phải, đủ cao để bấm trên điện thoại */
/* Điện thoại: ô nhập khi được focus/cuộn tới không bị bottom nav che (cũng chừa chỗ cho nút Lưu bên dưới) */
@media (max-width: 991.98px) {
    html {
        scroll-padding-bottom: calc(var(--app-bottom-nav-cao) + 1rem);
    }
}

.o-chi-so {
    scroll-margin-bottom: calc(var(--app-bottom-nav-cao) + 6rem);
    min-height: 48px;
    font-size: 1.25rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.o-chi-so[readonly] {
    background-color: var(--bs-tertiary-bg);
}

/* ---------------------------------------------------------------------------------------------------
   6.1 GĐ9B / GĐ9C: số tiền (_Tien), thanh tiến độ, thao tác nhanh, link "Xem", việc cần làm, sổ cái tổng quan, tình trạng phòng
   --------------------------------------------------------------------------------------------------- */

/* Đơn vị tiền nhỏ, nhạt, nâng nhẹ: "1.500.000 ₫" không để ký hiệu to bằng số */
.don-vi {
    margin-left: .15em;
    font-size: .62em;
    font-weight: 600;
    line-height: 0;
    vertical-align: .3em;
    color: var(--bs-secondary-color);
}

/* Thanh tỷ lệ bằng <progress> (CSP không cho style= để vẽ độ rộng). Rãnh --tien-do-rang, màu đầy theo biến thể */
.tien-do {
    --tien-do-mau: var(--tien-do-chinh);
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    height: .625rem;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    background-color: var(--tien-do-rang);
    color: var(--tien-do-mau);
}

.tien-do::-webkit-progress-bar {
    border-radius: 999px;
    background-color: var(--tien-do-rang);
}

.tien-do::-webkit-progress-value {
    border-radius: 999px;
    background-color: var(--tien-do-mau);
}

.tien-do::-moz-progress-bar {
    border-radius: 999px;
    background-color: var(--tien-do-mau);
}

.tien-do--chinh {
    --tien-do-mau: var(--tien-do-chinh);
}

.tien-do--thanh-cong {
    --tien-do-mau: var(--tien-do-thanh-cong);
}

.tien-do--nhan {
    --tien-do-mau: var(--tien-do-nhan);
}

.tien-do--canh-bao {
    --tien-do-mau: var(--tien-do-canh-bao);
}

.tien-do--nguy-hiem {
    --tien-do-mau: var(--tien-do-nguy-hiem);
}

/* Thao tác nhanh dạng ô lớn có icon vuông và chữ: điện thoại 2 cột, >= 600px 3 cột, >= 992px 6 cột (ô dọc) */
.luoi-thao-tac {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.thao-tac {
    display: flex;
    align-items: center;
    gap: .625rem;
    height: 100%;
    min-height: 64px;
    padding: .625rem .75rem;
    border: 1.5px solid var(--qlpt-vien-o-nhap);
    border-radius: .625rem;
    background-color: var(--qlpt-be-mat-2);
    box-shadow: 0 2px 0 var(--qlpt-vien-o-nhap);
    color: var(--bs-body-color);
    font-size: .97rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease;
}

.thao-tac .bi {
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: .625rem;
    background-color: var(--qlpt-be-mat);
    color: var(--qlpt-primary);
    font-size: 1.2rem;
}

.thao-tac:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 0 var(--qlpt-vien-o-nhap);
    color: var(--bs-body-color);
}

.thao-tac:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 var(--qlpt-vien-o-nhap);
}

/* Ô thao tác chính (Lập hóa đơn): hổ phách như .btn-nhan */
.thao-tac--chinh {
    border-color: var(--qlpt-nhan-day);
    background-color: var(--qlpt-nhan);
    box-shadow: 0 3px 0 var(--qlpt-nhan-day);
    color: var(--qlpt-tren-nhan);
    font-weight: 700;
}

.thao-tac--chinh .bi {
    background-color: rgb(255 255 255 / .38);
    color: var(--qlpt-tren-nhan);
}

.thao-tac--chinh:hover {
    box-shadow: 0 4px 0 var(--qlpt-nhan-day);
    color: var(--qlpt-tren-nhan);
}

.thao-tac--chinh:active {
    box-shadow: 0 1px 0 var(--qlpt-nhan-day);
}

@media (min-width: 600px) {
    .luoi-thao-tac {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .luoi-thao-tac {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: .75rem;
    }

    .thao-tac {
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        gap: .875rem;
        min-height: 112px;
        padding: .875rem;
        font-size: 1rem;
    }

    .thao-tac .bi {
        width: 44px;
        height: 44px;
        font-size: 1.3rem;
    }
}

/* Link đứng riêng ở header card ("Xem hóa đơn ›"): vừa phải, đậm vừa, không gạch chân */
.link-xem {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: .25rem;
    min-height: 44px;
    font-size: .94rem;
    font-weight: 600;
    color: var(--bs-link-color);
}

.link-xem:hover,
.link-xem:focus-visible {
    color: var(--bs-link-hover-color);
}

.link-xem .bi {
    font-size: .8rem;
}

/* Trang chủ: lưới hai cột. DOM = thứ tự trên điện thoại (Cần làm trước Tình trạng phòng);
   >= 992px cột trái (phòng) hiện bên trái, cột phải (cần làm, tổng quan) bên phải */
.luoi-trang-chu {
    display: grid;
    gap: 1rem;
}

.luoi-trang-chu__cot {
    display: grid;
    gap: 1rem;
    align-content: start;
    min-width: 0;
}

@media (min-width: 992px) {
    .luoi-trang-chu {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        gap: 1.5rem;
    }

    .luoi-trang-chu__cot {
        gap: 1.5rem;
    }

    .luoi-trang-chu__cot--trai {
        grid-column: 1;
        grid-row: 1;
    }

    .luoi-trang-chu__cot--phai {
        grid-column: 2;
        grid-row: 1;
    }
}

/* Danh sách "Cần làm": dòng có ô số đếm lớn tô màu (cam / hổ phách), dòng phụ và mũi tên */
.viec-can-lam {
    display: grid;
    gap: .625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.viec-can-lam__muc {
    display: flex;
    align-items: center;
    gap: .875rem;
    min-height: 76px;
    padding: .75rem;
    border: 1.5px solid transparent;
    border-radius: .625rem;
    background-color: var(--qlpt-be-mat-2);
    color: var(--bs-body-color);
    text-decoration: none;
}

.viec-can-lam__muc:hover {
    border-color: var(--qlpt-vien-o-nhap);
    color: var(--bs-body-color);
}

.viec-can-lam__so {
    display: grid;
    flex: none;
    place-items: center;
    min-width: 52px;
    height: 52px;
    padding: 0 .5rem;
    border-radius: .625rem;
    font-size: 1.6rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.viec-can-lam__so--canh-bao {
    background-color: var(--qlpt-canh-bao);
    color: var(--qlpt-tren-canh-bao);
}

.viec-can-lam__so--nhan {
    background-color: var(--qlpt-nhan);
    color: var(--qlpt-tren-nhan);
}

.viec-can-lam__chu {
    flex: 1 1 auto;
    min-width: 0;
}

.viec-can-lam__tieu-de,
.viec-can-lam__phu {
    display: block;
}

.viec-can-lam__tieu-de {
    font-weight: 600;
    line-height: 1.3;
}

.viec-can-lam__phu {
    margin-top: .125rem;
    color: var(--bs-secondary-color);
    font-size: .88rem;
}

.viec-can-lam__chevron {
    flex: none;
    font-size: 1.15rem;
    color: var(--bs-secondary-color);
}

/* Tổng quan dạng sổ cái: phải thu, đã thu, còn nợ, chi phí, lợi nhuận dưới vạch kẻ đậm */
.tien-do-dau {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .5rem;
    font-size: .94rem;
    color: var(--bs-secondary-color);
}

.tien-do-dau strong {
    font-size: 1.12rem;
    color: var(--bs-body-color);
}

.so-cai {
    margin: .5rem 0 0;
}

.so-cai__dong {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 0;
    border-bottom: 1px dashed var(--bs-border-color);
}

.so-cai__dong dt {
    min-width: 0;
    font-weight: 600;
}

.so-cai__dong dd {
    flex: none;
    margin: 0;
    text-align: right;
    font-size: 1.12rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.so-cai__ghi {
    display: block;
    color: var(--bs-secondary-color);
    font-size: .88rem;
    font-weight: 400;
}

.so-cai__dong--no dd {
    color: var(--qlpt-canh-bao-chu);
}

.so-cai__dong--tong {
    margin-top: .25rem;
    padding-top: .875rem;
    border-top: 2px solid var(--bs-body-color);
    border-bottom: 0;
}

.so-cai__dong--tong dt {
    font-size: 1.06rem;
}

.so-cai__dong--tong dd {
    color: var(--qlpt-primary);
    font-size: 1.5rem;
}

/* Tình trạng phòng: tỷ lệ lấp đầy + thanh + chú thích + sơ đồ theo dãy */
.phong-tom-tat {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .5rem 1rem;
}

.phong-ty-le {
    margin: 0;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.phong-ty-le strong {
    color: var(--qlpt-primary);
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.phong-tom-tat .tien-do {
    flex-basis: 100%;
    margin-top: .625rem;
}

/* Trạng thái rỗng gọn trong card "Cần làm" */
.trang-thai-rong--gon {
    padding-block: 1.5rem;
}

.trang-thai-rong--gon .trang-thai-rong__icon {
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .thao-tac,
    .o-phong,
    a.o-thong-ke {
        transition: none;
    }

    .thao-tac:hover,
    .thao-tac:active,
    .btn:not(.btn-link):not(:disabled):not(.disabled):active {
        transform: none;
    }
}

/* ---------------------------------------------------------------------------------------------------
   7. Phiếu thu dạng ảnh (GĐ4). Bố cục cố định 720px, luôn nền trắng chữ đen, KHÔNG theo dark mode để ảnh xuất
   luôn giống nhau. Chỉ đầu phiếu đổi màu nhấn sang xanh ngọc.
   --------------------------------------------------------------------------------------------------- */
.phieu-thu-khung {
    width: 100%;
    max-width: 720px;
    position: relative;
    /* Cắt phần phiếu 720 px chưa/đã thu nhỏ: khung này chủ ý chứa phiếu, không phải che lỗi tràn của trang */
    overflow: hidden;
}

.phieu-thu-co-dinh {
    width: 720px;
    transform-origin: top left;
}

.phieu-thu {
    position: relative;
    box-sizing: border-box;
    width: 720px;
    padding: 28px 32px;
    background: #ffffff;
    color: #000000;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.4;
    border: 1px solid #cccccc;
}

.phieu-thu *,
.phieu-thu *::before,
.phieu-thu *::after {
    box-sizing: border-box;
}

.phieu-thu__dau-trang {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 2px solid #0f766e;
}

.phieu-thu__ten-chu-tro {
    font-size: 18px;
    font-weight: 700;
}

.phieu-thu__tieu-de {
    text-align: right;
}

.phieu-thu__tieu-de-chinh {
    font-size: 20px;
    font-weight: 700;
    color: #0f766e;
}

.phieu-thu__tieu-de-phu {
    font-size: 16px;
    font-weight: 600;
}

/* Dấu ĐÃ HỦY / ĐÃ THANH TOÁN: khối nằm trong dòng chảy, đặt trên đầu phiếu, không đè lên tên chủ trọ dài */
.phieu-thu__dau {
    display: table;
    margin: 0 auto 12px;
    padding: 4px 18px;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 1px;
    border: 3px solid;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.85);
}

.phieu-thu__dau--huy {
    color: #b00020;
    border-color: #b00020;
}

.phieu-thu__dau--xong {
    color: #1b7f3b;
    border-color: #1b7f3b;
}

.phieu-thu__thong-tin {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 24px;
    padding: 14px 0;
}

.phieu-thu__o {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.phieu-thu__nhan {
    font-size: 12px;
    color: #555555;
    text-transform: uppercase;
}

.phieu-thu__gia-tri {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.phieu-thu__phu {
    font-size: 13px;
    color: #444444;
}

.phieu-thu__bang {
    width: 100%;
    border-collapse: collapse;
}

.phieu-thu__bang th,
.phieu-thu__bang td {
    padding: 7px 8px;
    border-bottom: 1px solid #dddddd;
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.phieu-thu__bang thead th {
    background: #f1f1f1;
    border-bottom: 1px solid #000000;
    font-size: 13px;
}

/* Cột Khoản đủ rộng cho dòng phụ dài nhất ("Phí quản lý + sửa chữa điện nước") trên một dòng; cột Chi tiết chữ nhỏ hơn */
.phieu-thu__cot-khoan {
    width: 270px;
}

.phieu-thu__bang tbody td:nth-child(2) {
    font-size: 13px;
    color: #333333;
}

.phieu-thu__cot-tien {
    width: 140px;
    text-align: right !important;
}

.phieu-thu__bang .phieu-thu__tien {
    text-align: right;
    white-space: nowrap;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.phieu-thu__bang tfoot td {
    font-weight: 700;
}

/* Dòng phụ chia tiền điện (giá gốc, VAT, phí quản lý): chữ nhỏ, lùi vào, không đậm; tổng đã nằm ở dòng Điện */
.phieu-thu__bang .phieu-thu__dong-phu td {
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 13px;
    color: #444444;
}

.phieu-thu__bang .phieu-thu__dong-phu td:first-child {
    padding-left: 20px;
}

.phieu-thu__bang .phieu-thu__dong-phu .phieu-thu__tien {
    font-weight: 400;
}

.phieu-thu__bang tfoot .phieu-thu__con-lai td {
    font-size: 20px;
    background: #f1f1f1;
    border-top: 2px solid #000000;
    border-bottom: 2px solid #000000;
}

.phieu-thu__ck {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-top: 18px;
}

.phieu-thu__qr {
    flex: 0 0 auto;
    text-align: center;
}

.phieu-thu__qr img {
    display: block;
    width: 200px;
    height: 200px;
    image-rendering: pixelated;
    border: 1px solid #cccccc;
}

.phieu-thu__qr-chu {
    margin-top: 4px;
    font-size: 12px;
    color: #444444;
}

.phieu-thu__ck-chu {
    flex: 1 1 auto;
    min-width: 0;
}

.phieu-thu__ck-tieu-de {
    margin-bottom: 6px;
    font-weight: 700;
}

.phieu-thu__ck-ds {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 4px 10px;
    margin: 0;
}

.phieu-thu__ck-ds dt {
    font-weight: 400;
    color: #555555;
}

.phieu-thu__ck-ds dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.phieu-thu__nhan-manh {
    font-weight: 700;
}

.phieu-thu__chan {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding-top: 10px;
    border-top: 1px solid #cccccc;
    font-size: 13px;
    color: #333333;
}

/* ---------------------------------------------------------------------------------------------------
   8. Báo cáo (GĐ5). Màu biểu đồ khai báo ở đây (bao-cao.js đọc bằng getComputedStyle, không viết mã màu trong JS).
   Khối tối đặt sau khối sáng nên thắng khi data-bs-theme="dark".
   --------------------------------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
    --bc-thuc-thu: #115e59;
    --bc-chi-phi: #b4441b;
    --bc-luoi: #e6dccb;
    --bc-chu-truc: #5a5f58;
    --bc-chu-chinh: #1d2826;
    --bc-nen: var(--qlpt-be-mat);
}

[data-bs-theme="dark"] {
    --bc-thuc-thu: #6fd0c2;
    --bc-chi-phi: #f08a62;
    --bc-luoi: #33403e;
    --bc-chu-truc: #aab2ab;
    --bc-chu-chinh: #eee8dc;
    --bc-nen: var(--qlpt-be-mat);
}

/* Khung biểu đồ: chiều cao cố định để Chart.js (maintainAspectRatio = false) co giãn theo chiều rộng */
.bao-cao__bieu-do {
    position: relative;
    height: 280px;
}

@media (min-width: 768px) {
    .bao-cao__bieu-do {
        height: 340px;
    }
}

/* Bảng số: căn phải, chữ số đều nhau; cuộn ngang trong .table-responsive, không làm tràn trang */
.bao-cao__bang th,
.bao-cao__bang td {
    font-variant-numeric: tabular-nums;
}

.bao-cao__bang td,
.bao-cao__bang thead th.text-end {
    white-space: nowrap;
}

/* Ô màu nhận diện chuỗi ở tiêu đề cột bảng (cùng màu với cột trên biểu đồ) */
.bao-cao__o-mau {
    display: inline-block;
    width: .75rem;
    height: .75rem;
    margin-right: .35rem;
    vertical-align: -.05em;
    border-radius: 2px;
}

.bao-cao__o-mau--thuc-thu {
    background-color: var(--bc-thuc-thu);
}

.bao-cao__o-mau--chi-phi {
    background-color: var(--bc-chi-phi);
}

/* ---------------------------------------------------------------------------------------------------
   GĐ10. Trang hướng dẫn (/huong-dan): mục lục dạng chip, các bước có số lớn hổ phách + đường nối dọc, hỏi đáp bằng
   <details><summary> gốc (không JS). Màu chỉ qua biến --qlpt-* / --bs-*.
   --------------------------------------------------------------------------------------------------- */

/* Trang khách rộng hơn thẻ đăng nhập (420px) để đọc được nhiều chữ */
.khach-the--rong {
    max-width: 760px;
}

.huong-dan {
    display: flex;
    flex-direction: column;
    gap: var(--khoang-trang);
    min-width: 0;
    max-width: 56rem;
}

.huong-dan__muc {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-width: 0;
    /* Neo từ mục lục không bị thanh trên cố định che */
    scroll-margin-top: calc(var(--app-topbar-cao) + 1rem);
}

.huong-dan__muc .phu-de-trang {
    margin-top: 0;
}

.huong-dan__tieu-de {
    font-size: 1.4rem;
}

.huong-dan__ds {
    padding-left: 1.25rem;
}

.huong-dan__ds > li + li {
    margin-top: .5rem;
}

.huong-dan__nhom {
    margin: 1rem 0 0;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

/* Các bước: ô tròn hổ phách chứa số lớn, đường nối dọc xuống bước kế, card viền trên bên phải */
.buoc-huong-dan {
    margin: 0;
    padding: 0;
    list-style: none;
}

.buoc-huong-dan__muc {
    position: relative;
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    column-gap: 1rem;
    padding-bottom: 1rem;
}

.buoc-huong-dan__muc:last-child {
    padding-bottom: 0;
}

.buoc-huong-dan__muc:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 2.75rem;
    bottom: 0;
    left: calc(1.375rem - 1px);
    border-left: 2px solid var(--bs-border-color);
}

.buoc-huong-dan__so {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background-color: var(--qlpt-nhan);
    color: var(--qlpt-tren-nhan);
    font-size: 1.2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.buoc-huong-dan__the {
    min-width: 0;
}

.buoc-huong-dan__the p {
    margin: .5rem 0 0;
}

.buoc-huong-dan__the .buoc-huong-dan__ai {
    margin-top: .375rem;
}

.buoc-huong-dan__ghi {
    display: flex;
    align-items: center;
    gap: .375rem;
    color: var(--bs-secondary-color);
}

.buoc-huong-dan__nut {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}

@media (max-width: 575.98px) {
    .buoc-huong-dan__muc {
        grid-template-columns: 2.25rem minmax(0, 1fr);
        column-gap: .625rem;
    }

    .buoc-huong-dan__muc:not(:last-child)::before {
        top: 2.25rem;
        left: calc(1.125rem - 1px);
    }

    .buoc-huong-dan__so {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1rem;
    }
}

/* Hỏi đáp: <details><summary>, vùng chạm >= 48px, mũi tên xoay khi mở, focus dùng quy tắc chung của summary */
.hoi-dap {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.hoi-dap details {
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background-color: var(--qlpt-be-mat);
}

.hoi-dap details[open] {
    border-color: var(--qlpt-primary-vien);
}

.hoi-dap summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 48px;
    padding: .625rem 1rem;
    border-radius: .75rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--bs-emphasis-color);
    cursor: pointer;
    list-style: none;
}

.hoi-dap summary::-webkit-details-marker {
    display: none;
}

.hoi-dap summary::after {
    content: "";
    flex: none;
    width: .55rem;
    height: .55rem;
    margin-right: .25rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .15s ease;
}

.hoi-dap details[open] > summary::after {
    transform: rotate(-135deg);
}

.hoi-dap summary:hover {
    background-color: var(--bs-tertiary-bg);
}

.hoi-dap__dap {
    padding: .25rem 1rem 1rem;
    border-top: 1px solid var(--bs-border-color);
    padding-top: .75rem;
}

.hoi-dap__dap > :last-child {
    margin-bottom: 0;
}

.hoi-dap__dap ul {
    padding-left: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
    .hoi-dap summary::after {
        transition: none;
    }
}

/* Trang khách rộng (hướng dẫn): thẻ ngoài đã là card nên card bước / câu hỏi bên trong bỏ bóng, dùng viền mảnh (tránh hộp lồng hộp) */
.khach-the--rong .card .card,
.khach-the--rong .buoc-huong-dan__the,
.khach-the--rong .huong-dan .card {
    box-shadow: none;
    border: 1px solid var(--bs-border-color);
    border-top: 4px solid var(--the-mau);
}

.khach-the--rong .hoi-dap details {
    background-color: transparent;
}