/* Giả lập :root và html bên trong tool */
#cpfsb-special-char-tool {
  --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --default-font-family: var(--font-sans);
  --default-mono-font-family: var(--font-mono);

  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
  font-feature-settings: var(--default-font-feature-settings, normal);
  font-variation-settings: var(--default-font-variation-settings, normal);
  -webkit-tap-highlight-color: transparent;
  color: #111;
}

/* Reset toàn bộ phần tử con */
#cpfsb-special-char-tool *,
#cpfsb-special-char-tool ::after,
#cpfsb-special-char-tool ::before,
#cpfsb-special-char-tool ::backdrop,
#cpfsb-special-char-tool ::file-selector-button {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;
}

#cpfsb-special-char-tool hr { height: 0; color: inherit; border-top-width: 1px; }
#cpfsb-special-char-tool abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; }
#cpfsb-special-char-tool h1,#cpfsb-special-char-tool h2,#cpfsb-special-char-tool h3,#cpfsb-special-char-tool h4,#cpfsb-special-char-tool h5,#cpfsb-special-char-tool h6 { font-size: inherit; font-weight: inherit; }
#cpfsb-special-char-tool a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; }
#cpfsb-special-char-tool b,#cpfsb-special-char-tool strong { font-weight: bolder; }
#cpfsb-special-char-tool code,#cpfsb-special-char-tool kbd,#cpfsb-special-char-tool samp,#cpfsb-special-char-tool pre {
  font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
  font-feature-settings: var(--default-mono-font-feature-settings, normal);
  font-variation-settings: var(--default-mono-font-variation-settings, normal);
  font-size: 1em;
}
#cpfsb-special-char-tool small { font-size: 80%; }
#cpfsb-special-char-tool sub,#cpfsb-special-char-tool sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
#cpfsb-special-char-tool sub { bottom: -0.25em; }
#cpfsb-special-char-tool sup { top: -0.5em; }
#cpfsb-special-char-tool table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
#cpfsb-special-char-tool :-moz-focusring { outline: auto; }
#cpfsb-special-char-tool progress { vertical-align: baseline; }
#cpfsb-special-char-tool summary { display: list-item; }
#cpfsb-special-char-tool ol,#cpfsb-special-char-tool ul,#cpfsb-special-char-tool menu { list-style: none; }
#cpfsb-special-char-tool img,#cpfsb-special-char-tool svg,#cpfsb-special-char-tool video,#cpfsb-special-char-tool canvas,#cpfsb-special-char-tool audio,#cpfsb-special-char-tool iframe,#cpfsb-special-char-tool embed,#cpfsb-special-char-tool object { display: block; vertical-align: middle; }
#cpfsb-special-char-tool img,#cpfsb-special-char-tool video { max-width: 100%; height: auto; }

/* Reset Button, Input, Select... */
#cpfsb-special-char-tool button,
#cpfsb-special-char-tool input,
#cpfsb-special-char-tool select,
#cpfsb-special-char-tool optgroup,
#cpfsb-special-char-tool textarea,
#cpfsb-special-char-tool ::file-selector-button {
  font: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  color: inherit;
  border-radius: 0;
  background-color: transparent;
  opacity: 1;
}
#cpfsb-special-char-tool :where(select:is([multiple], [size])) optgroup { font-weight: bolder; }
#cpfsb-special-char-tool :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; }
#cpfsb-special-char-tool ::file-selector-button { margin-inline-end: 4px; }
#cpfsb-special-char-tool ::placeholder { opacity: 1; }
#cpfsb-special-char-tool textarea { resize: vertical; }
#cpfsb-special-char-tool ::-webkit-search-decoration { -webkit-appearance: none; }
#cpfsb-special-char-tool ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; }
#cpfsb-special-char-tool ::-webkit-datetime-edit { display: inline-flex; }
#cpfsb-special-char-tool ::-webkit-datetime-edit-fields-wrapper { padding: 0; }
#cpfsb-special-char-tool ::-webkit-datetime-edit,
#cpfsb-special-char-tool ::-webkit-datetime-edit-year-field,
#cpfsb-special-char-tool ::-webkit-datetime-edit-month-field,
#cpfsb-special-char-tool ::-webkit-datetime-edit-day-field,
#cpfsb-special-char-tool ::-webkit-datetime-edit-hour-field,
#cpfsb-special-char-tool ::-webkit-datetime-edit-minute-field,
#cpfsb-special-char-tool ::-webkit-datetime-edit-second-field,
#cpfsb-special-char-tool ::-webkit-datetime-edit-millisecond-field,
#cpfsb-special-char-tool ::-webkit-datetime-edit-meridiem-field { padding-block: 0; }
#cpfsb-special-char-tool ::-webkit-calendar-picker-indicator { line-height: 1; }
#cpfsb-special-char-tool :-moz-ui-invalid { box-shadow: none; }
#cpfsb-special-char-tool button,
#cpfsb-special-char-tool input:where([type='button'], [type='reset'], [type='submit']),
#cpfsb-special-char-tool ::file-selector-button { appearance: button; }
#cpfsb-special-char-tool ::-webkit-inner-spin-button,
#cpfsb-special-char-tool ::-webkit-outer-spin-button { height: auto; }
#cpfsb-special-char-tool [hidden]:where(:not([hidden='until-found'])) { display: none!important; }

