/* ===== BO CONG CU VAN PHONG DXF PAGE STYLES ===== */
/* BASE FONT WEIGHT 300 */
body.dxf-page {
  font-weight: 300;
}






/* CHỐNG CẮT MẤT DẤU NẶNG */
body.dxf-page .toolbar-btn span {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
  display: inline-block;
}
/* BẮT BUỘC FONT INTER CHO TOÀN BỘ TRANG DXF (NGOẠI TRỪ ICON) */
body.dxf-page,
body.dxf-page button:not(.fa):not(.fas):not([class*="fa-"]),
body.dxf-page input:not(.fa):not(.fas):not([class*="fa-"]),
body.dxf-page select:not(.fa):not(.fas):not([class*="fa-"]),
body.dxf-page textarea:not(.fa):not(.fas):not([class*="fa-"]),
body.dxf-page .swal2-container *:where(:not(.fa):not(.fas):not([class*="fa-"]):not(b):not(strong)),
body.dxf-page .app.layout-3col *:where(:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not([class^='fa-']):not([class*=' fa-']):not(b):not(strong)) {
  font-family: 'Inter', sans-serif !important;
  font-weight: 300 !important;
}

/* GHI ĐÈ THẺ B VÀ STRONG VÀ CÁC ĐIỂM NHẤN UI VỀ 500 (VISUAL HIERARCHY) */
body.dxf-page .app.layout-3col b,
body.dxf-page .app.layout-3col strong,
body.dxf-page .app.layout-3col .group-title,
body.dxf-page .app.layout-3col .prop-section,
body.dxf-page .app.layout-3col .panel-tab-btn.active .tab-label,
body.dxf-page .app.layout-3col .group-title span,
body.dxf-page .app.layout-3col .panel-tab-btn.active .tab-count,
body.dxf-page .app.layout-3col .layer-item.active,
body.dxf-page .app.layout-3col .entity-item.active,
body.dxf-page .app.layout-3col .toolbar-btn.primary,
body.dxf-page .app.layout-3col #chooseFileBtn,
body.dxf-page .app.layout-3col .file-name {
  font-weight: 500 !important;
}

/* KHÔI PHỤC FONT GỐC CHO NAVIGATION_LEFT */
body.dxf-page nav.navbar-default.navbar-static-side,
body.dxf-page nav.navbar-default.navbar-static-side *:not(.fa):not(.fas):not([class*="fa-"]) {
  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

body.dxf-page {
  --bg: #eef2ff;
  --panel: rgba(255, 255, 255, .95);
  --panel-2: #fff;
  --panel-3: #f8fbff;
  --border: #dbe4f0;
  --text: #0f172a;
  --muted: #64748b;
  --primary: #2563eb;
  --primary-2: #1d4ed8;
  --danger: #ef4444;
  --warning: #f59e0b;
  --success: #16a34a;
  --shadow: 0 14px 40px rgba(15, 23, 42, .10);
  --canvas-bg: #fff;
  --grid: rgba(15, 23, 42, .06);
  --overlay: rgba(15, 23, 42, .82);
  --list-hover: #f1f5f9;
  --list-active: #dbeafe;
  --crosshair: rgba(37, 99, 235, .45);
  --minimap-bg: rgba(255, 255, 255, .90);
  --minimap-border: rgba(15, 23, 42, .15);
  --toolbar-bg: rgba(255, 255, 255, .82);
  --toolbar-group: rgba(248, 251, 255, .92);
  --toolbar-btn: #fff;
  --toolbar-btn-border: #d7e1ef;
  --drop-overlay: rgba(255, 255, 255, .72);
  --drop-box: rgba(255, 255, 255, .94);
  --ui-font: 12px;
  --ui-radius: 10px;
  --ui-radius-lg: 13px;
  --ui-btn-h: 30px;
  --ui-icon: 14px;
}

body.dxf-page,
body.dxf-page {
  margin: 0;
  height: 100%;
  font-size: var(--ui-font);
  background: var(--bg);
  color: var(--text);
}

body.dxf-page {
  overflow: hidden;
}

body.dxf-page .hidden,
/* Tooltip hover/click trên canvas đã tắt: thông tin chi tiết dùng panel Thuộc tính bên phải */
body.dxf-page #hoverInfo,
body.dxf-page #clickPopup,
body.dxf-page .left-panel .file-card-top.no-file .file-card-left,
body.dxf-page #zoomInBtn span:not(.icon),
body.dxf-page #zoomOutBtn span:not(.icon) {
  display: none !important;
}

body.dxf-page .app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 10px;
  height: 100dvh;
  padding: 10px;
  background: radial-gradient(circle at top left, rgba(37, 99, 235, .08), transparent 28%), var(--bg);
  transition: grid-template-columns .22s ease;
}

body.dxf-page .app.panel-collapsed {
  grid-template-columns: minmax(0, 1fr) 0;
  gap: 0;
}

body.dxf-page .app.panel-collapsed .panel,
body.dxf-page .layout-3col.app.panel-collapsed .right-panel {
  opacity: 0;
  pointer-events: none;
  transform: translateX(18px);
  border-width: 0;
}

body.dxf-page .panel,
body.dxf-page .viewer {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}

body.dxf-page .panel {
  order: 2;
  transition: opacity .22s ease, transform .22s ease, border-width .22s ease;
}

body.dxf-page .viewer {
  order: 1;
  display: flex;
  flex-direction: column;
}

body.dxf-page .panel-body {
  height: calc(100dvh - 20px);
  min-height: 0;
  padding: 8px;
  overflow: hidden;
}

body.dxf-page .group,
body.dxf-page .list-wrap,
body.dxf-page .panel-tabs,
body.dxf-page .status-item,
body.dxf-page .input,
body.dxf-page .error {
  border-radius: var(--ui-radius-lg);
}

body.dxf-page .file-card-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  align-items: stretch;
}

body.dxf-page .file-card-left {
  order: 2;
  min-width: 0;
  flex: 1;
}

body.dxf-page .file-actions,
body.dxf-page .file-actions-main {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  flex-wrap: wrap;
  padding-bottom: 0;
}

body.dxf-page .file-actions-main,
body.dxf-page .layout-3col .left-panel {
  order: 1;
}

body.dxf-page .file-actions-main .danger {
  margin-left: 0;
}

body.dxf-page .file-name,
body.dxf-page .group-title,
body.dxf-page .entity-type,
body.dxf-page .layer-name,
body.dxf-page .summary-name {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  word-break: break-word;
}

body.dxf-page .file-sub,
body.dxf-page .help,
body.dxf-page .entity-meta,
body.dxf-page .layer-meta,
body.dxf-page .summary-meta,
body.dxf-page .statusbar,
body.dxf-page .overlay,
body.dxf-page .canvas-drop-sub {
  font-size: 13.5px !important;
  line-height: 1.35;
  color: var(--muted);
}

body.dxf-page .file-sub {
  margin-top: 6px;
  word-break: break-word;
}

body.dxf-page .group {
  margin-top: 7px;
  padding: 8px;
  border: 1px solid var(--border);
  background: var(--panel-2);
}

body.dxf-page .group-title {
  margin-bottom: 6px;
}

body.dxf-page .danger {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.06) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
}

body.dxf-page .danger:hover {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
}

body.dxf-page .toolbar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0px 48px 0px 48px;
  border-bottom: 1px solid var(--border);
  background: var(--toolbar-bg);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

body.dxf-page .toolbar-groups {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 1px;
  scrollbar-color: rgba(120, 145, 190, .35) transparent;
}

body.dxf-page .toolbar-btn,
body.dxf-page .compact-action-btn,
body.dxf-page .compact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid var(--toolbar-btn-border);
  background: var(--toolbar-btn);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  flex: 0 0 auto;
  letter-spacing: 0.01em;
}

body.dxf-page .toolbar-btn:hover,
body.dxf-page .compact-action-btn:hover,
body.dxf-page .compact-btn:hover {
  transform: translateY(-1px);
}

body.dxf-page .toolbar-btn.primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  border-color: transparent;
  color: white;
  padding: 6px 10px;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22);
}

body.dxf-page .toolbar-btn.success,
body.dxf-page .toolbar-btn.excel {
  color: var(--success) !important;
  background: rgba(34, 197, 94, .10) !important;
  border-color: rgba(34, 197, 94, .24) !important;
}

body.dxf-page .toolbar-btn.warning,
body.dxf-page #measureModeBtn {
  color: var(--warning) !important;
  background: rgba(245, 158, 11, .12) !important;
  border-color: rgba(245, 158, 11, .28) !important;
}

body.dxf-page .toolbar-btn.active {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .13) !important;
}

body.dxf-page .toolbar-btn.icon-only {
  min-width: 42px;
  width: 42px;
  padding: 0;
  font-size: 18px;
  font-weight: 500;
}

body.dxf-page .toolbar-btn .icon {
  font-size: 15px;
  line-height: 1.2 !important;
}

body.dxf-page .icon-svg,
body.dxf-page .toolbar-btn.primary .icon-svg,
body.dxf-page .toolbar-btn.icon-only .icon-svg,
body.dxf-page .toolbar-btn.success .icon-svg,
body.dxf-page .toolbar-btn.warning .icon-svg {
  width: var(--ui-icon);
  height: var(--ui-icon);
  display: inline-block;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.dxf-page #zoomInBtn .icon-svg,
body.dxf-page #zoomOutBtn .icon-svg,
body.dxf-page .layout-3col #zoomInBtn .icon-svg,
body.dxf-page .layout-3col #zoomOutBtn .icon-svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.25;
}

body.dxf-page .floating-panel-toggle {
  position: absolute;

  right: 9px;


  padding: 0;
  border: 1px solid var(--toolbar-btn-border);
  border-radius: 999px;
  background: var(--toolbar-btn);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .14);
  backdrop-filter: blur(8px);
  transform: translateY(-50%);
}

body.dxf-page .floating-panel-toggle:hover {
  transform: translateY(-50%) scale(1.03);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12), 0 8px 18px rgba(15, 23, 42, .18);
}

body.dxf-page .floating-panel-toggle svg {
  stroke: currentColor;
  fill: none;

  stroke-linecap: round;
  stroke-linejoin: round;
}

body.dxf-page .floating-panel-toggle.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
}

body.dxf-page .panel-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-top: 10px;
  padding: 4px;
  border: 1px solid var(--border);
  background: var(--panel-3);
}

body.dxf-page .panel-tab-btn {
  min-height: 42px;
  padding: 5px 4px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.4);
  color: var(--muted);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1.1;
  text-align: center;
  transition: all .15s ease;
}

body.dxf-page .panel-tab-btn:hover {
  background: var(--panel-2);
  color: var(--text);
  transform: none;
}

body.dxf-page .panel-tab-btn.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 8px 18px rgba(37, 99, 235, .22);
}

body.dxf-page .tab-label,
body.dxf-page .tab-count {
  display: block;
  line-height: 1.1;
  white-space: nowrap !important;
  font-size: 12px !important;
}

body.dxf-page .tab-label {
  font-weight: 500;
  color: inherit;
}

body.dxf-page .tab-count {
  color: var(--success);

  opacity: .9;
}

body.dxf-page .panel-tab-btn.active .tab-count {
  color: yellow;
  opacity: 1;
}

body.dxf-page .tab-panel,
body.dxf-page .canvas-drop-overlay.hidden,
body.dxf-page .layout-3col .panel-tabs,
body.dxf-page .toolbar.compact-1 #fitBtn span,
body.dxf-page .toolbar.compact-1 #measureModeBtn span:not(.icon),
body.dxf-page .right-panel .group-title.split-title>span:first-child:empty,
body.dxf-page .left-panel .file-card-left:empty,
body.dxf-page .left-panel .file-name:empty,
body.dxf-page .left-panel .file-sub:empty {
  display: none;
}

body.dxf-page .tab-panel.active {
  display: block;
}

body.dxf-page .tab-panel .group:first-child,
body.dxf-page .tab-panel .group-title:first-child {
  margin-top: 10px;
}

body.dxf-page #tab-entities.active {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body.dxf-page #tab-props.active {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

body.dxf-page #tab-layers.active {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

body.dxf-page .list-wrap {
  overflow: hidden;
  background: var(--panel-2);
}

body.dxf-page .entity-list,
body.dxf-page .summary-list {
  max-height: 150px;
  overflow: auto;
  width: 100%;
  box-sizing: border-box;
}

