/* ========================================================
           THƯ VIỆN KÝ HIỆU – Design System (RSHSQH style)
        ======================================================== */
        :root {
            --tkh-green: #1ab394;
            --tkh-green-soft: #eafaf5;
            --tkh-text: #0f172a;
            --tkh-muted: #64748b;
            --tkh-border: #dbe5ea;
            --tkh-bg: #eef3f6;
            --tkh-surface: #ffffff;
            --tkh-hint: var(--color-mauchu-gocweb, #676a6c);
            --tkh-sidebar-w: 260px;
            --tkh-detail-w: 260px;
        }

        /* ── Page shell ── */
        body.thuvienkyhieu-page {
            height: 100dvh;
            overflow: hidden;
            font-size: 12px;
            background: var(--tkh-bg);
            color: var(--color-mauchu-chatgpt);
        }

        body.thuvienkyhieu-page #wrapper,
        body.thuvienkyhieu-page #page-wrapper {
            height: 100dvh;
            min-height: 0;
            overflow: hidden;
        }

        body.thuvienkyhieu-page #page-wrapper {
            display: flex;
            flex-direction: column;
            padding: 0 !important;
            background: var(--tkh-bg) !important;
        }

        body.thuvienkyhieu-page .external-toggle-wrapper {
            top: 41.7px !important;
        }

        #id_thuvienkyhieu_measurement_review {
            display: none !important;
        }

        body.thuvienkyhieu-page #page-wrapper>.wrapper.wrapper-content {
            display: flex;
            flex: 1 1 auto;
            flex-direction: column;
            min-height: 0;
            padding: 0 !important;
        }

        body.thuvienkyhieu-page #page-wrapper>.wrapper.wrapper-content>.row {
            display: flex;
            flex: 1 1 auto;
            margin: 0 !important;
            height: 100%;
        }

        body.thuvienkyhieu-page #page-wrapper>.wrapper.wrapper-content>.row>.col-lg-12,
        body.thuvienkyhieu-page .ibox,
        body.thuvienkyhieu-page .ibox-content {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0;
            padding: 0 !important;
            margin: 0 !important;
            border: none !important;
            background: transparent !important;
        }

        /* ── Workspace (3 cột) ── */
        .thuvienkyhieu-workspace {
            display: grid;
            grid-template-columns: var(--tkh-sidebar-w) minmax(0, 1fr) var(--tkh-detail-w);
            flex: 1 1 auto;
            min-height: 0;
            overflow: hidden;
        }

        /* Scrollbar chung giống RSHSQH */
        .thuvienkyhieu-workspace *::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

        .thuvienkyhieu-workspace *::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.05);
            border-radius: 10px;
        }

        .thuvienkyhieu-workspace *::-webkit-scrollbar-thumb {
            background-color: #94a3b8;
            border-radius: 10px;
            border: 2px solid transparent;
            background-clip: content-box;
        }

        .thuvienkyhieu-workspace *::-webkit-scrollbar-thumb:hover {
            background-color: #475569;
        }

        /* ── Sidebar (cây danh mục) - Sáng màu giống RSHSQH ── */
        .thuvienkyhieu-library-panel {
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            min-width: 0;
            border-right: 1px solid #1ab394 !important;
            background: #ffffff;
            overflow: hidden;
        }

        /* ── Bộ lọc trong Sidebar ── */
        .thuvienkyhieu-library-filters {
            box-sizing: border-box;
            padding: 6px;
            background: #ffffff;
            border-top: none;
            border-bottom: 1px solid #1ab394;
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: 4px;
        }

        .thuvienkyhieu-library-filters>.thuvienkyhieu-tree-item[data-tree-all="1"] {
            grid-column: 1 / -1;
        }

        .thuvienkyhieu-library-search {
            width: 100%;
            height: 28px;
            min-height: 28px;
            box-sizing: border-box;
            border: 1px solid var(--tkh-green);
            border-radius: 3px;
            font-family: "Open Sans", sans-serif;
            font-size: 12.5px;
            font-weight: 400;
            line-height: 26px;
            padding: 0 8px;
            background: #fff;
            color: var(--color-mauchu-chatgpt);
            transition: all 0.2s;
        }

        .thuvienkyhieu-library-search-wrap {
            position: relative;
            min-width: 0;
        }

        .thuvienkyhieu-library-search-wrap::before {
            content: "\f002";
            position: absolute;
            top: 50%;
            left: 8px;
            z-index: 1;
            font-family: FontAwesome;
            color: var(--tkh-hint);
            font-size: 14px;
            pointer-events: none;
            transform: translateY(-50%);
        }

        .thuvienkyhieu-library-search-wrap .thuvienkyhieu-library-search {
            padding-left: 24px;
        }

        .thuvienkyhieu-library-search-wrap:has(.thuvienkyhieu-library-search:not(:placeholder-shown))::before {
            display: none;
        }

        .thuvienkyhieu-library-search-wrap:has(.thuvienkyhieu-library-search:not(:placeholder-shown)) .thuvienkyhieu-library-search {
            padding-left: 8px;
        }

        .thuvienkyhieu-library-search::placeholder {
            color: var(--tkh-hint);
            font-family: "Open Sans", sans-serif;
            font-size: 12.5px;
            font-weight: 400;
            opacity: 1;
        }

        .thuvienkyhieu-library-search:focus {
            outline: none;
            border-color: var(--tkh-green);
            box-shadow: 0 0 0 1px var(--tkh-green);
        }

        /* Select2 trong Sidebar */
        .thuvienkyhieu-library-filters .select2-container {
            width: 100% !important;
            font-family: "Open Sans", sans-serif;
            font-size: 12.5px;
            font-weight: 400;
        }

        .thuvienkyhieu-library-filters .select2-container--default .select2-selection--single {
            position: relative;
            box-sizing: border-box;
            height: 28px !important;
            min-height: 28px !important;
            border: 1px solid #1ab394 !important;
            border-radius: 3px;
            font-size: 12.5px;
            background: #fff;
            display: flex;
            align-items: center;
            transition: border-color 0.2s;
        }

        /* Viền xanh khi có focus/active */
        .thuvienkyhieu-library-filters .select2-container--default.select2-container--open .select2-selection--single,
        .thuvienkyhieu-library-filters .select2-container--default.select2-container--focus .select2-selection--single {
            border-color: var(--tkh-green) !important;
        }

        /* Viền xanh nếu có giá trị (có thể xử lý bằng JS thêm class hoặc dựa vào placeholder) */
        .thuvienkyhieu-library-filters .select2-container--default.has-value .select2-selection--single {
            border-color: var(--tkh-green) !important;
        }

        .thuvienkyhieu-library-filters .select2-container--default .select2-selection--single:has(.select2-selection__clear) {
            border-color: var(--tkh-green) !important;
        }

        .thuvienkyhieu-library-filters .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 26px;
            padding-left: 8px;
            padding-right: 42px;
            color: var(--color-mauchu-chatgpt);
        }

        .thuvienkyhieu-library-filters .select2-container--default .select2-selection--single .select2-selection__placeholder {
            color: var(--tkh-hint) !important;
            font-family: "Open Sans", sans-serif;
            font-size: 12.5px;
            font-weight: 400;
            opacity: 1;
        }

        .thuvienkyhieu-library-filters .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 26px;
        }

        /* Danh sách mở ra dùng cùng màu xanh nhạt với dropdown của trang rà soát. */
        .thuvienkyhieu-filter-dropdown.select2-dropdown {
            border: 1px solid var(--tkh-green) !important;
            border-radius: 0 0 3px 3px;
            overflow: hidden;
        }

        .thuvienkyhieu-filter-dropdown .select2-results__option {
            background: #fff;
            color: #333;
            font-size: 12.5px;
            line-height: 20px;
            padding: 5px 8px;
        }

        .thuvienkyhieu-filter-dropdown .select2-results__option[aria-selected="true"] {
            background: #ddd;
            color: #333;
        }

        .thuvienkyhieu-filter-dropdown .select2-results__option--highlighted[aria-selected],
        .thuvienkyhieu-filter-dropdown .select2-results__option--highlighted[aria-selected="true"] {
            background: #b2e4d4 !important;
            color: #333 !important;
        }

        #id_thuvienkyhieu_hinh_hoc+.select2-container .select2-selection--single::before {
            content: "\f0b0";
            position: absolute;
            top: 50%;
            left: 8px;
            z-index: 1;
            font-family: FontAwesome;
            color: var(--tkh-hint);
            font-size: 13px;
            pointer-events: none;
            padding-top: 1px;
            box-sizing: border-box;
            transform: translateY(-50%);
        }

        #id_thuvienkyhieu_hinh_hoc+.select2-container .select2-selection--single .select2-selection__rendered {
            padding-left: 21px;
        }

        /* Icon lọc chỉ hiển thị khi ô đang ở trạng thái hint. */
        #id_thuvienkyhieu_hinh_hoc+.select2-container.has-value .select2-selection--single::before {
            display: none;
        }

        #id_thuvienkyhieu_hinh_hoc+.select2-container.has-value .select2-selection--single .select2-selection__rendered {
            padding-left: 8px;
        }

        /* Dấu x xóa lựa chọn, đồng bộ với các ô chọn của màn hình rà soát hồ sơ. */
        .thuvienkyhieu-library-filters .select2-container--default .select2-selection--single .select2-selection__clear {
            position: absolute;
            top: 50%;
            right: 18px;
            z-index: 2;
            display: inline-flex;
            width: 14px;
            height: 24px;
            align-items: center;
            justify-content: center;
            margin: 0;
            color: #ed5565 !important;
            font-size: 18px;
            font-weight: bold;
            line-height: 24px;
            transform: translateY(-50%);
        }

        /* ── Tree trong Sidebar ── */
        .thuvienkyhieu-library-tree {
            flex: 1 1 auto;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 6px 6px 8px;
            background: #dff7ef !important;
        }

        .thuvienkyhieu-tree-group {
            margin-bottom: 5px;
        }

        .thuvienkyhieu-tree-section {
            margin: 0 0 5px;
            border: 1px solid transparent;
            padding: 0;
            background: transparent;
        }

        /* KHUNG VÀNG KHI ACTIVE */
        .thuvienkyhieu-tree-section:has(> .thuvienkyhieu-tree-section-item.active) {
            box-sizing: border-box;
            width: 100%;
            padding: 0 6px;
            background: var(--color-daidien-item-active-table-list);
            border: 1px solid #d6a700;
            outline: none;
        }

        .thuvienkyhieu-tree-section:has(> .thuvienkyhieu-tree-section-item.active):has(> .thuvienkyhieu-tree-groups) {
            padding-bottom: 7px;
        }

        .thuvienkyhieu-tree-section-item.active {
            background-color: var(--color-daidien-item-active-table-list);
            ;
        }

        .thuvienkyhieu-tree-item {
            display: flex;
            align-items: center;
            width: 100%;
            box-sizing: border-box;
            padding: 4px;
            color: var(--color-mauchu-chatgpt);
            font-size: 12.5px;
            line-height: 1.25;
            text-align: left;
            transition: none;
            cursor: pointer;
            border: none;
            background: transparent;
        }

        /* Ô Tất cả dùng cùng kiểu khung trắng của các item trong cây. */
        .thuvienkyhieu-tree-item[data-tree-all="1"] {
            position: relative;
            z-index: 2;
            height: 25px;
            min-height: 25px;
            padding: 1px;
            justify-content: center;
            background: #ffffff !important;
            border: 1px solid var(--tkh-green) !important;
            color: var(--tkh-text);
            font-weight: 400;
        }

        .thuvienkyhieu-tree-item[data-tree-all="1"].active {
            background: var(--color-daidien-item-active-table-list) !important;
            border-color: #d6a700 !important;
        }

        .thuvienkyhieu-tree-item[data-tree-all="1"]>.thuvienkyhieu-tree-label {
            flex: 0 0 auto;
            color: #B22222;
            font-weight: 600;
            padding-top: 1px;
            box-sizing: border-box;
        }

        .thuvienkyhieu-tree-item[data-tree-all="1"]>.fa-th-large {
            display: none;
            flex: 0 0 16px;
            width: 16px;
            margin-right: 4px;
            color: #B22222;
            font-size: 13px;
            line-height: 1;
            padding-top: 1px;
            box-sizing: border-box;
            text-align: center;
        }

        /* Tiêu đề mục (QuyHoachCapDien...) */
        .thuvienkyhieu-tree-section-item {
            padding: 4px 0 4px 4px;
            font-weight: 600;
            color: mediumblue;
            align-items: flex-start;
        }

        .thuvienkyhieu-tree-section-item:hover {
            background: transparent;
        }

        .thuvienkyhieu-tree-section-copy {
            display: flex;
            flex: 1 1 auto;
            min-width: 0;
            flex-direction: column;
            align-items: flex-start;
        }

        /* Tiêu đề nhóm giữ một dòng và rút gọn bằng dấu ba chấm khi quá dài. */
        .thuvienkyhieu-tree-section-title-line {
            display: flex;
            width: 100%;
            min-width: 0;
            line-height: 18px;
        }

        .thuvienkyhieu-tree-section-number {
            flex: 0 0 auto;
            white-space: pre;
        }

        .thuvienkyhieu-tree-section-title-line>.thuvienkyhieu-tree-label {
            display: block;
            flex: 1 1 auto;
            min-width: 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            line-height: 18px;
        }

        .thuvienkyhieu-tree-scale {
            max-width: 100%;
            color: mediumvioletred;
            font-size: 12.3px;
            font-weight: 550;
            line-height: 16px;
            white-space: normal;
            overflow-wrap: anywhere;
        }

        .thuvienkyhieu-tree-section-number-spacer {
            display: inline-block;
            color: transparent;
            font-size: 12.5px;
            font-weight: 600;
            line-height: 18px;
            white-space: pre;
            user-select: none;
        }

        .thuvienkyhieu-tree-section-item>.thuvienkyhieu-tree-count {
            margin-top: 0;
            line-height: 18px;
            flex: 0 0 auto;
        }

        /* Biểu tượng caret */
        .thuvienkyhieu-tree-caret {
            flex: 0 0 16px;
            width: 16px;
            margin-right: 2px;
            text-align: center;
            color: #000;
        }

        /* Sidebar hẹp: bỏ caret để tiêu đề và tỷ lệ dùng trọn chiều ngang. */
        .thuvienkyhieu-tree-section-item>.thuvienkyhieu-tree-caret {
            display: none;
        }

        .thuvienkyhieu-tree-label {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: 1;
        }

        /* Định dạng lại biến đếm (count) thành dạng (số) */
        .thuvienkyhieu-tree-count {
            margin-left: 2px;
            background: transparent !important;
            color: #333 !important;
            font-size: 11.5px;
            font-weight: 600;
            border: none !important;
            padding: 0;
        }

        .thuvienkyhieu-tree-count::before {
            content: '(';
        }

        .thuvienkyhieu-tree-count::after {
            content: ')';
        }

        .thuvienkyhieu-tree-group-item .thuvienkyhieu-tree-count {
            font-size: 12px;
            font-weight: 400;
            color: #64748b !important;
        }

        .thuvienkyhieu-tree-section-item .thuvienkyhieu-tree-count {
            font-size: 13px;
            font-weight: 600;
            color: var(--color-mauchu-chatgpt) !important;
        }

        .thuvienkyhieu-tree-item[data-tree-all="1"] .thuvienkyhieu-tree-count {
            font-size: 13px;
            font-weight: 600;
            color: #B22222 !important;
            padding-top: 0;
            box-sizing: border-box;
        }

        /* Nhóm mục con - CÓ KHUNG XANH BAO QUANH NHƯ HÌNH MẪU MỚI NHẤT */
        .thuvienkyhieu-tree-groups {
            background: #ffffff;
            border: none;
            margin: 0;
        }

        /* Từng mục con bên trong khung */
        .thuvienkyhieu-tree-group-item {
            height: auto;
            min-height: 25px;
            box-sizing: border-box;
            padding: 3px 4px;
            border: 1px solid var(--tkh-green);
            border-bottom: none;
        }

        .thuvienkyhieu-tree-group-item>.thuvienkyhieu-tree-label {
            white-space: normal;
            overflow: visible;
            text-overflow: clip;
            line-height: 18px;
        }

        .thuvienkyhieu-tree-group-item:last-child {
            border-bottom: 1px solid var(--tkh-green) !important;
        }

        /* MỤC CON KHI ĐƯỢC CLICK (MÀU VÀNG) */
        .thuvienkyhieu-tree-group-item.active {
            position: relative;
            z-index: 2;
            background: var(--color-daidien-item-active-table-list) !important;
            font-weight: 600;
            color: #000;
            border: 1px solid #d6a700 !important;
            box-shadow: none;
        }

        .thuvienkyhieu-tree-group-item.active+.thuvienkyhieu-tree-group-item {
            border-top: none;
        }

        .thuvienkyhieu-tree-group-item:hover {
            background: inherit;
            color: inherit;
        }

        .thuvienkyhieu-tree-child-icon {
            flex: 0 0 16px;
            width: 16px;
            margin-right: 4px;
            text-align: center;
            color: #ed5565;
        }

        /* Khu vực danh sách thẻ (Panel giữa) */
        .thuvienkyhieu-list-panel {
            background-color: #f0fbf8 !important;
            box-sizing: border-box;
            padding: 15px;
            overflow-y: auto;
            height: 100%;
        }

        .thuvienkyhieu-gallery {
            display: grid;
            /* Luôn giữ đúng 3 thẻ mỗi dòng, kể cả khi trình duyệt thu/phóng. */
            grid-template-columns: repeat(3, minmax(0, 1fr));
            grid-auto-rows: min-content;
            column-gap: 15px;
            row-gap: 15px;
        }

        .thuvienkyhieu-gallery:has(.is-layout-khungbanve) {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) clamp(110px, 20%, 130px);
        }

        .thuvienkyhieu-gallery-load-sentinel {
            grid-column: 1 / -1;
            width: 100%;
            height: 1px;
            pointer-events: none;
        }

        /* Card giống widget RSHSQH */
        .thuvienkyhieu-gallery-card {
            display: flex;
            flex-direction: column;
            min-width: 0;
            width: 100%;
            --tkh-card-preview-width: 136px;
            --tkh-card-preview-height: 72px;
            padding: 0;
            background: #ffffff;
            border: 1px solid #1ab394;
            border-radius: 8px;
            color: inherit;
            font: inherit;
            text-align: inherit;
            cursor: pointer;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
        }

        .thuvienkyhieu-gallery-card:not(.is-layout-khungbanve):not(.is-layout-khungten):not(.is-full-width) {
            height: 100%;
            min-height: 110px;
        }

        .thuvienkyhieu-gallery-card:not(.is-layout-khungbanve):not(.is-layout-khungten):not(.is-full-width) .thuvienkyhieu-gallery-preview {
            height: auto;
            max-height: none;
            flex: 1 1 auto;
            min-height: 70px;
            overflow: hidden;
        }

        .thuvienkyhieu-gallery-card.is-layout-khungbanve {
            grid-column: 1 / 3;
            grid-row: span 3;
            height: 375px;
            max-height: 375px;
        }

        .thuvienkyhieu-gallery-card.is-layout-khungbanve .thuvienkyhieu-gallery-preview {
            height: calc(375px - 34px);
            max-height: calc(375px - 34px);
            flex: 1 1 auto;
            padding: 4px 6px;
            background: #ffffff;
            overflow: hidden;
        }

        .thuvienkyhieu-gallery-card.is-layout-khungbanve .thuvienkyhieu-phase-preview {
            width: 100%;
            height: 100%;
        }

        .thuvienkyhieu-gallery-card.is-layout-khungbanve .thuvienkyhieu-gallery-preview-visual-wrap {
            width: 100%;
            height: 100%;
            max-width: 100%;
            max-height: 100%;
            overflow: auto;
        }

        .thuvienkyhieu-gallery-card.is-layout-khungbanve .thuvienkyhieu-phase-preview-image {
            max-width: none;
            max-height: none;
        }

        .thuvienkyhieu-gallery-card.is-layout-khungten,
        .thuvienkyhieu-gallery-card.is-full-width {
            grid-column: 1 / -1;
            height: auto;
            max-height: none;
        }

        .thuvienkyhieu-gallery-card.is-layout-khungten .thuvienkyhieu-gallery-preview,
        .thuvienkyhieu-gallery-card.is-full-width .thuvienkyhieu-gallery-preview {
            height: auto;
            max-height: none;
            flex: 0 0 auto;
            padding: 14px 14px;
            background: #ffffff;
            overflow: visible;
        }

        .thuvienkyhieu-gallery-card.is-layout-khungten .thuvienkyhieu-phase-preview,
        .thuvienkyhieu-gallery-card.is-full-width .thuvienkyhieu-phase-preview {
            width: 100%;
            height: auto;
        }

        .thuvienkyhieu-gallery-card.is-layout-khungten .thuvienkyhieu-gallery-preview-visual-wrap,
        .thuvienkyhieu-gallery-card.is-full-width .thuvienkyhieu-gallery-preview-visual-wrap {
            width: 100%;
            height: auto;
            max-width: 100%;
            max-height: none;
            overflow: visible;
        }

        .thuvienkyhieu-gallery-card.is-layout-khungten .thuvienkyhieu-phase-preview-image,
        .thuvienkyhieu-gallery-card.is-full-width .thuvienkyhieu-phase-preview-image {
            max-width: none;
            max-height: none;
        }

        .thuvienkyhieu-gallery-card:hover {
            border-color: var(--tkh-green);
            box-shadow: 0 8px 16px rgba(26, 179, 148, 0.12);
            transform: none;
        }

        .thuvienkyhieu-gallery-card:focus-visible {
            outline: 3px solid rgba(26, 179, 148, 0.35);
            outline-offset: 2px;
        }

        .thuvienkyhieu-gallery-card.active {
            border-color: #d6a700;
            box-shadow: none;
            background: var(--color-daidien-item-active-table-list);
        }

        .thuvienkyhieu-gallery-card.active .thuvienkyhieu-gallery-preview {
            background: var(--color-daidien-item-active-table-list);
            border-bottom-color: #d6a700;
        }

        .thuvienkyhieu-gallery-card.active .thuvienkyhieu-gallery-name {
            background: var(--color-daidien-item-active-table-list);
        }

        .thuvienkyhieu-gallery-card.active .thuvienkyhieu-gallery-footer {
            background: var(--color-daidien-item-active-table-list);
        }

        .thuvienkyhieu-gallery-card.active .thuvienkyhieu-gallery-meta {
            background: var(--color-daidien-item-active-table-list);
        }

        /* Preview vùng ảnh */
        .thuvienkyhieu-gallery-preview {
            display: flex;
            flex: 0 0 var(--tkh-card-preview-height);
            align-items: center;
            justify-content: center;
            height: var(--tkh-card-preview-height);
            box-sizing: border-box;
            /* Thu gọn khoảng trống quanh mẫu ký hiệu. */
            background: #ffffff;
            /* Nền trắng bên trong thẻ */
            border-bottom: 1px solid #1ab394;
            /* Chừa khoảng thở trên/dưới để ký hiệu không sát mép preview. */
            padding: 5px 0;
            position: relative;
            overflow: hidden;
        }

        .thuvienkyhieu-gallery-preview img,
        .thuvienkyhieu-gallery-preview svg {
            display: block;
            max-width: 100%;
            max-height: var(--tkh-card-preview-height);
            object-fit: contain;
            /* Kích thước preview giữ nguyên khi hover/cuộn, không zoom theo con trỏ. */
            transform: none;
            transition: none;
        }

        /* Tên card và cụm thông tin phase/tỷ lệ */
        .thuvienkyhieu-gallery-footer {
            display: flex;
            flex: 0 0 34px;
            min-height: 34px;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 3px;
            min-width: 0;
            padding: 0 8px;
            box-sizing: border-box;
            background: #ffffff;
            text-align: center;
        }

        .thuvienkyhieu-gallery-footer.has-meta {
            flex: 0 0 auto;
            min-height: 48px;
            padding: 4px 8px 5px;
            text-align: center;
        }

        .thuvienkyhieu-gallery-name {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            min-width: 0;
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            font-size: 12.5px;
            font-weight: 600;
            color: #1e293b;
            line-height: 1.25;
            text-align: center;
            word-break: break-word;
            overflow-wrap: anywhere;
        }

        /* Tách nhẹ tên ký hiệu khỏi cụm badge bên trên, giữ card gọn và đều. */
        .thuvienkyhieu-gallery-footer.has-meta .thuvienkyhieu-gallery-name {
            margin-top: 0;
            flex: 0 0 auto;
            height: auto;
        }

        .thuvienkyhieu-gallery-meta {
            order: -1;
            display: flex;
            flex: 0 0 auto;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 4px;
            width: 100%;
            min-width: 0;
            max-width: 100%;
            margin: 0;
            padding: 0;
        }

        .thuvienkyhieu-gallery-meta-item {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            max-width: 100%;
            border-radius: 10px;
            padding: 1px 7px;
            background: #e7edf2;
            border: 1px solid #d3dde5;
            color: #475569;
            font-size: 11px;
            font-weight: 400;
            line-height: 1.25;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            box-shadow: 0 2px 4px rgba(71, 85, 105, 0.12);
        }

        .thuvienkyhieu-preview-empty {
            color: #94a3b8;
            font-size: 12.5px;
            font-style: italic;
        }

        /* Phase strip bên trong card */
        .thuvienkyhieu-phase-strip {
            display: flex;
            flex-direction: row;
            gap: 12px;
            width: 100%;
            height: 100%;
            justify-content: center;
            align-items: stretch;
        }

        .thuvienkyhieu-phase-preview {
            /* Chia đều 3 cột; nội dung nhãn bên dưới không được kéo rộng cột. */
            position: relative;
            flex: 1 1 0;
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            /* Giữ khoảng cách gọn giữa nội dung preview. */
            padding: 0;
            border: none;
            /* Bỏ viền thừa */
            background: transparent;
            width: 100%;
            height: 100%;
        }

        .thuvienkyhieu-phase-preview img,
        .thuvienkyhieu-phase-preview svg {
            display: block;
            width: auto;
            height: auto;
            max-width: none;
            max-height: none;
            min-width: 0;
            flex: 0 0 auto;
            /* Mức 1× dùng kích thước SVG nếu vừa khung; chỉ thu nhỏ mẫu
               lớn hơn thẻ, không tự phóng mẫu nhỏ lên. */
            object-fit: contain;
            transform: none;
            transform-origin: center center;
            border-radius: 0 !important;
            margin: auto;
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
        }

        .thuvienkyhieu-gallery-preview-visual-wrap {
            position: relative;
            display: flex;
            width: 100%;
            height: 100%;
            max-width: 100%;
            max-height: 100%;
            min-width: 0;
            min-height: 0;
            align-items: center;
            justify-content: center;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
        }

        .thuvienkyhieu-gallery-preview-visual-wrap::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }

        .thuvienkyhieu-gallery-preview-visual-wrap::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.03);
            border-radius: 3px;
        }

        .thuvienkyhieu-gallery-preview-visual-wrap::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 3px;
        }

        .thuvienkyhieu-gallery-preview-visual-wrap::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        .thuvienkyhieu-gallery-preview-zoom-controls {
            position: absolute;
            top: 3px;
            right: 3px;
            z-index: 10;
            display: inline-flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 0;
            padding: 1px 2px;
            border-radius: 4px;
            background: rgba(15, 23, 42, 0.72);
            color: #ffffff;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.2s ease, visibility 0.2s ease;
        }

        .thuvienkyhieu-gallery-card:hover .thuvienkyhieu-gallery-preview-zoom-controls,
        .thuvienkyhieu-gallery-card:focus-within .thuvienkyhieu-gallery-preview-zoom-controls,
        .thuvienkyhieu-phase-preview:hover .thuvienkyhieu-gallery-preview-zoom-controls,
        .thuvienkyhieu-phase-preview:focus-within .thuvienkyhieu-gallery-preview-zoom-controls,
        .thuvienkyhieu-gallery-preview-visual-wrap:hover .thuvienkyhieu-gallery-preview-zoom-controls,
        .thuvienkyhieu-gallery-preview-visual-wrap:focus-within .thuvienkyhieu-gallery-preview-zoom-controls {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .thuvienkyhieu-gallery-preview-zoom-out,
        .thuvienkyhieu-gallery-preview-zoom-in {
            display: inline-flex;
            width: 16px;
            height: 16px;
            align-items: center;
            justify-content: center;
            border-radius: 2px;
            color: #ffffff;
            cursor: pointer;
            font-size: 13px;
            font-weight: 700;
            line-height: 1;
            user-select: none;
            order: initial;
        }

        .thuvienkyhieu-gallery-preview-zoom-out:hover,
        .thuvienkyhieu-gallery-preview-zoom-in:hover,
        .thuvienkyhieu-gallery-preview-zoom-out:focus-visible,
        .thuvienkyhieu-gallery-preview-zoom-in:focus-visible {
            background: rgba(26, 179, 148, 0.95);
            outline: none;
        }

        .thuvienkyhieu-gallery-preview-zoom-out.is-disabled,
        .thuvienkyhieu-gallery-preview-zoom-in.is-disabled {
            cursor: not-allowed;
            opacity: 0.4;
        }

        .thuvienkyhieu-gallery-preview-zoom-level {
            min-width: 20px;
            color: #ffffff;
            font-size: 9px;
            font-weight: 700;
            line-height: 16px;
            text-align: center;
            user-select: none;
            order: initial;
        }

        /* Hover vào tên ký hiệu để xem ảnh PNG mẫu cắt từ PDF trong popup đối chiếu. */
        .thuvienkyhieu-pdf-compare-target {
            cursor: zoom-in;
            border-radius: 0 !important;
        }

        .thuvienkyhieu-pdf-compare-target.is-missing {
            cursor: pointer;
        }

        .thuvienkyhieu-pdf-compare-popup {
            position: fixed;
            z-index: 10;
            width: max-content;
            min-width: 120px;
            max-width: min(320px, calc(100vw - 20px));
            box-sizing: border-box;
            padding: 6px;
            border: 1px solid #1ab394;
            border-radius: 8px;
            background: #f1f5f9;
            box-shadow: 0 10px 28px rgba(15, 23, 42, 0.28);
            color: #172033;
            pointer-events: auto;
        }

        .thuvienkyhieu-pdf-compare-popup.is-zoomed {
            max-width: min(760px, calc(100vw - 20px));
        }

        .thuvienkyhieu-pdf-compare-popup[hidden] {
            display: none !important;
        }

        .thuvienkyhieu-pdf-compare-popup-image-wrap {
            position: relative;
            display: flex;
            min-height: 36px;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border: 1px solid #475569;
            border-radius: 5px;
            background: #64748b;
            padding: 4px;
        }

        .thuvienkyhieu-pdf-compare-popup-zoom-controls {
            position: absolute;
            z-index: 1;
            top: 4px;
            right: 4px;
            display: inline-flex;
            gap: 2px;
        }

        .thuvienkyhieu-pdf-compare-popup-zoom-controls[hidden] {
            display: none !important;
        }

        .thuvienkyhieu-pdf-compare-popup-zoom-out,
        .thuvienkyhieu-pdf-compare-popup-zoom-in {
            display: inline-flex;
            width: 22px;
            height: 22px;
            align-items: center;
            justify-content: center;
            padding: 0;
            border: 1px solid rgba(255, 255, 255, 0.85);
            border-radius: 6px;
            background: rgba(15, 23, 42, 0.78);
            color: #ffffff;
            cursor: pointer;
            font-size: 17px;
            font-weight: 600;
            line-height: 1;
            transition: background-color 0.15s ease, transform 0.15s ease;
        }

        .thuvienkyhieu-pdf-compare-popup-zoom-out:hover:not(:disabled),
        .thuvienkyhieu-pdf-compare-popup-zoom-in:hover:not(:disabled),
        .thuvienkyhieu-pdf-compare-popup-zoom-out:focus-visible,
        .thuvienkyhieu-pdf-compare-popup-zoom-in:focus-visible {
            background: #0f766e;
            outline: none;
            transform: scale(1.05);
        }

        .thuvienkyhieu-pdf-compare-popup-zoom-out:disabled,
        .thuvienkyhieu-pdf-compare-popup-zoom-in:disabled {
            cursor: not-allowed;
            opacity: 0.45;
        }

        .thuvienkyhieu-pdf-compare-popup-image {
            display: block;
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 240px;
            image-rendering: auto;
        }

        .thuvienkyhieu-pdf-compare-popup.is-zoomed .thuvienkyhieu-pdf-compare-popup-image {
            max-height: min(620px, 72vh);
        }

        .thuvienkyhieu-pdf-compare-popup-empty {
            padding: 12px 8px;
            color: #f1f5f9;
            font-size: 12px;
            font-style: italic;
            text-align: center;
        }

        .thuvienkyhieu-pdf-compare-popup-meta {
            margin-top: 4px;
            color: #475569;
            font-size: 10px;
            line-height: 1.35;
            overflow-wrap: anywhere;
            max-width: 280px;
        }

        .thuvienkyhieu-phase-preview>.thuvienkyhieu-preview-empty {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: calc(var(--tkh-card-preview-height) - 12px);
            flex: 0 0 calc(var(--tkh-card-preview-height) - 12px);
            text-align: center;
        }

        .thuvienkyhieu-phase-label {
            display: flex;
            align-items: center;
            justify-content: center;
            max-width: 100%;
            min-width: 0;
            min-height: 22px;
            box-sizing: border-box;
            overflow: hidden;
            color: #000000;
            font-size: 10.5px;
            font-weight: 500;
            line-height: 1.2;
            text-align: center;
            text-overflow: ellipsis;
            white-space: nowrap;
            background: #ffe1d6;
            /* Ba nhãn phase dùng chung nền đỏ cam nhạt, chữ đen. */
            padding: 3px 8px;
            border-radius: 12px;
        }

        .thuvienkyhieu-detail-viewbar {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 4px;
            margin-top: 0;
            min-width: 0;
            overflow: hidden;
        }

        .thuvienkyhieu-detail-viewbar-header {
            margin-top: 0;
            padding: 3px 6px;
            border-bottom: 1px solid #1ab394 !important;
            background: #dff7ef !important;
            box-sizing: border-box;
        }

        .thuvienkyhieu-detail-actions {
            display: flex;
            flex: 1 1 auto;
            justify-content: flex-start;
            gap: 2px;
            margin-top: 0;
        }

        .thuvienkyhieu-detail-action {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            width: auto;
            min-width: 0;
            min-height: 22px;
            padding: 2px 4px;
            border: 0;
            border-bottom: 2px solid transparent;
            border-radius: 0;
            background: transparent !important;
            color: #64748b;
            font-size: 12.5px;
            font-weight: 600;
            line-height: 1.2;
            cursor: pointer;
            white-space: nowrap;
        }

        .thuvienkyhieu-detail-action-map {
            color: blue;
        }

        .thuvienkyhieu-detail-action-cad {
            color: red;
        }

        .thuvienkyhieu-detail-action-combo {
            color: green;
        }

        .thuvienkyhieu-detail-action.is-active {
            border-bottom-color: blue;
            background: transparent !important;
            color: blue;
        }

        .thuvienkyhieu-detail-action-cad.is-active {
            border-bottom-color: red;
            color: red;
        }

        .thuvienkyhieu-detail-action-combo.is-active {
            border-bottom-color: green;
            color: green;
        }

        .thuvienkyhieu-detail-map-fullscreen {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            flex: 1 1 auto;
            width: max-content;
            max-width: 100%;
            margin: 0;
            padding: 0;
            border: 0;
            background: transparent;
            color: #5367bd;
            font-size: 12px;
            line-height: 1.3;
            text-decoration: none;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: pointer;
            justify-content: flex-end;
        }

        .thuvienkyhieu-detail-map-fullscreen:hover {
            color: #2c4b9b;
        }

        .thuvienkyhieu-detail-map:fullscreen,
        .thuvienkyhieu-detail-map:-webkit-full-screen {
            width: 100vw;
            height: 100vh;
            min-height: 100vh;
            margin: 0;
            border: 0;
            border-radius: 0;
        }

        .thuvienkyhieu-detail-preview {
            width: 100%;
            min-width: 0;
            overflow: hidden;
        }

        .thuvienkyhieu-detail-svg {
            position: relative;
            width: 100%;
            min-width: 0;
            box-sizing: border-box;
            background: #ffffff;
            border-bottom: 0;
        }

        .thuvienkyhieu-detail-svg-wrap {
            display: flex;
            align-items: center;
            justify-content: center;
            height: var(--tkh-card-preview-height, 72px);
            min-height: var(--tkh-card-preview-height, 72px);
            background: #ffffff;
            box-sizing: border-box;
            position: relative;
            overflow: hidden;
            padding: 5px 0;
        }

        .thuvienkyhieu-detail-svg-wrap .thuvienkyhieu-phase-strip {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .thuvienkyhieu-detail-svg-wrap .thuvienkyhieu-phase-preview {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .thuvienkyhieu-detail-svg-wrap .thuvienkyhieu-gallery-preview-visual-wrap {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }

        .thuvienkyhieu-detail-svg-wrap img,
        .thuvienkyhieu-detail-svg-wrap svg {
            display: block;
            width: auto;
            height: auto;
            max-width: none;
            max-height: none;
            object-fit: contain;
            margin: auto;
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
        }

        .thuvienkyhieu-detail-section-label {
            display: none !important;
        }

        .thuvienkyhieu-detail-panel.is-combo-mode .thuvienkyhieu-detail-section-label {
            display: flex !important;
            align-items: center;
            gap: 5px;
            padding: 4px 8px;
            font-size: 10px;
            font-weight: 600;
            font-style: italic;
            line-height: 1.2;
            text-transform: none;
            letter-spacing: normal;
            background: var(--color-daidien-item-active-table-list, lightyellow) !important;
            color: #000000 !important;
            border-top: 1px solid #1ab394 !important;
            border-bottom: 1px solid #1ab394 !important;
        }

        .thuvienkyhieu-detail-panel.is-combo-mode .thuvienkyhieu-detail-section-label .fa {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #000000 !important;
            font-size: 10px;
            font-style: normal !important;
            line-height: 1;
            margin: 0;
            padding-top: 1px;
            vertical-align: middle;
        }

        .thuvienkyhieu-detail-panel.is-combo-mode #id_thuvienkyhieu_detail_combo_svg_label {
            border-top: 0 !important;
        }

        .thuvienkyhieu-detail-panel.is-combo-mode {
            overflow-y: auto !important;
        }

        .thuvienkyhieu-detail-panel.is-combo-mode .thuvienkyhieu-detail-preview {
            overflow: visible;
        }

        .thuvienkyhieu-detail-panel.is-combo-mode .thuvienkyhieu-detail-scroll {
            overflow-y: visible !important;
            flex: 0 0 auto;
        }

        .thuvienkyhieu-detail-map {
            position: relative;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            height: 220px;
            min-height: 220px;
            margin: 0;
            overflow: hidden;
            border: 0;
            border-radius: 0;
            background: #223148;
            isolation: isolate;
            box-shadow: none;
            box-sizing: border-box;
        }

        .thuvienkyhieu-map-loading {
            position: absolute;
            inset: 0;
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: rgba(11, 21, 38, 0.72);
            color: #fff;
            font-size: 12.5px !important;
            line-height: 1.2;
            font-weight: 400;
            pointer-events: none;
        }

        .thuvienkyhieu-map-loading[hidden] {
            display: none !important;
        }

        .thuvienkyhieu-map-loading-text {
            font-size: 12.5px !important;
            line-height: 1.2 !important;
            font-weight: 400 !important;
        }

        .thuvienkyhieu-map-loading-spinner {
            width: 24px;
            height: 24px;
            border: 3px solid rgba(255, 255, 255, 0.35);
            border-top-color: #fff;
            border-radius: 50%;
            animation: thuvienkyhieu-map-loading-spin 0.8s linear infinite;
        }

        .thuvienkyhieu-map-deferred {
            position: absolute;
            inset: 0;
            z-index: 9;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px;
            box-sizing: border-box;
            background: #223148;
            color: #dbeafe;
            font-size: 12px;
            line-height: 1.35;
            text-align: center;
        }

        .thuvienkyhieu-map-deferred[hidden] {
            display: none !important;
        }

        @keyframes thuvienkyhieu-map-loading-spin {
            to {
                transform: rotate(360deg);
            }
        }

        .thuvienkyhieu-detail-cad {
            display: flex;
            align-items: center;
            justify-content: center;
            width: calc(100% + 28px);
            height: 220px;
            min-height: 220px;
            margin: 0 -14px 0;
            border-top: 0;
            border-bottom: 1px solid #1ab394;
            padding: 0;
            box-sizing: border-box;
            background: #0b1526;
            overflow: hidden;
        }

        .thuvienkyhieu-cad-sheet {
            position: relative;
            display: flex;
            width: 100%;
            /* Khung lưới chỉ bao quanh vùng CAD demo; không để dải đen dư
               quá xa phía trên và phía dưới hình. */
            height: 220px;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            padding: 8px;
            box-sizing: border-box;
            background-color: #000;
            /* Lưới CAD giống vùng xem DXF: ô nhỏ và đường chính định kỳ. */
            background-image:
                linear-gradient(rgba(148, 163, 184, .42) 1px, transparent 1px),
                linear-gradient(90deg, rgba(148, 163, 184, .42) 1px, transparent 1px),
                linear-gradient(rgba(100, 116, 139, .26) 1px, transparent 1px),
                linear-gradient(90deg, rgba(100, 116, 139, .26) 1px, transparent 1px);
            background-size: 125px 125px, 125px 125px, 25px 25px, 25px 25px;
            background-position: center center;
            cursor: grab;
            user-select: none;
        }

        .thuvienkyhieu-cad-sheet.is-panning {
            cursor: grabbing;
        }

        .thuvienkyhieu-cad-scene {
            position: absolute;
            inset: 0;
            transform-origin: 0 0;
            pointer-events: none;
        }

        .thuvienkyhieu-cad-phase-grid {
            position: absolute;
            inset: 0;
            display: grid;
            grid-template-columns: repeat(var(--thuvienkyhieu-cad-phase-count, 1), minmax(0, 1fr));
            align-items: center;
            justify-items: center;
            gap: 8px;
            padding: 8px 8px 12px;
            box-sizing: border-box;
        }

        .thuvienkyhieu-cad-phase {
            position: relative;
            display: flex;
            width: 100%;
            height: 100%;
            min-width: 0;
            min-height: 0;
            align-items: center;
            justify-content: center;
        }

        .thuvienkyhieu-cad-phase-label {
            position: absolute;
            right: 0;
            bottom: -26px;
            left: 0;
            overflow: hidden;
            color: #cbd5e1;
            font-size: 10px;
            line-height: 1.1;
            text-align: center;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* CAD demo polygon dùng chung hình học với thửa WebGIS; diện tích demo
           được dựng lớn hơn trong đơn vị mm, còn hatch/viền đọc nguyên cadMm. */
        .thuvienkyhieu-cad-phase.is-polygon-demo .thuvienkyhieu-cad-vector-host,
        .thuvienkyhieu-cad-phase.is-line-demo .thuvienkyhieu-cad-vector-host {
            clip-path: none;
        }

        .thuvienkyhieu-cad-phase.is-polygon-demo .thuvienkyhieu-cad-vector-host svg,
        .thuvienkyhieu-cad-phase.is-line-demo .thuvienkyhieu-cad-vector-host svg {
            width: auto;
            height: auto;
        }

        /* Khung bản vẽ là bố cục cố định, không phải polygon demo. Giữ
           nguyên viewBox 1180 × 820 mm và chỉ fit toàn bộ sheet vào ô xem. */
        .thuvienkyhieu-cad-phase.is-layout-fixed .thuvienkyhieu-cad-vector-host {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .thuvienkyhieu-cad-phase.is-layout-fixed .thuvienkyhieu-cad-vector-host svg {
            width: 53.5%;
            height: 53.5%;
            max-width: 53.5%;
            max-height: 53.5%;
        }

        .thuvienkyhieu-cad-vector-host {
            position: relative;
            display: flex;
            flex: 0 0 auto;
            max-width: none;
            max-height: none;
            align-items: center;
            justify-content: center;
            padding: 0;
            background: transparent;
            /* Không vẽ khung bao quanh SVG; đây không phải nét của ký hiệu. */
            box-shadow: none;
        }

        .thuvienkyhieu-cad-vector-host svg {
            display: block;
            width: auto;
            max-width: none;
            height: auto;
            max-height: none;
            overflow: visible;
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
        }

        /* Không để vùng CAD ẩn vẫn chiếm chỗ bên dưới preview bản đồ. */
        .thuvienkyhieu-detail-map[hidden],
        .thuvienkyhieu-detail-cad[hidden] {
            display: none !important;
        }

        .thuvienkyhieu-detail-map .esri-view {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            max-width: 100%;
            max-height: 100%;
            border: 0 !important;
            border-radius: 0 !important;
            box-shadow: none !important;
        }

        /* ArcGIS focus vào surface khi click bản đồ; không hiện viền xanh
           quanh khung demo bằng chuột. Focus bằng bàn phím vẫn được giữ. */
        .thuvienkyhieu-detail-map:focus,
        .thuvienkyhieu-detail-map .esri-view:focus,
        .thuvienkyhieu-detail-map .esri-view-surface:focus:not(:focus-visible) {
            outline: none !important;
            -webkit-tap-highlight-color: transparent;
        }

        .thuvienkyhieu-detail-map .esri-attribution {
            display: none !important;
        }

        /* ── Detail panel (bên phải) ── */
        .thuvienkyhieu-detail-panel {
            box-sizing: border-box;
            border-left: 1px solid #1ab394;
            background: var(--tkh-surface);
            display: flex;
            flex-direction: column;
            min-width: 0;
            min-height: 0;
            overflow: hidden;
        }

        .thuvienkyhieu-detail-export-bar {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 4px;
            min-height: 32px;
            padding: 3px 6px;
            border-bottom: 1px solid #1ab394;
            background: #ffffff;
            flex: 0 0 auto;
            white-space: nowrap;
            overflow: hidden;
        }

        .thuvienkyhieu-export-icon {
            flex: 0 0 auto;
            color: black;
            font-size: 14px;
            font-weight: 700;
            padding-top: 3px;
            padding-right: 10px;
        }

        /* Export buttons */
        .btn-export-platform {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            flex: 0 0 auto;
            width: auto;
            min-width: 0;
            height: 22px;
            padding: 0 1px;
            border: 0;
            border-radius: 0;
            background: transparent !important;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
            transition: color 0.15s, transform 0.1s;
            justify-content: center;
        }

        .btn-export-platform::before {
            display: none;
        }

        .btn-export-platform:hover::before {
            display: none;
        }

        .btn-export-platform:active {
            transform: scale(0.96);
        }

        .btn-export-platform:hover {
            text-decoration: underline;
            filter: none;
        }

        .btn-export-platform.is-exporting,
        .btn-export-platform:disabled {
            cursor: wait;
            opacity: 0.78;
            transform: none;
        }

        .btn-export-platform .ep-icon {
            display: none;
            width: 14px;
            height: 14px;
            flex-shrink: 0;
            align-items: center;
            justify-content: center;
        }

        .btn-export-platform .ep-download-mark {
            display: none;
        }

        .btn-export-arcgis-desktop {
            color: #1677c8;
        }

        .btn-export-arcgis-pro {
            color: #4f5bd5;
        }

        .btn-export-qgis {
            color: #2e9f45;
        }

        .btn-export-autocad {
            color: #e0442e;
        }

        .btn-export-web {
            color: #0f766e;
        }

        .thuvienkyhieu-detail-scroll {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            padding: 0 14px 16px;
            background: #ffffff;
        }

        .thuvienkyhieu-detail-empty {
            padding: 40px 10px;
            text-align: center;
            font-size: 12.5px;
        }

        .thuvienkyhieu-detail-row {
            display: grid;
            grid-template-columns: 95px 1fr;
            gap: 4px 8px;
            padding: 6px 0;
            border-bottom: 1px dashed #dbe5ea;
            font-size: 12.5px;
            align-items: start;
        }

        /* Mã ký hiệu phải hiện để đối chiếu trực tiếp với JSON/PDF. */
        .thuvienkyhieu-detail-row-id {
            display: block !important;
            background: #f8fafc;
        }

        .thuvienkyhieu-detail-row-stack {
            display: grid;
            grid-template-columns: 95px 1fr;
            gap: 4px 8px;
        }

        .thuvienkyhieu-detail-row.is-stacked {
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .thuvienkyhieu-detail-row.is-stacked .thuvienkyhieu-detail-label,
        .thuvienkyhieu-detail-row.is-stacked .thuvienkyhieu-detail-value {
            width: 100%;
        }

        #id_thuvienkyhieu_detail_ma {
            white-space: normal;
        }

        .thuvienkyhieu-detail-row-id .thuvienkyhieu-detail-value {
            display: block;
            width: 100%;
            overflow: visible;
            -webkit-line-clamp: unset;
            word-break: break-all;
            line-height: 1.35;
        }

        .thuvienkyhieu-detail-row:last-of-type {
            border-bottom: none;
        }

        .thuvienkyhieu-detail-label {
            min-width: 0;
            display: -webkit-box;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow-wrap: anywhere;
            color: #536273;
            font-weight: 500;
        }

        .thuvienkyhieu-detail-value {
            min-width: 0;
            display: -webkit-box;
            overflow-wrap: anywhere;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            color: var(--color-mauchu-chatgpt);
            font-weight: 600;
        }

        /* Thông số CAD/GIS phải hiện đầy đủ, không cắt bằng dấu ba chấm. */
        .thuvienkyhieu-detail-measurement-value {
            display: block;
            overflow: visible;
            white-space: normal;
            overflow-wrap: anywhere;
            word-break: break-word;
            line-height: 1.35;
            -webkit-line-clamp: unset;
            font-weight: 400;
        }

        .thuvienkyhieu-measurement-separator {
            display: inline-block;
            margin: 0 3px;
            font-size: 1em;
            font-weight: 700;
            line-height: 0.55;
        }

        .thuvienkyhieu-color-dot {
            display: inline-block;
            width: 12px;
            height: 12px;
            margin-right: 6px;
            border: 1px solid rgba(15, 23, 42, 0.35);
            border-radius: 50%;
            vertical-align: -1px;
            box-sizing: border-box;
        }

        /* ── Responsive ── */
        @media (max-width: 1100px) {
            :root {
                --tkh-sidebar-w: 240px;
                --tkh-detail-w: 240px;
            }

            .thuvienkyhieu-detail-export-bar {
                gap: 4px;
                padding-left: 6px;
                padding-right: 6px;
            }
        }

        @media (max-width: 860px) {
            .thuvienkyhieu-workspace {
                display: flex;
                flex-direction: column;
                overflow-x: hidden;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }

            .thuvienkyhieu-library-panel {
                flex: 0 0 42dvh;
                width: 100%;
                min-height: 320px;
                border-right: 0 !important;
                border-bottom: 1px solid #1ab394;
            }

            .thuvienkyhieu-list-panel {
                flex: 0 0 70dvh;
                width: 100%;
                height: auto;
                min-height: 520px;
            }

            .thuvienkyhieu-gallery {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }

            .thuvienkyhieu-detail-panel {
                display: flex;
                flex: 0 0 100dvh;
                width: 100%;
                min-height: 700px;
                border-top: 1px solid #1ab394;
                border-left: 0;
            }
        }