:root {
    --BkGrdli: rgb(30 40 40);
    --Borderli: rgb(200 200 200);
    --Fontli: rgb(255 255 255);
}

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

/* ..... Layout kiểu VS Code (_MngLayout) .....
   Thanh bên trái dạng lưới (Sideli: cột icon + cột tên), từ đỉnh màn hình tới thanh status (Statli).
   Thanh Tab (Tabli) + nội dung (Mainli) bên phải. html.panel-closed = cột tên đang gập. */

:root {
    --TopH: 40px; /* chiều cao thanh Tab */
    --ActW: 48px;
    --PanOpenW: 200px; /* bề rộng bảng danh sách khi mở - kéo mép phải để đổi (lưu ở html style) */
    --PanW: var(--PanOpenW);
    --StatH: 30px; /* chiều cao thanh status */
    --RowH: 58px; /* 1 hàng lưới: logo / icon nhóm (cột icon) = tiêu đề / tên nhóm (bảng trái), cùng hàng với nhau */
    --GridBg: #ffffff;   /* vùng nội dung / bảng: nền trắng, chữ đen, lưới xám nhạt như Excel mặc định */
    --GridFont: #000000;
    --GridLine: #d4d4d4;
    --GridHead: #808080;   /* nền dòng tiêu đề - mặc định, giá trị thật lấy từ Options > Tables (_MngLayout) */
    --GridRowNum: #bfbfbf; /* nền cột STT, nhạt hơn tiêu đề 1 nấc (Darker 25%) - đủ khác màu lưới #d4d4d4 */
    --ColMinW: 80px; /* mặc định - giá trị thật lấy từ Options > Tables (_MngLayout); = khoảng cách giữa các bảng cạnh nhau */
    /* Chủ đề màu của khung (thanh bên trái, thanh Tab, thanh status, menu, hộp thoại) - Options > Appearance.
       Mặc định "slate" = darkslategray #2F4F4F (màu tiêu đề bảng ban đầu). Các chủ đề khác: html[data-theme=...] bên dưới. */
    --BarDark: #223939;   /* cột icon, thanh status (tối nhất) */
    --BarBkGrd: #2f4f4f;  /* cột tên, thanh Tab, menu, hộp thoại */
    --BarHover: #3a5f5f;  /* rê chuột */
    --BarActive: #456f6f; /* tab / mục đang chọn */
    --BarLine: rgba(255, 255, 255, 0.18); /* viền trong menu / hộp thoại */
    --BarEdge: rgba(0, 0, 0, 0.45);       /* viền ngoài các thanh */
    --BarInput: rgba(0, 0, 0, 0.3);       /* nền ô nhập trong menu / hộp thoại */
    --BarFont: rgba(255, 255, 255, 0.68); /* chữ thường trên khung (chữ nổi bật = --Fontli trắng) */

    /* ..... Quy chuẩn giao diện chung - mọi trang dùng các biến này, không ghi số / màu trực tiếp .....
       Cỡ chữ: 12 phụ / 13 khung + nút / 14 nội dung / 16 tiêu đề. Khoảng cách theo bước 4px.
       Màu trạng thái: mỗi loại 1 cặp chữ + nền nhạt, đọc rõ trên nền trắng. */
    /* 2 font theo LOẠI dữ liệu, dùng thống nhất toàn web:
       --Font    = chữ + ngày / giờ (tên mục, tab, nút, tiêu đề cột, ô chữ, ô ngày giờ, đồng hồ...) - Times New Roman;
                   tiếng Hàn dùng Batang (cùng kiểu có chân)
       --FontNum = số (ô số trong bảng, số tóm tắt, số đếm) - không chân, chữ số đều nhau thẳng cột */
    --Font: "Times New Roman", Times, "Batang", serif;
    --FontNum: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, "Malgun Gothic", sans-serif;
    --Mono: Consolas, "Cascadia Mono", "Courier New", monospace;
    --FsSm: 12px;
    --FsUi: 13px;
    --FsBody: 14px;
    --FsTitle: 16px;
    --Sp1: 4px;
    --Sp2: 8px;
    --Sp3: 12px;
    --Sp4: 16px;
    --Sp5: 24px;
    --Rad: 4px;   /* nút, ô nhập, nhãn */
    --RadLg: 6px; /* khối, hộp thoại, menu */
    --Shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    --ShadowLg: 0 8px 28px rgba(0, 0, 0, 0.55);
    --Ease: 0.15s ease-in-out;

    --Accent: #ff7f50;       /* coral - điểm nhấn: tab / mục đang chọn, viền ô đang sửa */
    --AccentText: #c2410c;   /* coral đậm - chữ nhấn trên nền trắng */
    --AccentSoft: #fff1eb;   /* nền nhấn nhạt */

    --Surface: #ffffff;      /* nền nội dung */
    --Surface2: #f6f7f8;     /* nền đầu khối / dải tóm tắt */
    --Border: #e1e4e8;       /* viền khối trên nền trắng */
    --Text: #1f2328;
    --TextMuted: #656d76;
    --RowHover: #eef4fb;     /* dòng bảng khi rê chuột */
    --RowSel: #dbe9f8;       /* dòng bảng đang chọn */

    --OkText: #2f6b1f;     --OkBg: #dcefd4;     --OkDot: #4caf50;
    --WarnText: #a63d12;   --WarnBg: #fde2d6;   --WarnDot: #e67e22;
    --DangerText: #8b1c26; --DangerBg: #f8d7da; --DangerDot: #c0392b;
    --InfoText: #1f5f99;   --InfoBg: #dcebf9;
}