body.dxf-page .layer-list,
body.dxf-page .layer-list-full {
  height: 100%;
  max-height: none;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

body.dxf-page .layer-list-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

body.dxf-page .entity-list::-webkit-scrollbar,
body.dxf-page .summary-list::-webkit-scrollbar,
body.dxf-page .layer-list::-webkit-scrollbar {
  width: 0px;
  display: none;
}

body.dxf-page .entity-list,
body.dxf-page .summary-list,
body.dxf-page .layer-list {
  scrollbar-width: none;
}

body.dxf-page .entity-item,
body.dxf-page .layer-item,
body.dxf-page .summary-item {
  padding: 5px 10px;
  border-bottom: 1px solid var(--border);
  transition: .15s ease;
}

body.dxf-page .entity-item:last-child,
body.dxf-page .layer-item:last-child,
body.dxf-page .summary-item:last-child {
  border-bottom: none;
}

body.dxf-page .entity-item {
  cursor: pointer;
}

body.dxf-page .entity-item:hover,
body.dxf-page .layer-item:hover {
  background: var(--list-hover);
}

body.dxf-page .entity-item.active {
  background: var(--list-active);
}

body.dxf-page .layer-row,
body.dxf-page .summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

body.dxf-page .entity-meta,
body.dxf-page .layer-meta,
body.dxf-page .summary-meta {
  margin-top: 4px;
}

body.dxf-page .swatch {
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  display: inline-block;
  vertical-align: middle;
}

body.dxf-page .toggle {
  appearance: none;
  width: 26px;
  height: 14px;
  border: none;
  border-radius: 999px;
  background: #cbd5e1;
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
  transition: .2s;
}

body.dxf-page .toggle:checked {
  background: var(--primary);
}

body.dxf-page .toggle::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  background: #cbd5e1;
  transition: .2s;
}

body.dxf-page .toggle:checked::after {
  transform: translateX(12px);
}

body.dxf-page .prop-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 7px;
  align-items: center;
}

body.dxf-page .prop-key {
  color: var(--muted);
  font-weight: 500;
}

body.dxf-page .prop-val {
  color: var(--text);
  word-break: break-word;
  font-family: "Inter", "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
}

body.dxf-page .prop-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding-top: 4px;
  overflow: visible;
}

body.dxf-page .prop-empty-title {
  color: #34d399;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  min-height: 18px;
  overflow: visible;
}

body.dxf-page .prop-empty-text {
  color: var(--muted);
  font-family: "Inter", "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  font-size: 12px !important;
  font-weight: 300;
  line-height: 18px;
  min-height: 18px;
  overflow: visible;
  white-space: normal;
}

body.dxf-page .right-panel .group {
  border: none !important;

  padding: 0 !important;
}

body.dxf-page .right-panel .group .group-title {
  padding: 0 !important;
  margin-bottom: 8px !important;
}

body.dxf-page .right-panel .panel-body.side-panel-body {
  padding-top: 6px !important;
}

body.dxf-page .right-panel #tab-props {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body.dxf-page .right-panel #tab-props .group {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
  overflow: hidden !important;
}

body.dxf-page .right-panel #propertyPanel {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body.dxf-page .error {
  padding: 12px !important;
  border: 1px solid rgba(239, 68, 68, .22);
  background: rgba(239, 68, 68, .08);
  color: #ef4444;
  text-align: center;
  font-weight: 300;
}

body.dxf-page.dark .error {
  color: #fecaca;
}

body.dxf-page .canvas-wrap {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: var(--canvas-bg);
}

body.dxf-page canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--canvas-bg);
  cursor: crosshair;
}

body.dxf-page canvas.panning,
body.dxf-page .minimap:active {
  cursor: grabbing;
}

/* Layer canvases: trong suot, phu toan bo canvas-wrap */
body.dxf-page #canvasPaper,
body.dxf-page #canvasInteraction {
  background: transparent !important;
  cursor: default;
}

body.dxf-page .canvas-drop-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--drop-overlay);
  backdrop-filter: blur(2px);
  cursor: pointer;
}

body.dxf-page .canvas-drop-box {
  min-width: 320px;
  max-width: 520px;
  padding: 18px 22px;
  border: 1.5px dashed var(--primary);
  border-radius: 16px;
  background: var(--drop-box);
  text-align: center;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .18);
}

body.dxf-page .canvas-drop-icon {
  font-size: 28px;
  margin-bottom: 8px;
}

body.dxf-page .canvas-drop-sub {
  margin-top: 8px;
  font-size: 12.5px !important;
}

body.dxf-page .canvas-drop-cta {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border-radius: var(--ui-radius);
  background: var(--primary);
  color: #fff;
  font-weight: 500;
  font-size: 12.5px !important;
}

body.dxf-page .overlay {
  position: absolute;
  z-index: 4;
  max-width: 330px;
  padding: 8px 10px;
  border-radius: var(--ui-radius);
  background: var(--overlay);
  color: #fff;
  white-space: pre-line;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .18);
  backdrop-filter: blur(6px);
  pointer-events: none;
}

body.dxf-page .overlay.top-right {
  top: 12px;
  right: 12px;
}

body.dxf-page .minimap {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  width: 165px;
  height: 102px;
  overflow: hidden;
  border: 1px solid var(--minimap-border);
  border-radius: var(--ui-radius);
  background: var(--minimap-bg);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .18);
  backdrop-filter: blur(8px);
  cursor: grab;
  transition: opacity .18s ease, transform .18s ease;
}

body.dxf-page .minimap.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(.98);
}

body.dxf-page .minimap canvas {
  background: transparent;
}

body.dxf-page .statusbar {
  display: grid;
  grid-template-columns: minmax(92px, .5fr) repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 7px 8px;
  border-top: 1px solid var(--border);
  background: var(--panel);
}

body.dxf-page .status-item {
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  font-size: 12.5px !important;
}

body.dxf-page .status-item b {
  color: var(--text);
}

@media (max-width: 1200px) {
  body.dxf-page {
    overflow: auto;
  }

  body.dxf-page .app {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height: auto;
    overflow: auto;
  }

  body.dxf-page .panel-body {
    height: auto;
  }

  body.dxf-page .viewer {
    min-height: 78vh;
  }

  body.dxf-page .statusbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.dxf-page .canvas-drop-box {
    min-width: 0;
    width: calc(100% - 32px);
  }


}

/* =========================================================
       Readability tuning - font đồng nhất,
dễ đọc trên nền tối
       ========================================================= */
body.dxf-page .fa,
body.dxf-page .fas,
body.dxf-page .far,
body.dxf-page .fab,
body.dxf-page .fal,
body.dxf-page [class^="fa-"],
body.dxf-page [class*=" fa-"] {
  font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands", "FontAwesome" !important;
}

body.dxf-page .file-name {
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.32;
  letter-spacing: .1px;
  color: var(--text);
}

body.dxf-page .file-sub,
body.dxf-page .layer-meta,
body.dxf-page .summary-meta,
body.dxf-page .entity-meta {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.2;
}

body.dxf-page .layer-name,
body.dxf-page .summary-name,
body.dxf-page .entity-type {
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: .1px;
  color: var(--text);
}

body.dxf-page .group-title,
body.dxf-page .tab-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .05px;
}

body.dxf-page .tab-count {
  font-size: 12.5px;
  font-weight: 500;
}

body.dxf-page .layer-item,
body.dxf-page .summary-item,
body.dxf-page .entity-item {
  padding: 10px 10px;
}

body.dxf-page .swatch {
  width: 14px;
  height: 14px;
  margin-right: 8px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .08);
}

body.dxf-page #zoomInBtn .icon-svg,
body.dxf-page #zoomOutBtn .icon-svg {
  stroke-width: 2.25 !important;
}

/* =========================================================
       Layout 3 cột chuẩn: Layer | Canvas | Property
       Giữ canvas làm trung tâm,
bỏ tab trên desktop,
panel phải có thể collapse.
       ========================================================= */
body.dxf-page .app.layout-3col {
  grid-template-columns: 330px minmax(0, 1fr) 280px;
  gap: 10px;
}

body.dxf-page .layout-3col .viewer {
  order: 2;
}

body.dxf-page .layout-3col .right-panel {
  order: 3;
}

body.dxf-page .layout-3col.app.panel-collapsed {
  grid-template-columns: 330px minmax(0, 1fr) 0;
  gap: 10px;
}

body.dxf-page .layout-3col.app.panel-collapsed .left-panel {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  border-width: 1px;
}

body.dxf-page .layout-3col.app.left-panel-collapsed {
  grid-template-columns: 0 minmax(0, 1fr) 280px;
  gap: 10px;
}

body.dxf-page .layout-3col.app.left-panel-collapsed .left-panel {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-18px);
  border-width: 0;
}

body.dxf-page .layout-3col.app.left-panel-collapsed.panel-collapsed {
  grid-template-columns: 0 minmax(0, 1fr) 0;
}

body.dxf-page .side-panel-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 8px;
}

body.dxf-page .layout-3col .tab-panel,
body.dxf-page .layout-3col .tab-panel.active,
body.dxf-page .layout-3col #tab-entities .group,
body.dxf-page .layout-3col #tab-props .group,
body.dxf-page .layout-3col #tab-layers .group {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

body.dxf-page .layout-3col #tab-layers {
  flex: 1.2 1 0;
}

body.dxf-page .layout-3col #tab-entities {
  flex: 1 1 0;
  overflow: hidden;
}

body.dxf-page .layout-3col #tab-props {
  flex: 1 1 auto;
  overflow: hidden;
}

body.dxf-page .layout-3col #tab-entities .group:nth-child(1) {
  flex: 0 0 auto;
  max-height: 34%;
}

body.dxf-page .layout-3col #tab-entities .group:nth-child(2),
body.dxf-page .layout-3col .right-panel .group {
  flex: 1 1 auto;
}

body.dxf-page .layout-3col .entity-list,
body.dxf-page .layout-3col .summary-list {
  max-height: none;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

body.dxf-page .layout-3col #tab-entities .group {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

body.dxf-page .layout-3col #tab-entities .list-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body.dxf-page .layout-3col .split-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body.dxf-page .side-count {
  color: var(--success);
  font-size: 12.5px;
  font-weight: 750;
  white-space: nowrap;
}

body.dxf-page .layout-3col #tab-props .prop-grid {
  overflow: auto;
  min-height: 0;
}

body.dxf-page .layout-3col #tab-props .prop-grid:has(.prop-empty) {
  overflow: visible;
  align-content: start;
}

/* =========================================================
       UX chỉnh theo workflow CAD/GIS: mở file bên trái,
property bên phải
       Left = Open + Structure,
Center = Canvas,
Right = Properties
       ========================================================= */


body.dxf-page .layout-3col .right-panel .side-panel-body {
  gap: 10px;
}

body.dxf-page .layout-3col .left-panel .file-name {
  color: var(--text);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

body.dxf-page .layout-3col .left-panel .file-sub {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

body.dxf-page .layout-3col .left-panel .file-actions-main {
  gap: 6px;
}

body.dxf-page .layout-3col .left-panel .compact-action-btn,
body.dxf-page .layout-3col .left-panel .compact-btn {
  min-height: 31px;
  padding: 6px 9px;
}

body.dxf-page .layout-3col .right-panel .prop-key {
  color: var(--muted);
  font-weight: 750;
}

body.dxf-page .layout-3col .right-panel .prop-val {
  color: var(--text);
  font-weight: 650;
}

@media (max-width: 1280px) {
  body.dxf-page .app.layout-3col {
    grid-template-columns: 300px minmax(0, 1fr) 260px;
  }

  body.dxf-page .layout-3col.app.panel-collapsed {
    grid-template-columns: 300px minmax(0, 1fr) 0;
  }

  body.dxf-page .layout-3col.app.left-panel-collapsed {
    grid-template-columns: 0 minmax(0, 1fr) 260px;
  }

  body.dxf-page .layout-3col.app.left-panel-collapsed.panel-collapsed {
    grid-template-columns: 0 minmax(0, 1fr) 0;
  }


}

@media (max-width: 980px) {
  body.dxf-page {
    overflow: auto;
  }

  body.dxf-page .app.layout-3col,
  body.dxf-page .layout-3col.app.panel-collapsed,
  body.dxf-page .layout-3col.app.left-panel-collapsed,
  body.dxf-page .layout-3col.app.left-panel-collapsed.panel-collapsed {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(70vh, 1fr) auto;
    height: auto;
    overflow: auto;
  }

  body.dxf-page .layout-3col .left-panel,
  body.dxf-page .layout-3col .viewer,
  body.dxf-page .layout-3col .right-panel,
  body.dxf-page .layout-3col.app.panel-collapsed .right-panel,
  body.dxf-page .layout-3col.app.left-panel-collapsed .left-panel {
    order: initial;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    border-width: 1px;
  }

  body.dxf-page .layout-3col .panel-body,
  body.dxf-page .layout-3col .side-panel-body {
    height: auto;
    max-height: none;
  }

  body.dxf-page .layout-3col .viewer {
    min-height: 70vh;
  }


}

/* =========================================================
       Left panel dùng 2 tab: Layer / Entity
       Property luôn cố định bên phải,
không tham gia tab.
       ========================================================= */
body.dxf-page .layout-3col .left-panel .panel-tabs.left-structure-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 4px;
  margin: 0;
  padding: 4px;
  flex: 0 0 auto;
}

body.dxf-page .layout-3col .left-panel .panel-tab-btn {
  min-height: 38px;
  padding: 8px 6px;
  border-radius: 10px;
  gap: 2px;
}

body.dxf-page .layout-3col .left-panel #tab-layers,
body.dxf-page .layout-3col .left-panel #tab-entities {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

body.dxf-page .layout-3col .left-panel #tab-layers.active,
body.dxf-page .layout-3col .left-panel #tab-entities.active {
  display: flex;
  flex-direction: column;
}

