/* ============ SCOPE RESET (chỉ trong tool) ============ */
    #cpfsb-kaomoji-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;
      -webkit-text-size-adjust:100%;
      tab-size:4;
    }
    #cpfsb-kaomoji-tool,
    #cpfsb-kaomoji-tool *{ box-sizing:border-box; }
    #cpfsb-kaomoji-tool *{ margin:0; padding:0; }
    #cpfsb-kaomoji-tool button,
    #cpfsb-kaomoji-tool input{ font:inherit; color:inherit; }
    #cpfsb-kaomoji-tool svg{ display:block; }

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

    #cpfsb-kaomoji-tool .et-toolbar{
      margin-bottom:1.5rem;
      display:flex;
      gap:1rem;
      align-items:center;
      flex-wrap:wrap;
    }

    /* Search */
    #cpfsb-kaomoji-tool .et-search-container{
      position:relative;
      max-width:28rem;
      flex:1;
      min-width:0;
    }
    #cpfsb-kaomoji-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-kaomoji-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-kaomoji-tool .et-search-input:focus{
      border-color:var(--et-text);
      background:#fff;
    }
    #cpfsb-kaomoji-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-kaomoji-tool .et-search-clear-btn svg{
      width:1rem;
      height:1rem;
      color:#ef4444;
    }

    /* Buttons */
    #cpfsb-kaomoji-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-kaomoji-tool .et-btn-compact{ font-size:.875rem; padding:.5rem 1.1rem; height:40px; }
    #cpfsb-kaomoji-tool .et-btn-primary{ background:var(--et-text); color:#fff; }
    #cpfsb-kaomoji-tool .et-btn-primary:hover{ background:#262626; }
    #cpfsb-kaomoji-tool .et-btn-secondary{ background:var(--et-soft); color:var(--et-text); }
    #cpfsb-kaomoji-tool .et-btn-secondary:hover{ background:var(--et-border); }
    #cpfsb-kaomoji-tool .et-icon{ width:1rem; height:1rem; }

    /* toolbar actions */
    #cpfsb-kaomoji-tool .et-actions{
      display:flex;
      gap:.5rem;
      align-items:center;
      flex-wrap:wrap;
      max-width:100%;
      row-gap:.5rem;
    }

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

    /* Categories */
    #cpfsb-kaomoji-tool .et-categories-wrap{ margin-bottom:1rem; }
    #cpfsb-kaomoji-tool .et-categories-row{
      display:flex;
      gap:.5rem;
      flex-wrap:wrap;
      align-items:center;
    }
    #cpfsb-kaomoji-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-kaomoji-tool .et-category-btn:hover{ background:var(--et-border); }
    #cpfsb-kaomoji-tool .et-category-btn.active{ background:var(--et-text); color:#fff; }

    /* “All” dropdown */
    #cpfsb-kaomoji-tool .et-all-wrapper{ position:relative; display:inline-block; margin-right:.5rem; }
    #cpfsb-kaomoji-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-kaomoji-tool .et-all-category-icon{ font-size:.75rem; line-height:1; opacity:.8; }
    #cpfsb-kaomoji-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-kaomoji-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-kaomoji-tool .et-all-category-item:hover{ background:var(--et-soft); }
    #cpfsb-kaomoji-tool .et-all-category-item.active{ background:var(--et-text); color:#fff; }
    #cpfsb-kaomoji-tool .et-cat-index{ font-size:11px; color:#a3a3a3; width:30px; flex:0 0 30px; }

    #cpfsb-kaomoji-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-kaomoji-tool .et-category-toggle-btn:hover{
      border-style:solid;
      border-color:var(--et-text);
      background:var(--et-soft);
    }
    #cpfsb-kaomoji-tool .et-category-toggle-icon{ font-size:.8rem; line-height:1; opacity:.8; }

    /* GRID (kaomoji) */
    #cpfsb-kaomoji-tool .et-char-grid{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
      align-items:flex-start;
    }
    #cpfsb-kaomoji-tool .et-char-btn{
      background:#fff;
      border:1px solid var(--et-border);
      border-radius:.5rem;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:1rem 1rem;
      font-size:1.1rem;
      line-height:1.4;
      text-align:center;
      cursor:pointer;
      transition:.2s;
      position:relative;
      user-select:none;
      will-change:transform,opacity;
      transform:translateZ(0);
      backface-visibility:hidden;
      --bw:1px;
      overflow:hidden;
      white-space:nowrap;
    }
    #cpfsb-kaomoji-tool .et-char-btn:hover{
      background:var(--et-soft);
      transform:scale(1.02) translateZ(0);
    }
    #cpfsb-kaomoji-tool .et-char-btn.selected{
      border:2px solid var(--et-text);
      background:var(--et-soft);
      --bw:2px;
    }

    /* hover overlay */
    #cpfsb-kaomoji-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-kaomoji-tool .et-char-btn.show-hover .et-hover-overlay{ opacity:1; }
    #cpfsb-kaomoji-tool .et-char-btn.selected .et-hover-overlay{ display:none; }

    /* copied effect */
    #cpfsb-kaomoji-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-kaomoji-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-kaomoji-tool .et-char-btn.copied .et-hover-overlay{ display:none; }

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

    /* Tooltip */
    #cpfsb-kaomoji-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-kaomoji-tool .et-tooltip.show{ opacity:1; }
    #cpfsb-kaomoji-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-kaomoji-tool .et-tooltip.below::after{
      top:-6px;
      bottom:auto;
      border-color:transparent transparent var(--et-text) transparent;
    }

    /* Context menu */
    #cpfsb-kaomoji-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-kaomoji-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-kaomoji-tool .et-ctx-item:hover{
      background:var(--et-soft);
      border-radius:6px;
    }
    #cpfsb-kaomoji-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-kaomoji-tool .et-ctx-label{ font-size:13px; color:#111; }
    #cpfsb-kaomoji-tool .et-mono{
      font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
      font-size:12px;
      color:#444;
    }

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

    /* Mobile */
    @media (max-width:520px){
      #cpfsb-kaomoji-tool .et-search-container{ flex:1 1 100%; max-width:100%; }
      #cpfsb-kaomoji-tool .et-actions{ width:100%; justify-content:flex-start; }
    }

    /* Sticky bar */
    #cpfsb-kaomoji-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 #e5e5e5;
      padding: .75rem;
      display: none;
    }

    #cpfsb-kaomoji-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-kaomoji-tool .et-sticky-count{
      font-size: .875rem;
      color: #444;
    }

    #cpfsb-kaomoji-tool .et-sticky-actions{
      display:flex;
      gap:.5rem;
      align-items:center;
      flex-wrap:wrap;
    }

    #cpfsb-kaomoji-tool .et-container{ overflow-x: hidden; }

    #cpfsb-kaomoji-tool .et-cats-scroll{
      max-height: 220px;
      overflow-y: auto;
      padding: 8px;
      border: 1px solid #e5e5e5;
      border-radius: 12px;
      background: #fff;
    }

    @media (max-width: 640px){
      #cpfsb-kaomoji-tool .et-cats-scroll{
        max-height: 180px;
        padding: 6px;
      }
    }

    #cpfsb-kaomoji-tool .et-cats-scroll::-webkit-scrollbar{ width:6px }
    #cpfsb-kaomoji-tool .et-cats-scroll::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:999px }
    #cpfsb-kaomoji-tool .et-cats-scroll::-webkit-scrollbar-track{ background:transparent }

    #cpfsb-kaomoji-tool{ font-size:16px !important; }
    #cpfsb-kaomoji-tool .et-all-category-menu,
    #cpfsb-kaomoji-tool .et-all-category-menu .et-all-category-item,
    #cpfsb-kaomoji-tool .et-all-category-menu button{
      box-shadow: none !important;
      outline: none !important;
    }