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

    /* Reset để tránh theme (Astra/Elementor/...) đè style */
    #cpfsb-altcode-tool button,
    #cpfsb-altcode-tool input{
      font-family: inherit !important;
      font-size: inherit !important;
      line-height: inherit !important;
      color: inherit !important;
      text-transform:none !important;
      letter-spacing:normal !important;
      box-shadow:none !important;
      text-decoration:none !important;
      -webkit-appearance:none;
      appearance:none;
      border:0;
      background:none;
      margin:0;
    }

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

    /* Header */
    #cpfsb-altcode-tool .et-header{ text-align:center; margin-bottom:1.5rem; }
    #cpfsb-altcode-tool .et-title{ font-size:1.875rem; font-weight:600; margin:0 0 .35rem; }
    #cpfsb-altcode-tool .et-sub{ font-size:.95rem; color:#6b7280; margin:0; }

    /* Search */
    #cpfsb-altcode-tool .et-search-container{ position:relative; width:100%; max-width:500px; margin:0 auto 1.25rem; }
    #cpfsb-altcode-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-altcode-tool .et-search-input{
      width:100%;
      padding:.75rem 1rem .75rem 2.5rem;
      border:1px solid #e5e5e5;
      border-radius:.5rem;
      font-size:1rem;
      background:#fafafa;
      outline:none;
      padding-right:2.6rem;
    }
    #cpfsb-altcode-tool .et-search-input:focus{
      border-color:#475569;
      box-shadow:0 0 0 3px rgba(71,85,105,0.1);
      background:#fff;
    }

    /* Office alert */
    #cpfsb-altcode-tool .et-alert{
      max-width:720px;
      margin:0.5rem auto 1.25rem;
      background:#fffbeb;
      color:#92400e;
      border-left:4px solid #f59e0b;
      border-radius:0 .5rem .5rem 0;
      padding:1rem;
      box-shadow:0 1px 2px rgba(0,0,0,0.06);
      display:none;
    }
    #cpfsb-altcode-tool .et-alert.show{ display:block; }
    #cpfsb-altcode-tool .et-alert-row{ display:flex; gap:.5rem; align-items:flex-start; }
    #cpfsb-altcode-tool .et-alert-icon{ width:24px; height:24px; flex:0 0 auto; }
    #cpfsb-altcode-tool .et-alert-title{ font-weight:600; margin:0; }
    #cpfsb-altcode-tool .et-alert-desc{ margin:.25rem 0 0; font-size:.95rem; }
    #cpfsb-altcode-tool .et-alert-desc strong{ font-weight:600; }

    /* Categories */
    #cpfsb-altcode-tool #categoriesContainer{ margin-bottom:1.25rem; }
    #cpfsb-altcode-tool .et-category-list{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }

    #cpfsb-altcode-tool .et-category-btn{
      padding:.5rem 1rem;
      border-radius:.5rem;
      font-weight:600;
      cursor:pointer;
      white-space:nowrap;
      transition:.2s;
      font-size:.95rem;
      background:#f5f5f5;
      color:#0a0a0a;
    }
    #cpfsb-altcode-tool .et-category-btn:hover{ background:#e5e5e5; }
    #cpfsb-altcode-tool .et-category-btn.active{ background:#0a0a0a; color:#fff !important; }

    /* Toggle */
    #cpfsb-altcode-tool .et-category-toggle-btn{
      padding:.5rem 1rem;
      border-radius:.5rem;
      font-weight:600;
      cursor:pointer;
      border:2px dashed #555 !important;
      background:#fff !important;
      color:#0a0a0a !important;
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      font-size:.9rem;
      white-space:nowrap;
      transition:.2s;
    }
    #cpfsb-altcode-tool .et-category-toggle-btn:hover{
      border-style:solid !important;
      border-color:#0a0a0a !important;
      background:#f5f5f5 !important;
    }

    /* Dropdown */
    #cpfsb-altcode-tool .et-all-wrapper{ position:relative; display:inline-block; }
    #cpfsb-altcode-tool .et-all-category-btn{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      border:1px solid #0a0a0a !important;
      background:#fff !important;
      color:#0a0a0a !important;
      padding:.5rem 1rem;
      border-radius:.5rem;
      font-weight:600;
      cursor:pointer;
      font-size:.95rem;
      white-space:nowrap;
    }
    #cpfsb-altcode-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.08);
      padding:.25rem 0;
      min-width:220px;
      max-height:300px;
      overflow-y:auto;
      z-index:50;
      display:none;
    }
    #cpfsb-altcode-tool .et-all-category-menu.show{ display:block; }
    #cpfsb-altcode-tool .et-all-category-item{
      width:100%;
      text-align:left;
      padding:.5rem 1rem;
      border:0 !important;
      background:none !important;
      cursor:pointer;
      font-size:.95rem;
      display:flex;
      align-items:center;
      color:#333 !important;
    }
    #cpfsb-altcode-tool .et-all-category-item:hover{ background:#f5f5f5 !important; }
    #cpfsb-altcode-tool .et-all-category-item.active{ background:#0a0a0a !important; color:#fff !important; }
    #cpfsb-altcode-tool .et-cat-index{ font-size:11px; color:#a3a3a3; margin-right:.5rem; min-width:20px; }
    #cpfsb-altcode-tool .et-all-category-item.active .et-cat-index{ color:#ccc; }

    /* Grid */
    #cpfsb-altcode-tool .unified-container{ width:100%; }
    #cpfsb-altcode-tool .header-row{ display:grid; gap:3.75rem; margin-bottom:.5rem; }
    #cpfsb-altcode-tool .data-grid{ display:grid; gap:.5rem 3.75rem; grid-auto-flow:column; }
    #cpfsb-altcode-tool .col-header{
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:0 .75rem;
      font-size:.85rem;
      color:#64748b;
      font-weight:700;
      background:#f8fafc;
      border-radius:4px;
      height:32px;
      white-space:nowrap;
    }

    /* Item */
    #cpfsb-altcode-tool .alt-btn{
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:0 .75rem;
      background:#fff;
      border:1px solid #e2e8f0 !important;
      border-radius:.375rem;
      cursor:pointer;
      transition:all .15s ease;
      user-select:none;
      height:44px;
      width:100%;
    }
    #cpfsb-altcode-tool .alt-btn:hover{
      border-color:#64748b !important;
      background:#f8fafc !important;
      transform:translateY(-1px);
      box-shadow:0 2px 4px rgba(0,0,0,0.05);
      z-index:10;
    }
    #cpfsb-altcode-tool .alt-btn.copied{ background:#10b981 !important; border-color:#10b981 !important; }
    #cpfsb-altcode-tool .alt-char-display{ font-size:1.35rem; font-weight:500; color:#0f172a; line-height:1; }
    #cpfsb-altcode-tool .alt-btn.copied .alt-char-display{ color:#fff !important; }

    #cpfsb-altcode-tool .alt-code-text{
      font-family:ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace;
      font-size:.95rem;
      color:#334155;
      font-weight:700;
      background:#f1f5f9;
      padding:3px 8px;
      border-radius:4px;
      min-width:40px;
      text-align:center;
    }
    #cpfsb-altcode-tool .alt-btn:hover .alt-code-text{ background:#e2e8f0; color:#0f172a; }
    #cpfsb-altcode-tool .alt-btn.copied .alt-code-text{ background:rgba(255,255,255,0.2); color:#fff !important; }

    /* sr-only */
    #cpfsb-altcode-tool .sr-only{
      position:absolute !important;
      width:1px !important;
      height:1px !important;
      padding:0 !important;
      margin:-1px !important;
      overflow:hidden !important;
      clip:rect(0,0,0,0) !important;
      white-space:nowrap !important;
      border:0 !important;
    }

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

    /* No results */
    #cpfsb-altcode-tool #noResults{ display:none; text-align:center; padding:2rem 0; }
    #cpfsb-altcode-tool #noResults p{ color:#6b7280; margin:0; }

    /* Nút clear */
    #cpfsb-altcode-tool .et-clear-btn{
      position:absolute;
      right:.55rem;
      top:50%;
      transform:translateY(-50%);
      width:1.75rem;
      height:1.75rem;
      display:none;
      align-items:center;
      justify-content:center;
      padding:0;
      border:0;
      border-radius:999px;
      background:transparent;
      cursor:pointer;
      color:#ef4444;
      box-shadow:none !important;
      text-decoration:none !important;
    }
    #cpfsb-altcode-tool .et-clear-btn:hover{
      background:#f3f4f6;
      color:#dc2626;
    }

    /* Mobile */
    @media (max-width:640px){
      #cpfsb-altcode-tool .header-row,
      #cpfsb-altcode-tool .data-grid{ gap:.75rem 1rem; }
      #cpfsb-altcode-tool .alt-btn{ height:46px; }
    }