body.dxf-page .layout-3col .right-panel #tab-props {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

body.dxf-page .layout-3col .left-panel #tab-layers .group,
body.dxf-page .layout-3col .left-panel #tab-entities .group {
  flex: 1 1 auto;
  min-height: 0;
}

body.dxf-page .layout-3col .left-panel #tab-entities .group:first-child {
  flex: 0 0 180px;
}

/* =========================================================
       FINAL POLISH - Toolbar pro,
không scrollbar che,
không nhảy layout
       Panel trái/phải gọn hơn,
nút collapse có ý nghĩa hơn
       ========================================================= */
body.dxf-page .app.layout-3col {
  grid-template-columns: 235px minmax(0, 1fr) 235px !important;
  gap: 8px !important;
}

/* =========================================================
       Toolbar adaptive AutoCAD style
       - Giữ 1 hàng,
không scrollbar,
không xuống dòng tự do
       - Khi thiếu chỗ: rút nhãn các nút phụ theo từng cấp
       ========================================================= */


body.dxf-page .toolbar-groups {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  min-width: 0;
  width: 100%;


  scrollbar-width: none;
}

body.dxf-page .toolbar-groups::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

body.dxf-page .toolbar-group {
  min-height: 34px;
  padding: 4px;
  gap: 4px;
  border-radius: 13px;
  flex: 0 0 auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 1px 4px rgba(0, 0, 0, .08);
}

body.dxf-page .toolbar-btn {
  min-height: 30px;
  border-radius: 10px;
  transition: width .16s ease, padding .16s ease, gap .16s ease, background .16s ease;
}

body.dxf-page .toolbar-btn .icon,
body.dxf-page .toolbar-btn .icon-svg,
body.dxf-page .left-panel .file-actions-main .toolbar-btn,
body.dxf-page .left-panel .file-actions-main .compact-btn {
  flex: 0 0 auto;
}

body.dxf-page .toolbar-btn span:not(.icon) {
  display: inline-block;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Khi thiếu chỗ: chỉ rút gọn 3 nút theo yêu cầu:
       - Vừa khung: chỉ icon
       - Copy tọa độ: thành Copy
       - Đo 2 điểm: chỉ icon thước
       Các nút khác giữ nguyên,
không bị co/mất chữ. */
body.dxf-page .toolbar.compact-1 #fitBtn,
body.dxf-page .toolbar.compact-1 #measureModeBtn {
  width: 30px;
  min-width: 30px;
  padding: 0;
  gap: 0;
}

body.dxf-page .toolbar.compact-1 #copyCoordBtn span:not(.icon) {
  font-size: 0;
  max-width: 34px;
}

body.dxf-page .toolbar.compact-1 #copyCoordBtn span:not(.icon)::after {
  content: "Copy";
  font-size: 12px;
}

body.dxf-page .floating-panel-toggle {
  z-index: 60;
  top: 50%;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
}

body.dxf-page #toggleLeftPanelBtn,
body.dxf-page .floating-panel-toggle.left-toggle {
  left: 4.5px !important;
  right: auto !important;
}

body.dxf-page #togglePanelBtn {
  right: 4.5px !important;
  left: auto !important;
}

body.dxf-page .floating-panel-toggle svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.4;
}

body.dxf-page .canvas-drop-cta {
  background: transparent !important;
  color: #60a5fa !important;
  border: 1px solid rgba(96, 165, 250, .45) !important;
  box-shadow: none !important;
}

body.dxf-page .canvas-drop-cta:hover {
  background: rgba(96, 165, 250, .10) !important;
  transform: translateY(-1px);
}

body.dxf-page .right-panel .group-title.split-title {
  min-height: 0;
  margin-bottom: 4px;
}

/* =========================================================
       HOTFIX FINAL - không cắt chiều cao thanh công cụ
       Giữ nguyên layout/adaptive hiện tại,
chỉ nới chiều cao và bỏ clip dọc.
       ========================================================= */
body.dxf-page .toolbar-groups {
  min-height: 40px !important;
}

body.dxf-page .toolbar-btn,
body.dxf-page .viewer .toolbar-group,
body.dxf-page .viewer .toolbar-btn {
  align-items: center !important;
}

body.dxf-page .floating-panel-toggle {
  top: 10px !important;
  transform: none !important;
}

body.dxf-page .floating-panel-toggle:hover {
  transform: scale(1.03) !important;
}

body.dxf-page .toolbar .floating-panel-toggle {
  z-index: 30 !important;
}

/* =========================================================
       Theme dịu hơn: giảm chói nút Chọn file và tab active
       ========================================================= */
body.dxf-page #chooseFileBtn.toolbar-btn.primary {
  color: #93c5fd !important;
  border: 1px solid rgba(96, 165, 250, .36) !important;
  background: rgba(59, 130, 246, .16) !important;
  box-shadow: none !important;
}

body.dxf-page #chooseFileBtn.toolbar-btn.primary:hover {
  color: #bfdbfe !important;
  background: rgba(59, 130, 246, .24) !important;
  border-color: rgba(147, 197, 253, .48) !important;
}

body.dxf-page .panel-tab-btn .tab-count {
  font-size: 12px !important;
}

body.dxf-page .toolbar-btn.excel {
  color: #22c55e;
  border-color: rgba(34, 197, 94, .22);
  background: rgba(34, 197, 94, .10);
}

body.dxf-page .toolbar-btn.excel:hover {
  background: rgba(34, 197, 94, .16);
  border-color: rgba(34, 197, 94, .34);
}

/* =========================================================
       FINAL CLEAN UX
       - Panel trái chỉ là danh sách chọn nhanh
       - Chi tiết hình học nằm ở status bar và panel phải
       - Nút file nằm cùng một hàng,
thống kê file không xuống dòng
       ========================================================= */
body.dxf-page .left-panel .file-actions-main {
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  min-width: 0;
}

/* Khi panel trái hẹp: chỉ thu nhỏ riêng nút Xóa,
không cho xuống dòng/đè nút */
body.dxf-page .left-panel .file-actions-main.compact-clear #clearBtn {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden;
  font-size: 0 !important;
  justify-content: center;
}

body.dxf-page .left-panel .file-actions-main.compact-clear #clearBtn::before {
  content: "🗑️";
  font-size: 13px;
  line-height: 1.2 !important;
}

body.dxf-page .left-panel .file-sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.dxf-page .left-panel .entity-item {
  padding: 8px 10px;
}

body.dxf-page .left-panel .entity-type {
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.25;
}

body.dxf-page .left-panel .entity-meta {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
}

/* =========================================================
       FINAL FIX - Giữ nút Xóa như cũ,
chỉ làm nhỏ nút/icon/padding
       ========================================================= */
body.dxf-page .left-panel .file-actions-main {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 5px !important;
  overflow: hidden !important;
}

body.dxf-page .left-panel .file-actions-main .toolbar-btn,
body.dxf-page .left-panel .file-actions-main .compact-btn {
  line-height: 1.2 !important;

  white-space: normal !important;
  flex: 0 0 auto !important;
}

body.dxf-page .left-panel .file-actions-main .icon,
body.dxf-page .left-panel .file-actions-main .icon-svg {
  width: 12px !important;
  height: 12px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

/* Không chuyển Xóa thành icon-only nữa */
body.dxf-page .left-panel .file-actions-main.compact-clear #clearBtn,
body.dxf-page .left-panel #clearBtn {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 4px 7px !important;
  gap: 3px !important;
  overflow: visible !important;
  font-size: 12px !important;
  justify-content: center !important;
}

/* =========================================================
       Layer list compact + controls
       - Chữ vùng danh sách layer nhỏ hơn cho đồng bộ
       - Thêm nút Ẩn tất cả / Hiện tất cả layer
       ========================================================= */
body.dxf-page .layer-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  margin-left: auto;
}

body.dxf-page .layer-list .layer-item {
  padding: 7px 8px !important;
}

body.dxf-page .layer-list .layer-name {
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1.22 !important;
  letter-spacing: .02px !important;
}

body.dxf-page .layer-list .layer-meta {
  margin-top: 3px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  color: var(--muted) !important;
  opacity: .92;
}

body.dxf-page .layer-list .swatch,
body.dxf-page .swatch {
  width: 11px !important;
  height: 11px !important;
  margin-right: 7px !important;
}

body.dxf-page .layer-list .toggle,
body.dxf-page .toggle {
  width: 26px !important;
  height: 14px !important;
}

body.dxf-page .layer-list .toggle::after,
body.dxf-page .toggle::after {
  width: 10px !important;
  height: 10px !important;
  left: 2px !important;
  top: 2px !important;
}

body.dxf-page .layer-list .toggle:checked::after,
body.dxf-page .toggle:checked::after {
  transform: translateX(12px) !important;
}

/* =========================================================
       FONT SYSTEM PRO COMPACT - đồng bộ kích thước toàn UI
       Base: 12.5px | Sidebar/List/Tab: 11.5px | Meta: 11px
       ========================================================= */
body.dxf-page {
  --font-base: 12.5px;
  --font-ui: 11.5px;
  --font-meta: 11px;
  --font-title: 12.5px;
  --font-file: 13px;
}

body.dxf-page .left-panel .file-actions-main .toolbar-btn,
body.dxf-page .left-panel .file-actions-main .compact-btn {
  min-height: 27px !important;
  height: 27px !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  font-size: var(--font-ui) !important;
  gap: 4px !important;
}

body.dxf-page .panel-tab-btn .tab-label,
body.dxf-page .tab-label {
  font-size: var(--font-ui) !important;
  font-weight: 500 !important;
  line-height: 1.05 !important;
}

body.dxf-page .panel-tab-btn .tab-count,
body.dxf-page .tab-count {
  font-size: var(--font-ui) !important;
  font-weight: 650 !important;
  line-height: 1.05 !important;
}

body.dxf-page .layer-list .layer-name,
body.dxf-page .layer-name,
body.dxf-page .entity-type,
body.dxf-page .summary-name,
body.dxf-page .statusbar,
body.dxf-page .status-item {
  font-size: var(--font-ui) !important;
}

body.dxf-page .layer-list .layer-meta,
body.dxf-page .layer-meta,
body.dxf-page .entity-meta,
body.dxf-page .summary-meta,
body.dxf-page .help {
  opacity: .9;
}

body.dxf-page .prop-key {
  font-size: var(--font-meta) !important;
}

/* =========================================================
       FINAL PATCH BY CHATGPT - Panel trái cân nút + font dễ đọc
       - Không dùng chữ nhỏ dưới 12px
       - 3 nút Chọn file / Nền tối / Xóa chia đều trong khung
       - Không bị cắt,
không bị sát icon,
không bị dư margin lớn
       ========================================================= */
body.dxf-page {
  --font-base-final: 13px;
  --font-ui-final: 12px;
  --font-meta-final: 12px;
  --font-title-final: 13px;
  --font-file-final: 13.5px;
}

body.dxf-page,
body.dxf-page {
  font-size: var(--font-base-final) !important;
  line-height: 1.4 !important;
}

body.dxf-page button,
body.dxf-page input,
body.dxf-page .toolbar-btn,
body.dxf-page .compact-action-btn,
body.dxf-page .compact-btn,
body.dxf-page .prop-key,
body.dxf-page .statusbar,
body.dxf-page .status-item {
  font-size: var(--font-ui-final) !important;
}