/* Scope toàn bộ CSS trong root để tránh xung đột WP/theme */
#cpfsb-special-char-tool,
#cpfsb-special-char-tool * { box-sizing: border-box; }

#cpfsb-special-char-tool{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  color:#0a0a0a;
}

#cpfsb-special-char-tool .cpfsb-container{max-width:1280px;margin:0 auto;padding:2rem 1rem}
#cpfsb-special-char-tool .cpfsb-toolbar{margin-bottom:1.5rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}

#cpfsb-special-char-tool .cpfsb-search{position:relative;max-width:28rem;flex:1}
#cpfsb-special-char-tool .cpfsb-search-icon{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);width:1.25rem;height:1.25rem;color:#737373}
#cpfsb-special-char-tool .cpfsb-search-input{width:100%;padding:.75rem 1rem .75rem 2.5rem;border:1px solid #e5e5e5;border-radius:.5rem;font-size:1rem;background:#fafafa}
#cpfsb-special-char-tool .cpfsb-search-input:focus{outline:none;border-color:#0a0a0a}

#cpfsb-special-char-tool .cpfsb-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}

#cpfsb-special-char-tool .cpfsb-btn{
  padding:.55rem 1rem;border-radius:.5rem;font-weight:500;cursor:pointer;border:none;
  display:inline-flex;align-items:center;gap:.5rem;transition:.2s;
}
#cpfsb-special-char-tool .cpfsb-btn-compact{font-size:.875rem;padding:.5rem 1.1rem}
#cpfsb-special-char-tool .cpfsb-btn-primary{background:#0a0a0a;color:#fff}
#cpfsb-special-char-tool .cpfsb-btn-primary:hover{background:#262626}
#cpfsb-special-char-tool .cpfsb-btn-secondary{background:#f5f5f5;color:#0a0a0a}
#cpfsb-special-char-tool .cpfsb-btn-secondary:hover{background:#e5e5e5}
#cpfsb-special-char-tool .cpfsb-icon{width:1rem;height:1rem}

#cpfsb-special-char-tool .cpfsb-category-btn{
  padding:.5rem 1rem;border-radius:.5rem;font-weight:500;cursor:pointer;border:none;white-space:nowrap;transition:.2s
}
#cpfsb-special-char-tool .cpfsb-category-btn.cpfsb-active{background:#0a0a0a;color:#fff}
#cpfsb-special-char-tool .cpfsb-category-btn:not(.cpfsb-active){background:#f5f5f5;color:#0a0a0a}
#cpfsb-special-char-tool .cpfsb-category-btn:not(.cpfsb-active):hover{background:#e5e5e5}

#cpfsb-special-char-tool .cpfsb-category-toggle-btn{
  padding:.5rem 1rem;border-radius:.5rem;font-weight:500;cursor:pointer;border:2px dashed #555;
  background:#ffffff;color:#0a0a0a;display:inline-flex;align-items:center;gap:.35rem;
  font-size:.875rem;white-space:nowrap;transition:.2s;
}
#cpfsb-special-char-tool .cpfsb-category-toggle-btn:hover{border-style:solid;border-color:#0a0a0a;background:#f5f5f5}
#cpfsb-special-char-tool .cpfsb-category-toggle-icon{font-size:.8rem;line-height:1;opacity:.8}

