/* =========================================================
      SCOPE RESET (chỉ trong tool)
    ========================================================= */
    #cpfsb-special-char-tool{
      --et-text:#0a0a0a;
      --et-muted:#737373;
      --et-border:#e5e5e5;
      --et-bg:#ffffff;
      --et-soft:#f5f5f5;
      --et-soft-2:#fafafa;
      --et-shadow: 0 10px 25px rgba(0,0,0,.08);

      font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
      color:var(--et-text);
      line-height:1.5;
      width:100%;
      max-width:100%;
      background: transparent; /* bỏ nền xung quanh tool */
      -webkit-text-size-adjust:100%;
      tab-size:4;
    }
    #cpfsb-special-char-tool,
    #cpfsb-special-char-tool *{
      box-sizing:border-box;
    }
    #cpfsb-special-char-tool *{
      margin:0;
      padding:0;
    }
    #cpfsb-special-char-tool button,
    #cpfsb-special-char-tool input{
      font: inherit;
      color: inherit;
    }
    #cpfsb-special-char-tool svg{
      display:block;
    }

    /* =========================================================
      LAYOUT
    ========================================================= */
    #cpfsb-special-char-tool .et-container{
      max-width:1280px;
      margin:0 auto;
      padding:0;
    }

    /* Toolbar */
    #cpfsb-special-char-tool .et-toolbar{
      margin-bottom:1.5rem;
      display:flex;
      gap:1rem;
      align-items:center;
      flex-wrap:wrap;
    }

    /* Search */
    #cpfsb-special-char-tool .et-search-container{
      position:relative;
      max-width:28rem;
      flex:1;
      min-width:260px;
    }
    #cpfsb-special-char-tool .et-search-icon{
      position:absolute;
      left:.75rem;
      top:50%;
      transform:translateY(-50%);
      width:1.25rem;
      height:1.25rem;
      color:var(--et-muted);
      pointer-events:none;
    }
    #cpfsb-special-char-tool .et-search-input{
      width:100%;
      padding:.75rem 2.5rem .75rem 2.5rem;
      border:1px solid var(--et-border);
      border-radius:.5rem;
      font-size:1rem;
      background:var(--et-soft-2);
      outline:none;
      height:48px;
    }
    #cpfsb-special-char-tool .et-search-input:focus{
      border-color:var(--et-text);
      background:#fff;
    }
    #cpfsb-special-char-tool .et-search-clear-btn{
      position:absolute;
      right:.75rem;
      top:50%;
      transform:translateY(-50%);
      border:none;
      background:transparent;
      cursor:pointer;
      padding:0;
      display:none;
      line-height:1;
    }
    #cpfsb-special-char-tool .et-search-clear-btn svg{
      width:1rem;
      height:1rem;
      color:#ef4444;
    }

    /* Buttons */
    #cpfsb-special-char-tool .et-btn{
      padding:.55rem 1rem;
      border-radius:.5rem;
      font-weight:500;
      cursor:pointer;
      border:none;
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      transition:.2s;
      user-select:none;
      height:40px;
      white-space:nowrap;
    }
    #cpfsb-special-char-tool .et-btn-compact{
      font-size:.875rem;
      padding:.5rem 1.1rem;
      height:40px;
    }
    #cpfsb-special-char-tool .et-btn-primary{
      background:var(--et-text);
      color:#fff;
    }
    #cpfsb-special-char-tool .et-btn-primary:hover{background:#262626;}
    #cpfsb-special-char-tool .et-btn-secondary{
      background:var(--et-soft);
      color:var(--et-text);
    }
    #cpfsb-special-char-tool .et-btn-secondary:hover{background:var(--et-border);}
    #cpfsb-special-char-tool .et-icon{width:1rem;height:1rem;}

    /* Selection preview */
    #cpfsb-special-char-tool .et-selection-preview{
      padding:1rem;
      background:#fff;
      border:1px solid var(--et-border);
      border-radius:.5rem;
      margin-bottom:2rem;
    }
    #cpfsb-special-char-tool .et-selection-preview-label{
      font-size:.875rem;
      color:var(--et-muted);
      margin-bottom:.5rem;
    }
    #cpfsb-special-char-tool .et-selection-preview-text{
      font-size:1.5rem;
      word-break:break-all;
    }

    /* Loading / empty */
    #cpfsb-special-char-tool .et-loading{
      display:none;
      font-size:.875rem;
      color:var(--et-muted);
      margin-bottom:.5rem;
    }
    #cpfsb-special-char-tool .et-no-results{
      display:none;
      text-align:center;
      padding:2rem 0;
    }
    #cpfsb-special-char-tool .et-no-results p{
      font-size:1.25rem;
      color:var(--et-muted);
    }

    /* Categories row */
    #cpfsb-special-char-tool .et-categories-wrap{margin-bottom:1rem;}
    #cpfsb-special-char-tool .et-categories-row{
      display:flex;
      gap:.5rem;
      flex-wrap:wrap;
      align-items:center;
    }

    #cpfsb-special-char-tool .et-category-btn{
      padding:.5rem 1rem;
      border-radius:.5rem;
      font-weight:500;
      cursor:pointer;
      border:none;
      white-space:nowrap;
      transition:.2s;
      background:var(--et-soft);
      color:var(--et-text);
      height:40px;
    }
    #cpfsb-special-char-tool .et-category-btn:hover{background:var(--et-border);}
    #cpfsb-special-char-tool .et-category-btn.active{
      background:var(--et-text);
      color:#fff;
    }

    /* “Tất cả” dropdown */
    #cpfsb-special-char-tool .et-all-wrapper{
      position:relative;
      display:inline-block;
      margin-right:.5rem;
    }
    #cpfsb-special-char-tool .et-all-category-btn{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      border:1px solid var(--et-text);
      background:#fff;
      color:var(--et-text);
      padding:.5rem 1rem;
      border-radius:.5rem;
      cursor:pointer;
      height:40px;
      user-select:none;
    }
    #cpfsb-special-char-tool .et-all-category-icon{
      font-size:.75rem;
      line-height:1;
      opacity:.8;
    }
    #cpfsb-special-char-tool .et-all-category-menu{
      position:absolute;
      top:100%;
      left:0;
      margin-top:.25rem;
      background:#fff;
      border:1px solid var(--et-border);
      border-radius:.5rem;
      box-shadow:var(--et-shadow);
      padding:.25rem 0;
      min-width:220px;
      max-height:260px;
      overflow:auto;
      z-index:50;
      display:none;
    }
    #cpfsb-special-char-tool .et-all-category-item{
      width:100%;
      text-align:left;
      padding:.45rem .75rem;
      border:0;
      background:none;
      cursor:pointer;
      font-size:.875rem;
      display:flex;
      align-items:center;
      gap:.4rem;
    }
    #cpfsb-special-char-tool .et-all-category-item:hover{background:var(--et-soft);}
    #cpfsb-special-char-tool .et-all-category-item.active{
      background:var(--et-text);
      color:#fff;
    }
    #cpfsb-special-char-tool .et-cat-index{
      font-size:11px;
      color:#a3a3a3;
      width:30px;
      flex:0 0 30px;
    }
    #cpfsb-special-char-tool .et-category-toggle-btn{
      padding:.5rem 1rem;
      border-radius:.5rem;
      font-weight:500;
      cursor:pointer;
      border:2px dashed #555;
      background:#fff;
      color:var(--et-text);
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      font-size:.875rem;
      white-space:nowrap;
      transition:.2s;
      height:40px;
    }
    #cpfsb-special-char-tool .et-category-toggle-btn:hover{
      border-style:solid;
      border-color:var(--et-text);
      background:var(--et-soft);
    }
    #cpfsb-special-char-tool .et-category-toggle-icon{
      font-size:.8rem;
      line-height:1;
      opacity:.8;
    }

    /* =========================================================
      GRID
    ========================================================= */
    #cpfsb-special-char-tool .et-char-grid{
      display:grid;
      grid-template-columns:repeat(auto-fill,minmax(4rem,1fr));
      gap:.75rem;
    }

    #cpfsb-special-char-tool .et-char-btn{
      aspect-ratio:1;
      background:#fff;
      border:1px solid var(--et-border);
      border-radius:.5rem;
      display:flex;
      align-items:center;
      justify-content:center;

      /* QUAN TRỌNG: ép size emoji ổn định trong WP */
      font-size:2rem !important;
      line-height:1 !important;

      cursor:pointer;
      transition:.2s;
      position:relative;
      user-select:none;
      will-change:transform,opacity;
      transform:translateZ(0);
      backface-visibility:hidden;
      --bw:1px;
      overflow:hidden;
    }
    #cpfsb-special-char-tool .et-char-btn:hover{
      background:var(--et-soft);
      transform:scale(1.02) translateZ(0);
    }
    #cpfsb-special-char-tool .et-char-btn.selected{
      border:2px solid var(--et-text);
      background:var(--et-soft);
      --bw:2px;
    }

    /* hover overlay icon (copy) */
    #cpfsb-special-char-tool .et-hover-overlay{
      position:absolute;
      inset:0;
      background:rgba(10,10,10,.9);
      border-radius:inherit;
      display:flex;
      align-items:center;
      justify-content:center;
      opacity:0;
      transition:.2s;
      pointer-events:none;
      will-change:opacity;
      z-index:1;
    }
    #cpfsb-special-char-tool .et-char-btn.show-hover .et-hover-overlay{opacity:1;}
    #cpfsb-special-char-tool .et-char-btn.selected .et-hover-overlay{display:none;}

    /* copied effect */
    #cpfsb-special-char-tool .et-char-btn.copied::after{
      content:"";
      position:absolute;
      inset:calc(-1 * var(--bw));
      background:rgba(10,10,10,.92);
      border-radius:calc(.5rem + var(--bw));
      pointer-events:none;
      z-index:2;
    }
    #cpfsb-special-char-tool .et-char-btn.copied::before{
      content:"";
      position:absolute;
      inset:0;
      display:block;
      pointer-events:none;
      z-index:3;
      background-repeat:no-repeat;
      background-position:center;
      background-size:28px 28px;
      background-image:url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">\
<path d="M5 13l4 4L19 7" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    }
    #cpfsb-special-char-tool .et-char-btn.copied .et-hover-overlay{display:none;}

    /* selected badge */
    #cpfsb-special-char-tool .et-selected-badge{
      position:absolute;
      top:.25rem;
      right:.25rem;
      background:var(--et-text);
      border-radius:9999px;
      padding:.25rem;
      z-index:4;
    }

    /* Tooltip */
    #cpfsb-special-char-tool .et-tooltip{
      position:fixed;
      z-index:9999;
      pointer-events:none;
      opacity:0;
      transition:opacity .12s ease;
      background:var(--et-text);
      color:#fff;
      font-size:12px;
      padding:4px 8px;
      border-radius:6px;
      white-space:nowrap;
    }
    #cpfsb-special-char-tool .et-tooltip.show{opacity:1;}
    #cpfsb-special-char-tool .et-tooltip::after{
      content:"";
      position:absolute;
      left:50%;
      transform:translateX(-50%);
      bottom:-6px;
      border-width:6px;
      border-style:solid;
      border-color:var(--et-text) transparent transparent transparent;
    }
    #cpfsb-special-char-tool .et-tooltip.below::after{
      top:-6px;
      bottom:auto;
      border-color:transparent transparent var(--et-text) transparent;
    }

    /* Context menu */
    #cpfsb-special-char-tool .et-ctx-menu{
      position:fixed;
      z-index:10000;
      display:none;
      background:#fff;
      border:1px solid var(--et-border);
      border-radius:10px;
      box-shadow:var(--et-shadow);
      overflow:hidden;
      padding:6px;
      width:auto;
      max-width:90vw;
    }
    #cpfsb-special-char-tool .et-ctx-item{
      width:100%;
      padding:8px 10px;
      text-align:center;
      border:0;
      background:none;
      cursor:pointer;
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:center;
      font-size:13px;
    }
    #cpfsb-special-char-tool .et-ctx-item:hover{
      background:var(--et-soft);
      border-radius:6px;
    }
    #cpfsb-special-char-tool .et-ctx-name{
      padding:4px 10px 6px;
      font-size:13px;
      font-weight:600;
      color:#111;
      border-top:1px solid #f3f4f6;
      text-align:center;
      max-width:220px;
      word-break:break-word;
    }
    #cpfsb-special-char-tool .et-ctx-label{font-size:13px;color:#111;}
    #cpfsb-special-char-tool .et-mono{
      font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
      font-size:12px;
      color:#444;
    }

    /* Ad slot (nếu JSON có marker) */
    #cpfsb-special-char-tool .et-ad-slot{
      width:100%;
      margin:1rem 0;
      min-height:50px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:.5rem;
      background:#fff;
      color:#a3a3a3;
      font-size:.75rem;
      border:1px dashed var(--et-border);
    }

    @media (min-width:640px){
      #cpfsb-special-char-tool .et-char-grid{
        grid-template-columns:repeat(auto-fill,minmax(5rem,1fr));
      }
    }
    /* Thanh cố định dưới đáy khi chọn nhiều (giống bản kitudacbiet.html) */
