#textInput,.control-panel{background:var(--bg-card)}.history-chip,.history-chip-text{text-overflow:ellipsis;overflow:hidden}.emoji-search-clear,.emoji-search-icon{transform:translateY(-50%);top:50%;position:absolute}:root{--primary:#6366f1;--secondary:#06b6d4;--success:#10b981;--error:#ef4444;--bg-card:#ffffff;--bg-input:#f1f5f9;--border:#e2e8f0;--text:#0f172a;--text-secondary:#64748b;--text-muted:#94a3b8;--shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.1),0 4px 6px -4px rgb(0 0 0 / 0.1);--radius:8px;--radius-lg:12px}.main-grid{display:grid;grid-template-columns:1fr;gap:24px;margin:0 auto}.control-panel-wrapper{width:100%;overflow:hidden;position:relative;border:2px dashed #ed1c54;border-radius:var(--radius-lg);box-shadow:0 0 0 1px rgba(244,114,182,.15),0 4px 16px rgba(244,114,182,.1);transition:box-shadow .3s}.control-panel-wrapper:hover{box-shadow:0 0 0 1px rgba(244,114,182,.3),0 6px 20px rgba(244,114,182,.2)}.control-panel{border-radius:calc(var(--radius-lg) - 2px);padding:24px}.control-panel form{display:flex;flex-direction:column;gap:0}.input-wrapper{position:relative;width:100%;padding-bottom:22px;z-index:10}#textInput{width:100%;height:60px;font-weight:500;padding:0 20px;border:2px solid var(--border);border-radius:12px;box-sizing:border-box;outline:0;transition:border-color .2s,box-shadow .2s;caret-color:#e91e63}#textInput:focus{border-color:#80bdff;box-shadow:0 0 0 .2rem rgba(0,123,255,.15)}#textInput[readonly]{background:#fff;cursor:text;caret-color:transparent}#textInput::placeholder{color:var(--text-muted);font-weight:400}.fake-cursor{position:absolute;width:2px;height:1.3em;background:linear-gradient(to bottom,#e91e63,#c2185b);pointer-events:none;animation:1s step-end infinite blink;display:none;top:14px;z-index:20;box-shadow:0 0 8px rgba(233,30,99,.6)}.control-panel.loading .loading-state,.fake-cursor.show,.results-section.visible{display:block}@keyframes blink{0%,50%{opacity:1}100%,51%{opacity:0}}.text-measurer{position:absolute;visibility:hidden;white-space:pre;font-weight:500;pointer-events:none;top:0;left:0}.input-overlay-group{position:absolute;bottom:3px;right:10px;display:flex;align-items:center;gap:10px;background:#fff;padding:4px 8px 4px 14px;border-radius:50px;box-shadow:0 4px 15px rgba(0,0,0,.1);border:1px solid #f0f0f0;height:34px;z-index:20}.char-count{color:#6c757d;font-weight:600;white-space:nowrap;line-height:1;font-size:15px}.action-buttons{display:none;gap:6px;padding-left:8px;border-left:1px solid #eee}.action-buttons.show,.btn-action,.emoji-search-clear.show,.history-bar.visible{display:flex}.btn-action{width:28px;height:28px;border:none;border-radius:50%;cursor:pointer;align-items:center;justify-content:center;transition:.2s;padding:0}.default-mode.hidden,.history-bar{display:none}.btn-primary-custom{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231976d2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") center no-repeat #e3f2fd;color:#1976d2}.btn-primary-custom:hover{background-color:#1976d2;transform:translateY(-1px)}.btn-destructive{background:#ffebee;color:#d32f2f}.btn-destructive:hover{background:#d32f2f;color:#fff;transform:translateY(-1px)}.history-bar{align-items:center;gap:8px;padding:8px 0 4px;flex-wrap:wrap}.history-bar-label{color:var(--text-muted);white-space:nowrap;flex-shrink:0}.history-chips{display:flex;gap:6px;flex-wrap:wrap;flex:1}.history-chip{display:inline-flex;align-items:center;gap:4px;background:var(--bg-input);border:1px solid var(--border);border-radius:20px;padding:3px 8px 3px 10px;cursor:pointer;transition:.15s;line-height:1.4;max-width:120px;white-space:nowrap}.history-chip:hover{border-color:#e91e63;background:#fff5f8;color:#c2185b}.history-chip-text{max-width:80px;white-space:nowrap}.history-chip-del{flex-shrink:0;width:14px;height:14px;border-radius:50%;background:#ddd;color:#666;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;padding:0;transition:background .15s}.history-chip-del:hover{background:#e91e63;color:#fff}.history-clear-all{border:none;background:0 0;color:var(--text-muted);cursor:pointer;white-space:nowrap;flex-shrink:0;padding:2px 4px;border-radius:4px;transition:color .15s}.mode-toggle-btn,.nav-tabs-horizontal .nav-link{font-weight:500;cursor:pointer;transition:.2s;white-space:nowrap}.history-clear-all:hover{color:var(--error)}@keyframes ai-spin{0%{transform:translate(-50%,-50%) rotate(0)}100%{transform:translate(-50%,-50%) rotate(360deg)}}.mode-toggle-container{background:#e3e6ea;padding:4px;border-radius:100px;display:flex;margin:14px auto 16px;gap:6px;box-shadow:0 4px 12px rgba(0,0,0,.08)}.mode-toggle-btn{flex:1;border:none;padding:10px 20px;border-radius:100px;background:0 0;color:#5f6368;display:flex;align-items:center;justify-content:center;gap:6px;outline:0!important;position:relative;isolation:isolate}.mode-toggle-btn:hover{color:#1f1f1f}.mode-toggle-btn.normal-mode.active{background:#fff;color:#1f1f1f;box-shadow:0 1px 3px rgba(0,0,0,.1);font-weight:600}.mode-toggle-btn.ai-mode{overflow:hidden;--ai-bg:#e3e6ea}.mode-toggle-btn.ai-mode:hover{--ai-bg:#edeff1}.mode-toggle-btn.ai-mode.active{color:#1f1f1f;font-weight:600;--ai-bg:#fff}.mode-toggle-btn.ai-mode::before{content:"";position:absolute;top:50%;left:50%;width:200%;height:200%;padding:50%;background:conic-gradient(#3186ff00 0deg,#34a853 43deg,#ffd314 65deg,#ff4641 105deg,#3186ff 144deg,#3186ff 180deg,#3186ff00 324deg,#3186ff00 360deg);animation:3s linear infinite ai-spin;opacity:0;transition:opacity .5s;z-index:-2;pointer-events:none;aspect-ratio:1/1}.mode-toggle-btn.ai-mode.active::before,.mode-toggle-btn.ai-mode.suggestion-pulse::before,.mode-toggle-btn.ai-mode:hover::before{opacity:1}.mode-toggle-btn.ai-mode.suggestion-pulse{transform:scale(1.02);--ai-bg:#f8f9fa}.mode-toggle-btn.ai-mode.suggestion-pulse::before{animation-duration:1.5s}.mode-toggle-btn.ai-mode::after{content:"";position:absolute;inset:2px;border-radius:inherit;background:var(--ai-bg);z-index:-1;transition:background .3s}.default-mode{display:block;margin-bottom:14px}.select-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.input-group-sym label{display:block;color:var(--text-secondary);margin-bottom:6px;text-align:center}.input-group-sym select{width:100%;padding:10px 32px 10px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-input);background-image:url("data:image/svg+xml,%3csvg width='12' height='12' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4 6L8 10L12 6' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 10px center;text-align:center;outline:0;box-sizing:border-box;appearance:none;-webkit-appearance:none;cursor:pointer;transition:border-color .2s,background-color .2s}.input-group-sym select:focus{border-color:var(--primary);background-color:#fff;box-shadow:0 0 0 3px rgba(99,102,241,.1)}.keyboard-mode{display:none;margin-bottom:14px}.keyboard-mode.active{display:block;animation:.3s kbFadeIn}@keyframes kbFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.tabs-horizontal-container{border-bottom:1px solid #e9ecef;background:#f8f9fa;overflow-x:auto;overflow-y:hidden;white-space:nowrap;-webkit-overflow-scrolling:touch;border-radius:12px 12px 0 0;margin-top:4px;scrollbar-width:thin;scrollbar-color:#ced4da #f1f3f5;position:sticky;top:0;z-index:10}.tabs-horizontal-container::-webkit-scrollbar{height:4px}.tabs-horizontal-container::-webkit-scrollbar-track{background:#f1f3f5}.tabs-horizontal-container::-webkit-scrollbar-thumb{background:#ced4da;border-radius:2px}.nav-tabs-horizontal{display:inline-flex;flex-wrap:nowrap;padding:8px 8px 0;margin:0;gap:4px;list-style:none;border:none}.nav-tabs-horizontal .nav-item{flex-shrink:0}.nav-tabs-horizontal .nav-link{display:block;border:none;border-radius:8px 8px 0 0;padding:8px 16px;background:0 0;color:#6c757d;text-decoration:none}.nav-tabs-horizontal .nav-link:hover{color:#212529;background:rgba(0,0,0,.03)}.nav-tabs-horizontal .nav-link.active{color:#007bff;background:#fff;font-weight:600;box-shadow:0 -2px 5px rgba(0,0,0,.02)}.unified-scroll-container{background:#fff;border:1px solid #e9ecef;border-top:none;border-radius:0 0 12px 12px;position:relative;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.03)}.emoji-search-bar{background:#fff;padding:10px 14px 8px;border-bottom:1px solid #e9ecef}.emoji-search-input-wrapper{position:relative}.emoji-search-icon{left:12px;color:#adb5bd;pointer-events:none}.emoji-search-input{width:100%;padding:9px 36px!important;border:2px solid #e91e63!important;border-radius:10px!important;outline:0;box-sizing:border-box;transition:border-color .3s}.char-button,.emoji-search-clear{align-items:center;transition:.2s;cursor:pointer}.emoji-search-input:focus{border-color:#007bff;box-shadow:0 0 0 .2rem rgba(0,123,255,.1)}.emoji-search-input::placeholder{color:#adb5bd}.emoji-search-clear{right:8px;background:#f1f3f5;border:none;width:24px;height:24px;border-radius:50%;display:none;justify-content:center;color:#6c757d}.emoji-search-clear:hover{background:#dc3545;color:#fff}.virtual-scroll-wrapper{background:#f8f9fa;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#cfd8dc #f8f9fa;display:block}.virtual-scroll-content{display:inline-block}.continuous-characters-grid{display:grid;grid-template-rows:repeat(4,3.9rem);grid-auto-flow:column;grid-auto-columns:max-content;gap:.25rem;padding:14px}@media (max-width:576px){.continuous-characters-grid{grid-template-rows:repeat(3,3.5rem);padding:10px}}@media (min-width:768px){.continuous-characters-grid{grid-template-rows:repeat(5,3.9rem)}}.char-button{display:flex;justify-content:center;border-radius:3px;padding:.4rem;border:1px solid #bcbcbc;background:#f6f6f6;min-width:3.9rem;width:max-content;height:100%;white-space:nowrap;user-select:none;-webkit-user-select:none}.emoji-search-empty,.emoji-search-loading,.loading-spinner{padding:40px 20px;color:#adb5bd;text-align:center}.char-button.auto-size-small{transform:scale(.85)}.char-button.auto-size-medium{transform:scale(.95)}.char-button:hover{background:#fff;border-color:#e91e63;transform:translateY(-3px);box-shadow:0 4px 10px rgba(233,30,99,.15);color:#e91e63}.nickname-item:hover,.suggestions-btn:hover,.toast{box-shadow:var(--shadow-lg)}.char-button.auto-size-medium:hover,.char-button.auto-size-small:hover{transform:translateY(-3px) scale(1)}.char-button:active{transform:scale(.96)}.char-button.trends-char{background:#fffcf5;border-color:#f5ecd7}.char-button.trends-char:hover{border-color:#ffc107;box-shadow:0 4px 10px rgba(255,193,7,.2);color:#b78a02}.scroll-indicator{position:absolute;top:0;bottom:0;width:40px;display:none;align-items:center;justify-content:center;color:#adb5bd;z-index:5;pointer-events:none;opacity:0;transition:opacity .3s}.scroll-indicator.show{display:flex;opacity:1}.scroll-indicator.left{left:0;background:linear-gradient(to right,rgba(248,249,250,.95),transparent)}.scroll-indicator.right{right:0;background:linear-gradient(to left,rgba(248,249,250,.95),transparent)}.emoji-search-empty,.emoji-search-loading{width:100%}.spinner{border:3px solid #f1f3f5;border-top-color:#007bff;border-radius:50%;width:36px;height:36px;animation:.8s linear infinite spin;margin:0 auto 12px}@keyframes spin{to{transform:rotate(360deg)}}.generate-btn{width:100%;padding:16px 24px;background:#0f172a;color:#fff;border:none;border-radius:var(--radius);font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;transition:background .2s,box-shadow .2s}.copy-indicator,.suggestions-btn{align-items:center;transition:.2s}.generate-btn:hover:not(:disabled){background:#1e293b;box-shadow:0 0 20px rgba(244,114,182,.35)}.generate-btn:active:not(:disabled){transform:scale(.98)}.control-panel.loading .generate-btn,.generate-btn:disabled{opacity:.5;cursor:not-allowed}.loading-state{display:none;text-align:center;padding:14px;color:var(--text-secondary)}.error-message{background:#fef2f2;border:1px solid #fecaca;color:var(--error);padding:10px 14px;border-radius:var(--radius);display:none;text-align:center;margin-top:10px}.box-guide{color:var(--text-muted);text-align:center;margin:12px 0 0;line-height:1.6}.box-guide .hue_text_color{background:linear-gradient(90deg,#3186ff,#34a853,#ffd314,#ff4641);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}.results-section{background:var(--bg-card);display:none}.nickname-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}.nickname-item{background:#fdfdfd;border:1px solid var(--border);border-radius:var(--radius);padding:16px;cursor:pointer;position:relative;overflow:hidden;transition:.2s;animation:.3s forwards fadeInUp;text-align:center}.nickname-item:hover{border-color:var(--primary);transform:translateY(-2px);background:var(--bg-card)}@keyframes fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.copy_variant.generated-text,.nickname-text{color:var(--text);margin-bottom:6px;word-break:break-all;line-height:1.4;font-size:24px}.nickname-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;background:var(--bg-input);border-radius:20px;padding:3px 10px;display:inline-block;font-size:10px}.copy-indicator{position:absolute;bottom:8px;right:8px;width:20px;height:20px;border-radius:50%;background:var(--success);color:#fff;display:flex;justify-content:center;opacity:0;transform:scale(.8)}.suggestions-btn,.toast{color:#fff;border-radius:var(--radius);gap:8px}.nickname-item:hover .copy-indicator{opacity:1;transform:scale(1)}.suggestions-section{margin-top:24px;padding-top:24px;border-top:1px solid var(--border);text-align:center}.suggestions-btn{display:inline-flex;    background-color: #ed1c54;text-decoration:none;padding:12px 20px;font-weight:500}.suggestions-btn:hover{transform:translateY(-1px)}.toast{position:fixed;top:20px;right:20px;background:var(--success);padding:12px 16px;transform:translateX(400px);transition:transform .3s;z-index:10000;display:flex;align-items:center}.toast.show{transform:translateX(0)}@media (max-width:768px){.nickname-grid,.select-row{grid-template-columns:1fr}.control-panel{padding:16px}.select-row{gap:10px}.mode-toggle-container{min-width:260px}.toast{right:10px;left:10px}}.control-panel,.control-panel form,.control-panel-wrapper,.default-mode,.generate-btn,.history-bar,.history-chips,.input-wrapper,.keyboard-mode,.main-grid,.mode-toggle-container,.nickname-grid,.results-section,.select-row{box-sizing:border-box;max-width:100%}.main-grid{overflow-x:hidden;width:100%;padding:0}.mode-toggle-container{min-width:0;width:100%;max-width:400px}@media (max-width:768px){.nickname-grid,.select-row{grid-template-columns:1fr}.control-panel{padding:16px 14px}#textInput{height:52px;padding:0 14px}.select-row{gap:8px}.mode-toggle-container{max-width:100%;margin:10px auto 14px}.mode-toggle-btn{padding:9px 14px}.toast{right:10px;left:10px;transform:translateY(-120px)}.toast.show{transform:translateY(0)}.generate-btn{padding:14px 16px}}@media (max-width:480px){.box-guide,.generate-btn{margin-top:10px}.control-panel{padding:12px 10px}.input-wrapper{padding-bottom:20px}#textInput{height:48px;padding:0 12px;border-radius:10px}.input-overlay-group{right:6px;padding:3px 6px 3px 10px;height:30px;gap:6px}.history-bar{gap:6px;padding:6px 0 2px}.history-chip{padding:2px 6px 2px 8px;max-width:90px}.history-chip-text{max-width:56px}.mode-toggle-btn{padding:8px 10px}.input-group-sym label{margin-bottom:4px}.continuous-characters-grid{grid-template-rows:repeat(3,3.5rem);padding:8px;gap:.2rem}.char-button{min-width:3.4rem}.nav-tabs-horizontal .nav-link{padding:6px 12px}.emoji-search-bar{padding:8px 10px 6px}.generate-btn{padding:13px 14px;letter-spacing:.5px}.toast{right:6px;left:6px}.nickname-grid{grid-template-columns:1fr;gap:8px}.nickname-item{padding:12px}}@media (max-width:360px){.control-panel{padding:10px 8px}.mode-toggle-container{gap:4px}.mode-toggle-btn{padding:7px 8px}.continuous-characters-grid{grid-template-rows:repeat(3,3.2rem);padding:6px}.char-button{min-width:3.1rem}.suggestions-btn{padding:10px 14px;word-break:break-word;text-align:center}}.xnf-item span.xnf-item-text{font-size:28px} .mb-30{margin-bottom:30px;}
/* ── Grid thay thế Bootstrap dùng trong nicknameListPage ── */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -6px;
    margin-right: -6px;
}
.col-md-4,
.col-12 {
    box-sizing: border-box;
    padding-left: 6px;
    padding-right: 6px;
    width: 100%;
}
@media (min-width: 768px) {
    .col-md-4 {
        width: 33.3333%;
    }
}