/* ..... 8 chủ đề màu (Options > Appearance > Theme color, Services/SiteSettings.cs) ..... */
html[data-theme="charcoal"] { --BarDark: #181818; --BarBkGrd: #252526; --BarHover: #2f3031; --BarActive: #3a3b3d; }
html[data-theme="navy"]     { --BarDark: #14263f; --BarBkGrd: #1f3a5f; --BarHover: #294a77; --BarActive: #335a8c; }
html[data-theme="forest"]   { --BarDark: #1c3a27; --BarBkGrd: #2a5338; --BarHover: #346646; --BarActive: #3f7954; }
html[data-theme="teal"]     { --BarDark: #123f44; --BarBkGrd: #1b5a60; --BarHover: #236d74; --BarActive: #2b8088; }
html[data-theme="burgundy"] { --BarDark: #3e1820; --BarBkGrd: #5a2430; --BarHover: #6d2f3c; --BarActive: #803a49; }
html[data-theme="purple"]   { --BarDark: #2e2443; --BarBkGrd: #45365f; --BarHover: #564473; --BarActive: #675287; }
html[data-theme="brown"]    { --BarDark: #3a2c1f; --BarBkGrd: #57432f; --BarHover: #69523b; --BarActive: #7b6147; }

html.panel-closed {
    --PanW: 0px;
}

.Bodyli {
    overflow: hidden; /* trang không cuộn - chỉ khung bảng (.Gridli-wrap) / vùng nội dung cuộn */
    padding: var(--TopH) 0 var(--StatH) 0;
    background-color: var(--BarDark);
    color: var(--Fontli);
    font-family: var(--Font);
    font-size: var(--FsUi);
}

/* ..... Thanh bên trái dạng LƯỚI (_MngLayout) .....
   1 khối duy nhất (.Sideli), mỗi hàng (.Side-row) = 1 lưới 2 ô [icon | tên]: icon và tên luôn cùng hàng vì
   nằm trong CÙNG 1 phần tử. Cột tên rộng --PanW (kéo mép phải để đổi); html.panel-closed -> --PanW = 0,
   chỉ còn cột icon. Hàng đầu = 🌐 ngôn ngữ; đáy = ⚙ System, ☰ Options, tài khoản (logo ở thanh status). */

.Sideli {
    width: calc(var(--ActW) + var(--PanW));
    position: fixed;
    top: 0;
    bottom: var(--StatH);
    left: 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--BarEdge);
    /* cột icon tối hơn cột tên */
    background: linear-gradient(to right, var(--BarDark) var(--ActW), var(--BarBkGrd) var(--ActW));
}

.Side-row {
    flex: 0 0 var(--RowH);
    height: var(--RowH);
    width: 100%;
    display: grid;
    grid-template-columns: var(--ActW) var(--PanW);
    align-items: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--BarFont);
    text-align: left;
    white-space: nowrap;
    transition: color var(--Ease), background-color var(--Ease);
}

    .Side-row:hover,
    .Side-row:focus {
        color: var(--Fontli);
        background-color: rgba(255, 255, 255, 0.05);
        text-decoration: none;
        outline: none;
    }

    /* nhóm (file) đang mở: vạch nhấn bên trái + nền sáng hơn, icon và tên trắng đậm */
    .Side-row.active {
        color: var(--Fontli);
        background-color: rgba(255, 255, 255, 0.09);
        box-shadow: inset 3px 0 0 var(--Accent);
    }

        .Side-row.active .Side-name {
            font-weight: 600;
        }

.Side-ico {
    justify-self: center;
    font-size: 20px; /* ~ cỡ hình tròn logo (25px) */
    line-height: 1;
}

    .Side-ico.glyphicon {
        top: 0; /* bỏ lệch 1px mặc định của glyphicon */
    }

.Side-name {
    padding: 0 12px 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--FsBody);
}

/* Chữ phụ nhỏ dòng thứ 2 dưới tên (mô tả nhóm, ngôn ngữ đang chọn) */
.Side-hint {
    display: block;
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--FsSm);
    font-weight: normal;
    line-height: 1.2;
    color: var(--BarFont);
    opacity: 0.75;
}

html.panel-closed .Side-name {
    visibility: hidden;
}

/* Icon tự vẽ dùng chung với icon Bootstrap (glyphicon): file SVG làm mặt nạ, tô bằng màu chữ -> đổi màu theo nơi đặt
   (trắng trên thanh tối, màu nhấn ở tab đang xem...). Cỡ theo font-size như glyphicon. */
.ico-production { /* dây chuyền sản xuất - nhóm Production data (Services/SiteMenu.cs) */
    display: inline-block;
    width: 0.9em;
    height: 1.1em; /* hình đứng 1552 x 1885 (~0.82): cao hơn 1 chút so với icon vuông để nhìn cân cỡ */
    background-color: currentColor;
    -webkit-mask: url("Images/icon-production.svg") center / contain no-repeat;
    mask: url("Images/icon-production.svg") center / contain no-repeat;
    vertical-align: middle;
}

/* Logo ở đầu thanh status (nhãn hiệu web, không bấm được): chỉ phần hình tròn của logolht.png
   (176x41: hình tròn cột 0-40, chữ cột 45-175) - cover + lệch trái: thu ảnh theo chiều cao rồi giữ phần tròn bên trái */
.Statli-logo {
    width: 18px;
    height: 18px;
    object-fit: cover;
    object-position: 0 0;
}

.Statli-brand {
    color: var(--Fontli);
    cursor: default;
    user-select: none;
}

.Side-bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(255, 255, 255, 0.08); /* tách nhóm công cụ dưới đáy */
}

/* Mép phải: kéo để đổi bề rộng cột tên, nhấp đúp để vừa tên dài nhất (_MngLayout) */
.Side-resize {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 5px;
    cursor: col-resize;
    z-index: 1;
    transition: background-color 0.15s ease-in-out;
}

    .Side-resize:hover,
    html.panel-resizing .Side-resize {
        background-color: var(--Accent);
    }

html.panel-closed .Side-resize {
    display: none;
}

html.panel-resizing,
html.panel-resizing * {
    cursor: col-resize !important;
    user-select: none;
}

/* Khung nổi co giãn được - dùng chung cả website (Scripts/lhtcore/Resizable.js: lhtResizable(khung, 'tên')):
   kéo góc dưới phải để đổi kích thước, nhớ riêng từng loại khung. Giới hạn min/max đặt trong CSS của từng khung. */
.Resizable {
    resize: both;
    overflow: hidden;
}

.Langli {
    display: none;
    min-width: 180px;
    padding: 4px 0;
    background-color: var(--BarBkGrd);
    border: 1px solid var(--BarLine);
    border-radius: var(--RadLg);
    box-shadow: var(--Shadow);
    position: fixed;
    left: calc(var(--ActW) + var(--PanW) + 4px); /* bật ra cạnh nút 🌐 ở hàng trên cùng thanh bên trái */
    top: 4px;
    z-index: 1060;
    white-space: nowrap;
}

    .Langli.is-open { /* KHÔNG dùng .show: Bootstrap 3 có .show { display: block !important } */
        display: block;
    }

.Langli-title {
    padding: 4px 12px 6px 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--BarLine);
    color: var(--BarFont);
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.Langli-item {
    display: flex;
    align-items: center;
    padding: 5px 20px 5px 8px;
    color: var(--BarFont);
    transition: 0.15s ease-in-out;
}

    .Langli-item:hover,
    .Langli-item:focus {
        color: var(--Fontli);
        background-color: var(--BarHover);
        text-decoration: none;
    }

    .Langli-item.active {
        color: var(--Accent);
    }

.Langli-check {
    width: 20px;
    text-align: center;
}

/* Thanh Tab các trang đang mở (thay thanh trên cũ) - tab được vẽ bằng JS trong _MngLayout.
   Mỗi tab 1 khối bo 4 góc, cao bằng nút thao tác; tab đang xem nền trắng (cùng màu nội dung). */
.Tabli {
    height: var(--TopH);
    display: flex;
    align-items: stretch;
    background-color: var(--BarBkGrd);
    border-bottom: 1px solid var(--BarEdge);
    position: fixed;
    top: 0;
    left: calc(var(--ActW) + var(--PanW));
    right: 0;
    z-index: 1030;
    white-space: nowrap;
}

/* Bên trái: các tab (cuộn ngang khi nhiều tab). Bên phải: nút thao tác của trang (@section actions). */
.Tabli-list {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center; /* tab nằm giữa thanh, thẳng hàng với các nút bên phải */
    gap: var(--Sp1);
    padding: 0 var(--Sp2) 0 var(--Sp1);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--BarLine) transparent;
}

.Tabli-tab {
    flex: 0 0 auto;
    height: 28px; /* = chiều cao nút thao tác bên phải */
    display: flex;
    align-items: center;
    gap: var(--Sp2);
    padding: 0 var(--Sp3) 0 var(--Sp3);
    border-radius: 3px; /* bo đều 4 góc */
    color: var(--BarFont);
    font-size: var(--FsUi);
    transition: color var(--Ease), background-color var(--Ease);
}

    .Tabli-tab:hover,
    .Tabli-tab:focus {
        color: var(--Fontli);
        background-color: rgba(255, 255, 255, 0.07);
        text-decoration: none;
    }

    .Tabli-tab.active {
        background-color: var(--Surface); /* tab đang xem */
        color: var(--Text);
        font-weight: 600;
    }

        .Tabli-tab.active > .glyphicon {
            color: var(--AccentText);
        }

    .Tabli-tab > .glyphicon {
        top: 0;
        font-size: 12px;
    }

/* Nút thao tác trên thanh Tab: nút "ma" (nền trong suốt, viền mảnh) cho thao tác thường (Update / Import /
   Export...); .btn-primary = thao tác chính duy nhất của trang -> nền màu nhấn. Cùng cao 28px với ô nhập. */
.Tabli-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--Sp1);
    padding: 0 var(--Sp3) 0 var(--Sp2);
}

    /* vách ngăn (đường dọc liền) giữa vùng tab bên trái và nút thao tác bên phải - cả nhóm nút là 1 khối, giữa các nút không có vạch ngăn; trang không có nút thì ẩn */
    .Tabli-actions::before {
        content: "";
        align-self: center;
        height: 26px;
        margin-right: 2px; /* sát nhóm nút */
        border-left: 2px solid rgba(255, 255, 255, 0.3);
    }

    .Tabli-actions:not(:has(.Pane-actions.active > *))::before {
        display: none;
    }

    .Tabli-actions form {
        display: flex;
        align-items: center;
        gap: var(--Sp1);
        margin: 0;
    }

    /* cùng kiểu cho nút ở chân hộp thoại (Options, SQL) và menu lọc của bảng */
    .Tabli-actions .btn,
    .Optli-foot .btn,
    .Gridli-foot .btn {
        height: 28px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 0 var(--Sp3);
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: var(--Rad);
        background-color: rgba(255, 255, 255, 0.06);
        color: var(--Fontli);
        font-size: var(--FsUi);
        box-shadow: none;
        transition: background-color var(--Ease), border-color var(--Ease);
    }

        .Tabli-actions .btn:hover,
        .Tabli-actions .btn:focus,
        .Optli-foot .btn:hover,
        .Optli-foot .btn:focus,
        .Gridli-foot .btn:hover,
        .Gridli-foot .btn:focus {
            background-color: rgba(255, 255, 255, 0.16);
            border-color: rgba(255, 255, 255, 0.4);
            outline: none;
        }

        .Tabli-actions .btn.btn-primary,
        .Optli-foot .btn.btn-primary,
        .Gridli-foot .btn.btn-primary {
            background-color: var(--Accent);
            border-color: var(--Accent);
            color: #1f2328;
            font-weight: 600;
        }

            .Tabli-actions .btn.btn-primary:hover,
            .Tabli-actions .btn.btn-primary:focus,
            .Optli-foot .btn.btn-primary:hover,
            .Optli-foot .btn.btn-primary:focus,
            .Gridli-foot .btn.btn-primary:hover,
            .Gridli-foot .btn.btn-primary:focus {
                background-color: #ff9470;
                border-color: #ff9470;
            }

        /* thao tác xóa dữ liệu (hộp thoại SQL của Setup DB) */
        .Optli-foot .btn.btn-danger {
            background-color: var(--DangerDot);
            border-color: var(--DangerDot);
            color: #ffffff;
            font-weight: 600;
        }

            .Optli-foot .btn.btn-danger:hover:not(:disabled) {
                background-color: #d6493a;
            }

        .Optli-foot .btn:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }

        .Tabli-actions .btn .glyphicon,
        .Optli-foot .btn .glyphicon {
            top: 0;
            font-size: 12px;
        }

    /* Ô nhập trên thanh tối (lọc ngày...) */
    .Tabli-actions .form-control {
        height: 28px;
        padding: 2px var(--Sp2);
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: var(--Rad);
        background-color: var(--BarInput);
        color: var(--Fontli);
        color-scheme: dark; /* biểu tượng lịch / mũi tên màu sáng */
        font-size: var(--FsUi);
        box-shadow: none;
    }

        .Tabli-actions .form-control:focus {
            border-color: var(--Accent);
        }