#cpfsb-special-char-tool .cpfsb-all-category-btn{
  display:inline-flex;align-items:center;gap:.35rem;border:1px solid #0a0a0a;background:#ffffff;color:#0a0a0a;padding:.5rem 1rem
}
#cpfsb-special-char-tool .cpfsb-all-category-icon{font-size:.75rem;line-height:1;opacity:.8}

#cpfsb-special-char-tool .cpfsb-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,.08);padding:.25rem 0;min-width:200px;max-height:260px;overflow:auto;z-index:50;
}
#cpfsb-special-char-tool .cpfsb-all-category-item{
  width:100%;text-align:left;padding:.4rem .75rem;border:0;background:none;cursor:pointer;font-size:.875rem
}
#cpfsb-special-char-tool .cpfsb-all-category-item:hover{background:#f5f5f5}
#cpfsb-special-char-tool .cpfsb-all-category-item.cpfsb-active{background:#0a0a0a;color:#fff}
#cpfsb-special-char-tool .cpfsb-cat-index{font-size:11px;color:#a3a3a3;margin-right:.25rem}

#cpfsb-special-char-tool .cpfsb-char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(4rem,1fr));gap:.75rem}
#cpfsb-special-char-tool .cpfsb-char-btn{
  aspect-ratio:1;background:#fff;border:1px solid #e5e5e5;border-radius:.5rem;
  display:flex;align-items:center;justify-content:center;font-size:2rem;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 .cpfsb-char-btn:hover{background:#f5f5f5;transform:scale(1.02) translateZ(0)}
#cpfsb-special-char-tool .cpfsb-char-btn.cpfsb-selected{border:2px solid #0a0a0a;background:#f5f5f5;--bw:2px}

#cpfsb-special-char-tool .cpfsb-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:opacity .2s;pointer-events:none;will-change:opacity;z-index:1;
}
#cpfsb-special-char-tool .cpfsb-char-btn:hover .cpfsb-hover-overlay{opacity:1}
#cpfsb-special-char-tool .cpfsb-char-btn.cpfsb-selected .cpfsb-hover-overlay{display:none}

#cpfsb-special-char-tool .cpfsb-char-btn.cpfsb-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 .cpfsb-char-btn.cpfsb-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 .cpfsb-char-btn.cpfsb-copied .cpfsb-hover-overlay{display:none}

#cpfsb-special-char-tool .cpfsb-selected-badge{
  position:absolute;top:.25rem;right:.25rem;background:#0a0a0a;border-radius:9999px;padding:.25rem;z-index:4
}

#cpfsb-special-char-tool .cpfsb-selection-preview{
  padding:1rem;background:#fff;border:1px solid #e5e5e5;border-radius:.5rem;margin-bottom:2rem
}
#cpfsb-special-char-tool .cpfsb-selection-preview-label{font-size:.875rem;color:#737373;margin:0 0 .5rem}
#cpfsb-special-char-tool .cpfsb-selection-preview-text{font-size:1.5rem;word-break:break-all;margin:0}

#cpfsb-special-char-tool .cpfsb-loading{display:none;font-size:.875rem;color:#737373;margin-bottom:.5rem}

#cpfsb-special-char-tool .cpfsb-no-results{display:none;text-align:center;padding:2rem 0}
#cpfsb-special-char-tool .cpfsb-no-results p{font-size:1.25rem;color:#737373;margin:0}

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

#cpfsb-special-char-tool .cpfsb-ctx-menu{
  position:fixed;z-index:10000;display:none;background:#fff;border:1px solid #e5e5e5;border-radius:10px;
  box-shadow:0 10px 25px rgba(0,0,0,.08);overflow:hidden;padding:6px;width:auto;max-width:90vw;
}
#cpfsb-special-char-tool .cpfsb-ctx-sep{border-top:1px solid #e5e5e5;margin:6px 0;}
#cpfsb-special-char-tool .cpfsb-ctx-name{padding:6px 10px;font-size:12px;color:#444;line-height:1.35;text-align:center;}
#cpfsb-special-char-tool .cpfsb-ctx-head{padding:6px 10px;text-align:center;font-weight:600;font-size:13px;color:#111}
#cpfsb-special-char-tool .cpfsb-ctx-item{
  width:100%;padding:8px 10px;text-align:left;border:0;background:none;cursor:pointer;
  font:inherit;display:flex;gap:10px;align-items:center
}
#cpfsb-special-char-tool .cpfsb-ctx-item:hover{background:#f5f5f5;border-radius:6px}
#cpfsb-special-char-tool .cpfsb-ctx-label{font-size:13px;color:#111}
#cpfsb-special-char-tool .cpfsb-mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:12px;color:#444
}

