body {
    background-color: #f4f6f9;
}

/* ===== Trang đăng nhập ===== */
.login-body {
    background: linear-gradient(135deg, #0d6efd 0%, #0a3d91 100%);
    min-height: 100vh;
}

.login-wrapper {
    min-height: 100vh;
}

.login-card {
    width: 100%;
    max-width: 420px;
    border-radius: 1rem;
}

/* ===== Thẻ thống kê Dashboard ===== */
.stat-card {
    border-radius: 1rem;
}

.stat-card-link {
    transition: transform .15s ease, box-shadow .15s ease;
    cursor: pointer;
}

.stat-card-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.12) !important;
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: .5rem;
}

.stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
}

.stat-label {
    color: #6c757d;
    font-size: .8rem;
}

/* =========================================================================
   Trang vừa đúng một màn hình
   -------------------------------------------------------------------------
   Trang bản đồ không được có thanh cuộn dọc. Cách làm: biến thân trang thành
   một cột co giãn cao đúng bằng màn hình, rồi để một phần tử duy nhất
   (.md-co-gian) nuốt hết chỗ còn thừa.

   Vì sao không đặt chiều cao bản đồ bằng vh: thanh điều hướng, thanh công cụ
   và hai hàng chú giải cao bao nhiêu là do cỡ chữ và bề rộng cửa sổ quyết định,
   không phải hằng số. Mọi con số vh đoán trước đều sai ở một cỡ màn hình nào đó
   — hoặc thừa ra thanh cuộn, hoặc chừa một dải trống dưới đáy.

   dvh (dynamic viewport height) là để trên điện thoại: thanh địa chỉ của trình
   duyệt trượt ra/vào làm 100vh lớn hơn phần thực sự nhìn thấy.
   ========================================================================= */
body.trang-mot-man-hinh {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* min-height:0 là bắt buộc. Mặc định một flex item không co nhỏ hơn nội dung của nó,
   nên thiếu dòng này thì bản đồ vẫn đẩy trang dài ra đúng như cũ. */
body.trang-mot-man-hinh > main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Chân trang chỉ có dòng bản quyền, không đáng đổi lấy một thanh cuộn. */
body.trang-mot-man-hinh > footer {
    display: none;
}

/* Mọi khối trong <main> giữ nguyên chiều cao tự nhiên của nó... */
body.trang-mot-man-hinh > main > * {
    flex: 0 0 auto;
}

/* ...trừ đúng một khối được đánh dấu .md-co-gian: nó nuốt hết chỗ còn thừa,
   và cũng là khối duy nhất chịu co lại khi khung chi tiết mở ra. */
body.trang-mot-man-hinh .md-co-gian {
    flex: 1 1 auto;
    min-height: 180px;   /* cửa sổ quá thấp thì thà cắt bớt chú giải còn hơn để bản đồ biến mất */
    display: flex;
}

/* ===== Bản đồ ===== */
.map-container {
    flex: 1 1 auto;
    height: 100%;
    width: 100%;
    border-radius: .5rem;
    overflow: hidden;
}

.legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* ===== Nhãn tên tủ hiện thường trực trên bản đồ (map.js: bindTooltip) ===== */
.leaflet-tooltip.nhan-tu {
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: .7rem;
    font-weight: 600;
    color: #1f2933;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
    white-space: nowrap;
    pointer-events: none;   /* bấm xuyên qua nhãn để vẫn chọn được marker bên dưới */
}
/* Bỏ mũi nhọn mặc định của tooltip Leaflet cho nhãn gọn. */
.leaflet-tooltip.nhan-tu::before {
    display: none;
}
/* Thu nhỏ xa -> ẩn nhãn (map.js gắn lớp này lên khung bản đồ theo mức phóng). */
.an-nhan-tu .leaflet-tooltip.nhan-tu {
    display: none;
}

/* Mẫu đường cáp trong chú giải: nét liền (cáp treo) / nét đứt (cáp ngầm). */
.legend-line {
    display: inline-block;
    width: 22px;
    height: 0;
    border-top: 3px solid #e67e22;   /* cùng màu đường cáp trên bản đồ */
    vertical-align: middle;
}
.legend-line-dash {
    border-top-style: dashed;
}

/* ===== Thanh nhắc "Cài app ra màn hình chính" (pwa-install.js) ===== */
.pwa-nhac {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 2000;
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
    transform: translateY(120%);
    transition: transform .25s ease;
}
.pwa-nhac.hien {
    display: flex;
    transform: translateY(0);
}
.pwa-nhac-icon {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    flex: 0 0 auto;
}
.pwa-nhac-chu {
    flex: 1 1 auto;
    min-width: 0;
}
.pwa-nhac-tieude {
    font-weight: 600;
    font-size: .92rem;
}
.pwa-nhac-phu {
    font-size: .78rem;
    color: #6c757d;
}
.pwa-nhac-nut {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
}
@media (min-width: 768px) {
    .pwa-nhac {
        left: auto;
        right: 16px;
        bottom: 16px;
        max-width: 440px;
    }
}
@media print {
    .pwa-nhac { display: none !important; }
}

/* Biểu tượng bóng đèn (chỉ dùng ở chế độ "Chỉnh vị trí"). Bình thường đèn vẽ thành chấm
   tròn nhỏ trên canvas — xem nodeChamStyle() trong map.js. */
.marker-offline i,
.marker-on100 i,
.marker-dimmed i,
.marker-fault i,
.marker-off i {
    font-size: 1.05rem;
    text-shadow: 0 0 3px #fff, 0 0 3px #fff;
}

/* Mất kết nối - xám */
.marker-offline i {
    color: #6c757d;
}

/* Bật 100% - xanh dương */
.marker-on100 i {
    color: #0d6efd;
}

/* Đang tiết giảm năng lượng - xanh dương nhạt hơn */
.marker-dimmed i {
    color: #74b9ff;
}

/* Có kết nối, đang bật nhưng mất dòng (đèn không sáng) - vàng */
.marker-fault i {
    color: #f1c40f;
}

/* Có kết nối nhưng đã tắt (Cắt) - bình thường, màu tối để phân biệt với "mất kết nối" */
.marker-off i {
    color: #2c3e50;
}

/* Điểm Tủ điều khiển trên bản đồ - SVG tủ điện vẽ tay.
   Màu thân tủ do JavaScript quyết định theo trạng thái đóng/cắt (xem map.js). */
.marker-cabinet svg {
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.25));
}