/* Nút thao tác: mỗi tab 1 khối, chỉ hiện khối của tab đang xem */
.Pane-actions {
    display: none;
    align-items: center;
    gap: var(--Sp1);
}

    .Pane-actions.active {
        display: flex;
    }

/* Vùng nội dung: cố định giữa thanh Tab / thanh status / bảng danh sách. Trang có bảng thì bảng tự lấp
   đầy (.Mainli > .Gridli-wrap); trang không có bảng (Setup DB...) thì vùng này tự cuộn. */
.Mainli {
    position: fixed;
    top: var(--TopH);
    bottom: var(--StatH);
    left: calc(var(--ActW) + var(--PanW));
    right: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* cuộn trong từng pane (.Pane) */
    padding: 0; /* bảng / nhóm bảng nằm sát góc trên trái vùng hiển thị */
    white-space: nowrap;
    background-color: var(--GridBg);
    color: var(--GridFont);
    font-size: var(--FsBody);
}

/* Thanh status: [nhà máy] [số dòng] [thông báo của tab] ...... [giờ]; các ô ngăn bằng vạch mảnh */
.Statli {
    height: var(--StatH);
    display: flex;
    align-items: center;
    background-color: var(--BarDark);
    border-top: 1px solid var(--BarEdge);
    color: var(--BarFont);
    font-size: var(--FsSm);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    white-space: nowrap;
}

