/* ==========================================================================

   Neumorphism theme cho Django admin

   Nguyên tắc: thẻ cùng màu nền, nổi khối bằng cặp bóng sáng/tối đối xứng,

   không dùng đường viền. Ô nhập liệu thì lõm (inset).

   ========================================================================== */



/* THUỘC TÍNH `hidden` PHẢI LUÔN THẮNG.

   ---------------------------------------------------------------------------

   Trình duyệt giấu phần tử có `hidden` bằng một luật `[hidden] { display:

   none }` ở mức yếu nhất. Bất kỳ luật nào của mình đặt `display` - mà ở giao

   diện này thì nhan nhản `display: flex` - đều nặng ký hơn và ĐÈ LÊN nó. Kết

   quả: JavaScript đặt `el.hidden = true` mà phần tử vẫn hiện, không báo lỗi

   gì, và đọc lại mã JS thì thấy hoàn toàn hợp lý.



   Đã cắn đúng ba chỗ: nút "Đăng nhập bằng Face ID" hiện trên cả máy tính

   Windows dù JS đã giấu, nút bật/tắt Face ID trong mục Cá nhân cũng vậy, và

   nút bật thông báo đẩy hiện trên máy không đẩy được. Dấu vết nhận ra lỗi:

   chữ "HOẶC" cạnh nút thì biến mất đúng như mong đợi - vì luật của nó không

   đặt `display` - chỉ riêng cái nút là trơ ra.



   Đặt ở đây vì neumorphism.css nạp trên MỌI trang quản trị, kể cả trang đăng

   nhập. Vá riêng từng nút thì cái nút thứ tư thêm sau lại dính lại y vậy. */

[hidden] { display: none !important; }



:root,