#cpfsb-special-char-tool .et-sticky-bar{
  position: sticky;
  bottom: 0;
  z-index: 60;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--et-border);
  padding: .75rem;
  display: none;
}

#cpfsb-special-char-tool .et-sticky-inner{
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  gap: .5rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

#cpfsb-special-char-tool .et-sticky-count{
  font-size: .875rem;
  color: #444;
}
/* Cho cụm nút bên phải được xuống dòng thay vì tràn ngang */
#cpfsb-special-char-tool .et-actions{
  flex-wrap: wrap;
  max-width: 100%;
  row-gap: .5rem;
}

/* Cho search được co lại khi thiếu chỗ (quan trọng trong flex) */
#cpfsb-special-char-tool .et-search-container{
  min-width: 0; /* ghi đè min-width 260 trong trường hợp cần co */
}

/* Mobile: ép search chiếm 1 hàng, cụm nút xuống hàng dưới */
@media (max-width: 520px){
  #cpfsb-special-char-tool .et-search-container{
    flex: 1 1 100%;
    max-width: 100%;
  }
  #cpfsb-special-char-tool .et-actions{
    width: 100%;
    justify-content: flex-start;
  }
}
#cpfsb-special-char-tool .et-char-btn{
  font-family:
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Noto Color Emoji",
    "Twemoji Mozilla",
    sans-serif !important;
  font-size:2rem !important;
  line-height:1 !important;
}
#cpfsb-special-char-tool .et-ad-slot{
  margin: 1rem 0;
  min-height: 110px;
  border: 1px dashed #fff;
  border-radius: .75rem;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
}

#cpfsb-special-char-tool .et-ad-slot-note{
  font-size: .95rem;
  color: #64748b;
}

#cpfsb-special-char-tool button,
#cpfsb-special-char-tool button:hover,
#cpfsb-special-char-tool button:focus,
#cpfsb-special-char-tool button:active{
  box-shadow:none !important;
  text-decoration:none !important;
}