.Statli-item {
    padding: 0 var(--Sp3);
    height: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .Statli-item + .Statli-item:not(:empty) {
        border-left: 1px solid rgba(255, 255, 255, 0.1);
    }

    .Statli-item:empty {
        padding: 0;
    }

    .Statli-item > a {
        color: var(--BarFont);
    }

        .Statli-item > a:hover,
        .Statli-item > a:focus {
            color: var(--Fontli);
            text-decoration: none;
        }

    .Statli-item .glyphicon {
        top: 0;
    }

.Statli-msg {
    color: var(--Fontli); /* kết quả Nhập / Xuất Excel */
}

.Statli-space {
    flex: 1 1 auto;
}

    .Statli-space + .Statli-item {
        border-left: none !important;
    }

/* ..... Bảng kiểu Excel (Scripts/lhtgrid/Gridli.js) .....
   Trang không cuộn; mỗi bảng nằm trong khung cuộn riêng .Gridli-wrap (lấp đầy vùng giữa thanh Tab và
   thanh status). Dòng tiêu đề dính đỉnh khung khi cuộn dọc, trượt theo cột khi cuộn ngang - như Freeze
   top row của Excel. border-collapse: separate để viền tiêu đề không bị trôi mất khi dính. */

.thSub {
    color: var(--GridHeadFont, var(--GridFont));
    background-color: var(--GridHead);
}

.Gridli-wrap {
    overflow: auto;
    border: 1px solid var(--GridLine);
    background-color: var(--GridBg);
    scrollbar-color: #c1c1c1 #f1f1f1;
}

/* Mỗi tab (sheet) = 1 pane; chỉ pane của tab đang xem hiện. Pane có bảng thì bảng lấp đầy (.Pane > .Gridli-wrap);
   pane không có bảng (Setup DB...) thì tự cuộn. */
.Pane {
    display: none;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    overflow: auto;
}

    .Pane.active {
        display: flex;
    }

    .Pane.loading {
        opacity: 0.6;
        cursor: progress;
    }

.Pane-loading {
    padding: 12px 15px;
    color: #666;
}

.Pane > .Gridli-wrap {
    flex: 1 1 auto;
    min-height: 0;
    align-self: flex-start; /* khung rộng vừa bảng, không kéo hết bề ngang khi bảng hẹp */
    max-width: 100%;
}
.Gridli {
    width: auto;
    margin: 0;
    border: none;
    border-collapse: separate;
    border-spacing: 0;
}

    .Gridli.table-bordered > thead > tr > th,
    .Gridli.table-bordered > tbody > tr > td {
        border-width: 0 1px 1px 0; /* chỉ viền phải + dưới, tránh viền đôi khi border-collapse: separate */
        border-color: var(--GridLine);
    }

    .Gridli.table-bordered > tbody > tr > td {
        color: var(--GridFont);
    }

    /* Cột STT (table data-rownum="true") nền xám nhạt như cột số dòng của Excel */
    .Gridli[data-rownum="true"] > tbody > tr > td:first-child {
        background-color: var(--GridRowNum);
        color: var(--GridFont);
        font-family: var(--FontNum); /* STT = số */
    }

    /* Độ rộng cột tối đa (Options > Tables, biến --ColMaxW): dài hơn thì cắt và hiện "..."; rê chuột xem đủ (Gridli.js) */
    .Gridli > thead > tr > th,
    .Gridli > tbody > tr > td {
        max-width: var(--ColMaxW, 350px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .Gridli > thead > tr > th {
        position: sticky;
        top: 0;
        z-index: 2;
        min-width: var(--ColMinW);
        background-color: var(--GridHead);
        color: var(--GridHeadFont, var(--GridFont)); /* đen / trắng theo màu nền (Options > Tables) */
        border-bottom: 2px solid rgba(0, 0, 0, 0.25) !important; /* đậm hơn lưới, hợp mọi màu tiêu đề */
        vertical-align: middle;
    }

    .Gridli > thead > tr > th.Gridli-th {
        padding-right: 32px; /* chỗ cho nút ▾ */
    }

.Gridli-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    height: 20px;
    min-width: 20px;
    padding: 0 3px;
    border: 1px solid #a6a6a6;
    border-radius: 2px;
    background: #ffffff; /* như nút lọc của Excel */
    color: #444;
    font-size: 10px;
    line-height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

    .Gridli-btn:hover {
        background: #e5e5e5;
        color: #000;
    }

    .Gridli-btn.active {
        background: #fbe5d6; /* cột đang lọc / đang sắp xếp */
        border-color: var(--Accent);
        color: #c55a11;
    }

    .Gridli-btn .glyphicon {
        top: 0;
    }

.Gridli-sorted {
    font-weight: bold;
    font-size: 11px;
}

/* Số dùng font số (--FontNum) ở MỌI nơi: ô số trong bảng (Gridli.js gắn .Gridli-num), giá trị trong menu lọc
   cột số, số tóm tắt, số của trang Setup DB. Chữ + ngày / giờ (ô ngày, đồng hồ, ô chọn ngày...) = --Font. */
.Gridli-num,
.Gridli-numlist > .Gridli-row:not(:first-child) label,
.Sumli-val,
.Dbli-table .num,
.Dbli-count,
.Dbli-log-ms,
.Optli-input input {
    font-family: var(--FontNum);
}

    .Sumli-val.Sumli-date { /* số tóm tắt là ngày (Từ ngày / Đến ngày / Bản ghi mới nhất) */
        font-family: var(--Font);
    }

/* Mật độ bảng + trạng thái dòng (rê chuột / đang chọn - Gridli.js) */
.Gridli > thead > tr > th {
    padding: 8px 14px;
    font-weight: 600;
}

.Gridli > tbody > tr > td {
    padding: 6px 14px;
    line-height: 20px;
    vertical-align: middle;
}

.Gridli > tbody > tr:hover > td {
    background-color: var(--RowHover);
}

.Gridli > tbody > tr.is-sel > td {
    background-color: var(--RowSel);
}

/* Cột STT của dòng đang chọn sáng màu nhấn - như số dòng đang chọn của Excel */
.Gridli[data-rownum="true"] > tbody > tr.is-sel > td:first-child {
    background-color: var(--Accent);
    color: #1f2328;
    font-weight: 600;
}

/* Bảng trống: 1 ô gộp cả dòng ("Không có dữ liệu") */
.Gridli > tbody > tr > td[colspan] {
    padding: var(--Sp5) var(--Sp4);
    background-color: var(--Surface) !important;
    color: var(--TextMuted);
    text-align: center;
}

/* ..... Số liệu tóm tắt của bảng -> hiện trên THANH STATUS (như thanh Sum / Count của Excel) .....
   View khai báo <div class="Sumli" data-grid="id bảng"> (ẩn trong trang, chỉ là nguồn số liệu); Gridli.js tính theo
   các dòng đang hiện, _MngLayout (lhtStatusRows) chép số liệu của tab đang xem xuống thanh status (#statSum). */
.Pane .Sumli {
    display: none;
}

.Statli-sum {
    height: 100%;
    display: flex;
    align-items: center;
}

    .Statli-sum:empty {
        display: none;
    }

    .Statli-sum .Sumli-item {
        height: 100%;
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 0 var(--Sp3);
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        white-space: nowrap;
    }

    .Statli-sum .Sumli-lbl {
        color: var(--BarFont);
    }

    .Statli-sum .Sumli-val {
        color: var(--Fontli);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

    /* Đang lọc: nhãn màu nhấn */
    .Statli-sum .Sumli-flag {
        display: none;
        align-items: center;
        gap: 4px;
        margin: 0 var(--Sp2);
        padding: 0 8px;
        border-radius: 8px;
        background-color: var(--Accent);
        color: #1f2328;
        font-weight: 600;
        line-height: 16px;
        white-space: nowrap;
    }

    .Statli-sum.is-filtered .Sumli-flag {
        display: inline-flex;
    }

        .Statli-sum .Sumli-flag .glyphicon {
            top: 0;
            font-size: 10px;
        }

/* Menu sort/filter kiểu Excel */
.Gridli-pop {
    display: none;
    position: fixed;
    z-index: 1100;
    width: 300px;
    height: 430px;
    min-width: 240px; /* giới hạn khi kéo co giãn (.Resizable) */
    min-height: 300px;
    max-width: 90vw;
    max-height: calc(100vh - 16px);
    flex-direction: column;
    padding: 4px 0 8px 0;
    background-color: var(--BarBkGrd);
    border: 1px solid var(--BarLine);
    border-radius: var(--RadLg);
    box-shadow: var(--Shadow);
    color: var(--Fontli);
    white-space: nowrap;
}

    .Gridli-pop.is-open { /* KHÔNG dùng .show: Bootstrap 3 có .show { display: block !important } */
        display: flex;
    }

    .Gridli-pop > * {
        flex: 0 0 auto;
    }

.Gridli-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 5px 12px;
    border: none;
    background: transparent;
    color: var(--Fontli);
    text-align: left;
}

    .Gridli-item:hover:not(:disabled) {
        background-color: var(--BarHover);
    }

    .Gridli-item:disabled {
        color: #666;
        cursor: default;
    }

.Gridli-ico {
    width: 22px;
    text-align: center;
    margin-right: 6px;
    top: 0;
}

.Gridli-lbl {
    overflow: hidden;
    text-overflow: ellipsis;
}

.Gridli-sep {
    height: 1px;
    margin: 4px 0;
    background-color: var(--BarLine);
}

.Gridli-search {
    display: block;
    width: calc(100% - 20px);
    margin: 4px 10px 6px 10px;
    padding: 4px 8px;
    border: 1px solid #555;
    border-radius: 3px;
    background-color: var(--BarInput);
    color: var(--Fontli);
}

    .Gridli-search:focus,
    .Optli-input input:focus,
    .Dbli-confirm input:focus {
        outline: none;
        border-color: var(--Accent);
    }

.Gridli-pop > .Gridli-list {
    flex: 1 1 auto; /* danh sách giá trị giãn theo khung menu khi kéo co giãn */
    min-height: 60px;
    margin: 0 10px;
    padding: 4px 0;
    overflow: auto;
    border: 1px solid var(--BarLine);
    background-color: var(--BarInput);
}

.Gridli-row {
    display: flex;
    align-items: center;
    height: 22px;
}

    .Gridli-row label {
        margin: 0;
        font-weight: normal;
        cursor: pointer;
    }

    .Gridli-row input {
        margin: 0 4px 0 0;
        vertical-align: middle;
    }

/* Dấu mở / thu gọn (+ / −) của cây ngày - chữ trơn, không khung */
.Gridli-tg {
    width: 16px;
    flex: 0 0 16px;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    line-height: 1;
    color: var(--BarFont);
    cursor: pointer;
    user-select: none;
}

    .Gridli-tg:hover {
        color: var(--Fontli);
    }

.Gridli-foot {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin: 8px 10px 0 10px;
}

.Center-x {
    justify-content: center;
    text-align: center;
}

.Right-x {
    justify-content: right;
    text-align: right;
}

/* ..... Hộp thoại Options (kiểu Excel > File > Options) - _MngLayout .....
   Kéo góc dưới phải để giãn (class .Resizable - lhtResizable(box, "settings")), kích thước được nhớ. */

.Optli-back {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1200;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
}

    .Optli-back.is-open { /* KHÔNG dùng .show: Bootstrap 3 có .show { display: block !important } */
        display: flex;
    }

.Optli {
    width: 640px;
    height: 420px;
    min-width: 420px;
    min-height: 260px;
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--BarDark);
    border: 1px solid var(--BarLine);
    border-radius: var(--RadLg);
    box-shadow: var(--ShadowLg);
    color: var(--Fontli);
}

.Optli-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: var(--BarBkGrd);
    border-bottom: 1px solid var(--BarLine);
    font-weight: bold;
}

    .Optli-head .glyphicon {
        top: 0;
    }

.Optli-x {
    margin-left: auto;
    border: none;
    background: transparent;
    color: var(--BarFont);
    font-size: 20px;
    line-height: 1;
}

    .Optli-x:hover {
        color: var(--Fontli);
    }

.Optli-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

.Optli-cats {
    flex: 0 0 160px;
    list-style: none;
    margin: 0;
    padding: 6px 0;
    background-color: var(--BarBkGrd);
    border-right: 1px solid var(--BarLine);
    overflow-y: auto;
}

    .Optli-cats li {
        padding: 7px 15px;
        color: var(--BarFont);
        cursor: pointer;
        white-space: nowrap;
    }

        .Optli-cats li:hover {
            color: var(--Fontli);
            background-color: var(--BarHover);
        }

        .Optli-cats li.active {
            color: var(--Accent);
            background-color: var(--BarActive);
            box-shadow: inset 3px 0 0 var(--Accent);
        }

.Optli-pane {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 18px;
    overflow: auto;
    white-space: normal;
}

    .Optli-pane h4 {
        margin: 0 0 12px 0;
        padding-bottom: 6px;
        border-bottom: 1px solid var(--BarLine);
    }

.Optli-field {
    margin-bottom: 14px;
}

    .Optli-field label {
        display: block;
        margin-bottom: 4px;
    }

.Optli-input {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .Optli-input input {
        width: 110px;
        padding: 3px 6px;
        border: 1px solid #555;
        border-radius: 3px;
        background-color: var(--BarInput);
        color: var(--Fontli);
    }

.Optli-hint {
    margin-top: 4px;
    color: var(--BarFont);
    font-size: 12px;
}

.Optli-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding: 8px 12px;
    background-color: var(--BarBkGrd);
    border-top: 1px solid var(--BarLine);
}

.Optli-msg {
    margin-right: auto;
    color: #8fd18f;
}

    .Optli-msg.error {
        color: #ff8a80;
    }

/* Cài đặt kiểu lựa chọn (Options > Appearance > Theme color): mỗi lựa chọn 1 ô mẫu màu + tên */
.Optli-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
}