html[data-theme="light"] {

    --nm-bg: #e9edf2;

    --nm-surface: #eef1f6;

    --nm-light: #ffffff;

    --nm-dark: #c5cedb;



    --nm-ink: #1f2a3a;

    --nm-ink-soft: #64748b;

    --nm-accent: #2563eb;

    --nm-accent-deep: #1d4ed8;

    /* Ba màu trạng thái này gần như luôn dùng làm MÀU CHỮ: "Đạt", "Không

       đạt", "Quá hạn", "Mất kết nối", "Tồn thiếu"… nên phải đọc được trên

       nền, không chỉ là "nhìn ra màu gì".



       Bản đầu lấy thẳng bảng màu Tailwind 600 (#16a34a, #d97706) - đẹp trên

       nền trắng tinh, nhưng nền ở đây là #e9edf2 xám nhạt nên tương phản chỉ

       còn 2.80 và 2.71, dưới cả ngưỡng 3:1 của chữ to. Chữ "Đạt" mờ tịt mà

       nhìn qua vẫn tưởng bình thường.



       Nay hạ độ sáng cho tới khi vừa chạm 4.5 (ngưỡng chữ thường), GIỮ NGUYÊN

       tông màu - chỉ đậm hơn chứ không đổi sang màu khác, để không ai phải

       học lại bảng màu. Xanh lá 36%→27%, cam 44%→32% độ sáng. */

    --nm-green: #117b38;   /* tương phản 4.59 trên --nm-bg */

    --nm-amber: #9d5604;   /* tương phản 4.72 */

    --nm-red: #dc2626;     /* 4.11 - đạt ngưỡng 3:1 của chữ đậm, giữ nguyên */



    /* Mặt đĩa nút giữa thanh đáy ("Hỏi AI") và bóng của nó.

       Phải là token riêng chứ không dùng lại --nm-light: ở nền tối, đĩa KHÔNG
       được tối theo. Ba logo xoay trong đĩa có nền trong suốt, mà logo EVN
       mực tối - đo ra chỉ 7% điểm ảnh còn tách được khỏi đĩa #383e4c, tức là
       biến mất. Đĩa sáng thì EVN đạt 93%.

       Nền tối vì thế chỉ LÀM DỊU đĩa chứ không đảo màu: #c5cedb còn tương
       phản 8.44 với thanh (vẫn thấy rõ là một đĩa nổi) mà ba logo vẫn giữ
       được độ tách gần như cũ - EVN 74%, bảo trì 27%, AI 14%. */
    --nm-nut-giua: #ffffff;
    --nm-nut-giua-bong: 0 6px 16px rgba(31, 42, 58, 0.26);

    --nm-r: 18px;

    --nm-r-sm: 12px;



    --nm-out: 6px 6px 14px var(--nm-dark), -6px -6px 14px var(--nm-light);

    --nm-out-sm: 3px 3px 7px var(--nm-dark), -3px -3px 7px var(--nm-light);

    --nm-in: inset 4px 4px 9px var(--nm-dark), inset -4px -4px 9px var(--nm-light);

    --nm-in-sm: inset 2px 2px 5px var(--nm-dark), inset -2px -2px 5px var(--nm-light);



    /* Ánh xạ sang biến của Django admin */

    --primary: var(--nm-accent);

    --secondary: var(--nm-accent);

    --accent: var(--nm-accent);

    --primary-fg: #ffffff;

    --body-fg: var(--nm-ink);

    --body-bg: var(--nm-bg);

    --body-quiet-color: var(--nm-ink-soft);

    --body-loud-color: var(--nm-ink);

    --header-color: var(--nm-ink);

    --header-branding-color: var(--nm-accent);

    --header-bg: var(--nm-bg);

    --header-link-color: var(--nm-ink);

    --breadcrumbs-fg: var(--nm-ink-soft);

    --breadcrumbs-link-fg: var(--nm-accent);

    --breadcrumbs-bg: var(--nm-bg);

    --link-fg: var(--nm-accent);

    --link-hover-color: var(--nm-accent-deep);

    --link-selected-fg: var(--nm-accent-deep);

    --hairline-color: transparent;

    --border-color: transparent;

    --button-fg: #ffffff;

    --button-bg: var(--nm-bg);

    --button-hover-bg: var(--nm-bg);

    --default-button-bg: var(--nm-accent);

    --default-button-hover-bg: var(--nm-accent-deep);

    --close-button-bg: var(--nm-bg);

    --close-button-hover-bg: var(--nm-bg);

    --delete-button-bg: var(--nm-red);

    --delete-button-hover-bg: #b91c1c;

    --object-tools-bg: var(--nm-bg);

    --object-tools-fg: var(--nm-ink);

    --object-tools-hover-bg: var(--nm-bg);

    --darkened-bg: var(--nm-bg);

    --selected-bg: #dfe5ee;

    --selected-row: #dbe6fb;

    --message-success-bg: #dcfce7;

    --message-warning-bg: #fef3c7;

    --message-error-bg: #fee2e2;

}



/* Biến thể tối: giữ nguyên ngôn ngữ neumorphism, đổi bảng màu */

