/* ========================================================== ATOSY ERP INFORMATION CLASSIFICATION — SUBJECT PARITY V1 ========================================================== */ /* ========================================================== 1. OLD STATE LABEL Chỉ giữ làm state mirror, không render. ========================================================== */ #information-full-page .information-category-selected-state-v40 { display: none !important; } /* ========================================================== 2. BREADCRUMB copy visual behavior từ Subject. ========================================================== */ #information-full-page .information-classification-breadcrumb-v40 { width: 100% !important; min-height: 42px !important; margin: 0 0 9px !important; padding: 8px 11px !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; gap: 6px !important; overflow: hidden !important; border: 1px solid rgba( 116, 184, 255, .28 ) !important; border-radius: 15px !important; color: #9fcfff !important; background: transparent !important; } #information-full-page .information-classification-breadcrumb-v40 button { min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: #9fcfff !important; cursor: pointer !important; font-size: 11px !important; line-height: 1.35 !important; font-weight: 800 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #information-full-page .information-classification-breadcrumb-v40 button:hover { color: #ffffff !important; text-decoration: underline !important; } #information-full-page .information-classification-chevron-v40 { flex: 0 0 auto !important; color: rgba( 159, 207, 255, .60 ) !important; font-size: 12px !important; font-weight: 700 !important; } #information-full-page .information-classification-all-label-v40 { display: block !important; min-width: 0 !important; overflow: hidden !important; color: #9fcfff !important; font-size: 11px !important; font-weight: 800 !important; white-space: nowrap !important; text-overflow: ellipsis !important; } /* ========================================================== 3. EDIT CATEGORY BUTTON same position/weight as Subject manager. ========================================================== */ #information-full-page .information-category-manager-btn-v40 { width: 100% !important; min-height: 42px !important; margin: 0 0 9px !important; padding: 0 14px !important; border: 1px solid #43a8ff !important; border-radius: 14px !important; color: #ffffff !important; background: rgba( 28, 111, 217, .20 ) !important; cursor: pointer !important; font-size: 12px !important; font-weight: 850 !important; text-align: center !important; transition: background .15s ease, border-color .15s ease !important; } #information-full-page .information-category-manager-btn-v40:hover { border-color: #75c2ff !important; background: rgba( 38, 132, 241, .30 ) !important; } /* ========================================================== 4. TOTAL DATA CARD ========================================================== */ #information-full-page .information-category-all { margin-top: 0 !important; margin-bottom: 9px !important; } /* ========================================================== 5. TREE AREA ========================================================== */ #information-full-page .information-category-tree { padding-top: 4px !important; } /* ========================================================== 6. ROOT/LEVEL VISUALS CLOSER TO SUBJECT ========================================================== */ #information-full-page .information-category-node-row { min-height: 49px !important; } #information-full-page .information-category-label { min-height: 44px !important; height: 44px !important; } /* ========================================================== 7. ACTIVE TREE NODE ========================================================== */ #information-full-page .information-category-node-row.is-selected .information-category-label { color: #ffffff !important; } /* * Giữ chiều cao item y nguyên, * chỉ tăng typography. */ body.atosy-view-information #information-full-page .information-category-node.level-1 .information-category-label.atosy-info-level1-size1 { min-height: 44px !important; height: 44px !important; } /* T43 LEVEL1 TYPOGRAPHY END */ /* T46 ROBUST LEVEL1 FREEZE START */ /* * Sticky wrapper có height = 0, * do đó KHÔNG đẩy tree xuống / không gây jump. */ body.atosy-view-information #information-full-page #information-category-tree #information-level1-sticky-v46 { position: sticky !important; top: 0 !important; z-index: 120 !important; display: none; width: 100% !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; pointer-events: none; } body.atosy-view-information #information-full-page #information-category-tree #information-level1-sticky-v46.is-visible { display: block !important; } /* * Hàng clone nhìn giống chính Level 1 trong tree. */ body.atosy-view-information #information-full-page .information-level1-sticky-row-v46 { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; min-height: 49px !important; display: grid !important; grid-template-columns: 30px minmax( 0, 1fr ) !important; align-items: center !important; padding: 0 !important; border-radius: 0 !important; background: linear-gradient( 180deg, rgba( 11, 62, 145, .995 ), rgba( 10, 55, 132, .995 ) ) !important; box-shadow: 0 10px 20px rgba( 0, 24, 74, .25 ) !important; backdrop-filter: blur( 12px ) !important; -webkit-backdrop-filter: blur( 12px ) !important; pointer-events: auto; } /* * Toggle clone. */ body.atosy-view-information #information-full-page .information-level1-sticky-toggle-v46 { width: 30px !important; min-width: 30px !important; height: 34px !important; display: grid !important; place-items: center !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: rgba( 167, 207, 255, .90 ) !important; font-size: 19px !important; cursor: pointer !important; } /* * Label clone. * Giữ Level 1 chuẩn 15px. */ body.atosy-view-information #information-full-page .information-level1-sticky-label-v46 { width: 100% !important; min-width: 0 !important; min-height: 44px !important; padding: 0 11px !important; display: block !important; color: #ffffff !important; overflow: hidden !important; line-height: 44px !important; text-align: left !important; text-overflow: ellipsis !important; white-space: nowrap !important; cursor: pointer !important; } /* T46 ROBUST LEVEL1 FREEZE END */ /* ========================================================== T47 — CLEAN STICKY LEVEL-1 VISUAL ========================================================== */ /* * Outer sticky row chỉ làm nền che phía sau, * không tự tạo một card vuông. */ body.atosy-view-information #information-full-page .information-level1-sticky-row-v46 { background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* * Label sticky phải giống đúng item Level 1 gốc: * bo tròn mềm, không có block vuông phía sau. */ body.atosy-view-information #information-full-page .information-level1-sticky-label-v46 { } /* * Tạo nền mờ phía sau toàn sticky zone, * nhưng không đóng khung vuông quanh chữ. */ body.atosy-view-information #information-full-page #information-level1-sticky-v46.is-visible { background: linear-gradient( 180deg, rgba( 10, 56, 133, .97 ), rgba( 10, 56, 133, .88 ) ) !important; backdrop-filter: blur( 10px ) !important; -webkit-backdrop-filter: blur( 10px ) !important; } /* * Giữ toggle cùng nền với sticky zone, * không tạo một ô vuông riêng. */ body.atosy-view-information #information-full-page .information-level1-sticky-toggle-v46 { background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ========================================================== T48 — OPAQUE STICKY LEVEL-1 LABEL Mục tiêu: - vẫn giữ gradient đẹp - không bị liquid / xuyên nền - chữ trắng rõ, dễ đọc khi freeze ========================================================== */ body.atosy-view-information #information-full-page #information-level1-sticky-v46.is-visible { background: linear-gradient( 180deg, rgba(8, 49, 124, 0.985), rgba(8, 49, 124, 0.955) ) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: 0 10px 24px rgba(0, 23, 78, 0.20) !important; } body.atosy-view-information #information-full-page .information-level1-sticky-row-v46 { background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; opacity: 1 !important; } body.atosy-view-information #information-full-page .information-level1-sticky-label-v46 { opacity: 1 !important; color: #ffffff !important; filter: none !important; mix-blend-mode: normal !important; } body.atosy-view-information #information-full-page .information-level1-sticky-label-v46 *, body.atosy-view-information #information-full-page .information-level1-sticky-label-v46 .information-category-label { color: #ffffff !important; opacity: 1 !important; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18) !important; mix-blend-mode: normal !important; } body.atosy-view-information #information-full-page .information-level1-sticky-label-v46::before, body.atosy-view-information #information-full-page .information-level1-sticky-label-v46::after { opacity: 0 !important; background: none !important; box-shadow: none !important; } body.atosy-view-information #information-full-page .information-level1-sticky-toggle-v46 { color: #dff1ff !important; opacity: 1 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ========================================================== T49 — FINAL ROBUST STICKY LEVEL-1 ========================================================== */ /* * QUAN TRỌNG: * * T46 dùng sticky wrapper height:0. * Một số trình duyệt / trạng thái scroll xử lý sticky * với phần tử zero-height không ổn định. * * T49 chuyển wrapper thành 49px thật, * nhưng dùng margin-bottom:-49px để KHÔNG làm thay đổi layout. */ /* ========================================================== 1. BASE WRAPPER ========================================================== */ body.atosy-view-information #information-full-page #information-category-tree #information-level1-sticky-v46 { position: sticky !important; top: 0 !important; z-index: 200 !important; width: 100% !important; height: 49px !important; min-height: 49px !important; max-height: 49px !important; margin: 0 0 -49px 0 !important; padding: 0 !important; box-sizing: border-box !important; overflow: visible !important; pointer-events: none; background: transparent !important; } /* ========================================================== 2. HIDDEN STATE Không chiếm layout. ========================================================== */ body.atosy-view-information #information-full-page #information-category-tree #information-level1-sticky-v46:not(.is-visible) { display: none !important; } /* ========================================================== 3. VISIBLE / FREEZE STATE ========================================================== */ body.atosy-view-information #information-full-page #information-category-tree #information-level1-sticky-v46.is-visible { display: block !important; position: sticky !important; top: 0 !important; z-index: 200 !important; height: 49px !important; min-height: 49px !important; max-height: 49px !important; margin-bottom: -49px !important; background: transparent !important; opacity: 1 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; } /* ========================================================== 4. ROW Không absolute nữa. Row thật nằm trong sticky wrapper thật. ========================================================== */ body.atosy-view-information #information-full-page #information-category-tree .information-level1-sticky-row-v46 { position: relative !important; top: auto !important; left: auto !important; z-index: 201 !important; width: 100% !important; height: 49px !important; min-height: 49px !important; max-height: 49px !important; margin: 0 !important; padding: 2px 9px !important; box-sizing: border-box !important; display: grid !important; grid-template-columns: 22px minmax(0, 1fr) !important; align-items: center !important; background: #0a3b89 !important; border: 0 !important; border-radius: 10px !important; box-shadow: none !important; column-gap: 7px; font: inherit; font-size: 12px; font-weight: 800 !important; opacity: 1 !important; pointer-events: auto; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ========================================================== 5. LABEL Gradient đẹp nhưng hoàn toàn OPAQUE. ========================================================== */ body.atosy-view-information #information-full-page #information-category-tree .information-level1-sticky-label-v46 { position: relative !important; z-index: 202 !important; display: block !important; width: 100% !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; overflow: hidden !important; color: #ffffff !important; opacity: 1 !important; line-height: normal !important; text-align: left !important; text-overflow: ellipsis !important; white-space: nowrap !important; mix-blend-mode: normal !important; filter: none !important; cursor: pointer !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important; font: inherit !important; } /* ========================================================== 6. TOGGLE ========================================================== */ body.atosy-view-information #information-full-page .information-level1-sticky-toggle-v46 { position: relative !important; z-index: 202 !important; width: 30px !important; height: 44px !important; margin: 0 !important; padding: 0 !important; display: grid !important; place-items: center !important; border: 0 !important; background: #0a3b89 !important; color: #d9efff !important; opacity: 1 !important; box-shadow: none !important; font-size: 18px !important; cursor: pointer !important; } /* ========================================================== 7. KILL GLASS / LIQUID EFFECT COMPLETELY ========================================================== */ body.atosy-view-information #information-full-page .information-level1-sticky-row-v46::before, body.atosy-view-information #information-full-page .information-level1-sticky-row-v46::after, body.atosy-view-information #information-full-page .information-level1-sticky-label-v46::before, body.atosy-view-information #information-full-page .information-level1-sticky-label-v46::after { content: none !important; display: none !important; } /* ========================================================== 8. DO NOT TOUCH INFORMATION DATA TABLE ========================================================== */ /* * T49 cố ý không có bất kỳ selector nào: * * .information-full-card-header * .information-full-table * thead * th * * => bảng data giữ nguyên. */ /* ========================================================== T51 — INFORMATION CLASSIFICATION PANEL POLISH ========================================================== */ /* ========================================================== 1. PANEL INNER SPACING ========================================================== */ body.atosy-view-information #information-full-page .information-classification-panel.information-classification-polished-v51 { padding: 25px 20px 18px !important; box-sizing: border-box !important; } /* ========================================================== 2. HEADER: A · INFORMATION Phân loại Thông tin × ========================================================== */ body.atosy-view-information #information-full-page .information-panel-eyebrow-v51 { display: block !important; margin: 0 58px 7px 0 !important; padding: 0 !important; color: #8fc7ff !important; font-size: 10px !important; line-height: 1.15 !important; font-weight: 850 !important; letter-spacing: .18em !important; text-transform: uppercase !important; } body.atosy-view-information #information-full-page .information-panel-title-v51 { display: block !important; max-width: calc( 100% - 62px ) !important; margin: 0 0 20px !important; padding: 0 !important; color: #ffffff !important; font-size: 20px !important; line-height: 1.15 !important; font-weight: 900 !important; letter-spacing: -.025em !important; } /* * × nằm cùng vùng heading, * không bị cao/thấp lệch với Subject. */ body.atosy-view-information #information-full-page .information-panel-close-v51 { position: absolute !important; top: 22px !important; right: 20px !important; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 !important; display: grid !important; place-items: center !important; border-radius: 50% !important; font-size: 21px !important; line-height: 1 !important; } /* ========================================================== 3. BREADCRUMB — CHO PHÉP XUỐNG DÒNG ========================================================== */ body.atosy-view-information #information-full-page #information-classification-breadcrumb-v40 { width: 100% !important; min-height: 46px !important; height: auto !important; margin: 0 0 10px !important; padding: 10px 13px !important; box-sizing: border-box !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; align-content: center !important; column-gap: 6px !important; row-gap: 5px !important; overflow: visible !important; border-radius: 15px !important; } /* * Mỗi breadcrumb level được phép hiện đủ chữ. */ body.atosy-view-information #information-full-page #information-classification-breadcrumb-v40 button { flex: 0 1 auto !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: normal !important; overflow-wrap: anywhere !important; color: #a9d5ff !important; font-size: 11px !important; line-height: 1.45 !important; text-align: left !important; } /* * Dấu › luôn nằm cùng flow, * không bị ép ellipsis. */ body.atosy-view-information #information-full-page #information-classification-breadcrumb-v40 .information-classification-chevron-v40 { flex: 0 0 auto !important; margin: 0 1px !important; line-height: 1.45 !important; } /* ========================================================== 4. EDIT CATEGORY BUTTON ========================================================== */ body.atosy-view-information #information-full-page #information-category-manager-btn-v40 { width: 100% !important; min-height: 45px !important; margin: 0 0 10px !important; padding: 0 14px !important; box-sizing: border-box !important; border-radius: 14px !important; } /* ========================================================== 5. TOTAL DATA ========================================================== */ body.atosy-view-information #information-full-page #information-category-all { width: 100% !important; min-height: 49px !important; margin: 0 0 10px !important; padding: 0 13px !important; box-sizing: border-box !important; border-radius: 14px !important; } /* fallback nếu id thực tế nằm trên child */ body.atosy-view-information #information-full-page .information-category-all { margin-bottom: 10px !important; } /* ========================================================== 6. TREE SPACING ========================================================== */ body.atosy-view-information #information-full-page #information-category-tree { width: 100% !important; margin: 0 !important; padding: 2px 2px 8px !important; box-sizing: border-box !important; } /* * Level 1 có nhịp thở rõ hơn. */ body.atosy-view-information #information-full-page #information-category-tree > .information-category-node.level-1 { margin: 0 0 5px !important; } /* * Cấp con không sát mép panel. */ body.atosy-view-information #information-full-page #information-category-tree .information-category-children { padding-right: 1px !important; } /* * Row tree thống nhất box sizing. */ body.atosy-view-information #information-full-page #information-category-tree .information-category-node-row { box-sizing: border-box !important; } /* ========================================================== 7. STICKY STACK T50A giữ đúng chiều ngang sau khi panel padding thay đổi. ========================================================== */ body.atosy-view-information #information-full-page #information-category-tree #information-ancestor-freeze-v1 { width: 100% !important; box-sizing: border-box !important; } /* * Frozen rows không dính sát 2 cạnh panel. */ body.atosy-view-information #information-full-page .information-ancestor-freeze-row-v1 { padding-left: 0 !important; padding-right: 0 !important; } /* ========================================================== 8. MOBILE / NARROW PANEL ========================================================== */ @media (max-width: 900px) { body.atosy-view-information #information-full-page .information-classification-panel.information-classification-polished-v51 { padding: 20px 15px 15px !important; } body.atosy-view-information #information-full-page .information-panel-close-v51 { top: 17px !important; right: 15px !important; } } /* ========================================================== T59 — NUDGE INFORMATION PANEL HEADER DOWN Mục tiêu: - Đẩy cụm: A · INFORMATION Phân loại Thông tin xuống nhẹ một chút - Không làm đổi layout phần còn lại ========================================================== */ body.atosy-view-information #information-full-page .information-classification-panel.information-classification-polished-v51 { padding-top: 31px !important; } body.atosy-view-information #information-full-page .information-panel-eyebrow-v51 { margin-top: 4px !important; margin-bottom: 9px !important; } body.atosy-view-information #information-full-page .information-panel-title-v51 { margin-top: 0 !important; margin-bottom: 14px !important; line-height: 1.08 !important; } /* T60 BALANCED INFORMATION PANEL HEADER START */ /* * Mục tiêu: * - A · INFORMATION và Phân loại Thông tin không bị lệch lên trên * - Cụm title cân với nút X * - Khoảng cách trên / dưới hài hòa như Hồ sơ Chủ thể * - Không thay đổi breadcrumb, button, tree */ /* ========================================================== 1. PANEL TOP SPACING ========================================================== */ body.atosy-view-information #information-full-page .information-classification-panel.information-classification-polished-v51 { padding-top: 28px !important; } /* ========================================================== 2. HEADER EYEBROW ========================================================== */ body.atosy-view-information #information-full-page .information-panel-eyebrow-v51 { margin: 2px 58px 8px 0 !important; padding: 0 !important; line-height: 1.2 !important; transform: translateY( 2px ) !important; } /* ========================================================== 3. MAIN TITLE ========================================================== */ body.atosy-view-information #information-full-page .information-panel-title-v51 { margin: 0 58px 18px 0 !important; padding: 0 !important; line-height: 1.12 !important; transform: translateY( 2px ) !important; } /* ========================================================== 4. CLOSE BUTTON ALIGNMENT ========================================================== */ body.atosy-view-information #information-full-page .information-classification-panel .information-classification-close { top: 28px !important; } /* ========================================================== 5. FALLBACK CLOSE BUTTON SELECTORS ========================================================== */ body.atosy-view-information #information-full-page .information-classification-panel button[aria-label="Đóng"], body.atosy-view-information #information-full-page .information-classification-panel button[aria-label="Close"] { top: 28px !important; } /* ========================================================== 6. FIRST BLOCK BELOW HEADER ========================================================== */ body.atosy-view-information #information-full-page .information-classification-panel .information-classification-breadcrumb, body.atosy-view-information #information-full-page .information-classification-panel [id*="breadcrumb"] { margin-top: 2px !important; } /* T60 BALANCED INFORMATION PANEL HEADER END */ /* T61 CENTER PANEL HEADER START */ /* * T60 đã cân layout tổng thể. * * T61 chỉ dịch VISUAL cụm header xuống thêm, * không thay đổi breadcrumb / buttons / tree. */ /* A · INFORMATION */ body.atosy-view-information #information-full-page .information-panel-eyebrow-v51 { transform: translateY( 8px ) !important; } /* Phân loại Thông tin */ body.atosy-view-information #information-full-page .information-panel-title-v51 { transform: translateY( 8px ) !important; } /* * Nút × đi cùng trục với title. */ body.atosy-view-information #information-full-page .information-classification-panel .information-classification-close { top: 34px !important; } body.atosy-view-information #information-full-page .information-classification-panel button[aria-label="Đóng"], body.atosy-view-information #information-full-page .information-classification-panel button[aria-label="Close"] { top: 34px !important; } /* * Không đẩy breadcrumb xuống theo. * Chỉ title được dịch visual. */ body.atosy-view-information #information-full-page .information-classification-panel .information-classification-breadcrumb, body.atosy-view-information #information-full-page .information-classification-panel [id*="breadcrumb"] { transform: none !important; } /* T61 CENTER PANEL HEADER END */ /* ========================================================== T62 — EXACT CENTER INFORMATION PANEL HEADER ========================================================== */ /* * JS sẽ tính chính xác tâm vùng: * * PANEL TOP * ↕ * A · INFORMATION * Phân loại Thông tin * ↕ * TOP CỦA BREADCRUMB / "TOÀN BỘ ... THÔNG TIN" * * và truyền kết quả vào: * * --atosy-information-header-shift */ /* A · INFORMATION */ body.atosy-view-information #information-full-page .information-classification-panel .information-panel-eyebrow-v51 { transform: translateY( var( --atosy-information-header-shift, 0px ) ) !important; } /* Phân loại Thông tin */ body.atosy-view-information #information-full-page .information-classification-panel .information-panel-title-v51 { transform: translateY( var( --atosy-information-header-shift, 0px ) ) !important; } /* * Nút × đi cùng hệ trục của header */ body.atosy-view-information #information-full-page .information-classification-panel .information-classification-close { transform: translateY( var( --atosy-information-header-shift, 0px ) ) !important; } body.atosy-view-information #information-full-page .information-classification-panel button[aria-label="Đóng"], body.atosy-view-information #information-full-page .information-classification-panel button[aria-label="Close"] { transform: translateY( var( --atosy-information-header-shift, 0px ) ) !important; } /* * Breadcrumb tuyệt đối KHÔNG di chuyển. * Nó chính là mốc dưới để tính tâm. */ body.atosy-view-information #information-full-page .information-classification-panel .information-classification-breadcrumb, body.atosy-view-information #information-full-page .information-classification-panel [id*="breadcrumb"] { transform: none !important; } /* T62 END */ /* ========================================================== T63 — NUDGE INFORMATION PANEL HEADER DOWN 4PX ========================================================== */ /* * Giữ nguyên toàn bộ layout hiện tại. * Chỉ dịch cụm: * * A · INFORMATION * Phân loại Thông tin * * xuống thêm 4px. */ /* A · INFORMATION */ body.atosy-view-information #information-full-page .information-classification-panel .information-panel-eyebrow-v51 { transform: translateY( calc( var( --atosy-information-header-shift, 0px ) + 4px ) ) !important; } /* Phân loại Thông tin */ body.atosy-view-information #information-full-page .information-classification-panel .information-panel-title-v51 { transform: translateY( calc( var( --atosy-information-header-shift, 0px ) + 4px ) ) !important; } /* Nút × đi xuống cùng 4px */ body.atosy-view-information #information-full-page .information-classification-panel .information-classification-close { transform: translateY( calc( var( --atosy-information-header-shift, 0px ) + 4px ) ) !important; } body.atosy-view-information #information-full-page .information-classification-panel button[aria-label="Đóng"], body.atosy-view-information #information-full-page .information-classification-panel button[aria-label="Close"] { transform: translateY( calc( var( --atosy-information-header-shift, 0px ) + 4px ) ) !important; } /* T63 END */ /* ========================================================== T64 — ALIGN CLOSE BUTTON WITH A · INFORMATION ========================================================== */ /* * Giữ nguyên: * - A · INFORMATION * - Phân loại Thông tin * * Chỉ đưa nút × lên trên để ngang với dòng eyebrow. */ body.atosy-view-information #information-full-page .information-classification-panel .information-classification-close { transform: translateY( calc( var( --atosy-information-header-shift, 0px ) - 6px ) ) !important; } body.atosy-view-information #information-full-page .information-classification-panel button[aria-label="Đóng"], body.atosy-view-information #information-full-page .information-classification-panel button[aria-label="Close"] { transform: translateY( calc( var( --atosy-information-header-shift, 0px ) - 6px ) ) !important; } /* T64 END */ /* ========================================================== T65 — MOVE INFORMATION TITLE GROUP CLOSER TO TOTAL BOX ========================================================== */ /* * Chỉ dịch: * A · INFORMATION * Phân loại Thông tin * * xuống thêm 10px. * * Không đổi: * - nút × * - Toàn bộ N Thông tin * - Sửa Danh mục phân loại * - Tổng dữ liệu * - cây phân loại */ /* A · INFORMATION */ body.atosy-view-information #information-full-page .information-classification-panel .information-panel-eyebrow-v51 { transform: translateY( calc( var( --atosy-information-header-shift, 0px ) + 14px ) ) !important; } /* Phân loại Thông tin */ body.atosy-view-information #information-full-page .information-classification-panel .information-panel-title-v51 { transform: translateY( calc( var( --atosy-information-header-shift, 0px ) + 14px ) ) !important; } /* T65 END */ /* ========================================================== T64 — MATCH INFORMATION PANEL HEADER TO SUBJECT PANEL ========================================================== */ /* * Mục tiêu: * - A · INFORMATION * - Phân loại Thông tin * - nút × * * có bố cục giống panel “Phân loại Chủ thể”. * * Chỉ chỉnh phần header của panel lọc Information. * Không đổi: * - breadcrumb / ô "Toàn bộ ..." * - nút Sửa Danh mục phân loại * - Tổng dữ liệu * - cây phân loại */ /* ========================================================== 1. PANEL TOP SPACING ========================================================== */ body.atosy-view-information #information-full-page .information-classification-panel.information-classification-polished-v51 { padding-top: 36px !important; } /* ========================================================== 2. EYEBROW: A · INFORMATION ========================================================== */ body.atosy-view-information #information-full-page .information-panel-eyebrow-v51 { margin: 0 58px 10px 0 !important; padding: 0 !important; transform: none !important; position: relative !important; top: 0 !important; line-height: 1.08 !important; } /* ========================================================== 3. TITLE: Phân loại Thông tin ========================================================== */ body.atosy-view-information #information-full-page .information-panel-title-v51 { margin: 0 58px 20px 0 !important; padding: 0 !important; transform: none !important; position: relative !important; top: 0 !important; line-height: 1.08 !important; } /* ========================================================== 4. CLOSE BUTTON: align like Subject panel ========================================================== */ body.atosy-view-information #information-full-page .information-classification-panel .information-classification-close, body.atosy-view-information #information-full-page .information-classification-panel button[aria-label="Đóng"], body.atosy-view-information #information-full-page .information-classification-panel button[aria-label="Close"] { top: 36px !important; transform: none !important; } /* ========================================================== 5. KEEP THE FIRST BOX POSITION UNCHANGED ========================================================== */ body.atosy-view-information #information-full-page .information-classification-panel .information-classification-summary, body.atosy-view-information #information-full-page .information-classification-panel .information-classification-path, body.atosy-view-information #information-full-page .information-classification-panel .information-panel-path-v51 { margin-top: 0 !important; } /* T64 END */ /* ========================================================== T67 — INFORMATION HORIZONTAL PADDING = SUBJECT ========================================================== */ /* * Theo geometry giao diện Hồ sơ Chủ thể: * * khoảng cách panel -> nội dung bên trong * trái / phải ≈ 46px. * * Chỉ sửa HORIZONTAL padding. * Top / bottom giữ nguyên layout hiện tại. */ body.atosy-view-information #information-full-page .information-classification-panel { padding-left: 46px !important; padding-right: 46px !important; box-sizing: border-box !important; } /* ========================================================== INNER BLOCKS USE FULL AVAILABLE WIDTH ========================================================== */ body.atosy-view-information #information-full-page .information-classification-panel .information-classification-breadcrumb, body.atosy-view-information #information-full-page .information-classification-panel [id*="breadcrumb"], body.atosy-view-information #information-full-page .information-classification-panel #information-category-tree { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* * Không cho các block bên trong tự cộng thêm * khoảng cách trái / phải ngoài padding panel. */ body.atosy-view-information #information-full-page .information-classification-panel .information-classification-breadcrumb, body.atosy-view-information #information-full-page .information-classification-panel [id*="breadcrumb"] { margin-left: 0 !important; margin-right: 0 !important; } /* T67 END */ /* ========================================================== T68 — ALIGN TITLE BOTTOM WITH CLOSE CIRCLE ========================================================== */ /* * Mục tiêu: * - Giữ A · INFORMATION gần như hiện tại * - Hạ "Phân loại Thông tin" xuống thêm chút * - Nút X chỉ tinh chỉnh rất nhẹ * - Kết quả: đáy chữ title gần bằng đáy vòng tròn nút X */ body.atosy-view-information #information-full-page .information-classification-panel .information-panel-eyebrow-v51 { transform: translateY( calc( var(--atosy-information-header-shift, 0px) + 4px ) ) !important; } body.atosy-view-information #information-full-page .information-classification-panel .information-panel-title-v51 { transform: translateY( calc( var(--atosy-information-header-shift, 0px) + 9px ) ) !important; } body.atosy-view-information #information-full-page .information-classification-panel .information-classification-close { transform: translateY( calc( var(--atosy-information-header-shift, 0px) + 2px ) ) !important; } body.atosy-view-information #information-full-page .information-classification-panel button[aria-label="Đóng"], body.atosy-view-information #information-full-page .information-classification-panel button[aria-label="Close"] { transform: translateY( calc( var(--atosy-information-header-shift, 0px) + 2px ) ) !important; } /* T68 END */ /* ========================================================== T69 — PUSH INFORMATION HEADER TEXT DOWN TO RED GUIDE ========================================================== */ /* * Mục tiêu: * - Chỉ đẩy cụm chữ: * A · INFORMATION * Phân loại Thông tin * xuống thấp hơn rõ rệt. * * - Không kéo nút X đi xuống cùng. * - Không đổi breadcrumb / input / button / tree. * - Ưu tiên cảm giác giống panel Subject: * phần text nằm thấp hơn, gần vùng "Toàn bộ 1.662 Thông tin". */ /* ---------------------------------------------------------- 1) EYEBROW: A · INFORMATION ---------------------------------------------------------- */ body.atosy-view-information #information-full-page .information-classification-panel .information-panel-eyebrow-v51 { margin: 0 58px 6px 0 !important; transform: translateY(14px) !important; } /* ---------------------------------------------------------- 2) TITLE: Phân loại Thông tin ---------------------------------------------------------- */ body.atosy-view-information #information-full-page .information-classification-panel .information-panel-title-v51 { margin: 0 58px 14px 0 !important; transform: translateY(14px) !important; } /* ---------------------------------------------------------- 3) CLOSE BUTTON: giữ cao hơn text, KHÔNG đi xuống theo ---------------------------------------------------------- */ body.atosy-view-information #information-full-page .information-classification-panel .information-classification-close { transform: translateY(0) !important; } body.atosy-view-information #information-full-page .information-classification-panel button[aria-label="Đóng"], body.atosy-view-information #information-full-page .information-classification-panel button[aria-label="Close"] { transform: translateY(0) !important; } /* ---------------------------------------------------------- 4) Đảm bảo cụm header chiếm block ổn định ---------------------------------------------------------- */ body.atosy-view-information #information-full-page .information-classification-panel.information-classification-polished-v51 { padding-top: 28px !important; } /* T69 END */ /* ========================================================== T70 — FORCE INFORMATION HEADER TEXT DOWN ========================================================== */ /* * T69 dùng transform nhưng visual chưa chịu xuống đủ. * * T70 dùng position: relative + top. * * Ưu điểm: * - ép visual xuống thật * - không thay đổi document flow * - ô "Toàn bộ N Thông tin" giữ nguyên vị trí * - nút × giữ nguyên */ /* ---------------------------------------------------------- A · INFORMATION ---------------------------------------------------------- */ body.atosy-view-information #information-full-page .information-classification-panel .information-panel-eyebrow-v51 { position: relative !important; top: 16px !important; transform: none !important; } /* ---------------------------------------------------------- Phân loại Thông tin ---------------------------------------------------------- */ body.atosy-view-information #information-full-page .information-classification-panel .information-panel-title-v51 { position: relative !important; top: 16px !important; transform: none !important; } /* ---------------------------------------------------------- NÚT X: GIỮ NGUYÊN VỊ TRÍ ---------------------------------------------------------- */ body.atosy-view-information #information-full-page .information-classification-panel .information-classification-close, body.atosy-view-information #information-full-page .information-classification-panel button[aria-label="Đóng"], body.atosy-view-information #information-full-page .information-classification-panel button[aria-label="Close"] { transform: none !important; } /* T70 END */ /* ========================================================== T71 — HEADER ANCHOR SAFETY ========================================================== */ /* * Vị trí thực do T71 JS tính theo total-box. * * CSS chỉ đảm bảo hai dòng không bị clip. */ body.atosy-view-information #information-full-page .information-classification-panel .information-panel-eyebrow-v51, body.atosy-view-information #information-full-page .information-classification-panel .information-panel-title-v51 { overflow: visible !important; z-index: 4 !important; } /* T71 END */ /* ========================================================== T74 — INFORMATION HEADER NORMAL-FLOW STRUCTURE ========================================================== */ /* * Không position:absolute. * Không top. * Không translateY. * * Header hoạt động như một block bố cục thật. */ /* ========================================================== 1. HEADER WRAPPER ========================================================== */ body.atosy-view-information #information-full-page .information-classification-panel > .information-classification-head-v74 { display: grid !important; grid-template-columns: minmax(0, 1fr) 44px !important; column-gap: 18px !important; align-items: center !important; width: 100% !important; box-sizing: border-box !important; margin: 0 0 18px !important; padding: 0 !important; position: relative !important; } /* ========================================================== 2. LEFT TEXT STACK ========================================================== */ body.atosy-view-information #information-full-page .information-classification-head-text-v74 { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; gap: 6px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; } /* ========================================================== 3. A · INFORMATION ========================================================== */ body.atosy-view-information #information-full-page .information-classification-eyebrow-v74 { position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; margin: 0 !important; padding: 0 !important; line-height: 1.15 !important; } /* ========================================================== 4. PHÂN LOẠI THÔNG TIN ========================================================== */ body.atosy-view-information #information-full-page .information-classification-title-v74 { position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; margin: 0 !important; padding: 0 !important; line-height: 1.12 !important; } /* ========================================================== 5. CLOSE BUTTON ========================================================== */ body.atosy-view-information #information-full-page .information-classification-close-v74 { position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; justify-self: end !important; align-self: center !important; margin: 0 !important; } /* ========================================================== 6. PANEL HORIZONTAL PADDING giữ đúng mức đã đẹp ở T67 ========================================================== */ body.atosy-view-information #information-full-page .information-classification-panel { padding-left: 46px !important; padding-right: 46px !important; box-sizing: border-box !important; } /* ========================================================== 7. FIRST BOX STARTS NATURALLY AFTER HEADER ========================================================== */ body.atosy-view-information #information-full-page .information-classification-panel > .information-classification-head-v74 + * { margin-top: 0 !important; } /* T74 END */ /* ========================================================== T75 — INFORMATION HEADER NORMAL FLOW FINAL ========================================================== */ /* ========================================================== 1. HEADER ========================================================== */ body.atosy-view-information #information-full-page .information-classification-panel > .information-classification-head-v75 { display: grid !important; grid-template-columns: minmax(0, 1fr) 44px !important; gap: 18px !important; align-items: center !important; width: 100% !important; min-height: 70px !important; margin: 0 0 14px !important; padding: 0 !important; box-sizing: border-box !important; position: static !important; transform: none !important; } /* ========================================================== 2. TEXT STACK ========================================================== */ body.atosy-view-information #information-full-page .information-classification-head-text-v75 { display: flex !important; flex-direction: column !important; justify-content: flex-end !important; align-items: flex-start !important; gap: 6px !important; height: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 0 3px !important; } /* ========================================================== 3. A · INFORMATION ========================================================== */ body.atosy-view-information #information-full-page .information-classification-eyebrow-v75 { position: static !important; inset: auto !important; transform: none !important; margin: 0 !important; padding: 0 !important; } /* ========================================================== 4. PHÂN LOẠI THÔNG TIN ========================================================== */ body.atosy-view-information #information-full-page .information-classification-title-v75 { position: static !important; inset: auto !important; transform: none !important; margin: 0 !important; padding: 0 !important; line-height: 1.08 !important; } /* ========================================================== 5. CLOSE ========================================================== */ body.atosy-view-information #information-full-page .information-classification-close-v75 { position: static !important; inset: auto !important; transform: none !important; justify-self: end !important; align-self: end !important; margin: 0 0 1px !important; } /* ========================================================== 6. KEEP CURRENT GOOD SIDE PADDING ========================================================== */ body.atosy-view-information #information-full-page .information-classification-panel { padding-left: 46px !important; padding-right: 46px !important; } /* T75 END */ /* ========================================================== T77 — INFORMATION FILTER TOP CONTROLS SIDE BY SIDE ========================================================== */ /* * ┌──────────────────────┬──────────────────────┐ * │ Sửa Danh mục │ Tổng dữ liệu 1.662 │ * └──────────────────────┴──────────────────────┘ */ body.atosy-view-information #information-full-page .information-classification-panel > .information-classification-top-controls-v77 { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 12px !important; width: 100% !important; margin: 0 0 12px !important; padding: 0 !important; box-sizing: border-box !important; align-items: stretch !important; } /* Hai control cùng chiều cao */ body.atosy-view-information #information-full-page .information-classification-edit-v77, body.atosy-view-information #information-full-page .information-classification-total-v77 { width: 100% !important; min-width: 0 !important; min-height: 54px !important; height: 54px !important; margin: 0 !important; box-sizing: border-box !important; } /* * Nút sửa căn giữa. */ body.atosy-view-information #information-full-page .information-classification-edit-v77 { display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; white-space: normal !important; line-height: 1.15 !important; } /* * Tổng dữ liệu: * chữ trái, badge số phải. */ body.atosy-view-information #information-full-page .information-classification-total-v77 { align-items: center !important; } /* * Responsive: * nếu panel quá hẹp mới tự trở lại 1 cột. */ @media ( max-width: 900px ) { body.atosy-view-information #information-full-page .information-classification-panel > .information-classification-top-controls-v77 { grid-template-columns: 1fr !important; } } /* T77 END */ /* ========================================================== T78 — INFORMATION CLASSIFICATION BREADCRUMB ========================================================== */ body.atosy-view-information #information-full-page .information-classification-panel #information-classification-breadcrumb-v40, body.atosy-view-information #information-full-page .information-classification-panel .information-classification-breadcrumb-v40, body.atosy-view-information #information-full-page .information-classification-panel .information-classification-breadcrumb { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 5px 7px !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; min-height: 54px !important; height: auto !important; padding: 11px 16px !important; line-height: 1.35 !important; box-sizing: border-box !important; } /* Path text */ body.atosy-view-information #information-full-page .information-classification-breadcrumb-part-v78 { display: inline !important; min-width: 0 !important; color: #b9dcff !important; font-weight: 750 !important; white-space: normal !important; overflow-wrap: anywhere !important; } /* Current/final level */ body.atosy-view-information #information-full-page .information-classification-breadcrumb-part-v78:last-child { color: #ffffff !important; font-weight: 850 !important; } /* › */ body.atosy-view-information #information-full-page .information-classification-breadcrumb-separator-v78 { color: #69b7ff !important; flex: 0 0 auto !important; font-weight: 900 !important; } /* All Information */ body.atosy-view-information #information-full-page .information-classification-all-label-v78 { color: #b9dcff !important; font-weight: 750 !important; } /* T78 END */ /* ========================================================== T80 — SUBJECT-STYLE INFORMATION BREADCRUMB ========================================================== */ /* * Nhỏ, nhẹ và tinh tế như Phân loại Chủ thể. * Không còn kiểu breadcrumb title lớn. */ body.atosy-view-information #information-full-page .information-classification-panel #information-classification-breadcrumb-v40, body.atosy-view-information #information-full-page .information-classification-panel .information-classification-breadcrumb-v40, body.atosy-view-information #information-full-page .information-classification-panel .information-classification-breadcrumb { display: flex !important; flex-wrap: wrap !important; align-items: center !important; align-content: center !important; gap: 2px 5px !important; width: 100% !important; min-height: 44px !important; height: auto !important; margin: 0 0 12px !important; padding: 8px 12px !important; box-sizing: border-box !important; white-space: normal !important; overflow: visible !important; line-height: 1.3 !important; } /* ========================================================== CLICKABLE LEVEL ========================================================== */ body.atosy-view-information #information-full-page .information-classification-breadcrumb-part-v78 { appearance: none !important; -webkit-appearance: none !important; display: inline !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 1px 2px !important; border: 0 !important; border-radius: 4px !important; background: transparent !important; box-shadow: none !important; color: #a9cdf2 !important; font-family: inherit !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: .01em !important; text-align: left !important; text-decoration: none !important; cursor: pointer !important; white-space: normal !important; overflow-wrap: anywhere !important; transition: color .16s ease, background .16s ease !important; } /* Hover giống link điều hướng phụ */ body.atosy-view-information #information-full-page .information-classification-breadcrumb-part-v78:hover { color: #ffffff !important; background: rgba( 78, 164, 255, .12 ) !important; } /* Cấp hiện tại = sáng hơn nhưng vẫn nhỏ */ body.atosy-view-information #information-full-page .information-classification-breadcrumb-part-v78:last-of-type { color: #d9edff !important; font-weight: 800 !important; } /* ========================================================== CHEVRON › ========================================================== */ body.atosy-view-information #information-full-page .information-classification-breadcrumb-separator-v78 { display: inline !important; margin: 0 1px !important; padding: 0 !important; color: #6eaeea !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1.35 !important; flex: 0 0 auto !important; } /* ========================================================== ROOT / TOÀN BỘ ========================================================== */ body.atosy-view-information #information-full-page .information-classification-all-label-v78 { color: #a9cdf2 !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1.35 !important; } /* T80 END */ /* ========================================================== T81 — INFORMATION BREADCRUMB AUTO HEIGHT ========================================================== */ /* * Breadcrumb phải nằm trong normal document flow * và tự tăng chiều cao khi đường dẫn có nhiều dòng. */ body.atosy-view-information #information-full-page .information-classification-panel #information-classification-breadcrumb-v40, body.atosy-view-information #information-full-page .information-classification-panel .information-classification-breadcrumb-v40, body.atosy-view-information #information-full-page .information-classification-panel .information-classification-breadcrumb { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; align-content: center !important; width: 100% !important; height: auto !important; min-height: 44px !important; max-height: none !important; margin: 0 0 12px !important; padding: 9px 12px !important; overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; white-space: normal !important; box-sizing: border-box !important; } /* * Mỗi cấp breadcrumb được phép xuống dòng tự nhiên. */ body.atosy-view-information #information-full-page .information-classification-breadcrumb-part-v78 { width: auto !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere !important; word-break: normal !important; } /* * Hàng 2 nút T77 phải nằm SAU breadcrumb theo normal flow. */ body.atosy-view-information #information-full-page .information-classification-panel > .information-classification-top-controls-v77 { position: relative !important; top: auto !important; margin-top: 0 !important; clear: both !important; } /* T81 END */ /* ========================================================== T82 — RESET INFORMATION BREADCRUMB CHILD GEOMETRY ========================================================== */ /* * T81 đã làm container height:auto. * * Nhưng các breadcrumb child còn giữ geometry từ rule cũ, * khiến chữ bị kéo lên phía trên border. * * T82 đưa toàn bộ child về normal flow thật. */ /* ========================================================== 1. CONTAINER — NORMAL FLOW ========================================================== */ body.atosy-view-information #information-full-page .information-classification-panel #information-classification-breadcrumb-v40, body.atosy-view-information #information-full-page .information-classification-panel .information-classification-breadcrumb-v40, body.atosy-view-information #information-full-page .information-classification-panel .information-classification-breadcrumb { position: static !important; inset: auto !important; transform: none !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; align-content: flex-start !important; width: 100% !important; height: auto !important; min-height: 44px !important; max-height: none !important; padding: 10px 12px !important; margin: 0 0 12px !important; gap: 3px 5px !important; overflow: hidden !important; box-sizing: border-box !important; } /* ========================================================== 2. EVERY CLICKABLE BREADCRUMB LEVEL ========================================================== */ body.atosy-view-information #information-full-page .information-classification-breadcrumb-part-v78 { position: static !important; inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; float: none !important; flex: 0 1 auto !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 1px 2px !important; vertical-align: baseline !important; line-height: 1.35 !important; white-space: normal !important; overflow: visible !important; } /* ========================================================== 3. CHEVRON ========================================================== */ body.atosy-view-information #information-full-page .information-classification-breadcrumb-separator-v78 { position: static !important; inset: auto !important; transform: none !important; float: none !important; flex: 0 0 auto !important; margin: 0 1px !important; padding: 1px 0 !important; line-height: 1.35 !important; } /* ========================================================== 4. ROOT LABEL ========================================================== */ body.atosy-view-information #information-full-page .information-classification-all-label-v78 { position: static !important; inset: auto !important; transform: none !important; margin: 0 !important; padding: 1px 2px !important; line-height: 1.35 !important; } /* ========================================================== 5. CONTROLS MUST FOLLOW THE REAL BREADCRUMB HEIGHT ========================================================== */ body.atosy-view-information #information-full-page .information-classification-panel > .information-classification-top-controls-v77 { position: static !important; inset: auto !important; transform: none !important; margin: 0 0 12px !important; } /* T82 END */ /* ========================================================== T83 — FINAL INFORMATION BREADCRUMB ========================================================== */ /* ========================================================== 1. BREADCRUMB BOX — TRUE AUTO HEIGHT ========================================================== */ body.atosy-view-information #information-full-page .information-classification-panel #information-classification-breadcrumb-v40, body.atosy-view-information #information-full-page .information-classification-panel .information-classification-breadcrumb-v40, body.atosy-view-information #information-full-page .information-classification-panel .information-classification-breadcrumb { position: relative !important; display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; align-content: flex-start !important; column-gap: 4px !important; row-gap: 2px !important; width: 100% !important; height: auto; min-height: 44px !important; max-height: none !important; margin: 0 0 12px !important; padding: 9px 12px !important; overflow: visible !important; white-space: normal !important; box-sizing: border-box !important; } /* ========================================================== 2. CLICKABLE PART — MATCH SUBJECT FEEL ========================================================== */ body.atosy-view-information #information-full-page .information-classification-panel .information-classification-breadcrumb-part-v78 { appearance: none !important; -webkit-appearance: none !important; position: static !important; display: inline-block !important; flex: 0 1 auto !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 1px 2px !important; border: 0 !important; border-radius: 4px !important; background: transparent !important; box-shadow: none !important; color: #9fc8ef !important; font-family: inherit !important; font-size: 11px !important; font-weight: 720 !important; line-height: 1.35 !important; letter-spacing: .01em !important; text-align: left !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere !important; cursor: pointer !important; transition: color .14s ease, background-color .14s ease !important; } /* * Hover rõ ràng như Subject: * chữ chuyển trắng. */ body.atosy-view-information #information-full-page .information-classification-panel .information-classification-breadcrumb-part-v78:hover, body.atosy-view-information #information-full-page .information-classification-panel .information-classification-breadcrumb-part-v78:focus-visible { color: #ffffff !important; background: rgba( 96, 176, 255, .12 ) !important; outline: none !important; } /* * Cấp hiện tại sáng hơn. */ body.atosy-view-information #information-full-page .information-classification-panel .information-classification-breadcrumb-part-v78:last-of-type { color: #dceeff !important; font-weight: 800 !important; } /* ========================================================== 3. SEPARATOR ========================================================== */ body.atosy-view-information #information-full-page .information-classification-panel .information-classification-breadcrumb-separator-v78 { position: static !important; display: inline-block !important; flex: 0 0 auto !important; margin: 0 1px !important; padding: 1px 0 !important; color: #66a8e7 !important; font-size: 11px !important; line-height: 1.35 !important; } /* ========================================================== 4. NO LEVEL-1 FREEZE — FINAL OVERRIDE ========================================================== */ body.atosy-view-information #information-full-page #information-category-tree > .information-category-node.level-1, body.atosy-view-information #information-full-page #information-category-tree > .information-category-node.level-1 > .information-category-node-row, body.atosy-view-information #information-full-page #information-category-tree > .information-category-node.level-1.atosy-info-level1-sticky-open > .information-category-node-row { position: relative !important; top: auto !important; bottom: auto !important; z-index: auto !important; transform: none !important; } /* * Không pseudo-element / backdrop sticky cũ. */ body.atosy-view-information #information-full-page #information-category-tree > .information-category-node.level-1::before, body.atosy-view-information #information-full-page #information-category-tree > .information-category-node.level-1::after { display: none !important; content: none !important; } /* ========================================================== 5. T77 CONTROLS FOLLOW BREADCRUMB NATURALLY ========================================================== */ body.atosy-view-information #information-full-page .information-classification-panel > .information-classification-top-controls-v77 { position: relative !important; clear: both !important; margin-top: 0 !important; } /* T83 CSS END */ /* ========================================================== T84 — BREADCRUMB PADDING + HOVER + NO FREEZE ========================================================== */ /* ========================================================== 1. BREADCRUMB BOX padding trên = padding dưới ========================================================== */ body.atosy-view-information #information-full-page .information-classification-panel #information-classification-breadcrumb-v40, body.atosy-view-information #information-full-page .information-classification-panel .information-classification-breadcrumb-v40, body.atosy-view-information #information-full-page .information-classification-panel .information-classification-breadcrumb { height: auto !important; min-height: 44px !important; max-height: none !important; padding-top: 11px !important; padding-bottom: 11px !important; padding-left: 14px !important; padding-right: 14px !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; align-content: center !important; column-gap: 4px !important; row-gap: 3px !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================== 2. EACH BREADCRUMB LEVEL = REAL LINK-LIKE BUTTON ========================================================== */ body.atosy-view-information #information-full-page .information-classification-panel button.information-classification-breadcrumb-part-v78 { appearance: none !important; -webkit-appearance: none !important; position: static !important; display: inline !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 1px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: #9fc8ef !important; font-family: inherit !important; font-size: 11px !important; font-weight: 720 !important; line-height: 1.35 !important; text-align: left !important; cursor: pointer !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; transition: color .14s ease !important; } /* ========================================================== 3. HOVER = WHITE giống cảm giác breadcrumb Subject ========================================================== */ body.atosy-view-information #information-full-page .information-classification-panel button.information-classification-breadcrumb-part-v78:hover, body.atosy-view-information #information-full-page .information-classification-panel button.information-classification-breadcrumb-part-v78:focus-visible { color: #ffffff !important; background: transparent !important; text-decoration: none !important; outline: none !important; } /* * Nếu bên trong button còn span/strong do renderer khác tạo, * ép toàn bộ descendants kế thừa màu của button. */ body.atosy-view-information #information-full-page .information-classification-panel button.information-classification-breadcrumb-part-v78 * { color: inherit !important; } body.atosy-view-information #information-full-page .information-classification-panel button.information-classification-breadcrumb-part-v78:hover * { color: #ffffff !important; } /* Cấp hiện tại */ body.atosy-view-information #information-full-page .information-classification-panel button.information-classification-breadcrumb-part-v78:last-of-type { color: #dceeff !important; font-weight: 800 !important; } /* ========================================================== 4. CHEVRON ========================================================== */ body.atosy-view-information #information-full-page .information-classification-breadcrumb-separator-v78 { align-self: center !important; color: #6eafe9 !important; font-size: 11px !important; line-height: 1.35 !important; margin: 0 1px !important; } /* ========================================================== 5. LEVEL 1 — ABSOLUTELY NO STICKY/FREEZE ========================================================== */ body.atosy-view-information #information-full-page #information-category-tree .information-category-node.level-1, body.atosy-view-information #information-full-page #information-category-tree .information-category-node.level-1 > .information-category-node-row { position: relative !important; top: auto !important; bottom: auto !important; inset-block-start: auto !important; z-index: auto !important; transform: none !important; } /* T84 END */ /* ========================================================== T91 — CONTROLS FIRST / BREADCRUMB BELOW ========================================================== */ /* ---------------------------------------------------------- 1. TWO CONTROLS = ONE ROW ---------------------------------------------------------- */ body.atosy-view-information #information-full-page .information-classification-panel #information-classification-actions-row-t91 { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 12px !important; width: 100% !important; margin: 0 0 12px !important; padding: 0 !important; box-sizing: border-box !important; } /* Hai control phải lấp đầy mỗi nửa */ body.atosy-view-information #information-full-page .information-classification-panel #information-classification-actions-row-t91 > * { width: 100% !important; max-width: none !important; margin: 0 !important; box-sizing: border-box !important; } /* ---------------------------------------------------------- 2. BREADCRUMB BELOW CONTROLS ---------------------------------------------------------- */ body.atosy-view-information #information-full-page .information-classification-panel #information-classification-breadcrumb-v40 { order: initial !important; position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; align-content: center !important; width: 100% !important; height: auto !important; min-height: 44px !important; max-height: none !important; margin: 0 0 12px !important; padding: 10px 14px !important; box-sizing: border-box !important; overflow: visible !important; white-space: normal !important; } /* ---------------------------------------------------------- 3. PANEL MAY GROW NATURALLY ---------------------------------------------------------- */ body.atosy-view-information #information-full-page .information-classification-panel.information-layout-t91 { min-height: 0 !important; } /* * Chỉ vùng tree bên dưới mới chịu giới hạn scroll. * Breadcrumb không bị ép vào vùng scroll. */ body.atosy-view-information #information-full-page .information-classification-panel.information-layout-t91 #information-category-tree { min-height: 0 !important; } /* ---------------------------------------------------------- 4. NARROW PANEL SAFETY ---------------------------------------------------------- */ @media (max-width: 720px) { body.atosy-view-information #information-full-page .information-classification-panel #information-classification-actions-row-t91 { gap: 8px !important; } } /* ========================================================== T92 — ACTIONS ABOVE BREADCRUMB ========================================================== */ body.atosy-view-information #information-full-page .information-classification-panel #information-classification-actions-row-t92 { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 12px !important; width: 100% !important; margin: 0 0 12px !important; padding: 0 !important; box-sizing: border-box !important; } /* Hai ô chia đôi */ body.atosy-view-information #information-full-page .information-classification-panel #information-classification-actions-row-t92 > * { width: 100% !important; max-width: none !important; margin: 0 !important; box-sizing: border-box !important; } /* * Breadcrumb nằm dưới 2 control. * Tự tăng chiều cao. */ body.atosy-view-information #information-full-page .information-classification-panel #information-classification-breadcrumb-v40 { position: relative !important; inset: auto !important; width: 100% !important; height: auto !important; min-height: 44px !important; max-height: none !important; margin: 0 0 12px !important; padding: 10px 14px !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; align-content: center !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================== T93 — NO LEVEL-1 FREEZE + TOP-ALIGNED BREADCRUMB ========================================================== */ /* ========================================================== 1. DISABLE LEVEL-1 STICKY / FREEZE ========================================================== */ /* * Cấp 1 như "Chứng từ" vẫn giữ style selected màu xanh, * nhưng KHÔNG được sticky/freeze khi scroll. */ body.atosy-view-information #information-full-page #information-category-tree .information-category-node.level-1 { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; inset: auto !important; z-index: auto !important; transform: none !important; } /* * Nếu sticky nằm trên row trực tiếp của level-1. */ body.atosy-view-information #information-full-page #information-category-tree .information-category-node.level-1 > .information-category-node-row { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; inset: auto !important; z-index: auto !important; transform: none !important; } /* * Không tạo pseudo backdrop cho level-1. */ body.atosy-view-information #information-full-page #information-category-tree .information-category-node.level-1::before, body.atosy-view-information #information-full-page #information-category-tree .information-category-node.level-1::after { position: static !important; content: none !important; } /* ========================================================== 2. BREADCRUMB = TOP ALIGNED ========================================================== */ body.atosy-view-information #information-full-page .information-classification-panel #information-classification-breadcrumb-v40 { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; inset: auto !important; display: flex !important; flex-wrap: wrap !important; /* * QUAN TRỌNG: * căn lên trên, không căn giữa theo chiều dọc. */ align-items: flex-start !important; align-content: flex-start !important; justify-content: flex-start !important; width: 100% !important; height: auto !important; min-height: 44px !important; max-height: none !important; margin: 0 0 12px !important; padding: 10px 14px !important; overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; white-space: normal !important; box-sizing: border-box !important; } /* ========================================================== 3. EACH BREADCRUMB BUTTON MAY WRAP NATURALLY ========================================================== */ body.atosy-view-information #information-full-page #information-classification-breadcrumb-v40 .information-classification-breadcrumb-part-v78 { display: inline !important; width: auto !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; align-self: flex-start !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere !important; word-break: normal !important; line-height: 1.35 !important; text-align: left !important; vertical-align: top !important; } /* ========================================================== 4. SEPARATORS ALSO ALIGN TO TOP TEXT LINE ========================================================== */ body.atosy-view-information #information-full-page #information-classification-breadcrumb-v40 .information-classification-breadcrumb-separator-v78 { align-self: flex-start !important; line-height: 1.35 !important; margin-top: 0 !important; } /* ========================================================== 5. BREADCRUMB MUST GROW DOWNWARD, NEVER CENTER ITSELF ========================================================== */ body.atosy-view-information #information-full-page .information-classification-panel.information-controls-first-t92 #information-classification-breadcrumb-v40 { flex: none !important; height: auto !important; min-height: 44px !important; max-height: none !important; } /* ========================================================== T94 — REMOVE GHOST BACKDROP BEHIND LEVEL-1 ========================================================== */ /* * Mục tiêu: * - bỏ lớp nền mờ / hình chữ nhật dư phía sau category cấp 1 * - KHÔNG phá style selected màu xanh của nút thật */ body.atosy-view-information #information-full-page #information-category-tree .information-category-node.level-1 { background: transparent !important; box-shadow: none !important; border: none !important; filter: none !important; backdrop-filter: none !important; overflow: visible !important; } /* * Xóa mọi pseudo-element có thể đang tạo "miếng nền" phía sau. */ body.atosy-view-information #information-full-page #information-category-tree .information-category-node.level-1::before, body.atosy-view-information #information-full-page #information-category-tree .information-category-node.level-1::after, body.atosy-view-information #information-full-page #information-category-tree .information-category-node.level-1 > .information-category-node-row::before, body.atosy-view-information #information-full-page #information-category-tree .information-category-node.level-1 > .information-category-node-row::after { content: none !important; display: none !important; background: transparent !important; box-shadow: none !important; border: none !important; } /* * Wrapper của level-1 phải hoàn toàn trong suốt. * Nút xanh selected vẫn giữ nguyên vì nó là row thực tế bên trong. */ body.atosy-view-information #information-full-page #information-category-tree .information-category-node.level-1 > .information-category-children { background: transparent !important; box-shadow: none !important; border: none !important; } /* * Giữ lại nút cấp 1 selected hiển thị đẹp, không bị xóa màu. */ body.atosy-view-information #information-full-page #information-category-tree .information-category-node.level-1 > .information-category-node-row, body.atosy-view-information #information-full-page #information-category-tree .information-category-node.level-1 > .information-category-node-row.is-selected, body.atosy-view-information #information-full-page #information-category-tree .information-category-node.level-1.is-selected > .information-category-node-row { position: relative !important; z-index: 2 !important; } /* * Nếu hệ cũ tạo thêm "selection block" bằng class phụ, * ép nó trong suốt ở level-1 outer wrapper. */ body.atosy-view-information #information-full-page #information-category-tree .information-category-node.level-1.is-selected { background: transparent !important; box-shadow: none !important; border: none !important; } /* ========================================================== T95 — TOTAL DATA LABEL TWO CLEAN LINES ========================================================== */ body.atosy-view-information #information-full-page .information-classification-panel .information-total-label-t95 { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 0 !important; min-width: 0 !important; line-height: 1.05 !important; } /* Tổng */ body.atosy-view-information #information-full-page .information-classification-panel .information-total-label-line1-t95 { display: block !important; white-space: nowrap !important; } /* dữ liệu — tuyệt đối không tách "dữ" và "liệu" */ body.atosy-view-information #information-full-page .information-classification-panel .information-total-label-line2-t95 { display: block !important; white-space: nowrap !important; word-break: keep-all !important; overflow-wrap: normal !important; } /* * Control chứa label + badge: * label bên trái, số bên phải. */ body.atosy-view-information #information-full-page .information-classification-panel #information-classification-actions-row-t92 > *:has(.information-total-label-t95) { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; } /* ========================================================== T96 — REMOVE GHOST RECTANGLE BEHIND CATEGORY FREEZE ========================================================== */ body.atosy-view-information #information-full-page .information-classification-panel #information-category-tree .information-category-node.level-1, body.atosy-view-information #information-full-page .information-classification-panel #information-category-tree .information-category-node.level-1.is-sticky, body.atosy-view-information #information-full-page .information-classification-panel #information-category-tree .information-category-node.level-1.is-frozen, body.atosy-view-information #information-full-page .information-classification-panel #information-category-tree .information-category-node.level-1.is-pinned, body.atosy-view-information #information-full-page .information-classification-panel #information-category-tree .information-category-node-row.is-sticky, body.atosy-view-information #information-full-page .information-classification-panel #information-category-tree .information-category-node-row.is-frozen, body.atosy-view-information #information-full-page .information-classification-panel #information-category-tree .information-category-node-row.is-pinned { position: static !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; z-index: auto !important; transform: none !important; box-shadow: none !important; filter: none !important; backdrop-filter: none !important; background-image: none !important; } /* Xóa cái nền vuông mờ phía sau */ body.atosy-view-information #information-full-page .information-classification-panel #information-category-tree .information-category-node.level-1::before, body.atosy-view-information #information-full-page .information-classification-panel #information-category-tree .information-category-node.level-1::after, body.atosy-view-information #information-full-page .information-classification-panel #information-category-tree .information-category-node-row::before, body.atosy-view-information #information-full-page .information-classification-panel #information-category-tree .information-category-node-row::after { content: none !important; display: none !important; } /* Wrapper trong suốt, giữ lại pill/button riêng */ body.atosy-view-information #information-full-page .information-classification-panel #information-category-tree .information-category-node.level-1, body.atosy-view-information #information-full-page .information-classification-panel #information-category-tree .information-category-node-row { background: transparent !important; } /* Giữ item đang chọn đẹp, không bị mất */ body.atosy-view-information #information-full-page .information-classification-panel #information-category-tree .information-category-label, body.atosy-view-information #information-full-page .information-classification-panel #information-category-tree button.information-category-label { position: relative !important; z-index: 1 !important; } /* ========================================================== T97 — TOTAL DATA LABEL = EXACTLY TWO LINES ========================================================== */ body.atosy-view-information #information-full-page .information-classification-panel .information-total-label-t97 { display: inline-flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; flex: 0 0 auto !important; min-width: max-content !important; max-width: max-content !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; line-height: 1.04 !important; white-space: normal !important; } /* Hai dòng tuyệt đối không tự bẻ tiếp */ body.atosy-view-information #information-full-page .information-classification-panel .information-total-line-t97 { display: block !important; width: max-content !important; min-width: max-content !important; white-space: nowrap !important; word-break: keep-all !important; overflow-wrap: normal !important; } /* "dữ liệu" luôn đi nguyên cụm */ body.atosy-view-information #information-full-page .information-classification-panel .information-total-line-2-t97 { white-space: nowrap !important; word-break: keep-all !important; } /* * Ô Tổng dữ liệu: * label trái / badge phải. */ body.atosy-view-information #information-full-page .information-classification-panel #information-classification-actions-row-t92 > *:has(.information-total-label-t97), body.atosy-view-information #information-full-page .information-classification-panel #information-classification-actions-row-t91 > *:has(.information-total-label-t97) { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; } /* * Badge không được ép label co lại. */ body.atosy-view-information #information-full-page .information-classification-panel #information-classification-actions-row-t92 > *:has(.information-total-label-t97) > *:not(.information-total-label-t97), body.atosy-view-information #information-full-page .information-classification-panel #information-classification-actions-row-t91 > *:has(.information-total-label-t97) > *:not(.information-total-label-t97) { flex: 0 0 auto !important; } /* ========================================================== T98 — REMOVE LEVEL-1 CATEGORY GHOST BACKDROP ========================================================== */ /* * ========================================================== * LEVEL-1 NODE WRAPPER * ========================================================== */ body.atosy-view-information #information-full-page .information-classification-panel #information-category-tree .information-category-node.level-1 { position: static !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; z-index: auto !important; transform: none !important; background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 0 !important; outline: 0 !important; } /* * ========================================================== * DIRECT LEVEL-1 ROW * ========================================================== */ body.atosy-view-information #information-full-page .information-classification-panel #information-category-tree .information-category-node.level-1 > .information-category-node-row { position: static !important; top: auto !important; z-index: auto !important; transform: none !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* * ========================================================== * CHILDREN WRAPPER * * Quan trọng: wrapper này có thể nằm ngay phía sau * button cấp 1 và tạo ra miếng chữ nhật mờ. * ========================================================== */ body.atosy-view-information #information-full-page .information-classification-panel #information-category-tree .information-category-node.level-1 > .information-category-children { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 0 !important; outline: 0 !important; } /* * ========================================================== * REMOVE ALL PSEUDO BACKDROPS * ========================================================== */ body.atosy-view-information #information-full-page .information-classification-panel #information-category-tree .information-category-node.level-1::before, body.atosy-view-information #information-full-page .information-classification-panel #information-category-tree .information-category-node.level-1::after, body.atosy-view-information #information-full-page .information-classification-panel #information-category-tree .information-category-node.level-1 > .information-category-node-row::before, body.atosy-view-information #information-full-page .information-classification-panel #information-category-tree .information-category-node.level-1 > .information-category-node-row::after, body.atosy-view-information #information-full-page .information-classification-panel #information-category-tree .information-category-node.level-1 > .information-category-children::before, body.atosy-view-information #information-full-page .information-classification-panel #information-category-tree .information-category-node.level-1 > .information-category-children::after { content: none !important; display: none !important; background: transparent !important; box-shadow: none !important; } /* * ========================================================== * IMPORTANT: * KHÔNG reset button .information-category-label. * * Gradient xanh selected của button vẫn giữ nguyên. * ========================================================== */ body.atosy-view-information #information-full-page .information-classification-panel #information-category-tree .information-category-node.level-1 > .information-category-node-row > .information-category-label { position: relative !important; z-index: 1 !important; } /* ========================================================== T99 — INFORMATION BREADCRUMB HOVER + CLICK PARITY ========================================================== */ body.atosy-view-information #information-full-page #information-classification-breadcrumb-v40 .information-classification-breadcrumb-part-v78 { appearance: none !important; -webkit-appearance: none !important; display: inline !important; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; color: rgba( 191, 221, 255, 0.88 ) !important; font: inherit !important; font-weight: 700 !important; line-height: inherit !important; text-align: left !important; white-space: normal !important; cursor: pointer !important; pointer-events: auto !important; position: relative !important; z-index: 10 !important; transition: color 120ms ease, opacity 120ms ease !important; } /* * Hover giống breadcrumb Hồ sơ Chủ thể. */ body.atosy-view-information #information-full-page #information-classification-breadcrumb-v40 .information-classification-breadcrumb-part-v78:hover { color: #ffffff !important; opacity: 1 !important; text-decoration: none !important; } /* * Keyboard focus cũng rõ. */ body.atosy-view-information #information-full-page #information-classification-breadcrumb-v40 .information-classification-breadcrumb-part-v78:focus-visible { color: #ffffff !important; outline: none !important; } /* * Khi nhấn. */ body.atosy-view-information #information-full-page #information-classification-breadcrumb-v40 .information-classification-breadcrumb-part-v78:active { color: #ffffff !important; opacity: 0.86 !important; } /* * Separator không được chặn chuột. */ body.atosy-view-information #information-full-page #information-classification-breadcrumb-v40 .information-classification-breadcrumb-separator-v78 { pointer-events: none !important; cursor: default !important; } /* * Bản thân breadcrumb phải nhận pointer. */ body.atosy-view-information #information-full-page #information-classification-breadcrumb-v40 { pointer-events: auto !important; } /* T99 CSS END */ /* ========================================================== T101 — INFORMATION BREADCRUMB = SUBJECT BREADCRUMB UI ========================================================== */ /* * Container: * copy tỷ lệ trực quan từ Subject classification breadcrumb. */ body.atosy-view-information #information-full-page .information-classification-panel #information-classification-breadcrumb-v40 { display: flex !important; flex-wrap: wrap !important; align-items: center !important; align-content: flex-start !important; column-gap: 5px !important; row-gap: 3px !important; width: 100% !important; height: auto !important; min-height: 34px !important; max-height: none !important; margin: 0 0 13px !important; padding: 8px 10px !important; box-sizing: border-box !important; border-radius: 15px !important; background: rgba( 29, 91, 176, 0.17 ) !important; border: 1px solid rgba( 112, 177, 244, 0.18 ) !important; overflow: visible !important; white-space: normal !important; pointer-events: auto !important; } /* * Mỗi cấp breadcrumb: * y chang typography của Subject. */ body.atosy-view-information #information-full-page .information-classification-panel #information-classification-breadcrumb-v40 button.information-classification-breadcrumb-part-v78 { appearance: none !important; -webkit-appearance: none !important; display: inline !important; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; outline: 0 !important; background: none !important; box-shadow: none !important; color: #7fc1ff !important; font-family: inherit !important; font-size: 11px !important; font-weight: 750 !important; line-height: 1.35 !important; letter-spacing: 0 !important; text-align: left !important; text-decoration: none !important; white-space: normal !important; overflow-wrap: anywhere !important; cursor: pointer !important; pointer-events: auto !important; opacity: 1 !important; transition: color 120ms ease !important; } /* * Hover giống Hồ sơ Chủ thể: * xanh nhạt -> trắng. */ body.atosy-view-information #information-full-page .information-classification-panel #information-classification-breadcrumb-v40 button.information-classification-breadcrumb-part-v78:hover { color: #ffffff !important; } /* * Keyboard focus. */ body.atosy-view-information #information-full-page .information-classification-panel #information-classification-breadcrumb-v40 button.information-classification-breadcrumb-part-v78:focus-visible { color: #ffffff !important; outline: none !important; } /* * Separator › giống Subject. */ body.atosy-view-information #information-full-page .information-classification-panel #information-classification-breadcrumb-v40 .information-classification-breadcrumb-separator-v78 { display: inline !important; margin: 0 !important; padding: 0 !important; color: rgba( 180, 211, 255, 0.37 ) !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; pointer-events: none !important; } /* * Không cho rule cũ T99 "font: inherit" * làm breadcrumb phình to trở lại. */ body.atosy-view-information #information-full-page .information-classification-panel #information-classification-breadcrumb-v40 .information-classification-breadcrumb-part-v78 { font-size: 11px !important; font-weight: 750 !important; line-height: 1.35 !important; } /* T101 CSS END */ /* ========================================================== T102 — TOTAL DATA FONT SIZE = EDIT CATEGORY FONT SIZE ========================================================== */ /* * Tổng dữ liệu: * * Tổng * dữ liệu * * giữ 2 dòng nhưng cỡ chữ phải bằng * "Sửa Danh mục phân loại". */ body.atosy-view-information #information-full-page .information-classification-panel .information-total-label-t97, body.atosy-view-information #information-full-page .information-classification-panel .information-total-line-t97 { font-family: inherit !important; font-size: 13px !important; font-weight: 750 !important; line-height: 1.05 !important; letter-spacing: 0 !important; } /* * Đồng bộ chính button Sửa Danh mục phân loại * về cùng typography để hai ô cân nhau tuyệt đối. */ body.atosy-view-information #information-full-page .information-classification-panel button.information-category-edit, body.atosy-view-information #information-full-page .information-classification-panel [data-information-category-edit] { font-size: 13px !important; font-weight: 750 !important; line-height: 1.05 !important; } /* T102 CSS END */ /* ========================================================== T103 — CLEAN LEVEL-1 FREEZE FREEZE POSITION, BUT ONLY BUTTON HAS VISUAL ========================================================== */ /* * 1. LEVEL-1 NODE: * wrapper tuyệt đối trong suốt. */ body.atosy-view-information #information-full-page .information-classification-panel #information-category-tree .information-category-node.level-1 { background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* * 2. LEVEL-1 ROW: * chính row có thể sticky, * nhưng KHÔNG được có visual rectangle. */ body.atosy-view-information #information-full-page .information-classification-panel #information-category-tree .information-category-node.level-1 > .information-category-node-row { position: sticky !important; top: 0 !important; z-index: 20 !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* * 3. Xóa mọi pseudo background * có thể tạo rectangle mờ. */ body.atosy-view-information #information-full-page #information-category-tree .information-category-node.level-1::before, body.atosy-view-information #information-full-page #information-category-tree .information-category-node.level-1::after, body.atosy-view-information #information-full-page #information-category-tree .information-category-node.level-1 > .information-category-node-row::before, body.atosy-view-information #information-full-page #information-category-tree .information-category-node.level-1 > .information-category-node-row::after { content: none !important; display: none !important; background: none !important; box-shadow: none !important; } /* * 4. Nếu các patch cũ gắn class sticky/freeze, * wrapper của chúng cũng phải transparent. */ body.atosy-view-information #information-category-tree [class*="sticky"], body.atosy-view-information #information-category-tree [class*="freeze"], body.atosy-view-information #information-category-tree [class*="frozen"], body.atosy-view-information #information-category-tree [class*="pinned"] { background-color: transparent !important; background-image: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* * 5. QUAN TRỌNG: * Button cấp 1 vẫn giữ visual card xanh. * * Không transparent button. */ body.atosy-view-information #information-full-page #information-category-tree .information-category-node.level-1 > .information-category-node-row > .information-category-label { position: relative !important; z-index: 2 !important; } /* * 6. Children không được tạo backdrop sau sticky row. */ body.atosy-view-information #information-full-page #information-category-tree .information-category-node.level-1 > .information-category-children { background: transparent !important; background-image: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* T103 CSS END */ /* ========================================================== T104 — FINAL: LEVEL-1 FREEZE COMPLETELY DISABLED ========================================================== */ /* * Toàn bộ category cấp 1 trở về normal document flow. */ body.atosy-view-information #information-full-page #information-category-tree .information-category-node.level-1 { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; inset: auto !important; z-index: auto !important; transform: none !important; translate: none !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* * Row cấp 1 cũng tuyệt đối không sticky. */ body.atosy-view-information #information-full-page #information-category-tree .information-category-node.level-1 > .information-category-node-row { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; inset: auto !important; z-index: auto !important; transform: none !important; translate: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* * Children normal flow. */ body.atosy-view-information #information-full-page #information-category-tree .information-category-node.level-1 > .information-category-children { position: relative !important; top: auto !important; inset: auto !important; z-index: auto !important; transform: none !important; } /* * Vô hiệu mọi class freeze/sticky/pinned/frozen cũ * nếu vẫn còn bị gắn vào level-1. */ body.atosy-view-information #information-category-tree .information-category-node.level-1[class*="sticky"], body.atosy-view-information #information-category-tree .information-category-node.level-1[class*="freeze"], body.atosy-view-information #information-category-tree .information-category-node.level-1[class*="frozen"], body.atosy-view-information #information-category-tree .information-category-node.level-1[class*="pinned"] { position: static !important; top: auto !important; inset: auto !important; z-index: auto !important; transform: none !important; } /* * Không cho pseudo-element tạo lớp nền freeze. */ body.atosy-view-information #information-category-tree .information-category-node.level-1::before, body.atosy-view-information #information-category-tree .information-category-node.level-1::after, body.atosy-view-information #information-category-tree .information-category-node.level-1 > .information-category-node-row::before, body.atosy-view-information #information-category-tree .information-category-node.level-1 > .information-category-node-row::after { content: none !important; display: none !important; } /* * Không reset .information-category-label. * Selected card gradient xanh vẫn giữ nguyên. */ /* T104 CSS END */ /* ========================================================== T118 — CANONICAL INFORMATION ACTION GRID ========================================================== */ body.atosy-view-information #information-full-page .information-classification-panel #information-classification-actions-row-t118 { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; align-items: stretch !important; gap: 12px !important; width: 100% !important; max-width: none !important; margin: 0 0 12px !important; padding: 0 !important; box-sizing: border-box !important; } body.atosy-view-information #information-full-page .information-classification-panel #information-classification-actions-row-t118 > * { width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; box-sizing: border-box !important; } /* * Legacy rows không được tham gia layout * sau khi control đã được T118 tiếp quản. */ body.atosy-view-information #information-full-page .information-classification-panel #information-classification-actions-row-t91:empty, body.atosy-view-information #information-full-page .information-classification-panel #information-classification-actions-row-t92:empty { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; } /* * Mobile vẫn giữ 2 ô cạnh nhau, * chỉ giảm khoảng cách. */ @media (max-width: 720px) { body.atosy-view-information #information-full-page .information-classification-panel #information-classification-actions-row-t118 { gap: 8px !important; } } /* T118 CSS END */