/* Tủ vừa nhận lệnh nhưng thiết bị CHƯA báo trạng thái mới về.
   Marker đã đổi sang màu của lệnh vừa gửi, nhấp nháy để nói rõ: đây là điều mong đợi,
   chưa phải điều đã xác nhận. Hết nhấp nháy khi thiết bị báo về đúng chế độ đó. */
.marker-cabinet-pending svg {
    animation: cho-xac-nhan 1s ease-in-out infinite;
}

@keyframes cho-xac-nhan {
    0%, 100% { filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); opacity: 1; }
    50%      { filter: drop-shadow(0 0 6px #f1c40f); opacity: .65; }
}

/* Người dùng bật "giảm chuyển động" trong hệ điều hành thì không nhấp nháy nữa. */
@media (prefers-reduced-motion: reduce) {
    .marker-cabinet-pending svg {
        animation: none;
        filter: drop-shadow(0 0 5px #f1c40f);
    }
}

/* ===== Menu chuột phải dùng chung (Tủ / Đèn) ===== */
.scada-context-menu {
    position: fixed;
    /* Thấp hơn z-index của modal Bootstrap (1050-1055) để hộp thoại xác nhận / chi tiết
       luôn hiện TRÊN menu chuột phải, không bị menu che mất hoặc hiện ra phía sau. */
    z-index: 1040;
    background: #fff;
    border-radius: .5rem;
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.25);
    min-width: 220px;
    padding: .35rem 0;
    max-height: 70vh;
    overflow-y: auto;
}

.scada-context-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: .5rem .9rem;
    font-size: .9rem;
    color: #212529;
    cursor: pointer;
}

.scada-context-menu-item:hover:not(.disabled) {
    background-color: #f0f4ff;
}

.scada-context-menu-item.disabled {
    color: #adb5bd;
    cursor: default;
}

.scada-context-menu-sep {
    height: 1px;
    background: #e9ecef;
    margin: .3rem 0;
}

.cabinet-node-list {
    max-height: 220px;
    overflow-y: auto;
}

.cabinet-node-row {
    border-radius: .35rem;
    cursor: context-menu;
}