html[data-theme="dark"] {

    --nm-bg: #2a2f3a;

    --nm-surface: #2f3542;

    --nm-light: #383e4c;

    --nm-dark: #1d212a;



    --nm-ink: #e8ecf3;

    --nm-ink-soft: #9aa5b8;

    --nm-accent: #60a5fa;

    --nm-accent-deep: #93c5fd;



    /* Đỏ bản nền sáng (#dc2626) đặt trên nền tối chỉ được tương phản 2.78 -

       dưới cả ngưỡng 3:1 của chữ to, đọc rất mệt. Mà --nm-red là MÀU CHỮ ở

       khoảng 25 chỗ khắp ứng dụng: quá hạn, trượt, mất kết nối, nút xoá…

       Khai lại nhạt hơn cho nền tối, đúng như theme vẫn làm với --nm-accent.



       --delete-button-bg trỏ vào biến này và dùng nó làm NỀN, nhưng nền tối

       đã đặt --button-fg: #10131a (chữ sẫm) nên nền đỏ nhạt vẫn đọc tốt.



       Xanh lá và cam cũng vậy: bản nền sáng đặt trên nền tối chỉ được 4.07 và

       4.21. Nâng độ sáng cho tới khi đủ 4.5 trên tấm SÁNG NHẤT của giao diện

       tối (--nm-light #383e4c), không phải trên --nm-bg: chọn vừa đủ cho nền

       chính rồi đặt lên tấm sáng hơn là tụt xuống dưới ngưỡng mà không ai đo

       lại. */

    /* Xem giải thích ở khối :root. Đĩa chỉ DỊU đi, KHÔNG tối
       theo: logo EVN mực tối sẽ mất hút trên đĩa tối - đo ra chỉ
       còn 7% điểm ảnh tách được khỏi nền. Bóng đậm hơn vì bóng
       nhạt đặt trên thanh tối thì không thấy gì. */
    --nm-nut-giua: #c5cedb;
    --nm-nut-giua-bong: 0 6px 18px rgba(0, 0, 0, 0.45);

    --nm-red: #f87171;

    --nm-green: #1ac258;   /* 5.68 trên --nm-bg, 4.54 trên --nm-light */

    --nm-amber: #f98f14;   /* 5.73 trên --nm-bg, 4.57 trên --nm-light */



    /* ===== PHẢI KHAI LẠI BIẾN CỦA DJANGO Ở ĐÂY =====

     *

     * Khối `:root` bên trên đã ánh xạ hết biến của Django admin sang bảng màu

     * neumorphism, và vì biến CSS giải nghĩa lúc DÙNG nên chúng tự đổi theo

     * `--nm-*` khi sang nền tối. Lẽ ra là đủ.

     *

     * Nhưng `dark_mode.css` của Django khai LẠI một loạt biến đó ngay trên

     * `html[data-theme="dark"]` - độ ưu tiên (0,1,1) nặng hơn `:root` (0,0,1),

     * mà độ ưu tiên thì thắng thứ tự nạp. Nên ở nền tối, bảng màu của Django

     * giành lại quyền: --body-bg thành #121212, --darkened-bg thành #212121.

     *

     * Hậu quả nhìn thấy: nền trang vẫn xám xanh (vì html/body có

     * `background: var(--nm-bg) !important`) nhưng BẢNG DỮ LIỆU, các mục

     * thanh bên và vài mảng khác thành ĐEN KỊT - đen không đều, lỗ chỗ giữa

     * nền xám. Đúng lỗi đã gặp.

     *

     * Khai lại đúng những biến Django động vào, trỏ về `--nm-*` như `:root`.

     * KHÔNG chép cả khối `:root`: chép thừa thì lần sau sửa `:root` phải nhớ

     * sửa cả đây, mà chẳng ai nhớ.

     *

     * Khối `@media (prefers-color-scheme)` bên dưới KHÔNG cần mấy dòng này:

     * ở đó Django dùng `:root` trần, cùng độ ưu tiên với `:root` của mình

     * nhưng nạp trước, nên mình thắng sẵn. */

    --primary: var(--nm-accent);

    --body-fg: var(--nm-ink);

    --body-bg: var(--nm-bg);

    --body-quiet-color: var(--nm-ink-soft);

    --body-medium-color: var(--nm-ink-soft);

    --body-loud-color: var(--nm-ink);

    --breadcrumbs-link-fg: var(--nm-accent);

    --breadcrumbs-bg: var(--nm-bg);

    --link-fg: var(--nm-accent);

    --link-hover-color: var(--nm-accent-deep);

    --link-selected-fg: var(--nm-accent-deep);

    --hairline-color: transparent;

    --border-color: transparent;

    --error-fg: var(--nm-red);

    --darkened-bg: var(--nm-bg);

    --close-button-bg: var(--nm-bg);

    --close-button-hover-bg: var(--nm-bg);



    --selected-bg: #333a48;

    --selected-row: #35415a;

    --message-success-bg: #14532d;

    --message-warning-bg: #713f12;

    --message-error-bg: #7f1d1d;

    --primary-fg: #10131a;

    --button-fg: #10131a;

}