.Optli-field label.Optli-swatch { /* thắng quy tắc .Optli-field label (display: block) */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 6px;
    border: 2px solid transparent;
    border-radius: 4px;
    font-weight: normal;
    cursor: pointer;
}

    .Optli-swatch:hover {
        background-color: var(--BarHover);
    }

    .Optli-swatch input {
        position: absolute;
        opacity: 0; /* ẩn nút radio, bấm vào cả ô */
        pointer-events: none;
    }

    .Optli-swatch:has(input:checked) {
        border-color: var(--Accent);
    }

.Optli-swatch-color {
    display: block;
    width: 100%;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 3px;
}

.Optli-swatch-name {
    font-size: 12px;
    white-space: nowrap;
}

/* ..... Trang Setup DB (Views/lht31/SetuplhtDb.cshtml) .....
   Nền trắng như vùng nội dung. Mỗi nhóm nhiệm vụ = 1 khối (.Dbli-group) có bảng các file .sql;
   bấm dòng -> hộp thoại xem SQL + xác nhận (dùng lại giao diện hộp thoại Options .Optli). */

.Dbli {
    padding: 12px 16px 20px 16px;
    color: var(--GridFont);
    background-color: var(--GridBg);
    min-height: 100%;
    width: fit-content; /* rộng vừa bảng rộng nhất, không kéo hết màn hình */
    max-width: 100%;
}

.Dbli-summary { /* 3 cột: tên | số bảng sẵn sàng (giữa) | lỗi kết nối */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 10px;
    border: 1px solid var(--GridLine);
    border-left: 4px solid var(--BarBkGrd);
    border-radius: var(--RadLg);
}

.Dbli-summary-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.Dbli-summary-ico {
    top: 0;
    font-size: 24px;
    color: var(--BarBkGrd);
}

.Dbli-summary-name {
    font-size: 16px;
    font-weight: bold;
}

.Dbli-summary-sub {
    font-size: 12px;
    color: var(--TextMuted);
}

.Dbli-summary-stat {
    padding: 3px 10px;
    border-radius: 12px;
    background-color: var(--WarnBg);
    color: var(--WarnText);
    font-weight: bold;
    white-space: nowrap;
}

    .Dbli-summary-stat.ok {
        background-color: var(--OkBg);
        color: var(--OkText);
    }

    .Dbli-summary-stat:empty {
        visibility: hidden; /* giữ ô trong lưới 3 cột */
    }

.Dbli-summary-err {
    justify-self: end;
    color: var(--DangerDot);
}

    .Dbli-summary-err:empty {
        visibility: hidden;
    }

.Dbli-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin-bottom: 14px;
    font-size: 12px;
    color: var(--TextMuted);
}

    .Dbli-legend .Dbli-badge ~ .Dbli-badge {
        margin-left: 10px;
    }

.Dbli-group {
    margin-bottom: 16px;
    border: 1px solid var(--GridLine);
    border-radius: var(--RadLg);
}

.Dbli-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 12px;
    background-color: var(--Surface2);
    border-bottom: 1px solid var(--GridLine);
    font-size: 14px;
    font-weight: bold;
}

    .Dbli-group-head .glyphicon {
        top: 0;
        color: var(--BarBkGrd);
    }

.Dbli-group.danger .Dbli-group-head .glyphicon {
    color: var(--DangerDot);
}

.Dbli-count {
    padding: 0 7px;
    border-radius: 9px;
    background-color: #ddd;
    font-size: 11px;
    font-weight: normal;
}

.Dbli-clear {
    margin-left: auto;
}

.Dbli-table { /* rộng vừa nội dung (không kéo hết màn hình); cột cùng độ rộng ở mọi nhóm -> các bảng thẳng hàng */
    border-collapse: collapse;
}

    .Dbli-table th:nth-child(1) { min-width: 280px; }
    .Dbli-table th:nth-child(2) { min-width: 170px; }
    .Dbli-table th:nth-child(3) { min-width: 150px; }
    .Dbli-table th:nth-child(4) { min-width: 160px; }
    .Dbli-table th:nth-child(5) { min-width: 90px; }
    .Dbli-table th:nth-child(6) { min-width: 160px; }
    .Dbli-table th:nth-child(7) { min-width: 90px; }

    .Dbli-table th {
        padding: 6px 14px;
        border-bottom: 1px solid var(--GridLine);
        font-size: 12px;
        font-weight: normal;
        color: var(--TextMuted);
        white-space: nowrap;
    }

    .Dbli-table td {
        padding: 8px 14px;
        border-bottom: 1px solid #eee;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
    }

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

    .Dbli-table tbody tr {
        cursor: pointer;
    }

        .Dbli-table tbody tr:hover {
            background-color: #f5f9fc;
        }

    .Dbli-table .num {
        text-align: right;
    }

.Dbli-file .glyphicon {
    top: 1px;
    margin-right: 4px;
    color: #999;
}

.Dbli-date {
    color: var(--TextMuted);
    font-size: 12px;
}

.Dbli-act {
    width: 1%;
    text-align: right;
}

    .Dbli-act .btn {
        opacity: 0.75;
    }

.Dbli-table tbody tr:hover .Dbli-act .btn {
    opacity: 1;
}

.Dbli-status[colspan] { /* dòng file dọn dẹp: danh sách bảng sẽ xóa có thể dài */
    white-space: normal !important;
}

/* Nhãn tác động của file */
.Dbli-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
}

    .Dbli-badge.keep { background-color: var(--OkBg); color: var(--OkText); }
    .Dbli-badge.recreate { background-color: var(--WarnBg); color: var(--WarnText); }
    .Dbli-badge.cleanup { background-color: var(--DangerBg); color: var(--DangerText); }
    .Dbli-badge.other { background-color: #e5e5e5; color: #444; }

/* Chấm trạng thái bảng */
.Dbli-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 6px;
    border-radius: 50%;
}

    .Dbli-dot.ready { background-color: var(--OkDot); }
    .Dbli-dot.missing { background-color: var(--WarnDot); }
    .Dbli-dot.unknown { background-color: #aaa; }

/* Nhật ký chạy */
.Dbli-log {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: 220px;
    overflow-y: auto;
    font-size: 12px;
}

    .Dbli-log li {
        display: flex;
        gap: 10px;
        align-items: baseline;
        padding: 3px 12px;
    }

    .Dbli-log .ok .glyphicon { color: var(--OkDot); }
    .Dbli-log .fail .glyphicon { color: var(--DangerDot); }
    .Dbli-log .fail .Dbli-log-text { color: var(--DangerDot); }

.Dbli-log-empty {
    color: #999;
}

.Dbli-log-time,
.Dbli-log-ms {
    color: #888;
    font-family: var(--Mono);
}

.Dbli-log-text {
    flex: 1 1 auto;
    word-break: break-word;
}

/* Hộp thoại xem SQL (khung + đầu + chân dùng .Optli) */
.Dbli-dlg {
    width: 760px;
    height: 520px;
    min-width: 420px;
    min-height: 300px;
}

.Dbli-dlg-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
}

.Dbli-dlg-info {
    color: var(--BarFont);
}

    .Dbli-dlg-info:empty {
        display: none;
    }

    .Dbli-dlg-info .Dbli-badge {
        margin-right: 6px;
    }

.Dbli-warn {
    padding: 8px 10px;
    border: 1px solid var(--DangerDot);
    border-left-width: 4px;
    border-radius: var(--RadLg);
    background-color: rgba(192, 57, 43, 0.18);
    color: #ffb3a8;
}

