/*
Theme Name: NickTop
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nicktop
Tags: one-column, custom-menu, translation-ready
*/

/* Poppins, self-hosted. Subsets are split by unicode-range, so a visitor only
   downloads the ranges the page actually uses (latin-ext stays unfetched for
   plain English pages). Paths are root-relative so CSS minifiers that move the
   file cannot break them. */
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(/wp-content/themes/nicktop/assets/fonts/poppins-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(/wp-content/themes/nicktop/assets/fonts/poppins-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(/wp-content/themes/nicktop/assets/fonts/poppins-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(/wp-content/themes/nicktop/assets/fonts/poppins-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(/wp-content/themes/nicktop/assets/fonts/poppins-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(/wp-content/themes/nicktop/assets/fonts/poppins-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(/wp-content/themes/nicktop/assets/fonts/poppins-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(/wp-content/themes/nicktop/assets/fonts/poppins-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:800;font-display:swap;src:url(/wp-content/themes/nicktop/assets/fonts/poppins-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:800;font-display:swap;src:url(/wp-content/themes/nicktop/assets/fonts/poppins-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --nt-pink:#fb3b64; --nt-pink-dark:#e42b53; --nt-pink-soft:#fff3f6; --nt-pink-line:#ffd3de;
  --nt-indigo:#5b4df3; --nt-indigo-soft:#f2f2ff; --nt-violet:#8b5cf6; --nt-sky:#0ea5e9;
  --nt-amber:#f5a623; --nt-green:#10b981;
  --nt-ink:#111528; --nt-body:#3b4358; --nt-muted:#8b92a6; --nt-soft:#5a6178;
  --nt-line:#edeff5; --nt-line-2:#f4f5fa; --nt-bg:#fafbfe; --nt-card:#fff;
  --nt-r-s:8px; --nt-r-m:12px; --nt-r-l:16px; --nt-r-xl:20px;
  --nt-shadow:0 4px 18px rgba(20,25,60,.04); --nt-shadow-lg:0 12px 34px rgba(20,25,60,.09);
  --nt-max:1240px; --nt-pad:24px;
  --nt-font:Poppins,'Segoe UI',system-ui,-apple-system,Roboto,'Helvetica Neue',Arial,sans-serif;
  --nt-mono:ui-monospace,'SFMono-Regular',Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--nt-bg);font-family:var(--nt-font);color:var(--nt-ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,iframe,video{max-width:100%}
img{height:auto}
a{color:var(--nt-indigo);text-decoration:none;transition:color .18s}
a:hover{color:var(--nt-pink)}
button{font-family:inherit;border:0;background:none;cursor:pointer;color:inherit}
input,textarea,select{font-family:inherit}
h1,h2,h3,h4,p,figure{margin:0}
ul{margin:0;padding:0}
:focus-visible{outline:2px solid var(--nt-indigo);outline-offset:2px}
.nt-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nt-sr:focus{position:static!important;width:auto;height:auto;margin:0;clip:auto;padding:10px 16px;background:#fff}

/* ---------- layout ---------- */
.nt-wrap{position:relative;overflow:hidden;min-height:100vh}
.nt-container{width:100%;max-width:var(--nt-max);margin:0 auto;padding:0 var(--nt-pad)}
.nt-narrow{max-width:1120px}
.nt-section{padding-top:34px}
.nt-hide-mobile{display:initial}
.nt-only-mobile{display:none}

/* ---------- header ---------- */
.nt-header{position:sticky;top:0;z-index:50;background:rgba(250,251,254,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--nt-line)}
.nt-header-in{display:flex;align-items:center;gap:34px;padding-top:16px;padding-bottom:16px}
.nt-logo{display:flex;align-items:flex-end;position:relative;flex:none}
.nt-logo span{font-size:27px;font-weight:800;letter-spacing:-1px;line-height:1;color:var(--nt-ink);text-transform:uppercase}
.nt-logo span+span{color:var(--nt-pink)}
.nt-logo svg{position:absolute;left:48px;top:-12px}
.nt-logo img{max-height:38px;width:auto}
.nt-nav-wrap{flex:1;display:flex;justify-content:center;min-width:0}
.nt-nav{display:flex;align-items:center;gap:28px;list-style:none;flex-wrap:wrap;justify-content:center}
.nt-nav li{position:relative}
.nt-nav a{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:500;letter-spacing:.3px;color:var(--nt-soft);padding-bottom:5px;border-bottom:2.5px solid transparent;text-transform:uppercase}
.nt-nav .current-menu-item>a,.nt-nav .current_page_item>a,.nt-nav a.is-active{color:var(--nt-ink);font-weight:600;border-bottom-color:var(--nt-pink)}
.nt-nav .sub-menu{display:none;position:absolute;left:0;top:100%;min-width:190px;background:#fff;border:1px solid var(--nt-line);border-radius:var(--nt-r-m);box-shadow:var(--nt-shadow-lg);padding:8px;list-style:none;z-index:60}
.nt-nav li:hover>.sub-menu,.nt-nav li:focus-within>.sub-menu{display:block}
.nt-nav .sub-menu a{padding:8px 10px;border:0;text-transform:none;font-size:12.5px}
.nt-fav-btn{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.3px;color:var(--nt-ink);flex:none}
.nt-fav-btn .nt-count{color:var(--nt-pink)}
.nt-burger{display:none;width:38px;height:38px;border-radius:10px;border:1.5px solid var(--nt-line);align-items:center;justify-content:center;flex:none}
.nt-drawer{display:none;border-top:1px solid var(--nt-line);background:#fff}
.nt-drawer.is-open{display:block}
.nt-drawer ul{list-style:none}
.nt-drawer a{display:block;padding:13px 0;font-size:13px;font-weight:500;color:var(--nt-body);border-bottom:1px solid var(--nt-line-2)}
.nt-drawer .sub-menu a{padding-left:16px;font-size:12.5px;color:var(--nt-muted)}

/* ---------- shared bits ---------- */
.nt-eyebrow{font-size:11px;font-weight:700;letter-spacing:1.2px;color:var(--nt-pink);text-transform:uppercase}
.nt-h1{font-size:clamp(30px,4.4vw,50px);font-weight:800;letter-spacing:-1.4px;line-height:1.08}
.nt-h2{font-size:clamp(19px,2.2vw,24px);font-weight:700;letter-spacing:-.4px;color:var(--nt-ink)}
.nt-lead{font-size:clamp(14.5px,1.4vw,16.5px);line-height:1.75;color:var(--nt-soft);text-wrap:pretty}
.nt-card{background:var(--nt-card);border:1px solid var(--nt-line);border-radius:var(--nt-r-l);box-shadow:var(--nt-shadow)}
.nt-chip{display:inline-flex;align-items:center;gap:7px;background:var(--nt-line-2);color:#4b5266;border-radius:999px;padding:9px 16px;font-size:12.5px;font-weight:500;transition:.18s}
.nt-chip:hover{background:var(--nt-indigo-soft);color:var(--nt-indigo)}
.nt-chip.is-active{background:var(--nt-pink);color:#fff}
.nt-tag{display:inline-flex;align-items:center;gap:6px;border-radius:6px;padding:5px 10px;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;background:var(--nt-indigo-soft);color:var(--nt-indigo)}
.nt-tag[data-tone="pink"]{background:var(--nt-pink-soft);color:var(--nt-pink)}
.nt-tag[data-tone="violet"]{background:#f8f2ff;color:var(--nt-violet)}
.nt-tag[data-tone="sky"]{background:#f1f9ff;color:var(--nt-sky)}
.nt-tag[data-tone="amber"]{background:#fff8ec;color:var(--nt-amber)}
.nt-tag[data-tone="green"]{background:#e9fbf4;color:var(--nt-green)}
.nt-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:10px;padding:12px 22px;font-size:12.5px;font-weight:600;letter-spacing:.3px;transition:.18s}
.nt-btn-pink{background:var(--nt-pink);color:#fff}
.nt-btn-pink:hover{background:var(--nt-pink-dark);color:#fff}
.nt-btn-ghost{border:1.5px solid var(--nt-line);color:var(--nt-ink);background:#fff}
.nt-btn-ghost:hover{border-color:var(--nt-indigo);color:var(--nt-indigo)}
.nt-btn-outline-pink{border:1.5px solid var(--nt-pink);color:var(--nt-pink);background:#fff}
.nt-btn-outline-pink:hover{background:var(--nt-pink);color:#fff}
.nt-btn-sm{padding:8px 14px;font-size:11px}
.nt-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;font-size:12.5px;color:var(--nt-muted)}
.nt-meta-i{display:inline-flex;align-items:center;gap:6px}
.nt-dot{width:4px;height:4px;border-radius:50%;background:#d6dae6;flex:none}
.nt-ph{position:relative;display:flex;align-items:flex-end;justify-content:center;background-color:#f3f5fb;background-image:repeating-linear-gradient(135deg,rgba(91,77,243,.09) 0 10px,transparent 10px 20px);border:1px solid var(--nt-line);border-radius:var(--nt-r-m);overflow:hidden}
.nt-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nt-ph span{font-family:var(--nt-mono);font-size:10px;letter-spacing:.4px;color:#9aa1b5;background:rgba(255,255,255,.85);border-radius:6px;padding:4px 8px;margin-bottom:10px;max-width:calc(100% - 20px);text-align:center;line-height:1.4}
.nt-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#e7e9fb,#f6e8ff);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--nt-indigo);flex:none;overflow:hidden}
.nt-decor{position:absolute;pointer-events:none;z-index:0}
.nt-dots{background-image:radial-gradient(#c3c6fb 1.6px,transparent 1.6px);background-size:11px 11px;opacity:.8}
.nt-blob{border-radius:50%;filter:blur(2px);opacity:.7}
.nt-empty{text-align:center;padding:34px 0}

/* ---------- blog list ---------- */
.nt-blog-hero{position:relative;text-align:center;padding:44px 0 6px}
.nt-blog-hero .nt-lead{max-width:620px;margin:14px auto 0}
.nt-search{display:flex;align-items:center;gap:10px;max-width:520px;margin:22px auto 0;background:#fff;border:1.5px solid var(--nt-line);border-radius:12px;padding:4px 6px 4px 14px;box-shadow:var(--nt-shadow)}
.nt-search input{flex:1;border:0;outline:none;background:transparent;padding:11px 0;font-size:13px;color:var(--nt-ink);min-width:0}
.nt-search .nt-btn{flex:none}
.nt-filters{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:20px}
.nt-blog-grid{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:26px;align-items:start;margin-top:30px}
.nt-featured{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:0;overflow:hidden;padding:0}
.nt-featured .nt-ph{border:0;border-radius:0;min-height:270px}
.nt-featured-body{padding:26px 28px;display:flex;flex-direction:column;gap:12px}
.nt-featured:hover{box-shadow:var(--nt-shadow-lg);border-color:#e3e6f2}
.nt-featured:hover h2{color:var(--nt-pink)}
.nt-list{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.nt-post{display:grid;grid-template-columns:172px minmax(0,1fr);gap:18px;padding:14px;align-items:center;transition:transform .2s,box-shadow .2s,border-color .2s}
.nt-post:hover{transform:translateY(-2px);box-shadow:var(--nt-shadow-lg);border-color:#e3e6f2}
.nt-post .nt-ph{height:118px;width:100%}
.nt-post-body{display:flex;flex-direction:column;gap:8px;min-width:0}
.nt-post-title{font-size:17px;font-weight:600;line-height:1.35;color:var(--nt-ink);letter-spacing:-.2px}
.nt-post:hover .nt-post-title{color:var(--nt-pink)}
.nt-post-ex{font-size:14.5px;line-height:1.7;color:var(--nt-soft);text-wrap:pretty;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nt-more-link{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;letter-spacing:.4px;color:var(--nt-pink)}
.nt-pager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:26px;flex-wrap:wrap}
.nt-pager .page-numbers{min-width:38px;height:38px;padding:0 12px;border-radius:10px;border:1.5px solid var(--nt-line);background:#fff;font-size:12px;font-weight:600;color:var(--nt-body);display:inline-flex;align-items:center;justify-content:center}
.nt-pager .page-numbers.current{background:var(--nt-pink);border-color:var(--nt-pink);color:#fff}
.nt-pager a.page-numbers:hover{border-color:var(--nt-indigo);color:var(--nt-indigo)}

/* ---------- sidebar ---------- */
.nt-side{display:flex;flex-direction:column;gap:18px;position:sticky;top:88px}
.nt-side-card{padding:18px 20px}
.nt-side-h{font-size:12.5px;font-weight:700;letter-spacing:.5px;margin-bottom:14px}
.nt-rank-list{display:flex;flex-direction:column}
.nt-rank{display:grid;grid-template-columns:26px minmax(0,1fr);gap:11px;padding:10px 0;border-top:1px solid var(--nt-line-2);align-items:start}
.nt-rank:first-child{border-top:0}
.nt-rank b{font-size:14px;font-weight:700;color:#9aa1b5}
.nt-rank .t{font-size:13.5px;font-weight:500;line-height:1.45;color:var(--nt-ink);display:block}
.nt-rank:hover .t{color:var(--nt-pink)}
.nt-side-card ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.nt-side-card li a{font-size:13.5px;color:var(--nt-body)}

/* ---------- article ---------- */
.nt-progress{position:fixed;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--nt-pink),var(--nt-violet));z-index:60;transition:width .1s linear}
.nt-crumb{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--nt-muted);padding-top:22px;flex-wrap:wrap}
.nt-article-head{max-width:820px;margin:0 auto;text-align:center;padding:18px 0 0}
.nt-article-head .nt-h1{font-size:clamp(26px,3.4vw,40px);letter-spacing:-1.1px;margin-top:14px}
.nt-article-head .nt-lead{margin-top:14px}
.nt-byline{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:20px}
.nt-share{display:flex;align-items:center;gap:8px}
.nt-share button,.nt-share a{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--nt-line);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--nt-soft)}
.nt-share button:hover,.nt-share a:hover{border-color:var(--nt-pink);color:var(--nt-pink)}
/* The article hero shows the whole banner: a fixed height plus object-fit:cover
   silently crops overlay text off the top and bottom of a 16:9 image. */
.nt-cover{aspect-ratio:16/9;height:auto;margin-top:26px}
.nt-article-grid{display:grid;grid-template-columns:236px minmax(0,1fr);gap:38px;align-items:start;margin-top:34px}
.nt-toc{position:sticky;top:88px;padding:18px 18px 20px}
.nt-toc a{display:block;font-size:12px;line-height:1.45;color:var(--nt-soft);padding:7px 0 7px 12px;border-left:2px solid var(--nt-line)}
.nt-toc a.is-active{color:var(--nt-pink);border-left-color:var(--nt-pink);font-weight:600}
.nt-body{max-width:720px;font-size:17px;line-height:1.8;color:var(--nt-body)}
.nt-body>p,.nt-body>figure,.nt-body>table,.nt-body>pre{margin:0 0 20px}
.nt-body h2{font-size:clamp(19px,2vw,23px);font-weight:700;letter-spacing:-.4px;color:var(--nt-ink);margin:38px 0 14px;scroll-margin-top:96px}
.nt-body h3{font-size:16px;font-weight:600;color:var(--nt-ink);margin:26px 0 10px;scroll-margin-top:96px}
.nt-body h4,.nt-body h5,.nt-body h6{font-size:15px;font-weight:600;color:var(--nt-ink);margin:22px 0 8px}
.nt-body strong{color:var(--nt-ink);font-weight:600}
/* The marker is drawn in the padding rather than as a grid column: a list item that
   contains inline markup (<strong>, <a>, <code>) would otherwise have every child
   promoted to its own grid cell and the prose would collapse to one word per line. */
.nt-body ul,.nt-body ol{list-style:none;margin:0 0 22px}
.nt-body ul li,.nt-body ol li{position:relative;padding-left:28px;margin-bottom:11px;font-size:16.5px}
.nt-body ul li:last-child,.nt-body ol li:last-child{margin-bottom:0}
.nt-body ul li::before{content:"";position:absolute;left:0;top:12px;width:7px;height:7px;border-radius:2px;background:var(--nt-pink)}
.nt-body ol{counter-reset:nt-ol}
.nt-body ol li::before{counter-increment:nt-ol;content:counter(nt-ol);position:absolute;left:0;top:4px;font-size:12px;font-weight:700;color:var(--nt-pink)}
.nt-body img{border-radius:var(--nt-r-m)}
.nt-body figcaption{font-size:12.5px;color:var(--nt-muted);margin-top:8px;text-align:center}
.nt-body blockquote,.nt-quote{border-left:3px solid var(--nt-pink);background:var(--nt-pink-soft);border-radius:0 12px 12px 0;padding:20px 24px;font-size:17px;line-height:1.7;color:var(--nt-ink);margin:0 0 24px}
.nt-body blockquote p{margin:0}
.nt-body pre{background:var(--nt-ink);color:#e7e9f5;border-radius:var(--nt-r-m);padding:16px 18px;overflow-x:auto;font-family:var(--nt-mono);font-size:13.5px;line-height:1.6}
.nt-body code{font-family:var(--nt-mono);font-size:.9em;background:var(--nt-line-2);border-radius:5px;padding:2px 6px}
.nt-body pre code{background:none;padding:0}
/* Tables scroll as a whole inside their own rail. Letting the table itself be the
   scroller squeezes the columns down to one word per line on a phone, which reads
   as a broken layout even though nothing overflows the page. */
.nt-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 20px}
.nt-body table,.nt-seo table{width:100%;border-collapse:collapse;font-size:14.5px}
.nt-scroll>table{min-width:680px;margin:0}
.nt-seo .nt-scroll{margin:18px 0 4px}
.nt-body th,.nt-body td,.nt-seo th,.nt-seo td{border:1px solid var(--nt-line);padding:9px 12px;text-align:left}
.nt-body th,.nt-seo thead th{background:var(--nt-line-2);font-weight:600;color:var(--nt-ink)}
.nt-callout{display:flex;gap:13px;background:var(--nt-indigo-soft);border-radius:var(--nt-r-m);padding:17px 19px;font-size:15.5px;line-height:1.7;color:var(--nt-body);margin:0 0 24px}
.nt-name-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin:0 0 26px}
.nt-name{display:flex;align-items:center;gap:8px;border:1.5px solid var(--nt-line);border-radius:10px;padding:12px 14px;background:#fff;font-size:15.5px;color:var(--nt-ink);width:100%;text-align:left}
.nt-name .v{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px;background:none;padding:0;font:inherit;color:inherit;text-align:left;word-break:break-word}
.nt-name:has(.v.is-copied){border-color:var(--nt-green);background:#f2fdf8}
.nt-name:hover{border-color:var(--nt-pink);background:var(--nt-pink-soft)}
.nt-name svg{flex:none;color:var(--nt-pink)}
.nt-tags-row{display:flex;flex-wrap:wrap;gap:9px;margin:30px 0 0}
.nt-author{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;margin-top:26px}
.nt-author .nt-avatar{width:52px;height:52px;font-size:16px}
.nt-prevnext{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px}
.nt-prevnext a{padding:16px 18px;display:flex;flex-direction:column;gap:7px}
.nt-related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.nt-related-card{overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.nt-related-card:hover{transform:translateY(-3px);box-shadow:var(--nt-shadow-lg)}
.nt-related-card .nt-ph{border:0;border-radius:0;height:132px}
.nt-related-body{padding:15px 16px 18px;display:flex;flex-direction:column;gap:9px}
.nt-cta-band{margin-top:34px;background:linear-gradient(135deg,#5b4df3,#8b5cf6 55%,#a855f7);border-radius:var(--nt-r-l);padding:34px 28px;text-align:center;color:#fff}
.nt-cta-band h3{font-size:clamp(20px,2.4vw,26px);font-weight:700;line-height:1.3}
.nt-cta-band p{font-size:13px;opacity:.9;margin-top:8px}

/* ---------- comments ---------- */
.nt-comments{margin-top:30px;padding:24px 26px}
.nt-comments h3{font-size:16px;font-weight:700;margin-bottom:16px}
.nt-comment-list{list-style:none;display:flex;flex-direction:column;gap:18px}
.nt-comment-list ul.children{list-style:none;margin:16px 0 0 26px;display:flex;flex-direction:column;gap:16px;border-left:2px solid var(--nt-line);padding-left:16px}
.nt-comment-b{display:flex;gap:12px}
.nt-comment-b .nt-avatar img{width:100%;height:100%}
.nt-comment-body{font-size:15px;line-height:1.7;color:var(--nt-body);margin-top:6px}
.nt-comment-meta{font-size:12px;color:var(--nt-muted)}
.nt-comments .comment-respond{margin-top:24px}
.nt-comments input[type=text],.nt-comments input[type=email],.nt-comments input[type=url],.nt-comments textarea{width:100%;border:1.5px solid var(--nt-line);border-radius:10px;padding:11px 14px;font-size:14px;outline:none;background:#fff}
.nt-comments input:focus,.nt-comments textarea:focus{border-color:var(--nt-indigo)}
.nt-comments .comment-form-cookies-consent{display:flex;gap:9px;align-items:center;font-size:13px}
.nt-comments .comment-form-cookies-consent input{width:auto}
.nt-comments p{margin-bottom:12px}
.nt-comments .submit{background:var(--nt-pink);color:#fff;border-radius:10px;padding:12px 22px;font-size:12.5px;font-weight:600;letter-spacing:.3px;cursor:pointer}

/* ---------- footer ---------- */
.nt-footer{margin-top:38px;background:#fff;border-top:1px solid var(--nt-line);position:relative;z-index:1}
.nt-footer-in{display:grid;grid-template-columns:1.25fr .8fr .8fr 1.15fr;gap:26px;padding-top:30px;padding-bottom:24px}
.nt-footer h4{font-size:11px;font-weight:700;letter-spacing:.6px;margin-bottom:11px;text-transform:uppercase}
.nt-footer-links{display:flex;flex-direction:column;gap:7px;list-style:none}
.nt-footer-links a{font-size:12px;color:#6b7280}
.nt-copy{font-size:11px;color:var(--nt-muted);margin-top:10px}
.nt-socials{display:flex;gap:10px;margin-bottom:16px}
.nt-socials a{width:30px;height:30px;border-radius:50%;background:var(--nt-ink);display:flex;align-items:center;justify-content:center}
.nt-socials a:hover{background:var(--nt-pink)}

/* ---------- toast + back to top ---------- */
.nt-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--nt-ink);color:#fff;border-radius:11px;padding:12px 20px;font-size:12.5px;font-weight:500;display:flex;align-items:center;gap:10px;box-shadow:0 12px 30px rgba(0,0,0,.22);z-index:70;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:calc(100vw - 32px)}
.nt-toast.is-on{opacity:1;transform:translateX(-50%) translateY(-4px)}
.nt-top{position:fixed;right:20px;bottom:22px;width:42px;height:42px;border-radius:50%;background:#fff;border:1.5px solid var(--nt-line);box-shadow:var(--nt-shadow-lg);display:flex;align-items:center;justify-content:center;color:var(--nt-ink);z-index:55;opacity:0;pointer-events:none;transition:.2s}
.nt-top.is-on{opacity:1;pointer-events:auto}

/* ---------- section head ---------- */
.nt-sec-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.nt-sec-sub{font-size:13px;color:var(--nt-muted)}
.nt-sec-tools{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.nt-sort{border:1.5px solid var(--nt-line);background:#fff;border-radius:9px;padding:8px 14px;font-size:11.5px;font-weight:600;letter-spacing:.4px;color:var(--nt-body)}
.nt-sort.is-active{border-color:var(--nt-pink);color:var(--nt-pink);background:var(--nt-pink-soft)}

/* ---------- ranking table ---------- */
.nt-table{overflow:hidden;padding:0}
.nt-tr{display:grid;grid-template-columns:56px minmax(0,1.5fr) 128px 118px 96px 92px;align-items:center;gap:12px;padding:12px 18px;border-top:1px solid var(--nt-line-2)}
.nt-tr.nt-th{border-top:0;background:#fbfbfe;font-size:10.5px;font-weight:700;letter-spacing:.7px;color:var(--nt-muted);text-transform:uppercase;padding-top:14px;padding-bottom:14px}
.nt-tr:hover:not(.nt-th){background:#fcfcff}
.nt-tr .nt-rk{width:28px;height:28px;border-radius:8px;background:var(--nt-line-2);color:#9aa1b5;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.nt-tr[data-top3] .nt-rk{background:var(--nt-pink-soft);color:var(--nt-pink)}
.nt-nm{font-size:16px;font-weight:500;color:var(--nt-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nt-num{font-size:14px;font-weight:600;color:var(--nt-body);font-variant-numeric:tabular-nums}
.nt-trend{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600}
.nt-trend.up{color:var(--nt-green)}
.nt-trend.down{color:var(--nt-pink)}
.nt-copy-sm{display:inline-flex;align-items:center;justify-content:center;gap:5px;border:1px solid var(--nt-pink-line);color:var(--nt-pink);background:#fff;border-radius:7px;padding:7px 10px;font-size:10px;font-weight:700;letter-spacing:.5px}
.nt-copy-sm:hover{background:var(--nt-pink);color:#fff;border-color:var(--nt-pink)}

/* ---------- symbol / emoji grid ---------- */
.nt-emoji-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.nt-emoji{display:flex;flex-direction:column;align-items:center;gap:7px;background:#fff;border:1px solid var(--nt-line);border-radius:var(--nt-r-m);padding:15px 12px;transition:.18s;width:100%}
.nt-emoji:hover{border-color:var(--nt-pink);box-shadow:var(--nt-shadow-lg);transform:translateY(-2px)}
.nt-emoji .rk{font-size:11px;font-weight:600;color:#b9bfd0}
.nt-emoji .gl{font-size:20px;line-height:1.5;color:var(--nt-ink);word-break:break-word;min-width:0;text-align:center;min-height:32px;display:flex;align-items:center}
.nt-emoji .mt{font-size:11.5px;color:var(--nt-muted)}
.nt-emoji.is-hidden{display:none}
.nt-more-row{display:flex;justify-content:center;margin-top:18px}

/* ---------- rating ---------- */
.nt-rate{text-align:center;padding:26px 22px}
.nt-rate h4{font-size:17px;font-weight:700}
.nt-rate p{font-size:13.5px;color:var(--nt-muted);margin-top:7px}
.nt-rate-btns{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.nt-vote{display:inline-flex;align-items:center;gap:9px;border:1.5px solid var(--nt-line);background:#fff;border-radius:11px;padding:12px 20px;font-size:13.5px;font-weight:600;color:var(--nt-body)}
.nt-vote:hover{border-color:var(--nt-indigo);color:var(--nt-indigo)}
.nt-vote[data-vote="up"].is-picked{border-color:var(--nt-green);color:var(--nt-green);background:#e9fbf4}
.nt-vote[data-vote="down"].is-picked{border-color:var(--nt-pink);color:var(--nt-pink);background:var(--nt-pink-soft)}
.nt-vote .c{font-size:12px;font-weight:600;color:var(--nt-muted)}
.nt-rate-thanks{display:none;max-width:520px;margin:16px auto 0}
.nt-rate-thanks.is-on{display:block}
.nt-rate-thanks textarea{width:100%;margin-top:12px;border:1.5px solid var(--nt-line);border-radius:10px;padding:12px 14px;font-family:inherit;font-size:13.5px;resize:vertical;min-height:82px;outline:none}
.nt-rate-thanks textarea:focus{border-color:var(--nt-indigo)}

/* ---------- prose block ---------- */
.nt-lede{max-width:760px;margin:18px auto 0;text-align:center;font-size:15.5px;line-height:1.7;color:var(--nt-soft);text-wrap:pretty}
.nt-seo{padding:30px 34px}
.nt-seo-jump{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:26px}
.nt-seo-jump>span{font-size:11.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--nt-muted);margin-right:2px}
.nt-seo-jump a{font-size:12.5px;color:var(--nt-soft);background:var(--nt-line-2);border-radius:999px;padding:7px 13px}
.nt-seo-jump a:hover{background:var(--nt-pink-soft);color:var(--nt-pink)}
.nt-seo tbody th{background:transparent;font-weight:600;color:var(--nt-ink)}
.nt-seo .nt-scroll>table{min-width:760px}
.nt-seo th,.nt-seo td{vertical-align:top}
.nt-seo table th:nth-child(-n+3),.nt-seo table td:nth-child(-n+3){white-space:nowrap}
.nt-seo table td:last-child{min-width:330px;white-space:normal}
.nt-seo .nt-scroll:focus-visible{outline:2px solid var(--nt-pink);outline-offset:2px}
.nt-scroll-note{font-size:12.5px;margin:8px 0 4px}
.nt-seo h2{font-size:clamp(20px,2.2vw,25px);font-weight:700;letter-spacing:-.5px;margin-top:30px;scroll-margin-top:96px}
.nt-seo h2:first-child{margin-top:0}
.nt-seo .nt-intro-fig{margin:18px 0 4px}
.nt-seo h3{font-size:17px;font-weight:600;margin-top:24px}
.nt-seo p{font-size:17px;line-height:1.8;color:var(--nt-soft);margin-top:12px;text-wrap:pretty}
.nt-seo strong{color:var(--nt-ink);font-weight:600}
.nt-faq{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.nt-faq details{border:1px solid var(--nt-line);border-radius:var(--nt-r-m);padding:14px 18px;background:#fff}
.nt-faq summary{font-size:15.5px;font-weight:600;cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px}
.nt-faq summary::-webkit-details-marker{display:none}
.nt-faq summary::before{content:"+";color:var(--nt-pink);font-weight:700;font-size:17px}
.nt-faq details[open] summary::before{content:"\2212"}
.nt-faq p{font-size:15.5px;line-height:1.75;color:var(--nt-soft);margin-top:10px}

/* ---------- mobile tab bar ---------- */
.nt-tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:65;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-top:1px solid var(--nt-line);box-shadow:0 -6px 22px rgba(20,25,60,.07);padding:8px 6px calc(8px + env(safe-area-inset-bottom,0px))}
.nt-tabbar-in{display:grid;grid-template-columns:repeat(5,1fr);align-items:end}
.nt-tab{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:500;color:var(--nt-muted);padding:4px 0}
.nt-tab.is-active{color:var(--nt-indigo);font-weight:600}
.nt-tab-fab{margin-top:-26px;gap:5px;color:var(--nt-pink);font-weight:600}
.nt-tab-fab i{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#fb3b64,#f2557a);box-shadow:0 8px 18px rgba(251,59,100,.38);border:3px solid #fff}
.nt-drawer-float{position:fixed;left:0;right:0;bottom:78px;z-index:64;max-height:60vh;overflow:auto;box-shadow:0 -10px 30px rgba(20,25,60,.12)}

/* ---------- home ---------- */
.nt-hero{position:relative;text-align:center;padding:36px 0 0}
.nt-hero h1{font-size:clamp(34px,5vw,54px);font-weight:800;letter-spacing:-1.6px;line-height:1.06}
.nt-hero h1 em{font-style:normal;color:var(--nt-pink)}
.nt-hero-sub{margin-top:16px;font-size:clamp(18px,2.3vw,26px);font-weight:500;display:flex;justify-content:center;align-items:center;gap:11px;flex-wrap:wrap}
.nt-pill{background:#4f46f0;color:#fff;border-radius:9px;padding:2px 14px 4px;font-weight:600}
.nt-badges{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin-top:22px}
.nt-badge{display:flex;align-items:center;gap:7px;background:var(--nt-line-2);border-radius:999px;padding:8px 16px;font-size:12.5px;font-weight:500;color:#4b5266}
.nt-gen{display:grid;grid-template-columns:1.05fr 1.25fr 1.15fr;margin-top:26px;padding:20px 24px}
.nt-gen-col{padding:0 26px;border-left:1px solid #f0f1f7;min-width:0}
.nt-gen-col:first-child{padding-left:0;border-left:0}
.nt-gen-col:last-child{padding-right:0}
.nt-step{display:flex;align-items:center;gap:10px;margin-bottom:13px;font-size:13.5px;font-weight:600;color:#2c3247}
.nt-step i{width:25px;height:25px;border-radius:50%;background:#eceafe;color:var(--nt-indigo);font-size:12px;font-weight:700;font-style:normal;display:flex;align-items:center;justify-content:center;flex:none}
.nt-input-row{display:flex;border:1.5px solid #e8eaf2;border-radius:10px;overflow:hidden;background:#fdfdff}
.nt-input-row input{flex:1;border:0;outline:none;background:transparent;padding:12px 14px;font-size:14px;color:var(--nt-ink);min-width:0}
.nt-input-row button{display:flex;align-items:center;gap:6px;background:var(--nt-pink);color:#fff;font-size:12px;font-weight:600;letter-spacing:.3px;padding:0 16px;flex:none}
.nt-input-row button:hover{background:var(--nt-pink-dark)}
.nt-opts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.nt-style{border:1.5px solid var(--nt-line);background:#fff;border-radius:8px;padding:9px 16px;font-size:12.5px;font-weight:500;color:#2c3247}
.nt-style:hover{border-color:#d9dcea}
.nt-style.is-active{border-color:var(--nt-pink);background:var(--nt-pink-soft);color:var(--nt-pink)}
.nt-toggle{display:flex;align-items:center;gap:9px;border:1.5px solid var(--nt-line);border-radius:9px;padding:7px 10px 7px 13px;font-size:12.5px;font-weight:500;color:#2c3247;background:#fff}
.nt-toggle i{width:30px;height:17px;border-radius:999px;background:#dfe2ec;position:relative;transition:background .2s;flex:none}
.nt-toggle i::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .2s}
.nt-toggle.is-on i{background:var(--nt-green)}
.nt-toggle.is-on i::after{transform:translateX(13px)}
.nt-icon-btn{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--nt-muted);flex:none}
.nt-icon-btn:hover{background:var(--nt-line-2);color:var(--nt-indigo)}
.nt-results{margin-top:14px;padding:18px 22px}
.nt-results[hidden]{display:none}
.nt-results-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nt-results-head h3{font-size:13.5px;font-weight:700;letter-spacing:.4px}
.nt-results-head>span{font-size:12px;color:var(--nt-muted)}
.nt-res-group{margin-top:16px}
.nt-res-group h4{font-size:12px;font-weight:700;letter-spacing:.5px;color:var(--nt-muted);text-transform:uppercase;margin-bottom:10px}
.nt-results-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.nt-res{display:flex;align-items:center;gap:8px;border:1.5px solid var(--nt-line);border-radius:10px;padding:13px 15px;background:#fff;font-size:15px;color:var(--nt-ink);width:100%;text-align:left;word-break:break-word}
.nt-res .v{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px;background:none;padding:0;font:inherit;color:inherit;text-align:left;word-break:break-word}
.nt-res:hover{border-color:var(--nt-pink);background:var(--nt-pink-soft)}
.nt-res svg{flex:none;color:var(--nt-pink)}
.nt-res.is-copied,.nt-res:has(.v.is-copied){border-color:var(--nt-green);background:#f2fdf8}
.nt-fav{display:inline-flex;align-items:center;flex:none;line-height:0;padding:2px;opacity:.5;transition:.15s}
.nt-fav:hover{opacity:1;transform:scale(1.12)}
.nt-fav[aria-pressed="true"]{opacity:1}
.nt-down{color:var(--nt-muted)}
.nt-down.is-done{color:var(--nt-pink)}
.nt-comm-item .nt-fav{margin-left:auto}
.nt-spin{display:inline-block;width:15px;height:15px;border:2px solid var(--nt-line);border-top-color:var(--nt-pink);border-radius:50%;animation:nt-spin .7s linear infinite}
@keyframes nt-spin{to{transform:rotate(360deg)}}
.nt-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(198px,1fr));gap:16px}
.nt-col{display:flex;flex-direction:column;overflow:hidden;padding:0}
.nt-col-h{display:flex;align-items:center;gap:9px;padding:14px 15px;border-bottom:1px solid #f2f3f8;font-size:11.5px;font-weight:700;letter-spacing:.6px}
.nt-col-b{padding:6px 10px 4px;flex:1}
.nt-col-f{padding:8px 12px 12px}
.nt-nr{display:flex;align-items:center;gap:9px;padding:6px 4px}
.nt-nr .i{width:19px;height:19px;border-radius:5px;background:var(--nt-line-2);color:#9aa1b5;font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none}
.nt-nr .n{flex:1;font-size:13.5px;font-weight:500;color:#1a2035;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nt-cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:14px}
.nt-cat{display:flex;align-items:center;gap:11px;border:1px solid var(--nt-line);border-radius:12px;padding:14px 13px;transition:.18s;min-width:0}
.nt-cat:hover{transform:translateY(-2px);box-shadow:var(--nt-shadow-lg)}
.nt-cat i{width:32px;height:32px;border-radius:9px;background:#fff;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 1px 3px rgba(20,25,60,.06)}
.nt-cat b{display:block;font-size:12.5px;font-weight:600;color:var(--nt-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-cat span span{font-size:11.5px;color:var(--nt-muted)}
.nt-tri{display:grid;grid-template-columns:1fr 1.02fr 1fr;gap:18px}
.nt-why{position:relative;overflow:hidden;background:#eef4ff;border:1px solid #e3ebfb;border-radius:var(--nt-r-l);padding:20px 22px}
.nt-why h3,.nt-stats h3{font-size:15.5px;font-weight:700;display:flex;align-items:center;gap:9px;margin-bottom:14px}
.nt-why-list{display:flex;flex-direction:column;gap:10px;position:relative;z-index:1}
.nt-why-list div{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--nt-body)}
.nt-why svg.bg{position:absolute;right:6px;bottom:-8px;opacity:.85;z-index:0}
.nt-cta{background:linear-gradient(135deg,#5b4df3,#8b5cf6 55%,#a855f7);border-radius:var(--nt-r-l);padding:30px 26px;text-align:center;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.nt-cta h3{font-size:clamp(21px,2.5vw,26px);font-weight:700;line-height:1.25}
.nt-cta p{font-size:13.5px;opacity:.9;margin-bottom:12px}
.nt-stats{padding:20px 22px;display:flex;flex-direction:column}
.nt-stat{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--nt-body);margin-bottom:11px}
.nt-stat b{margin-left:auto;font-weight:700;color:var(--nt-green);font-variant-numeric:tabular-nums}
.nt-stat.plain b{color:var(--nt-body)}
.nt-spark{width:100%;height:62px;margin-top:auto;overflow:visible}
.nt-two{display:grid;grid-template-columns:1.08fr 1fr;gap:18px;align-items:start}
.nt-latest-row{display:grid;grid-template-columns:46px minmax(0,1fr) 96px 74px 28px;align-items:center;gap:10px;padding:9px 2px;border-top:1px solid var(--nt-line-2)}
.nt-latest-row .nm{font-size:14px;font-weight:500;color:#1a2035;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nt-new{font-size:9.5px;font-weight:700;letter-spacing:.5px;color:var(--nt-muted);background:var(--nt-line-2);border-radius:5px;padding:5px 0;text-align:center}
.nt-heart{display:flex;align-items:center;justify-content:center;color:var(--nt-pink)}
.nt-how{display:flex;flex-direction:column;gap:12px}
.nt-how div{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--nt-body)}
.nt-how i{width:25px;height:25px;border-radius:50%;color:#fff;font-size:11.5px;font-weight:700;font-style:normal;display:flex;align-items:center;justify-content:center;flex:none}
.nt-feat{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:26px}
.nt-feat div{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.nt-feat i{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.nt-feat b{font-size:12.5px;font-weight:600}
.nt-feat span{font-size:11.5px;color:var(--nt-muted)}

/* ---------- community panel (name page) ---------- */
.nt-comm{margin-top:14px;padding:18px 22px}
.nt-comm[hidden]{display:none}
.nt-comm-h{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;letter-spacing:.4px;margin-bottom:12px;flex-wrap:wrap}
.nt-comm-h .nt-comm-name{color:var(--nt-pink)}
.nt-comm-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.nt-comm-item{display:flex;align-items:center;gap:8px;border:1.5px solid var(--nt-line);border-radius:10px;padding:11px 13px;background:#fff;min-width:0}
.nt-comm-item .v{flex:1;font-size:14.5px;font-weight:500;color:var(--nt-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;background:none;padding:0}
.nt-comm-item:hover{border-color:var(--nt-pink)}
.nt-like{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--nt-muted);flex:none}
.nt-like.is-done{color:var(--nt-green)}
.nt-comm-form{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.nt-comm-form input{flex:1;min-width:180px;border:1.5px solid var(--nt-line);border-radius:10px;padding:11px 14px;font-size:14px;outline:none;background:#fff}
.nt-comm-form input:focus{border-color:var(--nt-indigo)}
.nt-comm-block{margin-top:18px}
.nt-comm-block>h4{font-size:12px;font-weight:700;letter-spacing:.5px;color:var(--nt-muted);text-transform:uppercase;margin-bottom:10px}
.nt-comm-empty{font-size:13.5px;color:var(--nt-muted)}

@media (max-width:1100px){
  .nt-blog-grid{grid-template-columns:minmax(0,1fr)}
  .nt-side{position:static}
  .nt-article-grid{grid-template-columns:minmax(0,1fr)}
  /* No sidebar left to stick to, so the contents list becomes a compact block of
     chips above the article instead of vanishing on phones. */
  .nt-toc{position:static;top:auto;padding:14px 16px 16px;margin-bottom:20px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .nt-toc .nt-side-h{flex:0 0 100%;margin-bottom:2px}
  .nt-toc a{border-left:0;padding:7px 12px;border-radius:999px;background:var(--nt-line-2);font-size:12.5px}
  .nt-toc a.is-active{background:var(--nt-pink-soft);border-left:0}
  .nt-body{max-width:none}
}
@media (max-width:900px){
  .nt-nav-wrap,.nt-fav-btn .nt-label{display:none}
  .nt-burger{display:flex}
  .nt-header-in{gap:14px;justify-content:space-between}
  .nt-related{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nt-footer-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nt-tr{grid-template-columns:48px minmax(0,1.3fr) 100px 92px 84px}
  .nt-tr .col-trend{display:none}
  .nt-gen{grid-template-columns:minmax(0,1fr);gap:20px}
  .nt-gen-col{padding:0;border-left:0}
  .nt-feat,.nt-results-grid,.nt-comm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .nt-tri,.nt-two{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  :root{--nt-pad:14px}
  /* Panels that span the full column run to the screen edge on phones. The
     container gutter and the panel's own padding used to stack, leaving 30px of
     dead space each side; now the text starts one padding in, not two. */
  .nt-gen,.nt-results,.nt-comm,.nt-seo,.nt-rate,.nt-comments,.nt-table,.nt-featured,.nt-cta-band,.nt-author{
    margin-left:calc(var(--nt-pad)*-1);margin-right:calc(var(--nt-pad)*-1);
    border-radius:0;border-left:0;border-right:0
  }
  .nt-tabbar{display:block}
  body{padding-bottom:78px}
  .nt-top{bottom:92px}
  .nt-toast{bottom:96px}
  .nt-tr{grid-template-columns:40px minmax(0,1fr) 74px;padding:12px 16px;gap:10px}
  .nt-tr .col-cat,.nt-tr .col-trend{display:none}
  .nt-tr .nt-copy-sm{width:100%}
  .nt-emoji-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .nt-seo{padding:22px 16px}
  .nt-rate{padding:22px 16px}
  .nt-vote{flex:1;justify-content:center;padding:12px 14px;font-size:13px}
  .nt-cols,.nt-cat-grid,.nt-feat,.nt-results-grid,.nt-comm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nt-hero{padding-top:26px}
  .nt-gen,.nt-results,.nt-comm{padding:18px 16px}
  .nt-latest-row{grid-template-columns:minmax(0,1fr) 74px 28px}
  .nt-latest-row .nt-new,.nt-latest-row .nt-tag{display:none}
  .nt-badge{font-size:12px;padding:7px 13px}
  .nt-featured{grid-template-columns:minmax(0,1fr)}
  .nt-featured .nt-ph{min-height:180px}
  .nt-featured-body{padding:18px 16px}
  .nt-post{grid-template-columns:minmax(0,1fr);gap:12px}
  .nt-post .nt-ph{height:170px}
  .nt-related,.nt-prevnext{grid-template-columns:minmax(0,1fr)}
  .nt-blog-hero{padding-top:30px}
  .nt-section{padding-top:26px}
  .nt-body{font-size:16px}
  .nt-body ul li,.nt-body ol li{font-size:15.5px}
  .nt-name-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .nt-comments{padding:20px 16px}
  .nt-cta-band{padding:28px 16px}
  .nt-author{padding:18px 16px}
  /* Widget boxes get the same treatment, except the floating saved-names panel,
     which is positioned rather than laid out in the column. */
  .nt-side-card:not(.nt-fav-panel){
    margin-left:calc(var(--nt-pad)*-1);margin-right:calc(var(--nt-pad)*-1);
    border-radius:0;border-left:0;border-right:0;padding:18px 16px
  }
  /* The dot flourishes are placed against a wide layout; on a phone there is no
     margin left for them to sit in and they land on top of the copy. */
  .nt-decor{display:none}
  .nt-hide-mobile{display:none}
  .nt-only-mobile{display:initial}
}
@media (max-width:460px){
  .nt-footer-in{grid-template-columns:minmax(0,1fr);gap:22px}
  .nt-byline{gap:10px}
  .nt-author{flex-direction:column;gap:12px;align-items:flex-start}
  .nt-filters{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .nt-filters .nt-chip{flex:none}
}
@media (max-width:420px){
  .nt-cols,.nt-cat-grid,.nt-results-grid,.nt-comm-grid{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------- saved panel ---------- */
.nt-fav-panel{position:fixed;left:50%;transform:translateX(-50%);bottom:74px;z-index:66;width:min(560px,calc(100vw - var(--nt-pad)*2));max-height:56vh;overflow:auto}
.nt-fav-panel[hidden]{display:none}
@media (max-width:700px){.nt-fav-panel{bottom:92px}}

/* --- Style gallery (template-parts/style-showcase.php) ----------------------
   Deliberately no font-weight on the rendered names: the styled Unicode already
   carries its own weight, and bolding it on top makes the glyphs muddy. */
.nt-style-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:10px}
.nt-style-row{display:flex;align-items:center;gap:10px;min-width:0;
  padding:10px 12px;border:1px solid rgba(0,0,0,.08);border-radius:12px;background:#fff}
.nt-style-label{flex:0 0 auto;font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  opacity:.55;min-width:74px}
.nt-style-out{flex:1 1 auto;min-width:0;font-size:17px;line-height:1.5;overflow-wrap:anywhere;
  font-family:"Noto Sans Symbols 2","Noto Sans Math","Noto Color Emoji",system-ui,sans-serif}
.nt-style-row .nt-copy-sm{flex:0 0 auto}
@media (max-width:420px){
  .nt-style-row{flex-wrap:wrap}
  .nt-style-label{min-width:0}
  .nt-style-out{flex:1 1 100%;order:3}
}

/* A wide table scrolls inside its own box. inline-size containment is the part
   that matters: without it the table's min-width propagates up through the flex
   item holding the article and puts the scrollbar on the page instead. */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 22px;border-radius:11px;contain:inline-size;width:100%;max-width:100%}
.tbl-wrap table{margin:0;min-width:520px}

/* ---------- Item tự do (2026-09-13) ----------------------------------------
   Nickname / kí tự / emoji rộng theo nội dung, xếp flex-wrap cho đầy dòng thay
   lưới cột cố định; có trần nở để hàng cuối không kéo dài hết bề ngang.
   Không font-weight trên chữ item (Unicode trang trí không có bản đậm). */
.nt-name-grid,.nt-emoji-grid,.nt-results-grid,.nt-comm-grid,.nt-style-grid{display:flex;flex-wrap:wrap}
.nt-name,.nt-res,.nt-comm-item,.nt-style-row{flex:1 1 auto;width:auto;min-width:0;max-width:min(420px,100%)}
.nt-emoji{flex:1 1 auto;width:auto;min-width:44px;max-width:min(160px,100%)}
.nt-name .v,.nt-res .v,.nt-emoji .gl{overflow-wrap:anywhere}
.nt-comm-item .v{font-weight:400;overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:anywhere}
.nt-nr .n{font-weight:400;overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:anywhere}
.nt-nm,.nt-latest-row .nm{font-weight:400}

/* kho (home) */
.ntk{padding-top:12px;padding-bottom:10px}
.ntk__chips{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;-webkit-overflow-scrolling:touch}
.ntk__chip{flex:0 0 auto;white-space:nowrap;min-height:44px;padding:0 16px;border:1.5px solid #e2e5f0;border-radius:99px;background:#fff;color:var(--nt-ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.ntk__chip.is-on{background:var(--nt-indigo);border-color:var(--nt-indigo);color:#fff}
.ntk__n{margin:2px 2px 4px;font-size:15px;color:#5b6378}
.ntk__g{margin:8px 0 2px}.ntk__g[hidden]{display:none}
.ntk__h{font-size:19px;margin:10px 2px 8px;line-height:1.3;text-align:left}.ntk__h span{font-size:15px;font-weight:400;color:#5b6378}
.ntk__flow{display:flex;flex-wrap:wrap;gap:6px}
.ntk__flow::after{content:'';flex:1000 1 0;min-width:0}
.ntk__it{flex:1 1 auto;max-width:100%;min-width:0;padding:8px 12px;min-height:44px;border:1.5px solid #e2e5f0;border-radius:12px;background:#fff;color:var(--nt-ink);font:inherit;font-size:20px;line-height:1.4;font-weight:400;white-space:normal;overflow-wrap:anywhere;text-align:center;cursor:pointer}
.ntk__it--e,.ntk__it--k,.ntk__it--s{font-size:24px}
.ntk__it:hover{border-color:var(--nt-indigo)}
@media (min-width:760px){body{font-size:18px}}
@media (max-width:759px){body{font-size:17px}}
.nt-seo figure.wp-block-image{margin:18px auto;text-align:center}.nt-seo figure.wp-block-image img{display:block;margin:0 auto;max-width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--nt-r-m)}