@media (prefers-color-scheme: dark) {

    html:not([data-theme="light"]) {

        --nm-bg: #2a2f3a;

        --nm-surface: #2f3542;

        --nm-light: #383e4c;

        --nm-dark: #1d212a;



        --nm-ink: #e8ecf3;

        --nm-ink-soft: #9aa5b8;

        --nm-accent: #60a5fa;

        --nm-accent-deep: #93c5fd;

        /* Xem giải thích ở khối html[data-theme="dark"] bên trên. */

        /* Xem giải thích ở khối :root. Đĩa chỉ DỊU đi, KHÔNG tối
           theo: logo EVN mực tối sẽ mất hút trên đĩa tối - đo ra chỉ
           còn 7% điểm ảnh tách được khỏi nền. Bóng đậm hơn vì bóng
           nhạt đặt trên thanh tối thì không thấy gì. */
        --nm-nut-giua: #c5cedb;
        --nm-nut-giua-bong: 0 6px 18px rgba(0, 0, 0, 0.45);

        --nm-red: #f87171;

        --nm-green: #1ac258;

        --nm-amber: #f98f14;



        --selected-bg: #333a48;

        --selected-row: #35415a;

        --primary-fg: #10131a;

        --button-fg: #10131a;

    }

}



/* --- Nền chung ---------------------------------------------------------- */

html,

body {

    background: var(--nm-bg) !important;

    color: var(--nm-ink);

    font-family: "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif;

    -webkit-font-smoothing: antialiased;

}



#container {

    background: var(--nm-bg);

}



a:link,

a:visited {

    color: var(--nm-accent);

}



/* --- Header ------------------------------------------------------------- */

#header {

    background: var(--nm-bg) !important;

    color: var(--nm-ink) !important;

    box-shadow: var(--nm-out);

    border-radius: var(--nm-r);

    margin: 16px 20px 8px;

    padding: 14px 22px;

    border: 0;

}



#branding {

    display: flex;

    align-items: center;

}



.nm-brand {

    display: flex;

    align-items: center;

    gap: 12px;

}



/* Logo nền trong suốt nên để nguyên, không bọc khung màu. */

.nm-brand-logo {

    display: block;

    height: 46px;

    width: auto;

}



#branding h1,

#branding h1 a:link,

#branding h1 a:visited {

    color: var(--nm-ink);

    font-weight: 700;

    text-decoration: none;

}



#user-tools {

    color: var(--nm-ink-soft);

    font-size: 12.5px;

}



#user-tools a,

#logout-form button {

    color: var(--nm-ink) !important;

    border: 0 !important;

    background: var(--nm-bg);

    box-shadow: var(--nm-out-sm);

    border-radius: 10px;

    padding: 6px 12px;

    text-decoration: none;

}



#user-tools a:hover,

#logout-form button:hover {

    color: var(--nm-accent) !important;

    box-shadow: var(--nm-in-sm);

}



/* --- Breadcrumbs -------------------------------------------------------- */

div.breadcrumbs {

    background: var(--nm-bg);

    color: var(--nm-ink-soft);

    box-shadow: var(--nm-in-sm);

    border-radius: var(--nm-r-sm);

    margin: 0 20px 14px;

    padding: 10px 18px;

    border: 0;

    font-size: 13px;

}



/* --- Sidebar ------------------------------------------------------------ */

#nav-sidebar {

    background: var(--nm-bg);

    border: 0 !important;

    padding: 8px 10px 20px;

}



#nav-sidebar .module {

    background: transparent;

    box-shadow: none;

    padding: 0;

    margin-bottom: 18px;

}



#nav-sidebar .module caption,

#nav-sidebar .module th[scope="row"] a,

#nav-sidebar caption a {

    background: transparent !important;

    color: var(--nm-ink-soft) !important;

    font-size: 11px;

    letter-spacing: 0.09em;

    text-transform: uppercase;

    font-weight: 600;

    box-shadow: none;

}



#nav-sidebar th,

#nav-sidebar td {

    background: transparent;

    border: 0;

    padding: 4px 2px;

}



#nav-sidebar a {

    display: block;

    background: var(--nm-bg);

    box-shadow: var(--nm-out-sm);

    border-radius: var(--nm-r-sm);

    padding: 11px 14px;

    color: var(--nm-ink) !important;

    font-size: 13.5px;

    font-weight: 500;

    text-decoration: none;

    transition: box-shadow 0.18s ease;

}