.Dbli-confirm {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .Dbli-confirm label {
        margin: 0;
        font-weight: normal;
    }

    .Dbli-confirm input {
        width: 200px;
        padding: 3px 6px;
        border: 1px solid #555;
        border-radius: var(--RadLg);
        background-color: var(--BarInput);
        color: var(--Fontli);
        font-family: var(--Mono);
    }

.Dbli-sql {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 10px 12px;
    overflow: auto;
    border: 1px solid var(--BarLine);
    border-radius: var(--RadLg);
    background-color: #1e1e1e;
    color: #d4d4d4;
    font-family: var(--Mono);
    font-size: 12px;
    white-space: pre;
    word-wrap: normal;
}

/* ..... Trang Báo cáo > Tổng quan (Views/Manager/ReportOverview.cshtml) .....
   Nền trắng; hàng ô số lớn ở trên, các khối biểu đồ bên dưới (khối "wide" chiếm cả hàng).
   Biểu đồ 1 dãy số = 1 màu (--Series1), không cần chú thích màu; lưới / trục mờ để số liệu nổi lên.
   Mỗi khối có nút Bảng / Biểu đồ để xem số chính xác. */

.Rptli {
    --Series1: #2a78d6;      /* màu dữ liệu (xanh dương) */
    --Series1Hover: #1d5fae;
    padding: var(--Sp4);
    background-color: var(--Surface);
    color: var(--Text);
    white-space: normal;
    min-height: 100%;
}

.Rptli-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--Sp3);
    margin-bottom: var(--Sp4);
}

.Rptli-kpi {
    padding: var(--Sp3) var(--Sp4);
    border: 1px solid var(--Border);
    border-radius: var(--RadLg);
}

.Rptli-kpi-lbl {
    color: var(--TextMuted);
    font-size: var(--FsUi);
}

.Rptli-kpi-val {
    margin: 2px 0;
    font-family: var(--FontNum);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.Rptli-kpi-sub {
    color: var(--TextMuted);
    font-size: var(--FsSm);
}

.Rptli-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: var(--Sp4);
}

.Rptli-card {
    min-width: 0;
    border: 1px solid var(--Border);
    border-radius: var(--RadLg);
    overflow: hidden;
}

    .Rptli-card.wide {
        grid-column: 1 / -1;
    }

.Rptli-card-head {
    display: flex;
    align-items: center;
    gap: var(--Sp2);
    padding: var(--Sp2) var(--Sp3);
    background-color: var(--Surface2);
    border-bottom: 1px solid var(--Border);
}

    .Rptli-card-head::after { /* phần trống bên phải = bằng phần tiêu đề -> nút Table nằm giữa dòng đầu khối */
        content: "";
        flex: 1 1 0;
    }

    .Rptli-card-head h4 {
        flex: 1 1 0;
        min-width: 0;
        margin: 0;
        font-size: var(--FsBody);
        font-weight: bold;
    }

.Rptli-toggle {
    flex: none;
    padding: 2px 10px;
    border: 1px solid var(--Border);
    border-radius: var(--Rad);
    background-color: var(--Surface);
    color: var(--TextMuted);
    font-size: var(--FsSm);
}

    .Rptli-toggle:hover {
        color: var(--Text);
        border-color: #c4c9d0;
    }

.Rptli-view {
    padding: var(--Sp3) var(--Sp4);
}

/* Bảng số liệu ẩn, hiện thay biểu đồ khi bấm nút Bảng */
.Rptli-table {
    display: none;
    border-collapse: collapse;
    font-size: var(--FsUi);
}

.Rptli-card.show-table .Rptli-table {
    display: table;
}

.Rptli-card.show-table .Rptli-svg,
.Rptli-card.show-table .Rptli-bars {
    display: none;
}

    .Rptli-table th {
        padding: 6px 18px;
        border-bottom: 1px solid var(--Border);
        color: var(--TextMuted);
        font-weight: normal;
    }

    .Rptli-table td {
        padding: 6px 18px;
        border-bottom: 1px solid #f0f1f3;
    }

    .Rptli-table .num {
        text-align: right;
    }

    .Rptli-table td.num {
        font-family: var(--FontNum);
    }

/* Cột dọc (SVG theo viewBox - co giãn theo bề rộng khối) */
.Rptli-svg {
    display: block;
    width: 100%;
    height: auto;
}

.Rptli-grid {
    stroke: #eceef1;
    stroke-width: 1;
}

.Rptli-base {
    stroke: #c4c9d0;
    stroke-width: 1;
}

.Rptli-axis {
    fill: var(--TextMuted);
    font-family: var(--FontNum);
    font-size: 12px;
}

    .Rptli-axis.Rptli-axis-date {
        font-family: var(--Font); /* ngày = font chữ */
    }

.Rptli-col {
    fill: var(--Series1);
    transition: fill var(--Ease);
}

    .Rptli-col.is-hover {
        fill: var(--Series1Hover);
    }

.Rptli-hit {
    fill: transparent;
    cursor: default;
}

.Rptli-colval {
    fill: var(--Text);
    font-family: var(--FontNum);
    font-size: 12px;
    font-weight: 600;
}

/* Màu theo mức (%)Req. (RptChart.Band): b0 >= 100 | b1 80-100 | b2 65-80 | b3 50-65 | b4 < 50 - cột, thanh, chú thích, số KPI */
.Rptli {
    --B0: var(--OkDot);
    --B1: #3b82c4;
    --B2: #e0b11e;
    --B3: var(--WarnDot);
    --B4: var(--DangerDot);
}

.Rptli-col.b0, .Rptli-key .b0 { fill: var(--B0); background-color: var(--B0); }
.Rptli-col.b1, .Rptli-key .b1 { fill: var(--B1); background-color: var(--B1); }
.Rptli-col.b2, .Rptli-key .b2 { fill: var(--B2); background-color: var(--B2); }
.Rptli-col.b3, .Rptli-key .b3 { fill: var(--B3); background-color: var(--B3); }
.Rptli-col.b4, .Rptli-key .b4 { fill: var(--B4); background-color: var(--B4); }
.Rptli-bar-fill.b0 { background-color: var(--B0); }
.Rptli-bar-fill.b1 { background-color: var(--B1); }
.Rptli-bar-fill.b2 { background-color: var(--B2); }
.Rptli-bar-fill.b3 { background-color: var(--B3); }
.Rptli-bar-fill.b4 { background-color: var(--B4); }
.Rptli-band.b0 { color: var(--B0); }
.Rptli-band.b1 { color: var(--B1); }
.Rptli-band.b2 { color: var(--B2); }
.Rptli-band.b3 { color: var(--B3); }
.Rptli-band.b4 { color: var(--B4); }

.Rptli-col[class*=" b"].is-hover, .Rptli-bar:hover .Rptli-bar-fill[class*=" b"] {
    opacity: 0.8;
}

/* cột bấm được (data-key) + cột đang chọn, khối chi tiết đang tải */
[data-detail-url] [data-key] {
    cursor: pointer;
}

.Rptli-col.is-sel {
    stroke: #1f2328;
    stroke-width: 2;
}

.Rptli-detail.is-loading .Rptli-view {
    opacity: 0.5;
    transition: opacity var(--Ease);
}

/* dòng tóm tắt trên biểu đồ chi tiết */
.Rptli-detail-sum {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--Sp1) var(--Sp5);
    margin-bottom: var(--Sp2);
    color: var(--TextMuted);
    font-size: var(--FsUi);
}

    .Rptli-detail-sum b {
        margin-left: 4px;
        color: var(--Text);
        font-family: var(--FontNum);
    }

/* vạch đứt mốc (vd 100%) trên biểu đồ cột */
.Rptli-ref {
    stroke: #8a929c;
    stroke-width: 1;
    stroke-dasharray: 5 4;
}

/* chú thích màu mức, nằm trên biểu đồ */
.Rptli-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--Sp1) var(--Sp4);
    margin-bottom: var(--Sp2);
    color: var(--TextMuted);
    font-size: var(--FsSm);
}

.Rptli-key i {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border-radius: 2px;
    vertical-align: -1px;
}