body.dxf-page .left-panel .file-card-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;

  overflow: visible !important;
  align-items: stretch !important;
}

body.dxf-page .left-panel .file-actions-main {
  order: 1 !important;
  min-width: 0 !important;
}

body.dxf-page .viewer .toolbar .toolbar-btn,
body.dxf-page .viewer .toolbar .toolbar-btn.success,
body.dxf-page .viewer .toolbar .toolbar-btn.warning,
body.dxf-page .viewer .toolbar .toolbar-btn.excel {
  width: auto !important;
  max-width: none !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 4px 8px !important;
  border-radius: 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  box-sizing: border-box !important;
}

body.dxf-page .viewer .toolbar .toolbar-btn .icon,
body.dxf-page .viewer .toolbar .toolbar-btn .icon-svg {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

body.dxf-page .viewer .toolbar .toolbar-btn span {
  display: inline-block !important;
  min-width: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

body.dxf-page #measureModeBtn .icon {
  margin-right: 6px !important;
}

body.dxf-page .left-panel .file-actions-main.compact-clear #clearBtn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 4px 5px !important;
  font-size: var(--font-ui-final) !important;
  gap: 5px !important;
}

body.dxf-page .left-panel .file-actions-main.compact-clear #clearBtn::before,
body.dxf-page .toolbar.compact-1 #copyCoordBtn span:not(.icon)::after {
  content: none !important;
}

body.dxf-page .left-panel .file-card-left {
  order: 2 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

body.dxf-page .file-name,
body.dxf-page .layout-3col .left-panel .file-name {
  font-size: var(--font-file-final) !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  margin-top: 2px !important;
  letter-spacing: .05px !important;
  color: var(--text) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.dxf-page .file-sub,
body.dxf-page .layout-3col .left-panel .file-sub {
  font-size: var(--font-meta-final) !important;
  line-height: 1.35 !important;
  color: var(--muted) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  opacity: .95 !important;
}

body.dxf-page .group-title {
  font-size: var(--font-title-final) !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
}

body.dxf-page .panel-tab-btn,
body.dxf-page .layout-3col .left-panel .panel-tab-btn {
  min-height: 38px !important;
  padding: 5px 7px !important;
  font-size: var(--font-ui-final) !important;
}

body.dxf-page .panel-tab-btn .tab-label,
body.dxf-page .tab-label,
body.dxf-page .panel-tab-btn .tab-count,
body.dxf-page .tab-count {
  font-size: var(--font-ui-final) !important;
  line-height: 1.08 !important;
}

body.dxf-page .layer-list .layer-item,
body.dxf-page .entity-item,
body.dxf-page .summary-item {
  padding: 8px 9px !important;
}

body.dxf-page .layer-list .layer-name,
body.dxf-page .layer-name,
body.dxf-page .entity-type,
body.dxf-page .summary-name {
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: .02px !important;
}

body.dxf-page .layer-list .layer-meta,
body.dxf-page .layer-meta,
body.dxf-page .entity-meta,
body.dxf-page .summary-meta,
body.dxf-page .help {
  font-size: var(--font-meta-final) !important;
  line-height: 1.35 !important;
  color: var(--muted) !important;
  opacity: .92 !important;
}

body.dxf-page .input,
body.dxf-page .compact-input {
  min-height: 30px !important;
  padding: 6px 9px !important;
  font-size: var(--font-ui-final) !important;
}

body.dxf-page .prop-val {
  font-size: 12.5px !important;
  font-weight: 500 !important;
}

body.dxf-page .toolbar-btn {
  font-size: var(--font-ui-final) !important;
  line-height: 1.15 !important;
}

body.dxf-page .toolbar-btn .icon-svg,
body.dxf-page .icon-svg,
body.dxf-page .toolbar-btn.primary .icon-svg,
body.dxf-page .toolbar-btn.success .icon-svg,
body.dxf-page .toolbar-btn.warning .icon-svg {
  width: 14px !important;
  height: 14px !important;
}

/* =========================================================
       FINAL USER PATCH - File action buttons giống mẫu
       - Bỏ kiểu chia cột làm nút cứng
       - Chọn file nổi màu xanh
       - Nền tối / Xóa là nút outline gọn
       - Icon cách chữ đều,
không bị cắt,
không bị vòng thừa
       ========================================================= */
body.dxf-page .left-panel .file-card-top {
  padding: 8px 2px !important;
  gap: 8px !important;
  overflow: visible !important;
  margin-bottom: 0 !important;
}

body.dxf-page .left-panel .file-actions-main .toolbar-btn,
body.dxf-page .left-panel .file-actions-main .compact-action-btn,
body.dxf-page .left-panel .file-actions-main .compact-btn,
body.dxf-page .left-panel #chooseFileBtn,
body.dxf-page .left-panel #themeBtn,
body.dxf-page .left-panel #clearBtn {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 9px !important;
  border-radius: 9px !important;
  display: inline-flex !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .10) !important;
}

body.dxf-page .left-panel #chooseFileBtn,
body.dxf-page .left-panel #chooseFileBtn.toolbar-btn.primary {
  color: #3b82f6 !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
  background: rgba(59, 130, 246, 0.05) !important;
  box-shadow: none !important;
}

body.dxf-page .left-panel #chooseFileBtn:hover,
body.dxf-page .left-panel #chooseFileBtn.toolbar-btn.primary:hover {
  background: rgba(59, 130, 246, 0.15) !important;
}

body.dxf-page .left-panel .file-actions-main .toolbar-btn span,
body.dxf-page .left-panel .file-actions-main .compact-btn span,
body.dxf-page .left-panel #chooseFileBtn span,
body.dxf-page .left-panel #themeBtn span,
body.dxf-page .left-panel #clearBtn span {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

body.dxf-page .left-panel .file-actions-main .icon,
body.dxf-page .left-panel .file-actions-main .icon-svg,
body.dxf-page .left-panel #chooseFileBtn .icon,
body.dxf-page .left-panel #themeBtn .icon,
body.dxf-page .left-panel #clearBtn .icon {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

/* Khi panel rất hẹp vẫn giữ nút đẹp,
chỉ giảm nhẹ padding */
@media (max-width: 1280px) {
  body.dxf-page .left-panel .file-actions-main {
    gap: 7px !important;
  }

  body.dxf-page .left-panel #chooseFileBtn,
  body.dxf-page .left-panel #themeBtn,
  body.dxf-page .left-panel #clearBtn {
    height: 31px !important;
    min-height: 31px !important;
    padding: 0 9px !important;
    font-size: 12px !important;
  }
}

/* =========================================================
       FIX AN TOÀN - Căn nút panel trái cố định + đồng bộ 2 nút Chọn file
       Ghi đè ở cuối CSS,
không đụng JS/export Excel
       ========================================================= */
body.dxf-page .left-panel .file-card-top {
  padding: 4px 10px 4px 10px !important;
  margin: 0 !important;
  gap: 8px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

body.dxf-page .left-panel #chooseFileBtn,
body.dxf-page .left-panel #themeBtn,
body.dxf-page .left-panel #clearBtn {
  padding: 0 8px !important;
  border-radius: 9px !important;
  display: inline-flex !important;
  white-space: nowrap !important;

  text-overflow: clip !important;

  font-size: 12px !important;
  font-weight: 750 !important;
  letter-spacing: .02px !important;

  box-shadow: none !important;
}

body.dxf-page .left-panel #chooseFileBtn span,
body.dxf-page .left-panel #themeBtn span,
body.dxf-page .left-panel #clearBtn span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

body.dxf-page .left-panel #clearBtn .icon {
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  font-size: 12px !important;
  line-height: 10px !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

/* 2 nút Chọn file dùng chung màu xanh outline giống nhau */
body.dxf-page .left-panel #chooseFileBtn,
body.dxf-page .left-panel #chooseFileBtn.toolbar-btn.primary,
body.dxf-page .canvas-drop-cta {
  color: #60a5fa !important;
  background: rgba(96, 165, 250, .08) !important;
  border: 1px solid rgba(96, 165, 250, .45) !important;
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .05) !important;
}

body.dxf-page .left-panel #chooseFileBtn:hover,
body.dxf-page .left-panel #chooseFileBtn.toolbar-btn.primary:hover,
body.dxf-page .canvas-drop-cta:hover {
  color: #93c5fd !important;
  background: rgba(96, 165, 250, .14) !important;
  border-color: rgba(147, 197, 253, .60) !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, .12) !important;
  transform: translateY(-1px) !important;
}

body.dxf-page .left-panel #chooseFileBtn:active,
body.dxf-page .canvas-drop-cta:active {
  transform: translateY(0) !important;
  box-shadow: inset 0 0 0 2px rgba(96, 165, 250, .22) !important;
}

body.dxf-page .left-panel #themeBtn {
  color: #e7f0ff !important;
  border: 1px solid rgba(96, 165, 250, .28) !important;
  background: rgba(18, 32, 58, .92) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

body.dxf-page .left-panel #themeBtn:hover {
  color: #ffffff !important;
  background: rgba(30, 48, 82, .96) !important;
  border-color: rgba(147, 197, 253, .42) !important;
}

body.dxf-page .left-panel #clearBtn {
  color: #fecaca !important;
  border: 1px solid rgba(248, 113, 113, .34) !important;
  background: rgba(127, 29, 29, .16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

body.dxf-page .left-panel #clearBtn:hover {
  color: #ffffff !important;
  background: rgba(185, 28, 28, .24) !important;
  border-color: rgba(252, 165, 165, .48) !important;
}

body.dxf-page .left-panel #searchInput {
  height: 34px !important;
  min-height: 34px !important;
  padding: 7px 10px !important;
  border-radius: 10px !important;
}

body.dxf-page .left-panel .left-structure-tabs,
body.dxf-page .left-panel .group-title.split-title {
  margin-left: 10px !important;
  margin-right: 10px !important;
  width: calc(100% - 20px) !important;
  box-sizing: border-box !important;
}

body.dxf-page .left-panel .list-wrap.layer-list-wrap {
  margin: 8px 0 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: auto !important;
}

body.dxf-page .left-panel .group-title.split-title {
  margin-top: 2px !important;
  margin-bottom: 6px !important;
}

body.dxf-page .left-panel .list-wrap.layer-list-wrap {
  margin-top: 8px !important;
}

@media (max-width: 1280px) {
  body.dxf-page .left-panel .file-actions-main {
    grid-template-columns: 1.10fr .90fr .70fr !important;
    gap: 7px !important;
  }

  body.dxf-page .left-panel #chooseFileBtn,
  body.dxf-page .left-panel #themeBtn,
  body.dxf-page .left-panel #clearBtn {
    height: 31px !important;
    min-height: 31px !important;
    padding: 0 7px !important;
    font-size: 12px !important;
  }


}

/* =========================================================
       FINAL LEFT PANEL LOCK + COMPACT PADDING
       Giữ nguyên font/màu chữ hiện tại,
chỉ khóa kích thước và canh lề.
       ========================================================= */
body.dxf-page {
  --left-panel-w-final: 235px;
  --right-panel-w-final: 235px;
  --app-gap-final: 8px;
  --left-inner-pad-final: 5px;
}

body.dxf-page .app.layout-3col {
  gap: var(--app-gap-final) !important;
}

body.dxf-page .layout-3col.app.panel-collapsed {
  grid-template-columns: var(--left-panel-w-final) minmax(0, 1fr) 0 !important;
}

body.dxf-page .layout-3col.app.left-panel-collapsed.panel-collapsed {
  grid-template-columns: 0 minmax(0, 1fr) 0 !important;
}

body.dxf-page .layout-3col .left-panel {
  width: var(--left-panel-w-final) !important;
  min-width: var(--left-panel-w-final) !important;
  max-width: var(--left-panel-w-final) !important;
  flex: 0 0 var(--left-panel-w-final) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.dxf-page .left-panel .file-card-top {
  gap: 6px !important;
}

body.dxf-page .left-panel .file-actions-main {
  grid-template-columns: 1.08fr .92fr .72fr !important;
  overflow: hidden !important;
}

body.dxf-page .left-panel #chooseFileBtn,
body.dxf-page .left-panel #themeBtn,
body.dxf-page .left-panel #clearBtn {
  height: 30px !important;
  min-height: 30px !important;
  padding-left: 6px !important;
  padding-right: 6px !important;

  overflow: hidden !important;
}

body.dxf-page .left-panel #searchInput {
  padding-left: 8px !important;
  padding-right: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body.dxf-page .left-panel .group {
  padding: 6px !important;
  margin-top: 6px !important;
}