#cpfsb-special-char-tool .cpfsb-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;
}

@media (min-width:640px){
  #cpfsb-special-char-tool .cpfsb-char-grid{grid-template-columns:repeat(auto-fill,minmax(5rem,1fr))}
}

#cpfsb-special-char-tool .cpfsb-all-category-item{
  border:0 !important;
  border-bottom:0 !important;
  box-shadow:none !important;
  outline:none !important;
  text-decoration:none !important;
  -webkit-appearance:none;
  appearance:none;
}
#cpfsb-special-char-tool{font-size:16px !important;line-height:1.5;}
#cpfsb-special-char-tool .cpfsb-char-btn{font-size: 32px !important;line-height: 1 !important;}

/* Chừa chỗ bên phải để không đè lên nút X */
#cpfsb-special-char-tool .cpfsb-search-input{padding-right: 2.5rem;}

/* Nút X đỏ trong ô search */
#cpfsb-special-char-tool .cpfsb-search-clear{
  position: absolute;
  right: .6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #ef4444;
  background: transparent;
}
#cpfsb-special-char-tool .cpfsb-search-clear svg{width: 16px;height: 16px;}
#cpfsb-special-char-tool .cpfsb-search-clear:hover{background: rgba(239, 68, 68, .12);}
#cpfsb-special-char-tool .cpfsb-search-clear:active{background: rgba(239, 68, 68, .18);}
#cpfsb-special-char-tool .cpfsb-search-clear.cpfsb-show{display: inline-flex;}

/* Trên thiết bị cảm ứng: tắt hover overlay để tránh bị "dính" nền đen */
@media (hover: none) and (pointer: coarse){
  #cpfsb-special-char-tool .cpfsb-hover-overlay{ display:none !important; }
}
@media (hover: hover) and (pointer: fine){
  #cpfsb-special-char-tool .cpfsb-char-btn:hover .cpfsb-hover-overlay{ opacity:1; }
}
#cpfsb-special-char-tool.cpfsb-touch .cpfsb-hover-overlay{display:none !important;}
#cpfsb-special-char-tool.cpfsb-touch .cpfsb-char-btn:hover .cpfsb-hover-overlay{opacity:0 !important;}

#cpfsb-special-char-tool .cpfsb-container{
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
@media (min-width: 1024px){
  #cpfsb-special-char-tool .cpfsb-container{
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Khi bấm "Xem thêm": biến khu vực chủ đề thành khung có scroll, không đẩy symbol xuống */
#cpfsb-special-char-tool .cpfsb-cats-scroll{
  max-height: 220px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  background: #fff;
}
@media (max-width: 640px){
  #cpfsb-special-char-tool .cpfsb-cats-scroll{
    max-height: 180px;
    padding: 6px;
  }
}
#cpfsb-special-char-tool .cpfsb-cats-scroll::-webkit-scrollbar{width:6px}
#cpfsb-special-char-tool .cpfsb-cats-scroll::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}
#cpfsb-special-char-tool .cpfsb-cats-scroll::-webkit-scrollbar-track{background:transparent}

/* Thanh cố định dưới đáy khi chọn nhiều */
#cpfsb-special-char-tool .cpfsb-sticky-bar{
  position: sticky;
  bottom: 0;
  z-index: 60;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-top: 1px solid #e5e5e5;
  padding: .75rem;
  display: none;
}
#cpfsb-special-char-tool .cpfsb-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 .cpfsb-sticky-count{font-size: .875rem;color: #444;}

/* Tạo khoảng cách giữa các grid khi layout break */
#cpfsb-special-char-tool .cpfsb-char-grid + .cpfsb-char-grid{margin-top: 3.75rem;}