#nav-sidebar a:hover {

    box-shadow: var(--nm-in-sm);

    color: var(--nm-accent) !important;

}



#nav-sidebar .current-model a,

#nav-sidebar tr.current-model a {

    box-shadow: var(--nm-in);

    color: var(--nm-accent) !important;

    font-weight: 600;

}



#nav-filter {

    background: var(--nm-bg);

    box-shadow: var(--nm-in-sm);

    border: 0;

    border-radius: 10px;

    padding: 9px 12px;

    color: var(--nm-ink);

    width: calc(100% - 4px);

}



.toggle-nav-sidebar {

    background: var(--nm-bg);

    border: 0;

    color: var(--nm-ink-soft);

    box-shadow: var(--nm-out-sm);

}



/* --- Khối nội dung ------------------------------------------------------ */

#content {

    padding: 8px 20px 32px;

}



.module {

    background: var(--nm-bg);

    box-shadow: var(--nm-out);

    border-radius: var(--nm-r);

    border: 0;

    padding: 4px;

    margin-bottom: 22px;

    overflow: hidden;

}



.module > h2,

.module caption,

.inline-group h2 {

    background: transparent !important;

    color: var(--nm-ink) !important;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 0.01em;

    padding: 16px 18px 10px;

    border: 0;

    text-transform: none;

}



.module h3 {

    color: var(--nm-ink-soft);

}



#content h1,

#content-main > h1 {

    color: var(--nm-ink);

    font-weight: 700;

}



/* --- Bảng dữ liệu ------------------------------------------------------- */

#changelist table,

.module table {

    background: transparent;

    border-collapse: separate;

    border-spacing: 0;

}



thead th,

thead th.sorted,

#changelist table thead th {

    background: transparent !important;

    color: var(--nm-ink-soft) !important;

    font-size: 11.5px;

    font-weight: 600;

    letter-spacing: 0.05em;

    text-transform: uppercase;

    border: 0 !important;

    border-bottom: 1px solid rgba(148, 163, 184, 0.25) !important;

    padding: 12px 14px;

}



thead th a:link,

thead th a:visited {

    color: var(--nm-ink-soft);

}



#changelist tbody td,

#changelist tbody th,

.module tbody td,

.module tbody th {

    background: transparent;

    border: 0;

    border-bottom: 1px solid rgba(148, 163, 184, 0.16);

    padding: 13px 14px;

    font-size: 13.5px;

    color: var(--nm-ink);

    vertical-align: middle;

}



#changelist tbody tr:hover > td,

#changelist tbody tr:hover > th {

    background: var(--selected-bg);

}



#changelist tbody tr.selected > td,

#changelist tbody tr.selected > th {

    background: var(--selected-row);

}



/* Bỏ kiểu sọc ngựa vằn mặc định cho phẳng, sạch */

#changelist tbody tr:nth-child(odd) > td,

#changelist tbody tr:nth-child(odd) > th {

    background-color: transparent;

}



/* --- Bộ lọc bên phải ---------------------------------------------------- */

#changelist-filter {

    background: var(--nm-bg);

    box-shadow: var(--nm-out);

    border-radius: var(--nm-r);

    border: 0;

    padding: 6px 4px 14px;

}



#changelist-filter h2 {

    background: transparent;

    color: var(--nm-ink);

    border: 0;

    font-size: 13px;

    font-weight: 700;

    padding: 14px 16px 8px;

}



#changelist-filter h3 {

    color: var(--nm-ink-soft);

    font-size: 12px;

    padding: 0 16px;

}



#changelist-filter li {

    padding: 2px 10px;

}



#changelist-filter a {

    display: block;

    color: var(--nm-ink);

    border-radius: 9px;

    padding: 7px 11px;

    font-size: 13px;

    text-decoration: none;

}



#changelist-filter a:hover {

    box-shadow: var(--nm-out-sm);

}



#changelist-filter li.selected {

    border-left: 0;

    padding-left: 10px;

}



#changelist-filter li.selected a {

    box-shadow: var(--nm-in-sm);

    color: var(--nm-accent);

    font-weight: 600;

}



/* --- Thanh tìm kiếm ----------------------------------------------------- */