body.dxf-page .left-panel .layer-controls {
  gap: 3px !important;
}

body.dxf-page .left-panel .list-wrap,
body.dxf-page .left-panel .layer-list-wrap {
  width: 100% !important;
  min-width: 0 !important;
}

body.dxf-page .left-panel .layer-row,
body.dxf-page .left-panel .summary-row,
body.dxf-page .left-panel .layer-row>div,
body.dxf-page .left-panel .summary-row>div,
body.dxf-page .left-panel #tab-layers,
body.dxf-page .left-panel #tab-entities {
  min-width: 0 !important;
}

body.dxf-page .left-panel button,
body.dxf-page .left-panel input {
  box-sizing: border-box !important;
}

@media (max-width: 1280px) {
  body.dxf-page .app.layout-3col {
    grid-template-columns: var(--left-panel-w-final) minmax(0, 1fr) 225px !important;
  }

  body.dxf-page .layout-3col.app.left-panel-collapsed {
    grid-template-columns: 0 minmax(0, 1fr) 225px !important;
  }

  body.dxf-page .layout-3col.app.panel-collapsed {
    grid-template-columns: var(--left-panel-w-final) minmax(0, 1fr) 0 !important;
  }


}

/* =========================================================
       AUTOCAD UX PATCH - left panel fixed,
compact padding,
one toggle all
       Giữ nguyên font/màu chữ hiện có,
chỉ chỉnh layout/padding.
       ========================================================= */
body.dxf-page .app.layout-3col {
  grid-template-columns: 235px minmax(0, 1fr) 235px !important;
}

body.dxf-page .left-panel {
  width: 275px !important;
  min-width: 275px !important;
  max-width: 275px !important;
  flex: 0 0 275px !important;
  overflow: hidden !important;
}

body.dxf-page .left-panel .layer-controls {
  margin-left: auto !important;
}

body.dxf-page .left-panel .layer-list-wrap {
  margin-top: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

body.dxf-page .left-panel .layer-list,
body.dxf-page .left-panel .layer-list-full {
  scrollbar-gutter: stable !important;
}

body.dxf-page .left-panel .layer-list .layer-item {
  padding: 9px 9px !important;
}

body.dxf-page .left-panel .layer-list .layer-row {
  align-items: center !important;
  gap: 8px !important;
}

body.dxf-page .left-panel .layer-list .layer-name {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.dxf-page .autocad-toggle-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .35);
  cursor: pointer;
  user-select: none;
  padding-top: 7px;
}

body.dxf-page .autocad-toggle-all input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

body.dxf-page .autocad-toggle-track {
  position: relative;
  display: inline-block;
  width: 26px;
  height: 14px;
  border-radius: 999px;
  background: rgba(71, 85, 105, .6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  flex: 0 0 auto;
  transition: background .18s ease, box-shadow .18s ease;
}

body.dxf-page .autocad-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #94a3b8;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform .18s ease, background .18s ease;
}

body.dxf-page .autocad-toggle-all input:checked+.autocad-toggle-track {
  background: linear-gradient(135deg, rgba(93, 163, 153, .85), rgba(74, 130, 122, .85));
  box-shadow: 0 0 0 3px rgba(93, 163, 153, .1), inset 0 0 0 1px rgba(255, 255, 255, .1);
}

body.dxf-page .autocad-toggle-all input:checked+.autocad-toggle-track .autocad-toggle-thumb {
  transform: translateX(12px);
  background: #cbd5e1;
}

body.dxf-page .autocad-toggle-all input:indeterminate+.autocad-toggle-track {
  background: linear-gradient(135deg, rgba(245, 158, 11, .9), rgba(217, 119, 6, .9));
}

body.dxf-page .autocad-toggle-all input:indeterminate+.autocad-toggle-track .autocad-toggle-thumb {
  transform: translateX(6px);
  background: #fff7ed;
}

body.dxf-page .autocad-toggle-text {
  font-size: 12px;
  font-weight: 500;
  color: #bfdbfe;
  line-height: 1.2 !important;
  white-space: nowrap;
}

body.dxf-page .autocad-toggle-all:hover {
  border-color: rgba(147, 197, 253, .42);
  background: rgba(30, 41, 59, .55);
}

/* =========================================================
       FINAL EQUAL SPACING PATCH - chỉ cân padding/căn lề thanh trái
       Không đổi màu sắc chữ,
không đổi font,
không đổi màu nút.
       ========================================================= */
body.dxf-page {
  --left-panel-w-final: 235px;
  --left-pad-even: 10px;
  --left-gap-even: 10px;
  --left-radius-even: 12px;
}

body.dxf-page .app.layout-3col {
  grid-template-columns: var(--left-panel-w-final) minmax(0, 1fr) var(--right-panel-w-final) !important;
}

body.dxf-page .layout-3col.app.left-panel-collapsed {
  grid-template-columns: 0 minmax(0, 1fr) 235px !important;
}

body.dxf-page .layout-3col .left-panel,
body.dxf-page .left-panel {
  width: var(--left-panel-w-final) !important;
  min-width: var(--left-panel-w-final) !important;
  max-width: var(--left-panel-w-final) !important;
  flex: 0 0 var(--left-panel-w-final) !important;
  overflow: hidden !important;
}

body.dxf-page .left-panel .panel-body,
body.dxf-page .left-panel .side-panel-body {
  padding: var(--left-pad-even) !important;
  gap: var(--left-gap-even) !important;
  box-sizing: border-box !important;
}

body.dxf-page .left-panel .file-card-top,
body.dxf-page .left-panel #searchInput,
body.dxf-page .left-panel .panel-tabs.left-structure-tabs,
body.dxf-page .left-panel #tab-layers,
body.dxf-page .left-panel #tab-entities,
body.dxf-page .left-panel .list-wrap,
body.dxf-page .left-panel .layer-list-wrap {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body.dxf-page .left-panel .file-card-top {
  padding: 0 !important;
  margin: 0 !important;
}

body.dxf-page .left-panel .file-card-top.no-file {
  gap: 0 !important;
}

body.dxf-page .left-panel .file-actions-main {
  width: 100% !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  align-items: center !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
}

body.dxf-page .left-panel .file-actions-main::-webkit-scrollbar {
  height: 6px;
}

body.dxf-page .left-panel .file-actions-main::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, .6);
  border-radius: 999px;
}

body.dxf-page .left-panel #chooseFileBtn,
body.dxf-page .left-panel #themeBtn,
body.dxf-page .left-panel #clearBtn {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

body.dxf-page .left-panel #searchInput {
  margin: 0 !important;
  display: block !important;
}

body.dxf-page .left-panel .panel-tabs.left-structure-tabs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  margin: 0 !important;
  padding: 4px !important;
  gap: 4px !important;
  box-sizing: border-box !important;
}

body.dxf-page .left-panel .panel-tabs.left-structure-tabs .panel-tab-btn {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  gap: 2px !important;
  justify-content: center !important;
}

body.dxf-page .left-panel #tab-layers.active,
body.dxf-page .left-panel #tab-entities.active {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  gap: 8px !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.dxf-page .left-panel #tab-layers .group-title.split-title {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}

body.dxf-page .left-panel #tab-layers>.group-title.split-title>span:first-child {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

body.dxf-page .left-panel .layer-controls {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

body.dxf-page .left-panel .autocad-toggle-all {
  margin: 0 !important;
  box-sizing: border-box !important;
}

body.dxf-page .left-panel .layer-list-wrap,
body.dxf-page .left-panel #tab-layers .layer-list-wrap,
body.dxf-page .left-panel .list-wrap.layer-list-wrap {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  border-radius: var(--left-radius-even) !important;
  overflow: auto !important;
  box-sizing: border-box !important;
}

body.dxf-page .left-panel .layer-list,
body.dxf-page .left-panel .layer-list-full {
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body.dxf-page .left-panel .group {
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

body.dxf-page .toolbar-groups {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 2px 8px 6px 8px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(120, 145, 190, .45) transparent !important;
  scrollbar-gutter: stable both-edges !important;
}

body.dxf-page .toolbar-groups::-webkit-scrollbar,
body.dxf-page .viewer .toolbar-groups::-webkit-scrollbar {
  display: block !important;
  height: 6px !important;
}

body.dxf-page .toolbar-groups::-webkit-scrollbar-track,
body.dxf-page .viewer .toolbar-groups::-webkit-scrollbar-track {
  background: transparent !important;
}

body.dxf-page .toolbar-groups::-webkit-scrollbar-thumb,
body.dxf-page .viewer .toolbar-groups::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: rgba(120, 145, 190, .45) !important;
}

body.dxf-page .toolbar-group {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  gap: 6px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.dxf-page .toolbar-group:not(:last-child)::after {
  content: "" !important;
  width: 1px !important;
  height: 24px !important;
  margin-left: 8px !important;
  background: rgba(120, 145, 190, .28) !important;
  flex: 0 0 auto !important;
}

body.dxf-page .toolbar-btn {
  flex: 0 0 auto !important;
  min-width: max-content !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

body.dxf-page .toolbar-btn span,
body.dxf-page .toolbar-btn span:not(.icon) {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: unset !important;
  max-width: none !important;
  font-size: inherit !important;
}

body.dxf-page .toolbar-btn .icon,
body.dxf-page .toolbar-btn .icon-svg {
  flex: 0 0 auto !important;
}

/* Tắt mọi kiểu compact cũ để không mất chữ các nút */
body.dxf-page .toolbar.compact-1 #fitBtn,
body.dxf-page .toolbar.compact-1 #measureModeBtn,
body.dxf-page .toolbar.compact-1 #copyCoordBtn {
  width: auto !important;
  min-width: max-content !important;
  padding: 5px 9px !important;
  gap: 4px !important;
  font-size: var(--font-ui-final, 12px) !important;
}

body.dxf-page .toolbar.compact-1 #fitBtn span,
body.dxf-page .toolbar.compact-1 #measureModeBtn span:not(.icon),
body.dxf-page .toolbar.compact-1 #copyCoordBtn span:not(.icon) {
  display: inline-flex !important;
  font-size: inherit !important;
  max-width: none !important;
}

/* Riêng phóng to / thu nhỏ chỉ để biểu tượng */
body.dxf-page #zoomInBtn,
body.dxf-page #zoomOutBtn {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  padding: 0 !important;
  justify-content: center !important;
  gap: 0 !important;
}

body.dxf-page #zoomInBtn .icon-svg,
body.dxf-page #zoomOutBtn .icon-svg {
  width: 18px !important;
  height: 18px !important;
}

/* =========================================================
       CAD COLOR STANDARD PATCH
       - Màu DXF phân biệt BYLAYER/BYBLOCK/ACI/TrueColor
       - Panel thuộc tính hiển thị swatch + mã màu rõ ràng
       ========================================================= */
body.dxf-page .prop-grid {
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 7px 9px !important;
  align-content: start !important;
}

body.dxf-page .prop-section {
  grid-column: 1 / -1;
  margin: 8px 0 2px;
  padding: 5px 8px;
  border: 1px solid rgba(96, 165, 250, .22);
  border-radius: 8px;
  background: rgba(59, 130, 246, .10);
  color: #93c5fd;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.2 !important;
}

body.dxf-page .prop-section:first-child {
  margin-top: 0;
}

