/*
Theme Name: Nickname.vn Pastel
Theme URI: https://nickname.vn
Author: Nickname.vn
Description: Pastel WordPress theme for Nickname.vn. Vanilla CSS + JS — no Bootstrap, no jQuery. Pairs with the "Nicknames (Lite REST)" plugin for nickname data.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: nickname-vn
*/

/* =========================================================================
   Design tokens
   ========================================================================= */
:root{
  --pink:#c90093;          /* primary magenta */
  --pink-bright:#ff4d94;   /* hover / accent */
  --pink-soft:#ff7ab8;
  --bg:#fff5fa;            /* page background */
  --border:#ffd4e6;        /* card borders */
  --border-2:#ffc2dd;
  --line:#ffe0ee;          /* hairlines inside cards */
  --ink:#3a0e2c;          /* primary text */
  --ink-2:#4a2640;
  --muted:#7a4965;
  --muted-2:#8a5a75;
  --muted-3:#a06c87;
  --green:#1f9d6b;         /* upvote */
  --red:#e0457f;           /* downvote */
  --font-head:'Baloo 2',cursive;
  --font-body:'Be Vietnam Pro',sans-serif;
  --wrap:1200px;
  --pad:clamp(14px,3vw,28px);
}

/* =========================================================================
   Base
   ========================================================================= */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