#toolbar {

    background: transparent;

    border: 0;

    padding: 12px 4px;

}



#toolbar form#changelist-search {

    display: flex;

    align-items: center;

    gap: 10px;

}



#toolbar #searchbar {

    background: var(--nm-bg);

    box-shadow: var(--nm-in);

    border: 0 !important;

    border-radius: 14px;

    padding: 12px 18px;

    font-size: 13.5px;

    color: var(--nm-ink);

    min-width: 280px;

}



#toolbar #searchbar:focus {

    outline: none;

    box-shadow: var(--nm-in), 0 0 0 2px rgba(37, 99, 235, 0.25);

}



#changelist-search .quiet,

#changelist-search small {

    color: var(--nm-ink-soft);

}



/* --- Form input --------------------------------------------------------- */

input[type="text"],

input[type="password"],

input[type="email"],

input[type="url"],

input[type="number"],

input[type="tel"],

input[type="date"],

input[type="time"],

textarea,

select,

.vTextField,

.vLargeTextField {

    background: var(--nm-bg);

    color: var(--nm-ink);

    border: 0 !important;

    border-radius: var(--nm-r-sm);

    box-shadow: var(--nm-in-sm);

    padding: 10px 14px;

}



/* Django base.css đặt select { height: 1.875rem } tức 30px cứng. Cộng thêm

   padding 10px trên dưới ở khối trên thì chỗ cho chữ chỉ còn 10px, chữ bị

   cắt mất nửa dưới. Trả height về auto để padding + line-height tự quyết.

   (Dưới 1024px thì responsive.css của Django tự lo, không đụng tới.) */

select {

    height: auto;

    min-height: 2.5rem;

    /* Phải là `normal`, không đặt số. Chữ Việt chồng dấu (ệ, ộ, ạ, ữ) cao

       hơn hộp dòng do số nhân tạo ra, mà hộp chữ bên trong <select> thì

       cắt phần thừa - đặt 1.4 là mất chân dấu. */

    line-height: normal;

    padding-block: 9px;

    /* Tên dài như "Nhiên Liệu — Nước thô" không được đẩy các nút +/✎/✕

       cạnh ô ra khỏi hàng. */

    max-width: 100%;

}



input[type="text"]:focus,

input[type="password"]:focus,

input[type="email"]:focus,

input[type="number"]:focus,

textarea:focus,

select:focus,

.vTextField:focus {

    outline: none;

    box-shadow: var(--nm-in-sm), 0 0 0 2px rgba(37, 99, 235, 0.25);

}



.aligned label {

    color: var(--nm-ink-soft);

    font-weight: 600;

    font-size: 12.5px;

}



fieldset.module {

    padding-bottom: 10px;

}



.form-row {

    border: 0 !important;

    border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important;

    padding: 14px 18px;

}



.form-row:last-child {

    border-bottom: 0 !important;

}



.help,

.helptext,

p.help {

    color: var(--nm-ink-soft);

    font-size: 12px;

}



/* --- Nút ---------------------------------------------------------------- */

.button,

input[type="submit"],

input[type="button"],

.submit-row input,

.submit-row a,

a.button {

    background: var(--nm-bg);

    color: var(--nm-ink);

    border: 0;

    border-radius: var(--nm-r-sm);

    box-shadow: var(--nm-out-sm);

    padding: 10px 18px;

    font-weight: 600;

    font-size: 13px;

    text-decoration: none;

    transition: box-shadow 0.16s ease, transform 0.16s ease;

}



.button:hover,

input[type="submit"]:hover,

.submit-row input:hover,

a.button:hover {

    box-shadow: var(--nm-out);

}



.button:active,

input[type="submit"]:active,

.submit-row input:active {

    box-shadow: var(--nm-in-sm);

    transform: translateY(1px);

}



.button.default,

input[type="submit"].default,

.submit-row input.default {

    background: var(--nm-accent);

    color: #fff;

    box-shadow: var(--nm-out-sm);

}



.button.default:hover,

input[type="submit"].default:hover,

.submit-row input.default:hover {

    background: var(--nm-accent-deep);

}



.deletelink,

a.deletelink:link,