body.dxf-page .prop-val.with-color {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

body.dxf-page .cad-color-swatch {
  width: 13px;
  height: 13px;
  min-width: 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 0 0 2px rgba(15, 23, 42, .18);
  display: inline-block;
}

body.dxf-page .cad-color-text {
  overflow-wrap: anywhere;
  word-break: break-word;
  font-family: "Inter", "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
}

body.dxf-page .cad-color-source {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

/* =========================================================
       FINAL UI COLOR SYSTEM - Đồng bộ màu toàn bộ ứng dụng
       Mục tiêu: 1 hệ màu CAD/GIS,
giảm chói,
không chia mảnh UI
       ========================================================= */
body.dxf-page {
  --bg: #edf2ff;
  --panel: rgba(255, 255, 255, .96);
  --panel-2: #ffffff;
  --panel-3: #f7faff;
  --surface: #ffffff;
  --surface-soft: #f8fbff;
  --surface-active: rgba(37, 99, 235, .12);
  --surface-hover: rgba(37, 99, 235, .06);
  --border: #d9e4f2;
  --border-strong: #bfd0e7;
  --text: #132033;
  --muted: #66758b;
  --primary: #2563eb;
  --primary-2: #1d4ed8;
  --accent: #0ea5e9;
  --danger: #ef4444;
  --warning: #f59e0b;
  --success: #16a34a;
  --shadow: 0 14px 40px rgba(15, 23, 42, .10);
  --canvas-bg: #ffffff;
  --grid: rgba(15, 23, 42, .055);
  --overlay: rgba(15, 23, 42, .82);
  --list-hover: var(--surface-hover);
  --list-active: var(--surface-active);
  --crosshair: rgba(37, 99, 235, .35);
  --minimap-bg: rgba(255, 255, 255, .92);
  --minimap-border: rgba(15, 23, 42, .15);
  --toolbar-bg: rgba(255, 255, 255, .88);
  --toolbar-group: #f8fbff;
  --toolbar-btn: #ffffff;
  --toolbar-btn-border: #d7e1ef;
  --drop-overlay: rgba(255, 255, 255, .72);
  --drop-box: rgba(255, 255, 255, .96);
}

body.dxf-page.dark {
  --bg: #080f1c;
  --panel: #0b1526;
  --panel-2: #0f1b2d;
  --panel-3: #0f1b2d;
  --surface: #0f1b2d;
  --surface-soft: #111f34;
  --surface-active: rgba(96, 165, 250, .16);
  --surface-hover: rgba(255, 255, 255, .045);
  --border: #243552;
  --border-strong: #315078;
  --text: #d9e6f8;
  --muted: #9caec7;
  --primary: #5da399;
  --primary-2: #4a827a;
  --accent: #22d3ee;
  --danger: #f87171;
  --warning: #fbbf24;
  --success: #34d399;
  --shadow: 0 18px 48px rgba(0, 0, 0, .38);
  --canvas-bg: #0b1526;
  --grid: rgba(148, 163, 184, .13);
  --overlay: rgba(3, 7, 18, .86);
  --list-hover: var(--surface-hover);
  --list-active: var(--surface-active);
  --crosshair: rgba(148, 163, 184, .18);
  --minimap-bg: rgba(7, 14, 27, .90);
  --minimap-border: rgba(148, 163, 184, .22);
  --toolbar-bg: #0b1526;
  --toolbar-group: #111f34;
  --toolbar-btn: #13233a;
  --toolbar-btn-border: #2a4163;
  --drop-overlay: rgba(3, 7, 18, .48);
  --drop-box: rgba(11, 21, 38, .95);
}

body.dxf-page,
body.dxf-page {
  background: var(--bg) !important;
  color: var(--text) !important;
}

body.dxf-page .app {
  background: radial-gradient(circle at top left, rgba(96, 165, 250, .08), transparent 30%), var(--bg) !important;
}

body.dxf-page .panel,
body.dxf-page .viewer {
  background: var(--panel) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow) !important;
}

body.dxf-page .group,
body.dxf-page .list-wrap,
body.dxf-page .panel-tabs,
body.dxf-page .status-item,
body.dxf-page .input,
body.dxf-page .compact-input,
body.dxf-page .layer-list-wrap {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

body.dxf-page .left-panel #searchInput,
body.dxf-page #searchInput {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

body.dxf-page #searchInput::placeholder,
body.dxf-page .input::placeholder,
body.dxf-page .compact-input::placeholder {
  color: var(--muted) !important;
  opacity: .85 !important;
}

body.dxf-page .left-panel .panel-tabs,
body.dxf-page .left-panel .left-structure-tabs {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03) !important;
}

body.dxf-page .panel-tab-btn {
  color: var(--muted) !important;
  background: transparent !important;
  border-color: transparent !important;
}

body.dxf-page .panel-tab-btn:hover {
  color: var(--text) !important;
  background: var(--surface-hover) !important;
}

body.dxf-page .panel-tab-btn.active {
  color: #dbeafe !important;
  background: var(--surface-active) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 1px rgba(96, 165, 250, .06) !important;
}

body.dxf-page .panel-tab-btn.active .tab-label {
  color: #dbeafe !important;
}

body.dxf-page .tab-count {
  color: var(--success) !important;
  font-size: 12px !important;
  font-weight: 300 !important;
}

body.dxf-page .panel-tab-btn.active .tab-count {
  color: var(--warning) !important;
}

body.dxf-page .layer-list,
body.dxf-page .entity-list,
body.dxf-page .summary-list {
  background: var(--surface) !important;
  color: var(--text) !important;
}

body.dxf-page .layer-item,
body.dxf-page .entity-item,
body.dxf-page .summary-item {
  background: transparent !important;
  border-bottom-color: var(--border) !important;
}

body.dxf-page .layer-item:hover,
body.dxf-page .entity-item:hover,
body.dxf-page .summary-item:hover {
  background: var(--surface-hover) !important;
}

body.dxf-page .entity-item.active,
body.dxf-page .layer-item.active,
body.dxf-page .summary-item.active {
  background: var(--surface-active) !important;
}

body.dxf-page #chooseFileBtn {
  color: #3b82f6 !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
  background: rgba(59, 130, 246, 0.05) !important;
}

body.dxf-page #chooseFileBtn:hover {
  background: rgba(59, 130, 246, 0.15) !important;
}

body.dxf-page #chooseFileBtn i {
  color: #fbbf24 !important;
  filter: drop-shadow(0 0 2px rgba(251, 191, 36, 0.3));
}

body.dxf-page #chooseFileBtn>.icon-svg {
  color: #fbbf24 !important;
  filter: drop-shadow(0 0 2px rgba(251, 191, 36, 0.3));
}

body.dxf-page #fitBtn {
  color: #34d399 !important;
  border-color: rgba(52, 211, 153, 0.4) !important;
  background: rgba(52, 211, 153, 0.05) !important;
}

body.dxf-page #fitBtn svg {
  stroke: #34d399 !important;
  fill: none !important;
  stroke-width: 2 !important;
}

body.dxf-page #fitBtn:hover {
  background: rgba(52, 211, 153, 0.15) !important;
}

body.dxf-page #themeBtn {
  color: #d8b4fe !important;
  background: rgba(168, 85, 247, .10) !important;
  border-color: rgba(168, 85, 247, .30) !important;
}

body.dxf-page #clearBtn {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.06) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
}

body.dxf-page #clearBtn i {
  color: #ef4444 !important;
}

body.dxf-page #clearBtn:hover {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
}

body.dxf-page .canvas-wrap,
body.dxf-page canvas {
  background: var(--canvas-bg) !important;
}

body.dxf-page .overlay {
  background: var(--overlay) !important;
  color: #fff !important;
}

body.dxf-page .minimap {
  background: var(--minimap-bg) !important;
  border-color: var(--minimap-border) !important;
}

body.dxf-page .statusbar {
  background: var(--panel) !important;
  border-top-color: var(--border) !important;
}

body.dxf-page .status-item {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}

body.dxf-page .status-item b,
body.dxf-page .status-item span,
body.dxf-page .file-name,
body.dxf-page .group-title,
body.dxf-page .layer-name,
body.dxf-page .entity-type,
body.dxf-page .summary-name,
body.dxf-page .prop-val {
  color: var(--text) !important;
}

body.dxf-page .file-sub,
body.dxf-page .help,
body.dxf-page .entity-meta,
body.dxf-page .layer-meta,
body.dxf-page .summary-meta,
body.dxf-page .prop-key {
  color: var(--muted) !important;
}

body.dxf-page .right-panel .group {
  background: transparent !important;
  border-color: transparent !important;
}

body.dxf-page .right-panel .group-title.split-title {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

body.dxf-page .right-panel .panel-body {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.dxf-page .swatch {
  border: 1px solid rgba(255, 255, 255, .32) !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18) !important;
}

body.dxf-page .toggle {
  background: #334155 !important;
}

body.dxf-page .toggle:checked {
  background: var(--primary) !important;
}

body.dxf-page .canvas-drop-box {
  background: var(--drop-box) !important;
  border-color: var(--primary) !important;
  color: var(--text) !important;
}

body.dxf-page .canvas-drop-overlay {
  background: var(--drop-overlay) !important;
}

body.dxf-page .error {
  color: #fecaca !important;
  background: rgba(239, 68, 68, .10) !important;
  border-color: rgba(248, 113, 113, .28) !important;
}

/* Làm sáng và rõ thông tin người dùng ở Sidebar Top */
body.dxf-page #id_navigation_left_tennguoidung {
  color: #fff !important;
  font-size: 13.5px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

body.dxf-page #id_navigation_left_quyentruycap {
  color: #94a3b8 !important; /* Brighter than default text-muted */
  font-size: 12px !important;
}

body.dxf-page .profile-element .text-muted {
  color: #94a3b8 !important;
}

/* CSS riêng biệt cho Popup thông báo của DXF để tránh bị to/chói */
.dxf-swal-popup {
  border-radius: 16px !important;
  padding: 20px !important;
  font-family: 'Inter', sans-serif !important;
}

.dxf-swal-title {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #ef4444 !important;
  margin-bottom: 8px !important;
  font-family: 'Inter', sans-serif !important;
}

.dxf-swal-html {
  font-size: 13px !important;
  color: #475569 !important;
  line-height: 1.5 !important;
  font-family: 'Inter', sans-serif !important;
}

.dxf-swal-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 6px 20px !important;
  border-radius: 8px !important;
  color: #ef4444 !important;
  background: #fff !important;
  border: 1px solid #ef4444 !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
  margin-top: 10px !important;
  font-family: 'Inter', sans-serif !important;
}

.dxf-swal-btn:hover {
  background: #fef2f2 !important;
}

/* Xóa border và nền của phần tử "Thuộc tính" */


/* Nếu có chữ "<div class="status-item hidden">Trạng thái</div>",
xóa nó */


/* Cỡ chữ cho phần tử chưa chọn đối tượng nào */


body.dxf-page .left-panel #chooseFileBtn .icon,
body.dxf-page .left-panel #themeBtn .icon,
body.dxf-page .left-panel #clearBtn .icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  font-size: 12px !important;
  line-height: 12px !important;
  margin: 0 !important;
  flex: 0 0 12px !important;
}

body.dxf-page .left-panel #chooseFileBtn span:not(.icon),
body.dxf-page .left-panel #themeBtn span:not(.icon),
body.dxf-page .left-panel #clearBtn span:not(.icon) {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  font-size: 12px !important;
  line-height: 12px !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

body.dxf-page .viewer .toolbar-groups {
  width: max-content !important;
  max-width: 100% !important;
  padding: 6px 8px 0 8px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(120, 145, 190, .45) transparent !important;
  box-sizing: border-box !important;
}