/* ô xem nhanh "Lines by level": thanh xếp chồng số chuyền theo mức */
.Rptli-kpi-dist {
    display: flex;
    height: 26px;
    margin: 6px 0 4px;
    border-radius: var(--Rad);
    overflow: hidden;
}

    .Rptli-kpi-dist span {
        flex: 0 1 0;
        min-width: 24px;
        color: #fff;
        font-family: var(--FontNum);
        font-size: var(--FsUi);
        font-weight: 600;
        line-height: 26px;
        text-align: center;
    }

    .Rptli-kpi-dist .b0 { background-color: var(--B0); }
    .Rptli-kpi-dist .b1 { background-color: var(--B1); }
    .Rptli-kpi-dist .b2 { background-color: var(--B2); }
    .Rptli-kpi-dist .b3 { background-color: var(--B3); }
    .Rptli-kpi-dist .b4 { background-color: var(--B4); }
    .Rptli-kpi-dist .bn { background-color: #b8bec6; } /* chuyền không có dữ liệu trong khoảng */

.Rptli-kpi-of { /* "/ 53" sau số chính */
    color: var(--TextMuted);
    font-size: 0.55em;
}

/* Thanh ngang (HTML): tên | thanh | giá trị ở đầu thanh */
.Rptli-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.Rptli-bar {
    display: grid;
    grid-template-columns: minmax(80px, 34%) 1fr auto;
    align-items: center;
    gap: var(--Sp2);
    padding: 2px 0;
    font-size: var(--FsUi);
}

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

.Rptli-bar-track {
    display: block;
    height: 16px;
}

.Rptli-bar-fill {
    display: block;
    height: 100%;
    border-radius: 0 4px 4px 0; /* bo đầu thanh, vuông ở gốc */
    background-color: var(--Series1);
    transition: background-color var(--Ease);
}

.Rptli-bar:hover .Rptli-bar-fill {
    background-color: var(--Series1Hover);
}

.Rptli-bar-val {
    min-width: 64px;
    text-align: right;
    font-family: var(--FontNum);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.Rptli-empty {
    padding: var(--Sp5);
    border: 1px dashed var(--Border);
    border-radius: var(--RadLg);
    color: var(--TextMuted);
    text-align: center;
}

/* Chú thích khi rê chuột */
.Rptli-tip {
    display: none;
    position: fixed;
    z-index: 1300;
    padding: 4px 8px;
    border-radius: var(--Rad);
    background-color: #1f2328;
    color: #ffffff;
    font-size: var(--FsUi);
    white-space: nowrap;
    pointer-events: none;
    box-shadow: var(--Shadow);
}

    .Rptli-tip.is-open {
        display: block;
    }

/* ..... Đăng nhập / Bảo trì (Views/Account/_AuthLayout.cshtml): 1 khối giữa màn hình trên nền màu chủ đề ..... */
.Authli {
    min-height: 100vh;
    margin: 0;
    padding: var(--Sp5) var(--Sp4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--Sp4);
    background: radial-gradient(ellipse at top, var(--BarActive), var(--BarDark) 70%);
    font-family: var(--Font);
    font-size: var(--FsBody);
    color: var(--Text);
}

.Authli-box {
    width: 100%;
    max-width: 380px;
    padding: var(--Sp5) 28px;
    border-radius: var(--RadLg);
    background-color: var(--Surface);
    box-shadow: var(--ShadowLg);
}

.Authli-brand {
    margin-bottom: var(--Sp4);
    text-align: center;
}

    .Authli-brand img {
        height: 41px;
    }

.Authli-title {
    margin: 0 0 4px 0;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
}

.Authli-sub {
    margin: 0 0 var(--Sp4) 0;
    color: var(--TextMuted);
    text-align: center;
}

.Authli-form {
    display: flex;
    flex-direction: column;
}

    .Authli-form label {
        margin: var(--Sp2) 0 4px 0;
        font-weight: 600;
    }

    .Authli-form input[type="text"],
    .Authli-form input[type="password"],
    .Formli input[type="password"] {
        max-width: none;
        height: 36px;
        padding: 0 var(--Sp3);
        border: 1px solid #c4c9d0;
        border-radius: var(--Rad);
        font-family: var(--FontNum); /* mã NV / mật khẩu: font không chân dễ đọc từng ký tự */
        font-size: var(--FsBody);
    }

        .Authli-form input:focus,
        .Formli input:focus {
            outline: none;
            border-color: var(--Accent);
            box-shadow: 0 0 0 3px var(--AccentSoft);
        }

    .Authli-form .Authli-check {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: var(--Sp3);
        font-weight: normal;
        color: var(--TextMuted);
    }

        .Authli-form .Authli-check input {
            margin: 0;
        }

.Authli-btn {
    display: block;
    width: 100%;
    margin-top: var(--Sp4);
    padding: 9px var(--Sp3);
    border: none;
    border-radius: var(--Rad);
    background-color: var(--Accent);
    color: #1f2328;
    font-size: var(--FsBody);
    font-weight: bold;
    text-align: center;
}

    .Authli-btn:hover,
    .Authli-btn:focus {
        background-color: #ff9470;
        color: #1f2328;
        text-decoration: none;
    }

.Authli-error {
    margin-bottom: var(--Sp3);
    padding: var(--Sp2) var(--Sp3);
    border-radius: var(--Rad);
    background-color: var(--DangerBg);
    color: var(--DangerText);
}

.Authli-note {
    margin: var(--Sp4) 0 0 0;
    color: var(--TextMuted);
    font-size: var(--FsSm);
    text-align: center;
}

.Authli-lang {
    display: flex;
    gap: var(--Sp3);
}

    .Authli-lang a {
        color: var(--BarFont);
        font-size: var(--FsUi);
    }

        .Authli-lang a.active,
        .Authli-lang a:hover {
            color: var(--Fontli);
        }

/* ..... Biểu mẫu 1 cột trong trang (Đổi mật khẩu) ..... */
.Formli {
    width: 100%;
    max-width: 420px;
    padding: var(--Sp5) var(--Sp4);
    white-space: normal;
}

    .Formli label {
        display: block;
        margin: var(--Sp3) 0 4px 0;
    }

    .Formli input[type="password"] {
        width: 100%;
    }

.Formli-title {
    margin: 0;
    font-size: var(--FsTitle);
    font-weight: bold;
}

    .Formli-title .glyphicon {
        top: 1px;
        color: var(--BarBkGrd);
    }

.Formli-sub,
.Formli-hint {
    color: var(--TextMuted);
    font-size: var(--FsSm);
}

.Formli-sub {
    margin: 4px 0 var(--Sp2) 0;
}

.Formli-hint {
    margin-top: 4px;
}

.Formli-info,
.Formli-error {
    margin: var(--Sp3) 0;
    padding: var(--Sp2) var(--Sp3);
    border-radius: var(--Rad);
}

.Formli-info { background-color: var(--InfoBg); color: var(--InfoText); }
.Formli-error { background-color: var(--DangerBg); color: var(--DangerText); }

.Formli-actions {
    display: flex;
    gap: var(--Sp2);
    margin-top: var(--Sp4);
}

/* ..... Trang báo giữa vùng nội dung (Không đủ quyền) ..... */
.Msgli {
    margin: 80px auto;
    max-width: 440px;
    padding: 0 var(--Sp4);
    text-align: center;
    white-space: normal;
    color: var(--Text);
}

    .Msgli h3 {
        margin: var(--Sp3) 0 var(--Sp2) 0;
        font-size: var(--FsTitle);
        font-weight: bold;
    }

    .Msgli p {
        color: var(--TextMuted);
    }

.Msgli-ico {
    font-size: 40px;
    color: var(--TextMuted);
}

/* Menu tài khoản: bật lên ở đáy, cạnh nút tài khoản (cùng kiểu menu ngôn ngữ .Langli) */
.Langli.Langli-bottom {
    top: auto;
    bottom: calc(var(--StatH) + 4px); /* nút tài khoản là hàng cuối thanh bên trái */
}

    .Langli-check.glyphicon {
        top: 0;
    }

/* ..... Hệ thống > Người dùng (Views/lht31/Users.cshtml) ..... */
.Usrli > tbody > tr {
    cursor: pointer;
}

.Usrli-me::after { /* nhãn "bạn" sau mã của chính người đang đăng nhập */
    content: attr(data-me);
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 8px;
    background-color: var(--AccentSoft);
    color: var(--AccentText);
    font-family: var(--Font);
    font-size: var(--FsSm);
}

.Usrli-dlg {
    width: 420px;
    height: auto;
    min-height: 0;
}

.Usrli-form {
    padding: var(--Sp3) var(--Sp4);
    white-space: normal;
}

    .Usrli-form label {
        display: block;
        margin: var(--Sp2) 0 4px 0;
        font-weight: normal;
        color: var(--BarFont);
    }

    .Usrli-form input[type="text"],
    .Usrli-form select {
        width: 100%;
        max-width: none;
        height: 32px;
        padding: 0 var(--Sp2);
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: var(--Rad);
        background-color: var(--BarInput);
        color: var(--Fontli);
        color-scheme: dark;
    }

        .Usrli-form input[readonly] {
            opacity: 0.6;
        }

        .Usrli-form input:focus,
        .Usrli-form select:focus {
            outline: none;
            border-color: var(--Accent);
        }

    .Usrli-form .Usrli-check {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: var(--Sp3);
        color: var(--Fontli);
    }

        .Usrli-form .Usrli-check input {
            margin: 0;
        }

/* ..... Hệ thống > Nhóm quyền (Views/lht31/Roles.cshtml): bảng trang x nhóm, mỗi ô Ẩn / Xem / Sửa ..... */
.Permli {
    padding: var(--Sp4);
    background-color: var(--Surface);
    color: var(--Text);
    white-space: normal;
    min-height: 100%;
}

.Permli-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin: 0 0 var(--Sp3) 0;
    color: var(--TextMuted);
    font-size: var(--FsSm);
}

    .Permli-legend .Permli-lv ~ .Permli-lv {
        margin-left: 10px;
    }

.Permli-note {
    flex-basis: 100%;
}

.Permli-lv {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: var(--FsSm);
    font-weight: 600;
}

    .Permli-lv.lv0 { background-color: #eceef1; color: var(--TextMuted); }
    .Permli-lv.lv1 { background-color: var(--InfoBg); color: var(--InfoText); }
    .Permli-lv.lv2 { background-color: var(--OkBg); color: var(--OkText); }

.Permli-wrap {
    overflow: auto;
    width: fit-content; /* rộng vừa bảng */
    max-width: 100%;
    border: 1px solid var(--Border);
    border-radius: var(--RadLg);
}

.Permli-table {
    border-collapse: separate;
    border-spacing: 0;
}

    .Permli-table th,
    .Permli-table td {
        padding: 8px 18px;
        border-bottom: 1px solid #f0f1f3;
        white-space: nowrap;
        text-align: center;
    }

    .Permli-table thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background-color: var(--Surface2);
        border-bottom: 1px solid var(--Border);
        vertical-align: top;
    }

    .Permli-table .Permli-page {
        text-align: left;
        min-width: 180px;
    }

    .Permli-table td.is-admin,
    .Permli-table th.is-admin {
        background-color: #fafbfc;
    }

.Permli-role-name {
    font-weight: bold;
}

.Permli-role-sub { /* số người trong nhóm, ghi chú nhỏ cạnh tên */
    color: var(--TextMuted);
    font-family: var(--FontNum);
    font-size: var(--FsSm);
    font-weight: normal;
}

.Permli-role-act {
    margin-top: 4px;
}

    .Permli-role-act button {
        padding: 1px 6px;
        border: 1px solid transparent;
        border-radius: var(--Rad);
        background: transparent;
        color: var(--TextMuted);
    }

        .Permli-role-act button:hover {
            border-color: var(--Border);
            background-color: var(--Surface);
            color: var(--Text);
        }

.Permli-group td { /* dòng tên nhóm trang: nền màu riêng để tách từng nhóm */
    padding-top: var(--Sp2);
    padding-bottom: var(--Sp2);
    background-color: #eef1f4;
    border-top: 1px solid var(--Border);
    border-bottom: 1px solid var(--Border);
    color: var(--Text);
    font-size: var(--FsSm);
    font-weight: bold;
    text-align: left !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.Permli-sel {
    max-width: none;
    padding: 2px 6px;
    border: 1px solid transparent;
    border-radius: var(--Rad);
    font-size: var(--FsUi);
    font-weight: 600;
    cursor: pointer;
}

    .Permli-sel.lv0 { background-color: #eceef1; color: var(--TextMuted); }
    .Permli-sel.lv1 { background-color: var(--InfoBg); color: var(--InfoText); }
    .Permli-sel.lv2 { background-color: var(--OkBg); color: var(--OkText); }

    .Permli-sel.is-dirty { /* đã đổi, chưa lưu */
        border-color: var(--Accent);
        box-shadow: 0 0 0 2px var(--AccentSoft);
    }

/* Báo lỗi đầu trang Setup DB (chuyển tới từ Application_Error) */
.Dbli-alert {
    display: flex;
    gap: var(--Sp3);
    margin-bottom: var(--Sp3);
    padding: var(--Sp3) var(--Sp4);
    border: 1px solid var(--DangerDot);
    border-left-width: 4px;
    border-radius: var(--RadLg);
    background-color: var(--DangerBg);
    color: var(--DangerText);
}

    .Dbli-alert > .glyphicon {
        top: 2px;
        font-size: 18px;
    }

.Dbli-alert-msg {
    margin: 4px 0;
    font-family: var(--Mono);
    font-size: var(--FsSm);
    word-break: break-word;
}

/* ..... Bộ chọn kỳ dùng chung (Views/Shared/_PeriodPicker.cshtml) trên thanh Tab: [Ngày|Tuần|Tháng|Năm] Từ Đến Update ..... */
.Perli-units {
    display: inline-flex;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--Rad);
    overflow: hidden;
}

.Perli-unit {
    padding: 0 var(--Sp3);
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    background: transparent;
    color: var(--BarFont);
    font-size: var(--FsUi);
    transition: background-color var(--Ease), color var(--Ease);
}

    .Perli-unit:first-child {
        border-left: none;
    }

    .Perli-unit:hover,
    .Perli-unit:focus {
        background-color: rgba(255, 255, 255, 0.12);
        color: var(--Fontli);
        outline: none;
    }

    .Perli-unit.active { /* đơn vị đang xem: nền màu nhấn */
        background-color: var(--Accent);
        color: #1f2328;
        font-weight: 600;
    }

.Tabli-actions .Perli-input {
    width: 150px;
}

/* ..... Lịch chọn ngày dùng chung (Scripts/lhtcore/Datepick.js): cột Week (tuần ISO) + 7 cột Mo..Su,
   chỉ tô ngày đang chọn, hôm nay có viền. Cùng màu khung (chủ đề) như menu / hộp thoại ..... */
.Dpli {
    display: none;
    position: fixed;
    z-index: 1300;
    padding: var(--Sp2) var(--Sp3) var(--Sp3);
    background-color: var(--BarBkGrd);
    border: 1px solid var(--BarLine);
    border-radius: var(--RadLg);
    box-shadow: var(--Shadow);
    color: var(--Fontli);
    font-size: var(--FsUi);
    user-select: none;
}

    .Dpli.is-open {
        display: block;
    }

.Dpli-head {
    display: flex;
    align-items: center;
    gap: var(--Sp1);
    margin-bottom: var(--Sp2);
}

    .Dpli-head::after { /* phần trống bên phải = bằng phần tiêu đề -> 2 mũi tên nằm giữa lịch */
        content: "";
        flex: 1 1 0;
    }

.Dpli-title {
    flex: 1 1 0;
    white-space: nowrap;
    font-weight: bold;
}

.Dpli-nav {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--Rad);
    background: transparent;
    color: var(--Fontli);
}

    .Dpli-nav:hover {
        background-color: var(--BarHover);
    }

    .Dpli-nav .glyphicon {
        top: 0;
    }

.Dpli-grid {
    border-collapse: collapse; /* không khe giữa các ô -> vạch chia cột Week liền 1 đường */
}

    .Dpli-grid th {
        padding: 2px 0 6px;
        color: var(--BarFont);
        font-weight: normal;
        text-align: center;
    }

    .Dpli-grid td {
        padding: 1px;
        text-align: center;
    }

    .Dpli-grid .Dpli-wk { /* cột số tuần ISO (W40) - ngăn với các ngày bằng vạch mờ */
        min-width: 44px;
        padding-right: 6px;
        border-right: 2px solid rgba(255, 255, 255, 0.35);
        color: rgba(255, 255, 255, 0.8);
        font-family: var(--FontNum);
        font-size: var(--FsSm);
    }

.Dpli-day {
    width: 32px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: var(--Rad);
    background: transparent;
    color: var(--Fontli);
    font-family: var(--FontNum);
}

    .Dpli-day:hover {
        background-color: var(--BarHover);
    }

    .Dpli-day.out { /* ngày của tháng trước / sau */
        color: var(--BarFont);
        opacity: 0.55;
    }

    .Dpli-day.today {
        border-color: rgba(255, 255, 255, 0.45);
    }

    .Dpli-day.sel { /* ngày đang chọn - chỉ tô đúng 1 ô */
        background-color: var(--Accent);
        border-color: var(--Accent);
        color: #1f2328;
        font-weight: 600;
        opacity: 1;
    }

/* Ô ngày trên thanh Tab: chữ số + biểu tượng lịch */
.Tabli-actions .Perli-input[data-datepick] {
    width: 120px; /* ngày dài nhất (2026-May-30) + ~3 khoảng trắng tới biểu tượng lịch */
    padding-right: 26px;
    font-family: var(--FontNum);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='%23ffffff' fill-opacity='.75'%3E%3Cpath d='M4 0h1v2h6V0h1v2h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h2V0zM2 6v9h12V6H2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    cursor: pointer;
}