.cabinet-node-row:hover {
    background-color: #f8f9fa;
}

/* ===== Toast thông báo góc màn hình ===== */
.scada-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 3000;
    min-width: 240px;
    max-width: 360px;
    padding: .75rem 1rem;
    border-radius: .5rem;
    color: #fff;
    font-size: .9rem;
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.25);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}

.scada-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.scada-toast-success { background-color: #198754; }
.scada-toast-error { background-color: #dc3545; }

/* ===== Modal Chi tiết Tủ (4 khối theo đặc tả) ===== */
.cabinet-card-header {
    cursor: pointer;
}

.cabinet-section-title {
    font-weight: 700;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: .35rem;
    margin-top: 1.25rem;
    margin-bottom: .75rem;
    color: #0d6efd;
}

.cabinet-section-title:first-of-type {
    margin-top: 0;
}

.cabinet-info-box {
    background: #f8f9fa;
    border-radius: .5rem;
    padding: .5rem .75rem;
    height: 100%;
}

.cabinet-info-box .label {
    font-size: .75rem;
    color: #6c757d;
}

.cabinet-info-box .value {
    font-weight: 600;
}

/* ===== Khối "Lịch biểu hiện tại" trong hộp thoại đặt lịch =====
   Mỗi mốc là một viên: giờ in đậm, mũi tên, rồi việc sẽ xảy ra. Xếp ngang và tự xuống dòng,
   nên 5 mốc của tủ hay 9 mốc của đèn đều gọn trong vài dòng, không đẩy bảng nhập xuống dưới. */
.lich-khung {
    background: #f2f7fd;
    border: 1px solid rgba(42,120,214,.20);
    border-radius: .5rem;
    padding: .6rem .75rem;
}

.lich-tieu-de {
    font-size: .8rem;
    font-weight: 600;
    color: #1c5cab;
    margin-bottom: .5rem;
}

.lich-danh-sach {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.lich-moc {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1px solid rgba(11,11,11,.10);
    border-radius: 999px;
    padding: .18rem .6rem;
    font-size: .82rem;
    white-space: nowrap;
}

.lich-gio {
    font-weight: 700;
    color: #0b0b0b;
    /* Chữ số đều bề ngang thì cột giờ thẳng hàng dù là 1 hay 11. */
    font-variant-numeric: tabular-nums;
}

.lich-mo-ta { color: #52514e; }

.lich-chu-thich {
    font-size: .72rem;
    color: #6c757d;
    margin-top: .5rem;
}

/* =====================================================================
   BẢNG (dùng chung mọi trang): kẻ vạch dọc phân tách từng ô + căn giữa.

   Ô nào cần căn khác thì dùng lớp tiện ích của Bootstrap (.text-start /
   .text-end / .text-center) — các lớp đó có !important nên luôn thắng
   quy tắc ở đây (ví dụ cột nút thao tác đang dùng .text-end vẫn dạt phải).
   ===================================================================== */
.table > :not(caption) > * > th,
.table > :not(caption) > * > td {
    border-right: 1px solid #dee2e6;
    text-align: center;
    vertical-align: middle;
}
.table > :not(caption) > * > th:last-child,
.table > :not(caption) > * > td:last-child {
    border-right: 0;   /* mép phải bảng đã có viền, không kẻ thêm cho thừa */
}

/* Liên kết trong bảng: bỏ gạch chân cho bảng đỡ rối; vẫn giữ màu xanh để biết bấm được,
   và chỉ gạch chân khi rê chuột vào. */
.table a {
    text-decoration: none;
}
.table a:hover {
    text-decoration: underline;
}

@media print {
    /* In ra giấy: vạch dọc đậm hơn cho rõ. */
    .table > :not(caption) > * > th,
    .table > :not(caption) > * > td {
        border-right: 1px solid #999 !important;
    }
    .table > :not(caption) > * > th:last-child,
    .table > :not(caption) > * > td:last-child {
        border-right: 0 !important;
    }
}

/* ===== Mũi tên sắp xếp cột (table-sort.js) ===== */
.js-sort thead th .th-arrow {
    font-size: .75rem;
    color: #adb5bd;
    user-select: none;
}
.js-sort thead th[data-dir] .th-arrow {
    color: #0d6efd;   /* cột đang sắp: mũi tên đậm màu */
}
.js-sort thead th:hover {
    background-color: #eef2ff;
}

/* ===== Modal xác nhận gửi lệnh ===== */
.result-box {
    min-height: 1.2em;
}

/* ===== Phân tầng z-index cho các hộp thoại lồng nhau =====
   cabinetDetailModal (mặc định Bootstrap ~1055) là tầng gốc.
   nodeListModal mở TỪ TRONG cabinetDetailModal -> phải hiện TRÊN.
   confirmSendModal mở TỪ TRONG cả 2 cái trên (tầng xác nhận cuối) -> phải hiện TRÊN CÙNG.
   Bootstrap gán z-index giống nhau cho mọi modal theo mặc định nên cần ép riêng như dưới đây,
   không phụ thuộc modal nào được thêm vào HTML trước/sau. */
#nodeListModal {
    z-index: 1075;
}

#nodeScheduleModal, #nodesScheduleBulkModal {
    z-index: 1080;
}

#quickAddModal, #quickAddGroupModal {
    z-index: 1085;
}

#confirmSendModal {
    z-index: 1095;
}