/* Spacing & border utilities */
.border      { border: 1px solid #dee2e6 !important; }
.p-2         { padding: .5rem !important; }
.my-1        { margin-top: .25rem !important; margin-bottom: .25rem !important; }
.text-center { text-align: center !important; }

/* ── one_variant card ── */
.one_variant {
    border-radius: 6px;
    background: #fff;
}
.one_variant .copy_variant {
    font-size: 24px;
    cursor: pointer;
    word-break: break-all;
    padding: 4px 0;
}
.one_variant .variant_votes {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 6px;
}
.one_variant .variant_votes span {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
/* ── Input Group (thay Bootstrap) ── */
.input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}
.input-group .form-control {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid #ced4da;
    border-right: none;
    border-radius: 4px 0 0 4px;
    outline: none;
    color: #212529;
}
.input-group .form-control:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 3px rgba(13,110,253,.15);
}
.input-group-append {
    display: flex;
}
.input-group-append .btn {
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    white-space: nowrap;
    padding: 15px 20px;
    border: none;
}
.btn-primary {
    background-color: #0d6efd;
    color: #fff;
}
.btn-primary:hover {
    background-color: #0b5ed7;
}

/* Spacing utility nếu chưa có */
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.m-0  { margin: 0 !important; }
.p-1  { padding: .25rem !important; }
.bg-white { background-color: #fff !important; }
h1.entry-title {
    font-size: 20px;
}

header.entry-header {
    text-align: center;
}

#post-33 .entry-content {
    margin-top: 15px !important;
}