body.dxf-page .viewer .toolbar-group {
  min-height: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

body.dxf-page .viewer .floating-panel-toggle {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

body.dxf-page .viewer .floating-panel-toggle:hover {
  transform: translateY(-50%) scale(1.03) !important;
}

body.dxf-page .viewer .toolbar .toolbar-btn,
body.dxf-page .viewer .toolbar .compact-action-btn,
body.dxf-page .viewer .toolbar .compact-btn {
  border: 1px solid var(--toolbar-btn-border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

body.dxf-page .viewer .toolbar .toolbar-btn:hover,
body.dxf-page .viewer .toolbar .compact-action-btn:hover,
body.dxf-page .viewer .toolbar .compact-btn:hover {
  border-color: var(--border-strong) !important;
}

body.dxf-page .left-panel .file-actions-main {
  width: calc(100% + 6px) !important;
  padding: 3px !important;
  padding-bottom: 0px !important;
  margin: -3px -3px 0px !important;
  overflow: visible !important;
}

body.dxf-page .left-panel #searchInput,
body.dxf-page .left-panel .panel-tabs.left-structure-tabs,
body.dxf-page .left-panel #tab-layers .group-title.split-title,
body.dxf-page .left-panel #tab-entities .group-title.split-title,
body.dxf-page .left-panel .layer-list-wrap,
body.dxf-page .left-panel #tab-layers .list-wrap,
body.dxf-page .left-panel #tab-entities .list-wrap {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

body.dxf-page .canvas-drop-cta {
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 8px !important;
  gap: 6px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
}

/* --- NEW PREMIUM PROPERTIES UI --- */
body.dxf-page .prop-grid {
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 6px 10px !important;
  align-content: start !important;
  padding: 0 10px 10px 10px !important;
}

body.dxf-page .prop-section {
  grid-column: 1 / -1;
  margin: 12px 0 6px !important;
  padding: 0 !important;
  color: var(--warning) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.6px !important;
  border: none !important;
  background: transparent !important;
}

body.dxf-page.dark .prop-section {
  color: var(--warning) !important;
}

body.dxf-page .prop-key {
  color: var(--muted) !important;
  font-weight: 300 !important;
  font-size: 12px !important;
  display: flex !important;
  align-items: center !important;
  padding-left: 2px !important;
}

body.dxf-page .prop-val {
  color: var(--text) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  font-family: "Inter", "Segoe UI Variable", "Segoe UI", Arial, sans-serif !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  min-width: 0 !important;
}

/* FINAL TOOLBAR SIZE NORMALIZATION */
body.dxf-page .left-panel .file-actions-main .toolbar-btn,
body.dxf-page .left-panel .file-actions-main .compact-action-btn,
body.dxf-page .left-panel .file-actions-main .compact-btn,
body.dxf-page .viewer .toolbar .toolbar-btn,
body.dxf-page .viewer .toolbar .compact-action-btn,
body.dxf-page .viewer .toolbar .compact-btn {
  font-size: 12px !important;
  font-weight: 300 !important;
  line-height: 1.2 !important;
}

body.dxf-page .left-panel .file-actions-main .toolbar-btn span:not(.icon),
body.dxf-page .left-panel .file-actions-main .compact-action-btn span:not(.icon),
body.dxf-page .left-panel .file-actions-main .compact-btn span:not(.icon),
body.dxf-page .viewer .toolbar .toolbar-btn span:not(.icon),
body.dxf-page .viewer .toolbar .compact-action-btn span:not(.icon),
body.dxf-page .viewer .toolbar .compact-btn span:not(.icon) {
  font-size: 12px !important;
  font-weight: 300 !important;
  line-height: 1.2 !important;
}

body.dxf-page .left-panel .file-actions-main .icon,
body.dxf-page .left-panel .file-actions-main i,
body.dxf-page .left-panel .file-actions-main .icon-svg,
body.dxf-page .left-panel .file-actions-main svg,
body.dxf-page .viewer .toolbar .icon,
body.dxf-page .viewer .toolbar i,
body.dxf-page .viewer .toolbar .icon-svg,
body.dxf-page .viewer .toolbar svg {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  flex: 0 0 12px !important;
  font-size: 12px !important;
  line-height: 12px !important;
  margin: 0 !important;
}

body.dxf-page .left-panel #clearBtn i,
body.dxf-page .left-panel #clearBtn .icon,
body.dxf-page .left-panel #clearBtn .icon-svg {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  font-size: 12px !important;
  line-height: 12px !important;
}

/* FINAL TOOLBAR COLOR PALETTE */
body.dxf-page #toggleMiniMapBtn {
  color: #7dd3fc !important;
  border-color: rgba(125, 211, 252, 0.32) !important;
  background: rgba(14, 165, 233, 0.10) !important;
}

body.dxf-page #fitBtn {
  color: #34d399 !important;
  border-color: rgba(52, 211, 153, 0.38) !important;
  background: rgba(16, 185, 129, 0.10) !important;
}

body.dxf-page #zoomInBtn,
body.dxf-page #zoomOutBtn {
  color: #93c5fd !important;
  border-color: rgba(147, 197, 253, 0.34) !important;
  background: rgba(59, 130, 246, 0.09) !important;
}

body.dxf-page #toggleGridBtn {
  color: #facc15 !important;
  border-color: rgba(250, 204, 21, 0.36) !important;
  background: rgba(234, 179, 8, 0.10) !important;
}

body.dxf-page #toggleAxisBtn {
  color: #c4b5fd !important;
  border-color: rgba(196, 181, 253, 0.36) !important;
  background: rgba(139, 92, 246, 0.10) !important;
}

body.dxf-page #copyCoordBtn {
  color: #c4b5fd !important;
  border-color: rgba(196, 181, 253, 0.36) !important;
  background: rgba(139, 92, 246, 0.10) !important;
}

body.dxf-page #measureModeBtn {
  color: #fbbf24 !important;
  border-color: rgba(251, 191, 36, 0.42) !important;
  background: rgba(245, 158, 11, 0.12) !important;
}

body.dxf-page #exportPngBtn,
body.dxf-page #exportExcelBtn,
body.dxf-page #exportDxfBtn {
  color: #34d399 !important;
  border-color: rgba(52, 211, 153, 0.38) !important;
  background: rgba(16, 185, 129, 0.10) !important;
}

body.dxf-page #exportJsonBtn {
  color: #94a3b8 !important;
  border-color: rgba(148, 163, 184, 0.34) !important;
  background: rgba(148, 163, 184, 0.08) !important;
}

body.dxf-page #chooseFileBtn,
body.dxf-page .canvas-drop-cta {
  color: #60a5fa !important;
  border-color: rgba(96, 165, 250, 0.42) !important;
  background: rgba(37, 99, 235, 0.10) !important;
}

body.dxf-page #chooseFileBtn,
body.dxf-page .canvas-drop-cta {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 9px !important;
  gap: 6px !important;
  border: 1px solid rgba(96, 165, 250, 0.42) !important;
  border-radius: 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
}

body.dxf-page #chooseFileBtn .icon,
body.dxf-page #chooseFileBtn i,
body.dxf-page .canvas-drop-cta .icon,
body.dxf-page .canvas-drop-cta i {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  flex: 0 0 12px !important;
  font-size: 12px !important;
  line-height: 12px !important;
  margin: 0 !important;
}

body.dxf-page #chooseFileBtn .fa-folder-open-o,
body.dxf-page .canvas-drop-cta .fa-folder-open-o {
  color: #fbbf24 !important;
}

body.dxf-page #chooseFileBtn span:not(.icon),
body.dxf-page .canvas-drop-cta span:not(.icon) {
  font-size: 12.5px !important;
  font-weight: 300 !important;
  line-height: 1.2 !important;
}

body.dxf-page #themeBtn {
  color: #c4b5fd !important;
  border-color: rgba(196, 181, 253, 0.34) !important;
  background: rgba(139, 92, 246, 0.09) !important;
}

body.dxf-page #clearBtn {
  color: #f87171 !important;
  border-color: rgba(248, 113, 113, 0.42) !important;
  background: rgba(239, 68, 68, 0.10) !important;
}

body.dxf-page #toggleLeftPanelBtn,
body.dxf-page #togglePanelBtn {
  color: #bfdbfe !important;
  border-color: rgba(96, 165, 250, 0.30) !important;
  background: rgba(96, 165, 250, 0.09) !important;
}

body.dxf-page .viewer .toolbar .toolbar-btn:hover,
body.dxf-page .viewer .toolbar .compact-action-btn:hover,
body.dxf-page .viewer .toolbar .compact-btn:hover,
body.dxf-page #toggleLeftPanelBtn:hover,
body.dxf-page #togglePanelBtn:hover {
  filter: brightness(1.12) saturate(1.05);
}

/* BASEMAP CONTROL */
body.dxf-page .basemap-panel {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 18;
  width: 282px;
  padding: 10px;
  border: 1px solid rgba(96, 165, 250, 0.32);
  border-radius: 12px;
  background: rgba(15, 27, 45, 0.94);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.30);
  backdrop-filter: blur(12px);
}

body.dxf-page:not(.dark) .basemap-panel {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.14);
}

body.dxf-page .basemap-panel-title {
  color: #7dd3fc;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2 !important;
  margin-bottom: 9px;
}

body.dxf-page .basemap-field {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.2 !important;
}

body.dxf-page .basemap-field:has(#basemapProjection) {
  display: none !important;
}

body.dxf-page .basemap-field select,
body.dxf-page .basemap-field input[type="number"],
body.dxf-page .basemap-field input[type="text"] {
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  border: 1px solid rgba(96, 165, 250, 0.32);
  border-radius: 8px;
  background: rgba(8, 18, 32, 0.76);
  color: var(--text);
  font-size: 12px;
  font-weight: 300;
  outline: none;
}

body.dxf-page:not(.dark) .basemap-field select,
body.dxf-page:not(.dark) .basemap-field input[type="number"],
body.dxf-page:not(.dark) .basemap-field input[type="text"] {
  background: rgba(241, 245, 249, 0.92);
}

body.dxf-page .basemap-field input[type="range"] {
  width: 100%;
  accent-color: #38bdf8;
}

body.dxf-page .basemap-grid-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px;
  gap: 7px;
}

body.dxf-page .basemap-grid-fields .basemap-field {
  grid-template-columns: 34px minmax(0, 1fr);
}

body.dxf-page .basemap-custom-url {
  grid-template-columns: 58px minmax(0, 1fr);
}

body.dxf-page .basemap-axis-field select {
  font-size: 12px;
}

body.dxf-page .basemap-note {
  padding-top: 2px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.35;
}

body.dxf-page #basemapBtn {
  color: #38bdf8 !important;
  border-color: rgba(56, 189, 248, 0.36) !important;
  background: rgba(14, 165, 233, 0.10) !important;
}

body.dxf-page #basemapBtn.active {
  color: #22d3ee !important;
  border-color: rgba(34, 211, 238, 0.58) !important;
  background: rgba(8, 145, 178, 0.18) !important;
}

body.dxf-page #alignBasemapBtn {
  color: #fbbf24 !important;
  border-color: rgba(251, 191, 36, 0.38) !important;
  background: rgba(245, 158, 11, 0.10) !important;
}

body.dxf-page #alignBasemapBtn.active {
  color: #fde68a !important;
  border-color: rgba(251, 191, 36, 0.64) !important;
  background: rgba(245, 158, 11, 0.20) !important;
}

body.dxf-page .basemap-align-box {
  margin: 8px 0 7px;
  padding: 8px;
  border: 1px solid rgba(251, 191, 36, 0.26);
  border-radius: 9px;
  background: rgba(245, 158, 11, 0.06);
}

body.dxf-page .basemap-align-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
  color: #fbbf24;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2 !important;
}

body.dxf-page .basemap-align-head button {
  height: 24px;
  padding: 0 7px;
  border: 1px solid rgba(248, 113, 113, 0.34);
  border-radius: 7px;
  background: rgba(239, 68, 68, 0.10);
  color: #fca5a5;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2 !important;
}

body.dxf-page .basemap-align-status,
body.dxf-page .basemap-align-pairs {
  color: var(--muted);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.35;
}

body.dxf-page .basemap-align-pairs {
  margin-top: 3px;
  color: #93c5fd;
}

/* Desktop DXF must own the full viewport even when browser zoom/device
   width triggers the shared <=1200px compact rules. */
@media (min-width: 981px) {

  body.dxf-page {
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  body.dxf-page .app.layout-3col,
  body.dxf-page .layout-3col.app.panel-collapsed,
  body.dxf-page .layout-3col.app.left-panel-collapsed,
  body.dxf-page .layout-3col.app.left-panel-collapsed.panel-collapsed {
    height: 100dvh !important;
    min-height: 100dvh !important;
    grid-template-rows: minmax(0, 1fr) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body.dxf-page .app.layout-3col {
    grid-template-columns: var(--left-panel-w-final, 330px) minmax(0, 1fr) var(--right-panel-w-final, 280px) !important;
  }

  body.dxf-page .layout-3col.app.panel-collapsed {
    grid-template-columns: var(--left-panel-w-final, 330px) minmax(0, 1fr) 0 !important;
  }

  body.dxf-page .layout-3col.app.left-panel-collapsed {
    grid-template-columns: 0 minmax(0, 1fr) var(--right-panel-w-final, 280px) !important;
  }

  body.dxf-page .layout-3col.app.left-panel-collapsed.panel-collapsed {
    grid-template-columns: 0 minmax(0, 1fr) 0 !important;
  }

  body.dxf-page .layout-3col.app.left-panel-collapsed .left-panel {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(-18px) !important;
    border-width: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.dxf-page .layout-3col .left-panel,
  body.dxf-page .layout-3col .viewer,
  body.dxf-page .layout-3col .right-panel {
    min-height: 0 !important;
    height: 100% !important;
  }

  body.dxf-page .layout-3col .panel-body,
  body.dxf-page .layout-3col .side-panel-body {
    height: 100% !important;
    min-height: 0 !important;
  }

  body.dxf-page .layout-3col .viewer {
    display: flex !important;
    flex-direction: column !important;
  }

  body.dxf-page .layout-3col .canvas-wrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
}

/* Left Layer/Entity lists: keep them clean, no hard frame/border around rows. */
body.dxf-page .left-panel #tab-layers .list-wrap,
body.dxf-page .left-panel #tab-layers .layer-list,
body.dxf-page .left-panel #tab-entities .list-wrap,
body.dxf-page .left-panel #tab-entities .entity-list {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  background: transparent !important;
}

body.dxf-page .left-panel #tab-layers .layer-item,
body.dxf-page .left-panel #tab-entities .entity-item {
  border: 0 !important;
  border-bottom: 0 !important;
  margin: 0 2px 2px !important;
  border-radius: 7px !important;
}

body.dxf-page .left-panel #tab-layers .layer-item:hover,
body.dxf-page .left-panel #tab-layers .layer-item.active,
body.dxf-page .left-panel #tab-entities .entity-item:hover,
body.dxf-page .left-panel #tab-entities .entity-item.active {
  box-shadow: none !important;
}