/* Lớp phủ mờ (backdrop) của các modal mở sau cũng phải ăn theo, không thì vẫn bị modal gốc che dấu.
   Thứ tự lồng nhau tối đa: cabinetDetailModal(1055) -> nodeListModal(1075) ->
   nodeScheduleModal(1080) -> confirmSendModal(1095) */
.modal-backdrop ~ .modal-backdrop {
    z-index: 1070;
}

.modal-backdrop ~ .modal-backdrop ~ .modal-backdrop {
    z-index: 1078;
}

.modal-backdrop ~ .modal-backdrop ~ .modal-backdrop ~ .modal-backdrop {
    z-index: 1090;
}

/* =========================================================================
   Khung chi tiết dưới bản đồ
   -------------------------------------------------------------------------
   Mắt đọc từ trái sang phải theo đúng thứ tự người dùng cần:
   "cái gì" (định danh) -> "đang thế nào" (số liệu) -> "làm gì" (điều khiển).
   Không lồng bảng trong bảng. Số liệu quan trọng hiện dạng thẻ, đọc được từ xa
   khi đang giới thiệu cho khách.
   ========================================================================= */
.md-panel {
    position: relative;
    margin-top: .5rem;
    background: #fff;
    border: 1px solid rgba(11,11,11,.08);
    border-radius: .75rem;
    box-shadow: 0 2px 10px rgba(11,11,11,.06);
    overflow: hidden;
}

/* Vạch màu trạng thái ở mép trái, JS đổi background theo tủ. */
.md-stripe {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: #c3c2b7;
}

/* ---------- Đầu khung ---------- */
.md-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem .85rem .55rem 1.1rem;
    border-bottom: 1px solid rgba(11,11,11,.07);
    background: #fbfbfa;
}

.md-head-left { display: flex; align-items: center; gap: .6rem; min-width: 0; }

.md-avatar {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: #eef1f4;
    color: #52514e;
    font-size: .85rem;
}

.md-titles { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }

