#photoUrlList_03fed688a6144186a5ea340da352cd47 .lead_swiper_container{
                --swiper_wrapperWidth: 100%;
                --swiper_main_ratio: 1 / 1;
                --swiper_main_width: 100%;
                --swiper_thumb_align: start;
                --swiper_thumb_gap: 20px;
                --swiper_thumb_space: 20px;
                --swiper_thumb_ratio: 1 / 1;
                --swiper_video_icon_size: 30px;
                --swiper_slidesPerView: 5;
                --swiper_thumbsWidth: 100%;
                --swiper_thumbsSlideHeight: 80px;
                --swiper_swiperSlideSpaceBetween:10px;
                --swiper_waterfall_num: 2;
                --swiper_waterfall_space: 20px;
                --swiper_icon_space: 10px;
                --swiper-icon-size: 20px;
            }
    
            @media (max-width: 768px) {
                div #photoUrlList_03fed688a6144186a5ea340da352cd47 .lead_swiper_container{
                --swiper_wrapperHeight: auto;
                --swiper_thumbsSlideHeight: auto;
              }
            }
        

        .prodName{
            font-size:22px;
        }
    

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f1f5f9;
      display: flex;
      justify-content: center;
      padding: 30px 15px;
      margin: 0;
    }
    .unit-widget-wrapper {
      width: 100%;
      max-width: 680px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    }
    .unit-header {
      padding: 14px 18px;
      background: #f8fafc;
      border-bottom: 1px solid #e2e8f0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .unit-header h3 { margin: 0 0 2px 0; font-size: 15px; color: #0f172a; }
    .unit-header p { margin: 0; font-size: 12px; color: #64748b; }
    .unit-stage {
      position: relative;
      background: #ffffff;
      display: flex;
      justify-content: center;
      padding: 16px 0;
      border-bottom: 1px solid #e2e8f0;
    }
    .unit-img-box {
      position: relative;
      width: 340px;
      max-width: 92%;
      aspect-ratio: 1 / 1;
    }
    .unit-img-box img { width: 100%; height: 100%; object-fit: contain; }
    .hotspot-pin {
      position: absolute;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #0284c7;
      color: #ffffff;
      font-size: 11px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transform: translate(-50%, -50%);
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.45);
      border: 2px solid #ffffff;
      transition: all 0.2s ease;
      z-index: 10;
    }
    .hotspot-pin:hover { transform: translate(-50%, -50%) scale(1.18); background: #0369a1; }
    .hotspot-pin.active {
      background: #0284c7;
      transform: translate(-50%, -50%) scale(1.25);
      box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.3), 0 4px 12px rgba(2, 132, 199, 0.6);
    }
    .unit-inspector { display: flex; min-height: 250px; }
    .component-list-pane {
      width: 44%;
      border-right: 1px solid #e2e8f0;
      overflow-y: auto;
      max-height: 270px;
      padding: 8px;
    }
    .component-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 8px;
      margin-bottom: 4px;
      cursor: pointer;
      background: #f8fafc;
      border: 1px solid transparent;
      transition: all 0.15s;
    }
    .component-item:hover { background: #f1f5f9; }
    .component-item.active { background: #e0f2fe; border-color: #bae6fd; }
    .item-badge {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #cbd5e1;
      color: #475569;
      font-size: 10px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .component-item.active .item-badge { background: #0284c7; color: #ffffff; }
    .item-label { font-size: 12px; font-weight: 500; color: #334155; }
    .component-item.active .item-label { color: #0369a1; font-weight: 600; }
    .component-detail-pane { flex: 1; padding: 16px 18px; display: flex; flex-direction: column; justify-content: center; }
    .detail-header-tag { font-size: 11px; font-weight: 700; color: #0284c7; margin-bottom: 4px; }
    .detail-title { font-size: 15.5px; font-weight: 700; color: #0f172a; margin: 0 0 12px 0; padding-bottom: 8px; border-bottom: 1px dashed #cbd5e1; }
    .detail-field { margin-bottom: 10px; }
    .detail-label { font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase; margin-bottom: 2px; }
    .detail-value { font-size: 12.5px; color: #334155; line-height: 1.5; }
    .detail-tag-pill { display: inline-block; padding: 2px 8px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 4px; font-size: 11px; color: #475569; }
  

      .code-box { fill: #F1F3F5; stroke: #E2E8F0; stroke-width: 1.5; }
      .code-font { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 14px; font-weight: 700; fill: #1E293B; text-anchor: middle; dominant-baseline: central; }
      .label-font { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 12px; font-weight: 400; fill: #334155; dominant-baseline: central; }
      .line-bb { stroke: #2563EB; fill: #2563EB; }
      .line-15 { stroke: #D97706; fill: #D97706; }
      .line-m  { stroke: #64748B; fill: #64748B; }
      .line-y  { stroke: #0D9488; fill: #0D9488; }
      .connector { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
    

    :root {
      --primary-indigo: #6366f1;
      --primary-dark: #3730a3;
      --primary-light: #eef2ff;
      --header-bg: #e0e7ff;
      --border-color: #f1f5f9;
      --text-main: #334155;
      --text-muted: #64748b;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      background-color: #f8fafc;
      padding: 24px;
      margin: 0;
      color: var(--text-main);
    }

    .table-container {
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
      overflow-x: auto;
      border: 1px solid #e2e8f0;
      margin: 0 auto;
      max-width: 100%;
    }

    .table-header-info {
      padding: 18px 24px;
      background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
      border-bottom: 2px solid #c7d2fe;
    }

    .table-title {
      font-size: 18px;
      font-weight: 700;
      color: #312e81;
      margin: 0 0 6px 0;
    }

    .table-subtitle {
      font-size: 13px;
      color: #4338ca;
      margin: 0;
      line-height: 1.5;
    }

    table.custom-table {
      width: 100%;
      border-collapse: collapse;
      text-align: center;
      font-size: 13.5px;
      white-space: nowrap;
    }

    /* Table Header */
    table.custom-table thead th {
      background-color: #ffffff;
      color: #475569;
      font-weight: 600;
      padding: 14px 16px;
      border-bottom: 1.5px solid #cbd5e1;
      border-right: 1px solid var(--border-color);
    }

    table.custom-table thead th.model-col-header {
      background-color: var(--primary-light);
      color: var(--primary-dark);
      font-weight: 700;
    }

    /* Table Body */
    table.custom-table tbody td {
      padding: 13px 16px;
      border-bottom: 1px solid var(--border-color);
      border-right: 1px solid var(--border-color);
      color: var(--text-main);
    }

    /* Column 1: Unit Model (Indigo Highlight) */
    table.custom-table tbody td.col-model {
      background-color: var(--primary-light);
      color: var(--primary-dark);
      font-weight: 700;
      font-size: 14px;
      letter-spacing: 0.3px;
    }

    /* Column 2: Compressor Model */
    table.custom-table tbody td.col-compressor {
      font-weight: 500;
      color: #0f172a;
    }

    /* Highlighted Data */
    table.custom-table tbody td.highlight-cell {
      font-weight: 700;
      color: #0f172a;
    }

    /* Row Hover */
    table.custom-table tbody tr:hover td {
      background-color: #f5f7ff;
    }

    table.custom-table tbody tr:hover td.col-model {
      background-color: #e0e7ff;
    }

    .unit-tag {
      font-size: 11px;
      font-weight: normal;
      color: var(--text-muted);
      display: block;
      margin-top: 2px;
    }
  

        .emptyNodeData {
            display:none;
        }
   

    #productDetail_28412_03fed688a6144186a5ea340da352cd47_leftColumn{
        width:40%;
        max-width:100%;
        flex: 1 1 40%;
    }
    #productDetail_28412_03fed688a6144186a5ea340da352cd47_rightColumn{
        width:60%;
        max-width:100%;
        flex: 1 1 60%;
    }

    #productDetail_28412_03fed688a6144186a5ea340da352cd47_rowContainer_ip5413{
        padding: 0px;
    }

    #productDetail_28412_03fed688a6144186a5ea340da352cd47_column_iojrko{
        padding: 5px 15px 5px 0px;
    }