::selection{background:var(--pink-bright);color:#fff}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

h1,h2,h3,h4{font-family:var(--font-head);line-height:1.08;margin:0}

.nk-scroll::-webkit-scrollbar{height:6px}
.nk-scroll::-webkit-scrollbar-thumb{background:rgba(201,0,147,.3);border-radius:4px}
@keyframes nkfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

.nk-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.nk-hero-bg{background:radial-gradient(120% 60% at 50% 0%, #ffe3f1 0%, #fff5fa 56%)}
.nk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* =========================================================================
   Header
   ========================================================================= */
.nk-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 0 8px}
.nk-brand{display:flex;align-items:center;gap:8px;color:var(--ink)}
.nk-brand-logo{width:34px;height:34px;border-radius:12px;background:var(--pink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 6px 14px rgba(201,0,147,.28)}
.nk-brand-name{font-family:var(--font-head);font-weight:800;font-size:1.35rem;letter-spacing:-.01em}
.nk-brand-name span{color:var(--pink)}
.nk-nav{display:flex;gap:6px;overflow-x:auto;max-width:64%}
.nk-nav a{flex:0 0 auto;font-size:13.5px;font-weight:600;color:var(--muted);padding:8px 13px;border-radius:999px;background:#fff;border:1px solid var(--border);white-space:nowrap;transition:.15s}
.nk-nav a:hover{border-color:var(--pink);color:var(--pink)}
.nk-nav a.active{color:#fff;background:var(--pink);border-color:var(--pink);font-weight:700}

/* =========================================================================
   Buttons & chips
   ========================================================================= */
.nk-btn{font-family:var(--font-head);font-weight:700;border-radius:999px;cursor:pointer;border:none;transition:.15s;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.nk-btn-solid{background:var(--pink);color:#fff;padding:15px 22px;font-size:1.05rem;box-shadow:0 10px 22px rgba(201,0,147,.3)}
.nk-btn-solid:hover{background:var(--pink-bright)}
.nk-btn-ghost{background:#fff;border:1.5px solid var(--border-2);color:var(--pink);padding:13px 30px;font-size:1.05rem;box-shadow:0 6px 16px rgba(201,0,147,.08)}
.nk-btn-ghost:hover{border-color:var(--pink);background:#fff0f7}
.nk-chip{font-family:var(--font-body);font-weight:600;font-size:14px;padding:9px 16px;cursor:pointer;border-radius:999px;border:1.5px solid var(--border-2);background:#fff;color:#9a5878;transition:.15s;white-space:nowrap}
.nk-chip:hover{border-color:var(--pink);color:var(--pink)}
.nk-chip.active{background:var(--pink);border-color:var(--pink);color:#fff}
.nk-namechip{font-family:var(--font-head);font-size:1.05rem;font-weight:600;background:#fff;border:1.5px solid var(--border);border-radius:999px;color:var(--ink);padding:9px 18px;cursor:pointer;box-shadow:0 4px 12px rgba(201,0,147,.06);transition:.15s}
.nk-namechip:hover{border-color:var(--pink);color:var(--pink);background:#fff0f7}
.nk-pill{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--border);color:var(--pink);font-weight:600;font-size:12.5px;padding:6px 14px;border-radius:999px;box-shadow:0 4px 12px rgba(201,0,147,.08)}
.nk-badge{align-self:flex-start;background:#ffe1ef;color:var(--pink);font-weight:700;font-size:12px;padding:5px 12px;border-radius:999px}

/* =========================================================================
   Section heading
   ========================================================================= */
.nk-sec{margin-top:clamp(40px,7vw,68px)}
.nk-sec-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.nk-sec-head h2{font-family:var(--font-head);font-weight:800;font-size:clamp(1.5rem,4vw,2.3rem);margin:0;white-space:nowrap}
.nk-rule{flex:1;height:2px;border-radius:2px;background:var(--border)}
.nk-sec-lead{margin:0 0 16px;font-size:15px;line-height:1.6;color:var(--muted);max-width:74ch}

/* =========================================================================
   Hero + generator tool
   ========================================================================= */
.nk-hero{text-align:center;padding:clamp(14px,3vw,26px) 0 clamp(10px,2vw,18px)}
.nk-hero h1{font-family:var(--font-head);font-weight:800;font-size:clamp(2.2rem,7vw,4rem);line-height:1.02;letter-spacing:-.02em;margin:14px 0 6px}
.nk-hero h1 span{color:var(--pink)}
.nk-hero p{margin:0 auto;max-width:540px;font-size:clamp(13px,2.6vw,15px);color:var(--muted-2);line-height:1.55}

.nk-tool{background:#fff;border:1px solid var(--border);border-radius:28px;box-shadow:0 18px 50px rgba(201,0,147,.12);overflow:hidden;display:flex;flex-wrap:wrap;margin-bottom:clamp(30px,5vw,52px)}
.nk-tool-ctrl{flex:1 1 360px;padding:clamp(20px,3.4vw,38px);background:linear-gradient(180deg,#fff0f7 0%,#ffe7f3 100%);border-right:1px solid var(--border)}
.nk-tool-res{flex:1 1 420px;padding:clamp(20px,3.4vw,38px);min-width:0}
.nk-label{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--pink);margin-bottom:9px;text-transform:uppercase}
.nk-input{width:100%;background:#fff;border:2px solid var(--border-2);border-radius:16px;color:var(--ink);font-family:var(--font-head);font-size:1.6rem;font-weight:700;padding:13px 18px;outline:none;margin-bottom:22px;box-shadow:0 6px 16px rgba(201,0,147,.08)}
.nk-input:focus{border-color:var(--pink-bright)}
.nk-styles{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:24px}
.nk-tool-note{margin:14px 0 0;font-size:12px;color:var(--muted-3);line-height:1.5;text-align:center}
.nk-res-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px;gap:10px;flex-wrap:wrap}
.nk-res-head .t{font-family:var(--font-head);font-size:clamp(1.15rem,2.8vw,1.5rem);font-weight:700}
.nk-res-head .t b{color:var(--pink);font-weight:700}
.nk-res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.nk-copy{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;background:#fff6fa;border:1.5px solid var(--border);border-radius:16px;color:var(--ink);padding:13px 14px;cursor:pointer;min-width:0;font-family:var(--font-body);transition:.15s}
.nk-copy:hover{border-color:var(--pink-bright);background:#ffeaf3}
.nk-copy .txt{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.nk-copy .ico{font-size:15px;color:#ff9ec5;flex:0 0 auto}
.nk-copy .ok{font-size:11px;color:var(--pink);font-weight:700;white-space:nowrap}

/* =========================================================================
   Kho nickname (vote grid)
   ========================================================================= */
.nk-vote-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:12px}
.nk-vote-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:16px 16px 13px;box-shadow:0 6px 18px rgba(201,0,147,.05);min-width:0}
.nk-vote-name{font-weight:600;font-size:1.15rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:12px}
.nk-vote-row{display:flex;align-items:center;gap:8px}
.nk-vote{display:inline-flex;align-items:center;gap:5px;border:none;cursor:pointer;font-family:var(--font-body);font-weight:700;font-size:13.5px;border-radius:999px;padding:4px 10px;background:none}
.nk-vote.up{color:var(--green)} .nk-vote.up.on{background:#e3f7ee;color:#0d7a4f}
.nk-vote.down{color:var(--red)} .nk-vote.down.on{background:#ffe6f0;color:#c2326e}
.nk-vote-copy{margin-left:auto;background:none;border:none;cursor:pointer;font-family:var(--font-body);font-size:13px;color:var(--muted-3);font-weight:600;padding:4px}
.nk-vote-copy:hover{color:var(--pink)}
.nk-vote-copy .ok{color:var(--pink)}

/* =========================================================================
   Cards / grids (styles, ideas, symbols)
   ========================================================================= */
.nk-grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2.4vw,20px)}
.nk-card{border:1px solid var(--border);background:#fff;border-radius:20px;padding:18px;box-shadow:0 8px 22px rgba(201,0,147,.06)}
.nk-card h3{font-family:var(--font-head);font-weight:700;font-size:1.3rem;margin:0 0 6px}
.nk-card p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.55}
.nk-eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--pink);font-weight:700;margin-bottom:8px}
.nk-hero-art{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;color:#fff}
.nk-hero-art .dots{position:absolute;inset:0;background-image:radial-gradient(circle at 20% 30%, rgba(255,255,255,.35) 0 6px, transparent 7px),radial-gradient(circle at 75% 60%, rgba(255,255,255,.3) 0 5px, transparent 6px),radial-gradient(circle at 50% 85%, rgba(255,255,255,.25) 0 4px, transparent 5px)}
.nk-hero-art .label{font-family:var(--font-head);font-weight:800;text-align:center;line-height:1;z-index:1;text-shadow:0 4px 16px rgba(122,0,80,.35);font-size:clamp(2rem,6vw,3.4rem)}
.grad-a{background:linear-gradient(135deg,#ffb3d6 0%,#c90093 100%)}
.grad-b{background:linear-gradient(135deg,#ffc2dd 0%,#ff7ab8 100%)}
.grad-c{background:linear-gradient(135deg,#ff7ab8 0%,#c90093 100%)}

.nk-ideas{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.nk-idea{background:#fff;border:1px solid var(--border);border-radius:22px;padding:20px;box-shadow:0 10px 26px rgba(201,0,147,.07);display:flex;flex-direction:column;min-width:0}
.nk-idea-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px;font-size:12px;color:var(--muted-3);font-weight:600}
.nk-idea-name{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:14px}
.nk-idea-name h3{font-family:var(--font-head);font-weight:700;font-size:1.45rem;margin:0}
.nk-idea-name .star{font-size:12.5px;color:var(--pink);font-weight:700;white-space:nowrap}
.nk-idea-samples{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.nk-sample{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fff6fa;border:1.5px solid var(--border);border-radius:14px;padding:11px 14px;cursor:pointer;text-align:left;min-width:0;transition:.15s}
.nk-sample:hover{border-color:var(--pink-bright);background:#ffeaf3}
.nk-sample .txt{font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.nk-sample .plus{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--green)}
.nk-idea-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--muted-3)}
.nk-idea-foot a{font-weight:700;color:var(--pink)}

.nk-tags{display:flex;flex-wrap:wrap;gap:10px}
.nk-tag{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);border-radius:999px;padding:9px 16px;box-shadow:0 4px 12px rgba(201,0,147,.05);transition:.15s}
.nk-tag:hover{border-color:var(--pink)}
.nk-tag .vol{font-size:12px;color:#bf8fa9;font-weight:600}

/* Game */
.nk-game{margin-top:clamp(40px,7vw,68px);background:linear-gradient(135deg,#ff7ab8 0%,#c90093 100%);color:#fff;border-radius:28px;padding:clamp(26px,5vw,48px) clamp(20px,4vw,44px);box-shadow:0 18px 44px rgba(201,0,147,.22)}
.nk-game h2{font-family:var(--font-head);font-weight:800;font-size:clamp(1.8rem,5.4vw,3.2rem);line-height:1.02;margin:0 0 6px}
.nk-game-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.nk-game-card{background:rgba(255,255,255,.16);border-radius:18px;padding:18px;min-width:0}
.nk-game-card .t{font-family:var(--font-head);font-weight:700;font-size:1.3rem}
.nk-game-card .s{font-size:13px;color:rgba(255,255,255,.78);margin-top:4px}

/* "Nickname là gì" + sidebar list */
.nk-statbox{background:#fff;border:1px solid var(--border);border-radius:22px;padding:24px;box-shadow:0 10px 26px rgba(201,0,147,.07)}
.nk-statbox .quote{font-family:var(--font-head);font-size:clamp(1.2rem,2.8vw,1.5rem);line-height:1.35;color:var(--pink);margin-bottom:18px}
.nk-statbox ul{list-style:none;padding:0;margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.nk-statbox li{padding:11px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:10px}
.nk-statbox li b{color:var(--pink);font-weight:700;white-space:nowrap}
.nk-dropcap::first-letter{float:left;font-family:var(--font-head);font-weight:800;font-size:4.2rem;line-height:.8;padding:8px 14px 0 0;color:var(--pink)}

/* Author box */
.nk-author{background:#fff;border:1px solid var(--border);border-radius:24px;box-shadow:0 12px 30px rgba(201,0,147,.08);display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,30px);padding:clamp(20px,3.4vw,32px)}
.nk-avatar{flex:0 0 auto;border-radius:22px;background:linear-gradient(135deg,#ff7ab8,#c90093);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:800;box-shadow:0 10px 22px rgba(201,0,147,.25)}
.nk-avatar.lg{width:84px;height:84px;font-size:1.8rem}
.nk-avatar.md{width:72px;height:72px;font-size:1.5rem}
.nk-avatar.sm{width:42px;height:42px;font-size:1rem;border-radius:14px}

/* =========================================================================
   Article / posts (archive + single)
   ========================================================================= */
.nk-page-head{padding:clamp(18px,3.5vw,34px) 0 clamp(14px,2.5vw,24px)}
.nk-crumb{font-size:12px;color:var(--muted-3);font-weight:600;margin-bottom:8px}
.nk-crumb a{color:var(--muted-3)}
.nk-crumb .cur{color:var(--pink)}
.nk-page-head h1{font-family:var(--font-head);font-weight:800;font-size:clamp(2rem,6vw,3.4rem);line-height:1.02;margin:0 0 8px}
.nk-page-head p{margin:0;font-size:clamp(14px,2.6vw,16px);color:var(--muted);max-width:64ch;line-height:1.6}

.nk-feature{display:flex;flex-wrap:wrap;color:inherit;background:#fff;border:1px solid var(--border);border-radius:26px;overflow:hidden;box-shadow:0 16px 40px rgba(201,0,147,.1);margin-bottom:clamp(30px,5vw,48px)}
.nk-feature-art{flex:1 1 380px;min-width:0;min-height:240px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;color:#fff}
.nk-feature-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nk-feature-body{flex:1 1 360px;min-width:0;padding:clamp(20px,3vw,36px);display:flex;flex-direction:column;justify-content:center}
.nk-feature-body h2{font-family:var(--font-head);font-weight:800;font-size:clamp(1.5rem,3.4vw,2.2rem);line-height:1.1;margin:12px 0}
.nk-meta{display:flex;flex-wrap:wrap;gap:8px 12px;font-size:13px;color:var(--muted-3)}

.nk-posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:clamp(16px,2.4vw,22px)}
.nk-pcard{display:flex;flex-direction:column;color:inherit;background:#fff;border:1px solid var(--border);border-radius:22px;overflow:hidden;box-shadow:0 8px 22px rgba(201,0,147,.06);min-width:0;transition:.15s}
.nk-pcard:hover{border-color:#ff9ec5}
.nk-pcard-art{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;color:#fff}
.nk-pcard-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nk-pcard-art .label{z-index:1;font-family:var(--font-head);font-weight:800;font-size:clamp(1.3rem,3.4vw,1.9rem);text-align:center;text-shadow:0 3px 12px rgba(122,0,80,.35);padding:0 12px}
.nk-pcard-body{padding:18px;display:flex;flex-direction:column;flex:1}
.nk-pcard-body h3{font-family:var(--font-head);font-weight:700;font-size:1.25rem;line-height:1.15;margin:0 0 8px}
.nk-pcard-body .ex{margin:0 0 14px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.nk-pcard-body .meta{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--muted-3)}

.nk-loadmore{display:flex;justify-content:center;padding:clamp(30px,5vw,48px) 0}

/* Single layout */
.nk-single{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(18px,3vw,40px);align-items:start;padding-top:clamp(14px,2.5vw,24px)}
.nk-article{grid-column:span 8;min-width:0}
.nk-aside{grid-column:span 4;min-width:0;position:sticky;top:16px}
.nk-article h1{font-family:var(--font-head);font-weight:800;font-size:clamp(1.9rem,5vw,3rem);line-height:1.04;margin:0 0 16px}
.nk-art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:24px}
.nk-art-meta .who{font-weight:700;font-size:14px;color:var(--ink)}
.nk-art-meta .sub{font-size:12.5px;color:var(--muted-3)}
.nk-figure{margin:0 0 26px}
.nk-figure .art{border-radius:22px;aspect-ratio:16/8;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;box-shadow:0 16px 38px rgba(201,0,147,.18);color:#fff}
.nk-figure img{display:block;width:100%;border-radius:22px}
.nk-figure figcaption{margin-top:8px;font-size:12.5px;color:var(--muted-3)}

/* Prose */
.nk-prose{font-size:16px;line-height:1.75;color:var(--ink-2)}
.nk-prose>p{margin:0 0 20px}
.nk-prose>p:first-of-type{font-size:17px;color:var(--ink);font-weight:500}
.nk-prose h2{font-family:var(--font-head);font-weight:700;font-size:clamp(1.3rem,3vw,1.7rem);margin:28px 0 14px}
.nk-prose h3{font-family:var(--font-head);font-weight:700;font-size:clamp(1.25rem,3vw,1.6rem);margin:24px 0 10px}
.nk-prose a{color:var(--pink);text-decoration:underline}
.nk-prose ul,.nk-prose ol{margin:0 0 22px;padding-left:22px}
.nk-prose li{margin-bottom:6px}
.nk-prose img{border-radius:18px;margin:8px 0}
.nk-prose blockquote{background:#fff;border-left:4px solid var(--pink);border-radius:0 16px 16px 0;padding:18px 20px;margin:0 0 24px;box-shadow:0 8px 22px rgba(201,0,147,.06)}
.nk-prose blockquote p{margin:0;font-family:var(--font-head);font-size:clamp(1.1rem,2.6vw,1.4rem);line-height:1.4;color:var(--pink)}

.nk-posttags{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 30px}
.nk-posttags .lbl{font-size:13px;color:var(--muted-3);font-weight:600;align-self:center}
.nk-posttags a{font-size:13px;font-weight:600;color:#9a5878;background:#fff;border:1px solid var(--border);border-radius:999px;padding:6px 13px}
.nk-posttags a:hover{border-color:var(--pink);color:var(--pink)}

.nk-authorcard{background:#fff;border:1px solid var(--border);border-radius:22px;box-shadow:0 10px 26px rgba(201,0,147,.07);display:flex;flex-wrap:wrap;gap:18px;padding:22px}

.nk-cta{background:linear-gradient(135deg,#ff7ab8 0%,#c90093 100%);border-radius:22px;padding:22px;color:#fff;box-shadow:0 12px 30px rgba(201,0,147,.2);margin-bottom:16px}
.nk-cta h3{font-family:var(--font-head);font-weight:800;font-size:1.3rem;margin:0 0 6px}
.nk-cta p{margin:0 0 14px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.9)}
.nk-cta a{display:inline-block;background:#fff;color:var(--pink);font-family:var(--font-head);font-weight:700;font-size:15px;padding:11px 22px;border-radius:999px}
.nk-related{background:#fff;border:1px solid var(--border);border-radius:22px;padding:22px;box-shadow:0 10px 26px rgba(201,0,147,.07)}
.nk-related .hd{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--pink);font-weight:700;margin-bottom:14px}
.nk-related a{display:block;padding:11px 0;border-top:1px solid var(--line);color:var(--ink);font-weight:600;font-size:14px;line-height:1.4}
.nk-related a:hover{color:var(--pink)}
.nk-related a span{display:block;font-weight:500;font-size:12px;color:var(--muted-3);margin-top:3px}

/* FAQ accordion */
.nk-faq{border-top:1px solid var(--border)}
.nk-faq details{border-bottom:1px solid var(--border)}
.nk-faq summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;padding:16px 2px;font-weight:600;font-size:15.5px;color:var(--ink)}
.nk-faq summary::-webkit-details-marker{display:none}
.nk-faq summary .sign{font-family:var(--font-head);font-weight:800;font-size:1.4rem;color:var(--pink);line-height:1}
.nk-faq details[open] summary .sign::before{content:"\2212"}
.nk-faq summary .sign::before{content:"+"}
.nk-faq p{margin:0;padding:0 2px 18px;font-size:15px;line-height:1.7;color:#5a3650}

/* =========================================================================
   Name detail page (nickname.php)
   ========================================================================= */
.nk-namehead{text-align:center;padding:clamp(16px,3vw,30px) 0 clamp(8px,2vw,16px)}
.nk-namehead h1{font-family:var(--font-head);font-weight:800;font-size:clamp(1.8rem,5vw,3rem);margin:8px 0}
.nk-namehead h1 span{color:var(--pink)}
.nk-namegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-bottom:20px}
.nk-name-item{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fff;border:1.5px solid var(--border);border-radius:14px;padding:12px 14px;min-width:0;box-shadow:0 4px 12px rgba(201,0,147,.05)}
.nk-name-item .txt{font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;cursor:pointer}
.nk-name-item .votes{display:flex;align-items:center;gap:6px;flex:0 0 auto;font-size:12.5px;font-weight:700}

/* =========================================================================
   Footer
   ========================================================================= */
.nk-footer{margin-top:clamp(34px,5vw,54px);padding:clamp(26px,4vw,42px) 0 44px;border-top:1px solid var(--border)}
.nk-footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:28px 24px}
.nk-footer .brand{font-family:var(--font-head);font-weight:800;font-size:1.7rem;line-height:1}
.nk-footer .brand span{color:var(--pink)}
.nk-footer p{margin:10px 0 0;font-size:13px;line-height:1.6;color:var(--muted);max-width:32ch}
.nk-footer .hd{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--pink);font-weight:700;margin-bottom:12px}
.nk-footer ul{list-style:none;padding:0;margin:0;font-size:14px;line-height:2.1}
.nk-footer ul a{color:var(--ink)}
.nk-footer ul a:hover{color:var(--pink)}
.nk-footer-bottom{margin-top:30px;padding-top:18px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--muted-2)}

/* =========================================================================
   404 + search
   ========================================================================= */
.nk-center{text-align:center;padding:clamp(40px,8vw,90px) 0}
.nk-center h1{font-family:var(--font-head);font-weight:800;font-size:clamp(3rem,12vw,6rem);color:var(--pink);margin:0}
.nk-center p{color:var(--muted);font-size:16px;margin:10px 0 22px}
.nk-searchbox{display:flex;gap:8px;max-width:480px;margin:18px auto 0}
.nk-searchbox input{flex:1;background:#fff;border:2px solid var(--border-2);border-radius:16px;padding:12px 16px;font-size:15px;font-family:var(--font-body);color:var(--ink);outline:none}
.nk-searchbox input:focus{border-color:var(--pink-bright)}

/* =========================================================================
   Grid spans → responsive collapse
   ========================================================================= */
.col-7{grid-column:span 7}.col-5{grid-column:span 5}.col-8{grid-column:span 8}
.col-4{grid-column:span 4}.col-6{grid-column:span 6}.col-12{grid-column:span 12}
.nk-stack{display:flex;flex-direction:column;gap:clamp(14px,2.4vw,20px)}

/* =========================================================================
   SVG icons
   ========================================================================= */
.nk-ico{width:1.05em;height:1.05em;display:inline-block;vertical-align:-.16em;flex:0 0 auto}
.nk-brand-logo .nk-ico{width:20px;height:20px;vertical-align:0}
.nk-vote{gap:5px}
.nk-vote .nk-ico{width:1.18em;height:1.18em}
.nk-vote-copy{display:inline-flex;align-items:center;gap:5px}
.nk-vote-copy .nk-ico{width:14px;height:14px}
.nk-vote-copy.ok{color:var(--pink)}
.nk-copy .ico{display:inline-flex;align-items:center;color:#ff9ec5}
.nk-copy .ico .nk-ico{width:16px;height:16px}
.nk-copy .ok{display:inline-flex;align-items:center;gap:4px}
.nk-copy .ok .nk-ico{width:14px;height:14px}
.nk-badge .nk-ico{width:13px;height:13px;vertical-align:-.1em}
.nk-idea-name .star .nk-ico,.nk-idea-foot a .nk-ico{width:14px;height:14px}
.nk-pill .nk-ico{vertical-align:-.18em}
/* Round icon buttons (share / comment on single) */
.nk-iconbtn{width:36px;height:36px;border-radius:999px;background:#fff;border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);transition:.15s}
.nk-iconbtn:hover{border-color:var(--pink);color:var(--pink)}
/* Footer brand bow chip */
.nk-footer .brand{display:inline-flex;align-items:center;gap:8px}
.nk-footer-bow{display:inline-flex;width:26px;height:26px;border-radius:9px;background:var(--pink);color:#fff;align-items:center;justify-content:center}
.nk-footer-bow .nk-ico{width:17px;height:17px}
/* Custom uploaded logo */
.nk-brand-custom{display:flex;align-items:center}
.nk-brand-custom img{max-height:48px;width:auto;height:auto;display:block}

/* =========================================================================
   Pillar SEO content (rendered via the_content on the front page)
   ========================================================================= */
.nk-cam-nang .nk-prose{max-width:880px}
.nk-prose .nk-lead{font-size:17px;color:var(--ink);font-weight:500}
.nk-toc{background:#fff;border:1px solid var(--border);border-radius:18px;padding:16px 22px;margin:0 0 26px;box-shadow:0 6px 18px rgba(201,0,147,.06)}
.nk-toc strong{display:block;font-family:var(--font-head);font-size:1.05rem;margin-bottom:8px;color:var(--ink)}
.nk-toc ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2px 18px}
.nk-toc li{margin:0}
.nk-toc a{color:var(--pink);font-weight:600;font-size:14px;text-decoration:none}
.nk-toc a::before{content:"› ";color:var(--pink-soft)}
.nk-mau-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin:0 0 22px}
.nk-mau-grid .nk-sample{margin:0}
.nk-mau-grid .nk-sample .txt{text-decoration:none}

/* =========================================================================
   Responsive collapse
   ========================================================================= */
@media(max-width:880px){
  .nk-single{grid-template-columns:1fr}
  .nk-article,.nk-aside{grid-column:auto}
  .nk-aside{position:static}
  .nk-grid-12{grid-template-columns:1fr}
  .col-7,.col-5,.col-8,.col-4,.col-6{grid-column:auto}
}
/* Long section headings must wrap on small screens (avoid horizontal overflow) */
@media(max-width:760px){
  .nk-sec-head{flex-wrap:wrap;gap:10px}
  .nk-sec-head h2{white-space:normal}
}
@media(max-width:560px){
  /* Nav drops to its own full-width, scrollable row under the brand */
  .nk-top{flex-wrap:wrap;row-gap:10px}
  .nk-nav{max-width:100%;width:100%;order:3}
  .nk-tool-ctrl{border-right:none;border-bottom:1px solid var(--border)}
  .nk-vote-grid{grid-template-columns:1fr}
}