a.deletelink:visited {

    background: var(--nm-bg) !important;

    color: var(--nm-red) !important;

    box-shadow: var(--nm-out-sm);

    border-radius: var(--nm-r-sm);

}



.submit-row {

    background: var(--nm-bg);

    box-shadow: var(--nm-out);

    border: 0;

    border-radius: var(--nm-r);

    padding: 16px 18px;

    margin-top: 20px;

}



.object-tools a:link,

.object-tools a:visited,

.object-tools a {

    background: var(--nm-bg);

    color: var(--nm-ink);

    box-shadow: var(--nm-out-sm);

    border-radius: 999px;

    padding: 9px 18px;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 0.02em;

    text-transform: none;

}



.object-tools a:hover {

    box-shadow: var(--nm-in-sm);

    color: var(--nm-accent);

}



/* --- Action bar --------------------------------------------------------- */

#changelist .actions {

    background: var(--nm-bg);

    box-shadow: var(--nm-in-sm);

    border: 0;

    border-radius: var(--nm-r-sm);

    margin: 6px 4px 12px;

    padding: 10px 14px;

    color: var(--nm-ink-soft);

}



/* --- Thông báo ---------------------------------------------------------- */

ul.messagelist li {

    background: var(--nm-bg);

    background-image: none;  /* tắt icon dấu tích lặp của Django admin */

    box-shadow: var(--nm-out-sm);

    border-radius: var(--nm-r-sm);

    color: var(--nm-ink);

    padding: 13px 18px;

    margin-bottom: 10px;

    font-size: 13.5px;

}



/* .success/.warning/.error của Django admin có background-image nên phải

   tắt lại ở đúng độ ưu tiên này, nếu không icon sẽ tile kín cả thanh. */

ul.messagelist li.success {

    background-image: none;

    border-left: 4px solid var(--nm-green);

}



ul.messagelist li.warning {

    background-image: none;

    border-left: 4px solid var(--nm-amber);

}



ul.messagelist li.error {

    background-image: none;

    border-left: 4px solid var(--nm-red);

}



/* --- Phân trang --------------------------------------------------------- */

.paginator {

    background: transparent;

    border: 0;

    padding: 16px 14px;

    color: var(--nm-ink-soft);

    font-size: 13px;

}



.paginator a:link,

.paginator a:visited {

    background: var(--nm-bg);

    color: var(--nm-ink);

    box-shadow: var(--nm-out-sm);

    border-radius: 9px;

    padding: 7px 12px;

    text-decoration: none;

}



/* --- Inline ------------------------------------------------------------- */

.inline-group {

    background: var(--nm-bg);

    box-shadow: var(--nm-out);

    border-radius: var(--nm-r);

    border: 0;

    padding: 4px;

    margin-bottom: 22px;

}



.inline-related h3 {

    background: transparent;

    color: var(--nm-ink-soft);

    border: 0;

    padding: 12px 16px;

    font-size: 12.5px;

}



.inline-group .tabular tr.add-row td {

    background: transparent;

    border: 0;

}



/* Inline xếp dọc: mỗi bản ghi là một khối lõm riêng, đọc từ trên xuống

   thay vì kéo ngang qua chục cột. */

.inline-group .inline-related {

    margin: 8px 6px 14px;

    padding: 2px 0 10px;

    border-radius: var(--nm-r-sm);

    box-shadow: var(--nm-in-sm);

}



.inline-group .inline-related > fieldset {

    border: 0;

    padding: 0;

    margin: 0;

}



.inline-group .inline-related .form-row {

    padding: 9px 18px;

    border: 0;

    background: transparent;

}



/* Ô nhập không được rộng quá khối chứa nó, nếu không lại tràn như cũ. */

.inline-group .inline-related input:not([type="checkbox"]),

.inline-group .inline-related select,

.inline-group .inline-related textarea {

    max-width: 100%;

    box-sizing: border-box;

}



@media (max-width: 767px) {

    .inline-group .inline-related .form-row > div { display: block; }

    .inline-group .inline-related label { display: block; margin-bottom: 4px; }

}



/* --- Trang đăng nhập ---------------------------------------------------- */