.md-name {
    font-weight: 650;
    font-size: .95rem;
    color: #0b0b0b;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.md-sub {
    font-size: .72rem;
    color: #898781;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Nhãn trạng thái: viền + chữ cùng màu, KHÔNG tô nền đặc. Nền đặc ở cỡ chữ này
   khiến chữ trắng trên xanh nhạt gần như không đọc được. */
.md-state {
    flex: 0 0 auto;
    font-size: .72rem;
    font-weight: 600;
    padding: .12rem .5rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    white-space: nowrap;
}

.md-head-right { display: flex; gap: .25rem; flex: 0 0 auto; }

.md-icon-btn {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border: 1px solid rgba(11,11,11,.12);
    border-radius: .4rem;
    background: #fff;
    color: #52514e;
    font-size: .75rem;
    cursor: pointer;
}
.md-icon-btn:hover { background: #f2f2f0; }

/* ---------- Thân khung: 3 cột ---------- */
.md-body {
    display: grid;
    grid-template-columns: minmax(220px, 1.1fr) minmax(230px, 1fr) minmax(260px, 1.2fr);
    max-height: 32vh;
    overflow-y: auto;
}

.md-col { padding: .7rem .85rem; min-width: 0; }
.md-col + .md-col { border-left: 1px solid rgba(11,11,11,.07); }
.md-col-info { padding-left: 1.1rem; }

@media (max-width: 1199.98px) {
    .md-body { grid-template-columns: 1fr 1fr; }
    .md-col-actions { grid-column: 1 / -1; border-left: 0; border-top: 1px solid rgba(11,11,11,.07); }
}
@media (max-width: 767.98px) {
    .md-body { grid-template-columns: 1fr; }
    .md-col + .md-col { border-left: 0; border-top: 1px solid rgba(11,11,11,.07); }
}

.md-section {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #898781;
    margin-bottom: .4rem;
}
.md-block + .md-block { margin-top: .8rem; }

/* ---------- Cột 1: danh sách nhãn / giá trị ---------- */
.md-list { display: flex; flex-direction: column; }

.md-row {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: .22rem 0;
    font-size: .78rem;
    border-bottom: 1px solid rgba(11,11,11,.05);
}
.md-row:last-child { border-bottom: 0; }

.md-key { color: #898781; white-space: nowrap; }
.md-val {
    font-weight: 600; color: #0b0b0b; text-align: right;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Cột 2: thẻ số liệu ---------- */
.md-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.md-tiles-2 { grid-template-columns: repeat(2, 1fr); }

.md-tile {
    background: #f7f8f9;
    border: 1px solid rgba(11,11,11,.06);
    border-radius: .5rem;
    padding: .4rem .45rem;
    text-align: center;
    min-width: 0;
}
.md-tile-name  { font-size: .66rem; color: #898781; text-transform: uppercase; letter-spacing: .03em; }
.md-tile-big   { font-size: 1rem; font-weight: 650; color: #0b0b0b; line-height: 1.2; }
/* Dòng dưới (dòng điện) đọc ngang hàng với dòng trên (điện áp): cùng cỡ chữ, cùng độ đậm.
   Cả hai đều là số đo người vận hành cần, không cái nào là chú thích của cái nào. */
.md-tile-small { font-size: 1rem; font-weight: 650; color: #0b0b0b; line-height: 1.2; }
.md-tile-unit  { font-size: .68rem; color: #898781; font-weight: 400; }

/* Thẻ nhấn mạnh: tổng điện năng, mức dim */
.md-hero {
    margin-top: .5rem;
    background: linear-gradient(180deg, #f2f7fd 0%, #eaf2fb 100%);
    border: 1px solid rgba(42,120,214,.18);
    border-radius: .5rem;
    padding: .45rem .6rem;
}
.md-hero-line { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.md-hero-name  { font-size: .7rem; color: #52514e; }
.md-hero-value { font-size: 1.15rem; font-weight: 650; color: #1c5cab; }

/* Thanh mức dim */
.md-bar { height: 6px; border-radius: 999px; background: #e1e0d9; overflow: hidden; margin-top: .35rem; }
.md-bar > span { display: block; height: 100%; background: #2a78d6; border-radius: 999px; }

/* ---------- Cột 3: điều khiển ---------- */
.md-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: .25rem; }
.md-seg .md-act {
    font-size: .72rem;
    padding: .28rem .2rem;
    border-radius: .4rem;
    border: 1px solid rgba(11,11,11,.14);
    background: #fff;
    color: #0b0b0b;
    cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.md-seg .md-act:hover { background: #f2f2f0; }

/* Chế độ tủ đang chạy: tô nền màu tương ứng để biết ngay đang ở đâu. */
.md-seg .md-act.dang-chay { color: #fff; border-color: transparent; font-weight: 600; }

.md-btns { display: flex; flex-wrap: wrap; gap: .3rem; }
.md-btns .md-act {
    font-size: .72rem;
    padding: .25rem .5rem;
    border-radius: .4rem;
    border: 1px solid rgba(11,11,11,.14);
    background: #fff;
    color: #0b0b0b;
    cursor: pointer;
}
.md-btns .md-act:hover { background: #f2f2f0; }
.md-act[disabled] { opacity: .55; cursor: default; }

/* Nút "Chỉ đường" là thẻ <a> (mở Google Maps) nhưng phải trông y hệt các nút tác vụ khác. */
.md-btns a.md-act {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.md-inline { display: flex; gap: .3rem; align-items: center; }
.md-inline select,
.md-rename input {
    font-size: .78rem; padding: .2rem .45rem;
    border: 1px solid rgba(11,11,11,.14); border-radius: .4rem;
    background: #fff; color: #0b0b0b;
}
.md-rename { display: flex; gap: .3rem; }
.md-rename input { flex: 1 1 auto; min-width: 0; }

.md-foot { font-size: .75rem; }
.md-foot:not(:empty) { padding: .4rem .85rem .5rem 1.1rem; }

/* ---------- Chế độ tối ---------- */
@media (prefers-color-scheme: dark) {
    .md-panel { background: #1a1a19; border-color: rgba(255,255,255,.1); }
    .md-head  { background: #202020; border-bottom-color: rgba(255,255,255,.08); }
    .md-name, .md-val, .md-tile-big, .md-tile-small { color: #fff; }
    .md-avatar { background: #2c2c2a; color: #c3c2b7; }
    .md-col + .md-col { border-left-color: rgba(255,255,255,.08); }
    .md-row { border-bottom-color: rgba(255,255,255,.06); }
    .md-tile { background: #202020; border-color: rgba(255,255,255,.07); }
    .md-icon-btn, .md-seg .md-act, .md-btns .md-act, .md-rename input, .md-inline select {
        background: #202020; color: #e8e8e6; border-color: rgba(255,255,255,.14);
    }
    .md-hero { background: #14273c; border-color: rgba(57,135,229,.35); }
    .md-hero-value { color: #86b6ef; }
    .md-bar { background: #2c2c2a; }
}

/* ===== Thẻ tủ điều khiển (trang Điều khiển) =====
   Thu gọn để mỗi hàng chứa được nhiều tủ hơn. Vẫn giữ vùng bấm đủ lớn cho ngón tay. */
.cabinet-card {
    border-radius: .6rem;
}

.cabinet-card-title {
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.2;
}

.cabinet-card .badge {
    font-size: .68rem;
    padding: .25em .45em;
}

.cabinet-phase-table {
    font-size: .78rem;
}

.cabinet-phase-table th,
.cabinet-phase-table td {
    padding: .15rem .3rem;
}

/* Trên điện thoại, 2 tủ mỗi hàng nên chữ phải nhỏ thêm một nấc để không vỡ. */
@media (max-width: 575.98px) {
    .cabinet-card-title { font-size: .85rem; }
    .cabinet-phase-table { font-size: .72rem; }
}

/* ===== Thanh điều hướng =====
   Có tới 9 mục menu cộng thương hiệu và khu vực tài khoản. Với cỡ chữ mặc định của Bootstrap
   (1rem) và khoảng đệm rộng, tổng chiều rộng vượt quá màn hình nên chữ bị ngắt xuống dòng
   giữa chừng ("Tổng / quan", "Điều / khiển"). Thu nhỏ chữ, thu hẹp khoảng đệm và cấm ngắt dòng. */
.navbar-brand.fw-bold {
    font-size: 1.05rem;
}

.navbar .nav-link {
    font-size: .875rem;
    padding-left: .55rem;
    padding-right: .55rem;
    white-space: nowrap;   /* thà tràn ngang còn hơn vỡ chữ làm hai dòng */
}

.navbar .nav-link i {
    font-size: .85em;      /* biểu tượng theo cỡ chữ, không lấn át nhãn */
}

/* Khu vực tài khoản (tên đăng nhập + nút Đăng xuất) cũng phải gọn tương ứng. */
.navbar .navbar-account,
.navbar .btn {
    font-size: .875rem;
    white-space: nowrap;
}

/* Vẫn ở dạng thanh ngang nhưng màn hình hẹp (1200px-1499px): siết thêm một nấc.
   Dưới 1200px thanh đã thu về nút menu (navbar-expand-xl) nên không cần xử lý. */
@media (min-width: 1200px) and (max-width: 1499px) {
    .navbar .nav-link {
        font-size: .8rem;
        padding-left: .4rem;
        padding-right: .4rem;
    }

    .navbar-brand.fw-bold {
        font-size: .95rem;
    }
}

/* ===== Responsive tinh chỉnh cho điện thoại ===== */
@media (max-width: 576px) {
    .stat-value {
        font-size: 1.3rem;
    }

    .navbar-brand {
        font-size: 1rem;
    }

    .table-responsive {
        font-size: .85rem;
    }
}