/* Right property inspector: calmer CAD/GIS reading palette. */
body.dxf-page .right-panel #propertyPanel.prop-grid {
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 6px 10px !important;
  padding: 10px 12px 12px !important;
  align-content: start !important;
}

body.dxf-page .right-panel .prop-section {
  grid-column: 1 / -1 !important;
  margin: 12px 0 3px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(52, 211, 153, 0.85) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

body.dxf-page .right-panel .prop-section:first-child {
  margin-top: 0 !important;
}

body.dxf-page .right-panel .prop-key {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}

body.dxf-page .right-panel .prop-val {
  min-width: 0 !important;
  color: #94a3b8 !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  line-height: 1.35 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

body.dxf-page .right-panel .prop-val-emphasis {
  color: #94a3b8 !important;
  font-weight: 300 !important;
  font-size: 12px !important;
}

body.dxf-page .right-panel .prop-val.with-color,
body.dxf-page .right-panel .prop-val .with-color {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

body.dxf-page .right-panel .cad-color-text {
  color: #94a3b8 !important;
  font-weight: 500 !important;
}

body.dxf-page .right-panel .cad-color-source {
  color: #94a3b8 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

body.dxf-page .right-panel .prop-empty {
  grid-column: 1 / -1 !important;
  display: block !important;
  padding-top: 2px !important;
  text-align: center !important;
}

body.dxf-page .right-panel .prop-empty-text {
  color: #94a3b8 !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  line-height: 1.45 !important;
}

/* Premium SweetAlert Styling riêng biệt cho trang DXF */
body.dxf-page .swal2-popup {
  font-family: 'Inter', sans-serif !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
  width: 320px !important;
  padding: 12px !important;
  border: 1px solid #e2e8f0 !important;
}

body.dxf-page .swal2-title {
  padding: 0 !important;
  margin: 0 0 6px 0 !important;
}

body.dxf-page .swal2-title span, 
body.dxf-page .swal2-title i {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #ef4444 !important;
}

body.dxf-page .swal2-content,
body.dxf-page .swal2-html-container {
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  font-size: 13px !important;
  color: #1e293b !important;
  line-height: 1.5 !important;
}

body.dxf-page .swal2-icon {
  margin: 0 auto 6px auto !important;
  transform: scale(0.65) !important;
  border-color: #ef4444 !important;
  height: 70px !important;
  width: 70px !important;
}

body.dxf-page .swal2-icon.swal2-warning {
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}


/* =========================================================
   GEOREFERENCING PANEL - NẮN TỌA ĐỘ
   ========================================================= */
body.dxf-page .georeference-box {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.dxf-page .georeference-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
body.dxf-page .georeference-header > svg {
  width: 14px; height: 14px; flex-shrink: 0; stroke: #fbbf24;
}
body.dxf-page .georeference-header > span {
  flex: 1; font-size: 12px; font-weight: 500; color: #fbbf24;
}
body.dxf-page .georeference-toggle-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 6px;
  font-size: 11.5px; font-weight: 500; cursor: pointer; transition: all 0.2s;
  background: rgba(251,191,36,0.1); border: 1px solid rgba(251,191,36,0.3); color: #fbbf24;
}
body.dxf-page .georeference-toggle-btn svg {
  width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2;
}
body.dxf-page .georeference-toggle-btn:hover { background: rgba(251,191,36,0.25); border-color: #fbbf24; }
body.dxf-page .georeference-toggle-btn.active {
  background: #fbbf24; color: #0f172a; border-color: #fbbf24;
}
body.dxf-page .georeference-clear-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 400; cursor: pointer; transition: all 0.2s;
  background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.25); color: #f87171;
}
body.dxf-page .georeference-clear-btn svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; }
body.dxf-page .georeference-clear-btn:hover { background: rgba(239,68,68,0.2); border-color: #ef4444; color: #fca5a5; }
/* METHODS */
body.dxf-page .georeference-methods { display: flex; flex-direction: column; gap: 4px; }
body.dxf-page .georeference-methods-label { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
body.dxf-page .gcp-method-radio {
  display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px;
  cursor: pointer; font-size: 11.5px; color: var(--text); border: 1px solid transparent; transition: all 0.15s;
}
body.dxf-page .gcp-method-radio:hover { background: rgba(255,255,255,0.04); border-color: var(--border); }
body.dxf-page .gcp-method-radio input[type=radio] { accent-color: #3b82f6; width: 13px; height: 13px; cursor: pointer; flex-shrink: 0; }
body.dxf-page .gcp-method-radio:has(input:checked) { background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.35); color: #93c5fd; }
body.dxf-page .gcp-method-icon { font-size: 13px; line-height: 1; }
/* STATUS */
body.dxf-page .georeference-status {
  font-size: 11.5px; color: var(--muted); padding: 6px 8px;
  background: rgba(255,255,255,0.03); border-radius: 6px; border: 1px solid var(--border); line-height: 1.4;
}
body.dxf-page .georeference-status.step-dxf { color: #fbbf24; border-color: rgba(251,191,36,0.3); background: rgba(251,191,36,0.06); }
body.dxf-page .georeference-status.step-map { color: #38bdf8; border-color: rgba(56,189,248,0.3); background: rgba(56,189,248,0.06); }
body.dxf-page .georeference-status.step-done { color: #34d399; border-color: rgba(52,211,153,0.3); background: rgba(52,211,153,0.06); }
/* MANUAL INPUTS */
body.dxf-page .gcp-manual-input {
  background: rgba(59,130,246,0.06); border: 1px solid rgba(59,130,246,0.2);
  border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 7px;
}
body.dxf-page .gcp-manual-title { font-size: 11px; color: #93c5fd; font-weight: 500; }
body.dxf-page .gcp-manual-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
body.dxf-page .gcp-manual-fields label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); }
body.dxf-page .gcp-manual-fields input {
  background: rgba(255,255,255,0.06); border: 1px solid var(--border); border-radius: 5px;
  color: var(--text); font-size: 11px; padding: 4px 6px; width: 100%; box-sizing: border-box; outline: none; transition: border-color 0.15s;
}
body.dxf-page .gcp-manual-fields input:focus { border-color: #3b82f6; }
body.dxf-page .gcp-confirm-btn {
  background: rgba(59,130,246,0.15); border: 1px solid rgba(59,130,246,0.4); color: #93c5fd;
  border-radius: 6px; padding: 5px 10px; font-size: 11.5px; font-weight: 500; cursor: pointer; transition: all 0.15s; align-self: flex-end;
}
body.dxf-page .gcp-confirm-btn:hover { background: rgba(59,130,246,0.3); border-color: #3b82f6; color: #bfdbfe; }
/* GCP TABLE */
body.dxf-page .gcp-table-wrap { display: flex; flex-direction: column; gap: 5px; }
body.dxf-page .gcp-table-title { font-size: 11px; color: var(--muted); font-weight: 500; }
body.dxf-page .gcp-table-scroll { overflow-x: auto; border-radius: 6px; border: 1px solid var(--border); }
body.dxf-page .gcp-table { width: 100%; border-collapse: collapse; font-size: 10.5px; }
body.dxf-page .gcp-table th {
  background: rgba(255,255,255,0.04); color: var(--muted); padding: 4px 6px;
  text-align: left; white-space: nowrap; font-weight: 500; border-bottom: 1px solid var(--border);
}
body.dxf-page .gcp-table td {
  padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--text); white-space: nowrap; vertical-align: middle;
}
body.dxf-page .gcp-table tr:last-child td { border-bottom: none; }
body.dxf-page .gcp-table .gcp-residual-ok { color: #34d399; }
body.dxf-page .gcp-table .gcp-residual-warn { color: #fbbf24; }
body.dxf-page .gcp-table .gcp-residual-bad { color: #f87171; }
body.dxf-page .gcp-del-btn {
  background: none; border: none; color: #f87171; cursor: pointer;
  padding: 2px 4px; border-radius: 4px; font-size: 12px; line-height: 1; transition: background 0.15s; opacity: 0.6;
}
body.dxf-page .gcp-del-btn:hover { background: rgba(239,68,68,0.15); opacity: 1; }
/* STATS */
body.dxf-page .gcp-stats {
  display: flex; flex-direction: column; gap: 3px;
  background: rgba(52,211,153,0.05); border: 1px solid rgba(52,211,153,0.2); border-radius: 7px; padding: 7px 10px;
}
body.dxf-page .gcp-stats-row { display: flex; justify-content: space-between; align-items: center; font-size: 11px; gap: 8px; }
body.dxf-page .gcp-stats-row > span:first-child { color: var(--muted); white-space: nowrap; flex-shrink: 0; }
body.dxf-page .gcp-stats-row > span:last-child { color: #34d399; font-weight: 500; text-align: right; overflow: hidden; text-overflow: ellipsis; }
/* PAIRS INFO */
body.dxf-page .georeference-pairs-info { font-size: 11px; color: var(--muted); text-align: right; }

body.dxf-page .basemap-panel-title {
  display: flex; align-items: center; justify-content: space-between;
}
body.dxf-page .basemap-panel-close {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 15px; padding: 0 2px; line-height: 1; border-radius: 4px; transition: color 0.15s;
}
body.dxf-page .basemap-panel-close:hover { color: var(--text); }
body.dxf-page .georeference-stop-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 9px; border-radius: 6px; font-size: 11.5px; font-weight: 500; cursor: pointer; transition: all 0.2s;
  background: rgba(99,102,241,0.15); border: 1px solid rgba(99,102,241,0.4); color: #a5b4fc;
}
body.dxf-page .georeference-stop-btn svg {
  width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2;
}
body.dxf-page .georeference-stop-btn:hover { background: rgba(99,102,241,0.3); color: #c7d2fe; }

body.dxf-page .georef-panel {
  left: calc(280px + 280px + 10px); /* Positioned next to basemap panel */
  min-width: 280px;
}
body.dxf-page .georef-panel .georeference-box {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

/* FIX HIDDEN BUTTONS OVERRIDDEN BY INLINE-FLEX !IMPORTANT */
body.dxf-page .toolbar-btn.hidden,
body.dxf-page .viewer .toolbar .toolbar-btn.hidden,
body.dxf-page .left-panel .file-actions-main .toolbar-btn.hidden {
  display: none !important;
}

/* BASEMAP TABS */
body.dxf-page .basemap-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
body.dxf-page .basemap-tabs {
  display: flex; gap: 4px; background: rgba(0,0,0,0.2); padding: 3px; border-radius: 8px;
}
body.dxf-page .basemap-tab {
  background: transparent; border: none; color: var(--muted); padding: 4px 10px; font-size: 12px; font-weight: 500;
  border-radius: 6px; cursor: pointer; transition: all 0.2s;
}
body.dxf-page .basemap-tab:hover { color: var(--text); }
body.dxf-page .basemap-tab.active { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }

body.dxf-page .basemap-tab-content { display: none; }
body.dxf-page .basemap-tab-content.active { display: block; }

body.dxf-page .basemap-panel-close {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 15px; padding: 0 4px; line-height: 1; border-radius: 4px; transition: color 0.15s;
}
body.dxf-page .basemap-panel-close:hover { color: var(--text); }

/* Remove old georef box top border since it is inside a tab now */
body.dxf-page .basemap-tab-content .georeference-box { border-top: none; padding-top: 0; margin-top: 0; }

/* BASEMAP DROPDOWN */
body.dxf-page .basemap-dropdown {
  position: absolute;
  background: rgba(13, 22, 38, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  z-index: 9999;
  backdrop-filter: blur(10px);
  display: flex; flex-direction: column; gap: 2px;
  min-width: 140px;
}
body.dxf-page .basemap-dropdown.hidden { display: none !important; }
body.dxf-page .basemap-dropdown-item {
  padding: 6px 12px;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
}
body.dxf-page .basemap-dropdown-item:hover { background: rgba(255,255,255,0.1); }
body.dxf-page .basemap-dropdown-item.active { background: rgba(56, 189, 248, 0.15); color: #38bdf8; font-weight: 500; }