/* Trang đăng nhập có template và CSS riêng (templates/admin/login.html +

   static/css/dang-nhap.css). Cụm luật `body.login …` viết cho form mặc định

   của Django đã bỏ: nó không còn khớp thẻ nào, riêng luật

   `body.login #login-form input[...]` (độ ưu tiên 1-2-1) còn đè lên

   `.dn-o input` (0-1-1) làm con trỏ nhập nhảy vào sát icon. */



/* ==========================================================================

   Dashboard: banner chào + thẻ KPI

   ========================================================================== */



.nm-hero {

    background: var(--nm-bg);

    box-shadow: var(--nm-out);

    border-radius: 22px;

    padding: 26px 30px;

    margin-bottom: 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    flex-wrap: wrap;

}



.nm-hero h2 {

    margin: 0 0 8px;

    font-size: 26px;

    font-weight: 800;

    color: var(--nm-accent);

    letter-spacing: -0.02em;

}



.nm-hero p {

    margin: 0;

    color: var(--nm-ink-soft);

    font-size: 13.5px;

}



.nm-kpis {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));

    gap: 18px;

    margin-bottom: 24px;

}



.nm-kpi {

    background: var(--nm-bg);

    box-shadow: var(--nm-out);

    border-radius: 20px;

    padding: 20px 22px;

    text-decoration: none;

    display: block;

    transition: box-shadow 0.18s ease;

}



.nm-kpi:hover {

    box-shadow: var(--nm-in);

}



/* Django 6 gạch chân mọi link bằng luật `a:not(#header a, …)`; trong :not()

   có id nên nó thắng class thường - thẻ tự vẽ phải ghi đè bằng !important,

   không thì cả số liệu lẫn nhãn bên trong thẻ đều có gạch chân. */

.nm-kpi,

.nm-brand {

    text-decoration: none !important;

}



.nm-kpi-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 18px;

}



.nm-kpi-icon {

    width: 42px;

    height: 42px;

    border-radius: 13px;

    background: var(--nm-bg);

    box-shadow: var(--nm-out-sm);

    display: grid;

    place-items: center;

    font-size: 18px;

}



.nm-kpi-tag {

    font-size: 11.5px;

    font-weight: 700;

    padding: 5px 11px;

    border-radius: 999px;

    box-shadow: var(--nm-in-sm);

}



.nm-kpi-tag.up {

    color: var(--nm-green);

}



.nm-kpi-tag.down {

    color: var(--nm-red);

}



.nm-kpi-tag.flat {

    color: var(--nm-ink-soft);

}



.nm-kpi-value {

    font-size: 30px;

    font-weight: 800;

    color: var(--nm-ink);

    line-height: 1.1;

    letter-spacing: -0.02em;

}



.nm-kpi-label {

    margin-top: 6px;

    font-size: 13px;

    color: var(--nm-ink-soft);

}



/* --- Đáp ứng màn hình nhỏ ---------------------------------------------- */

@media (max-width: 767px) {

    #header {

        margin: 10px;

        padding: 12px 16px;

    }



    .nm-brand-logo { height: 38px; }



    #content {

        padding: 8px 12px 24px;

    }



    div.breadcrumbs {

        margin: 0 12px 12px;

    }



    .nm-hero {

        padding: 20px;

    }



    .nm-hero h2 {

        font-size: 20px;

    }



    /* Thẻ số liệu: đúng 2 ô một hàng. repeat(2, …) chứ không auto-fit,

       auto-fit đếm theo bề rộng còn lại nên máy hẹp rơi về 1 ô. */

    .nm-kpis {

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 12px;

    }



    .nm-kpi {

        padding: 14px 14px 16px;

        border-radius: 16px;

    }



    .nm-kpi-top { margin-bottom: 12px; }

    .nm-kpi-icon { width: 34px; height: 34px; border-radius: 11px; font-size: 15px; }

    .nm-kpi-tag { font-size: 10px; padding: 4px 8px; }

    .nm-kpi-value { font-size: 22px; }

    .nm-kpi-label { font-size: 11.5px; overflow-wrap: anywhere; }

}