/* ===================== SCOPE (chỉ trong tool) ===================== */
    #cpfsb-color-table-tool{
      font-family: Arial, Helvetica, sans-serif;
      color:#0a0a0a;
      font-size:16px;
      line-height:1.5;
      width:100%;
      max-width:100%;
    }
    #cpfsb-color-table-tool,
    #cpfsb-color-table-tool *{ box-sizing:border-box; }
    #cpfsb-color-table-tool svg{ display:block; }

    /* Reset typography cho form controls (WP hay override button/input) */
    #cpfsb-color-table-tool button,
    #cpfsb-color-table-tool input,
    #cpfsb-color-table-tool select,
    #cpfsb-color-table-tool textarea{
      font-family: Arial, Helvetica, sans-serif !important;
      font-size: inherit;
      line-height: inherit;
      color: inherit;
      letter-spacing: normal !important;
      text-transform: none !important;
      font-kerning: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* Nhiều theme đặt style riêng cho button */
    #cpfsb-color-table-tool button{
      appearance: none;
      -webkit-appearance: none;
    }

    /* Container */
    #cpfsb-color-table-tool .et-container{max-width:1200px;margin:0 auto;padding:1.5rem 0;}

    /* Header */
    #cpfsb-color-table-tool .et-header{ text-align:center; margin-bottom:1.5rem; }
    #cpfsb-color-table-tool .et-title{ font-size:1.875rem; font-weight:700; margin:0 0 .5rem; }
    #cpfsb-color-table-tool .et-sub{ color:#6b7280; font-size:.875rem; margin:0; }

    /* Search */
    #cpfsb-color-table-tool .et-search-container{position:relative;width:100%;max-width:500px;margin:0 auto 1.5rem;}
    #cpfsb-color-table-tool .et-search-icon{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);width:1.25rem;height:1.25rem;color:#737373;pointer-events:none;}
    #cpfsb-color-table-tool .et-search-input{
      width:100%;
      padding:.75rem 2.5rem .75rem 2.5rem;
      border:1px solid #e5e5e5;border-radius:.5rem;font-size:1rem;background:#fafafa;
      outline:none;
    }
    #cpfsb-color-table-tool .et-search-input:focus{border-color:#475569;box-shadow:0 0 0 3px rgba(71,85,105,0.1);background:#fff;}
    #cpfsb-color-table-tool .et-clear-btn{
      position:absolute;right:.75rem;top:50%;transform:translateY(-50%);
      width:1.75rem;height:1.75rem;
      color:#ef4444;cursor:pointer;display:none;
      background:none;border:none;border-radius:999px;
      align-items:center;justify-content:center;
      padding:0;
    }
    #cpfsb-color-table-tool .et-clear-btn:hover{color:#dc2626;background:#f3f4f6;}

    /* Categories */
    #cpfsb-color-table-tool #categoriesContainer{ margin-bottom:1.5em; padding:0 0.5em; }
    #cpfsb-color-table-tool .et-category-list{ display:flex; gap:.5em; flex-wrap:wrap; align-items:center; }
    #cpfsb-color-table-tool .et-category-btn{
      padding:.5em 1em;border-radius:.5em;font-weight:700;cursor:pointer;border:0;
      white-space:nowrap;transition:.2s;font-size:.95em;
      background:#f5f5f5;color:#0a0a0a;
    }
    #cpfsb-color-table-tool .et-category-btn.active{ background:#0a0a0a;color:#fff; }

    /* Dropdown */
    #cpfsb-color-table-tool .et-category-toggle-btn{
      padding:.5em 1em;border-radius:.5em;font-weight:700;cursor:pointer;
      border:2px dashed #555;background:#fff;display:inline-flex;align-items:center;gap:.35em;
      font-size:.9em;white-space:nowrap;
    }
    #cpfsb-color-table-tool .et-all-wrapper{ position:relative; display:inline-block; }
    #cpfsb-color-table-tool .et-all-category-btn{
      display:inline-flex;align-items:center;gap:.35em;border:1px solid #0a0a0a;background:#fff;
      padding:.5em 1em;border-radius:.5em;font-weight:700;cursor:pointer;font-size:.95em;white-space:nowrap;
    }
    #cpfsb-color-table-tool .et-all-category-menu{
      position:absolute;top:100%;left:0;margin-top:.25rem;background:#fff;border:1px solid #e5e5e5;border-radius:.5rem;
      box-shadow:0 10px 25px rgba(0,0,0,0.1);padding:.25rem 0;min-width:220px;max-height:300px;overflow-y:auto;
      z-index:50;display:none;
    }
    #cpfsb-color-table-tool .et-all-category-menu.show{ display:block; }
    #cpfsb-color-table-tool .et-all-category-item{
      width:100%;text-align:left;padding:.5em 1em;border:0;background:none;cursor:pointer;font-size:.95em;
      display:flex;align-items:center;color:#333;
    }
    #cpfsb-color-table-tool .et-all-category-item:hover{ background:#f5f5f5; }
    #cpfsb-color-table-tool .et-cat-index{ font-size:.8em;color:#999;margin-right:.5em;min-width:20px; }

    /* Grid wrapper */
    #cpfsb-color-table-tool .unified-container{ width:100%; }
    #cpfsb-color-table-tool .header-row{ display:grid; gap:2rem; margin-bottom:.5rem; }
    #cpfsb-color-table-tool .data-grid{ display:grid; gap:.5rem 2rem; grid-auto-flow:column; }

    /* 4-col layout */
    #cpfsb-color-table-tool .grid-layout-4-cols{
      display:grid;align-items:center;
      grid-template-columns:60px 1fr 100px 130px;
      gap:15px;
    }

    /* Mobile */
    @media (max-width:640px){
      #cpfsb-color-table-tool .grid-layout-4-cols{
        grid-template-columns:30px 1fr 75px 95px !important;
        gap:5px !important;
      }
      #cpfsb-color-table-tool .color-name{ font-size:.85em !important; }
      #cpfsb-color-table-tool .code-text{ font-size:.95em !important; padding:2px !important; }
      #cpfsb-color-table-tool .alt-btn{ padding:.5rem .5rem !important; min-height:50px; }
      #cpfsb-color-table-tool .color-swatch{ width:30px !important; height:30px !important; }
      #cpfsb-color-table-tool .col-header{
        display:grid !important;font-size:.75rem !important;padding:0 .25rem !important;text-align:center;
      }
      #cpfsb-color-table-tool .col-header span:nth-child(2){ text-align:left; }
    }

    /* Header cell */
    #cpfsb-color-table-tool .col-header{
      padding:0 .75rem;font-size:.9rem;color:#64748b;font-weight:700;
      background:#f1f5f9;border-radius:4px;height:40px;white-space:nowrap;align-items:center;
    }

    /* Item row */
    #cpfsb-color-table-tool .alt-btn{
      padding:.5rem .75rem;background:#fff;border:1px solid #e2e8f0;border-radius:.375rem;cursor:pointer;
      transition:all .15s ease;user-select:none;min-height:60px;width:100%;text-align:left;
    }
    #cpfsb-color-table-tool .alt-btn:hover{ border-color:#000;background:#fafafa; }
    #cpfsb-color-table-tool .color-swatch{
      width:60px;height:36px;border-radius:4px;border:1px solid rgba(0,0,0,0.15);flex-shrink:0;
    }
    #cpfsb-color-table-tool .color-name{
      font-weight:700;font-size:1em;color:#0a0a0a;white-space:normal;word-break:break-word;line-height:1.3;
    }
    #cpfsb-color-table-tool .code-text{
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;font-size:.95em;color:#333;padding:4px;
      white-space:nowrap;text-align:center;cursor:pointer;border-radius:4px;font-weight:500;
    }
    #cpfsb-color-table-tool .code-text:hover{ background:#eee;color:#000; }
    #cpfsb-color-table-tool .copy-feedback{ color:#10b981 !important; font-weight:700; }

    /* Tooltip */
    #cpfsb-color-table-tool .et-tooltip{
      position:fixed;z-index:9999;pointer-events:none;opacity:0;transition:opacity .15s ease;
      background:#000;color:#fff;font-size:14px;padding:6px 12px;border-radius:4px;white-space:nowrap;
    }
    #cpfsb-color-table-tool .et-tooltip.show{ opacity:1; }

    /* No results */
    #cpfsb-color-table-tool #noResults{ display:none;text-align:center;padding:2rem 0; }
    #cpfsb-color-table-tool #noResults p{ color:#6b7280; margin:0; }
    #cpfsb-color-table-tool .et-category-btn,
#cpfsb-color-table-tool .et-category-toggle-btn,
#cpfsb-color-table-tool .et-all-category-btn,
#cpfsb-color-table-tool .et-all-category-item,
#cpfsb-color-table-tool .et-clear-btn{
  box-shadow: none !important;
}