/*
Theme Name: FFNick Base
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.1
Text Domain: ffnickbase
*/

/* ── base: thay phần tối thiểu mà theme cha trước đây lo ────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:#fff;color:#0f0f0f;font-size:17px;line-height:1.65;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;}
img,svg,video{max-width:100%;height:auto;}
img{display:block;}
a{color:var(--ff-accent,#c2410c);}
h1,h2,h3,h4{line-height:1.25;margin:1.6em 0 .5em;font-weight:600;}
h1{font-size:clamp(26px,4.4vw,34px);margin-top:0;}
h2{font-size:clamp(21px,3.2vw,26px);}
h3{font-size:clamp(18px,2.6vw,20px);}
p,ul,ol,table{margin:0 0 1.1em;}
ul,ol{padding-left:1.35em;}
li{margin:.35em 0;}
code{background:#fafafa;padding:.15em .4em;border-radius:3px;font-size:.92em;}
hr{border:0;border-top:1px solid #e2e2e2;margin:2em 0;}
button,input,select,textarea{font:inherit;color:inherit;}
:focus-visible{outline:2px solid var(--ff-accent,#c2410c);outline-offset:2px;}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip-link:focus{position:fixed;left:8px;top:8px;width:auto;height:auto;clip:auto;background:#fff;
  padding:10px 14px;border:1px solid var(--ff-accent,#c2410c);z-index:99;}

/* khung bài viết — thay .inside-article/.entry-* của theme cha */
.site-main{padding:26px 0 40px;}
.entry-header,.entry-content,.entry-meta{max-width:840px;margin:0 auto;padding:0 16px;}
.entry-content table{width:100%;border-collapse:collapse;}
.entry-content th,.entry-content td{border:1px solid #e2e2e2;padding:9px 11px;text-align:left;font-size:15px;vertical-align:top;}
.entry-content th{background:#fafafa;font-weight:600;}

/* danh sách bài / phân trang / 404 / tìm kiếm */
.post-list{max-width:840px;margin:0 auto;padding:0 16px;display:flex;flex-wrap:wrap;gap:14px;}
.post-card{flex:1 1 auto;min-width:min(260px,100%);max-width:100%;border:1px solid #e2e2e2;border-radius:8px;padding:16px 18px;}
.post-card h2{margin:0 0 .35em;font-size:19px;}
.post-card p{margin:0;color:#555;font-size:15px;}
.pagination{max-width:840px;margin:26px auto 0;padding:0 16px;display:flex;gap:10px;flex-wrap:wrap;}
.pagination .page-numbers{border:1px solid #e2e2e2;border-radius:4px;padding:7px 13px;color:#0f0f0f;}
.pagination .current{background:var(--ff-accent,#c2410c);border-color:var(--ff-accent,#c2410c);color:#fff;}
.nf{max-width:840px;margin:0 auto;padding:0 16px;}
.nf .nf-links{display:flex;flex-wrap:wrap;gap:10px;padding:0;list-style:none;}
.nf .nf-links li{margin:0;}
.nf .nf-links a{display:inline-block;border:1px solid #e2e2e2;border-radius:999px;padding:8px 15px;font-size:14px;}
.searchform{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 1.2em;}
.searchform input[type=search]{flex:1 1 auto;min-width:min(220px,100%);border:1px solid #e2e2e2;border-radius:4px;padding:11px 13px;}
.searchform button{border:1px solid var(--ff-accent,#c2410c);background:var(--ff-accent,#c2410c);color:#fff;border-radius:4px;padding:11px 19px;cursor:pointer;}

/* ── giao diện công cụ: bê nguyên từ bản đang chạy ──────────────────────── */
/* ============================================================
   Demo-style header / footer + clean white page
   ============================================================ */
body, .site{background:#fff;}

.ffnick-header{background:#fff;border-bottom:1px solid #e6e6e6;}
.ffnick-bar{max-width:840px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.ff-logo{font-weight:bold;font-size:18px;color:#1b1b1b;text-decoration:none;line-height:1;}
.ff-logo span{color:#c2410c;}
.ff-nav{display:flex;gap:14px;flex-wrap:wrap;font-size:14px;}
.ffnick-header .ff-nav{margin-left:auto;}
.ff-nav a{color:#c2410c;text-decoration:none;}
.ff-nav a:hover{text-decoration:underline;}

.site-footer{background:#fff;border-top:1px solid #e6e6e6;margin-top:40px;}
.ffnick-footer{max-width:840px;margin:0 auto;padding:22px 16px;color:#777;font-size:13px;}
.ffnick-footer .ff-nav{margin-bottom:10px;}
.ffnick-footer .ff-legal{margin-bottom:12px;}
.ffnick-footer .ff-legal a{color:#777;}
.ffnick-footer .ff-legal a:hover{color:var(--ff-accent);}
.ffnick-footer p{margin:0;}

/* ============================================================
   Base typography (Arial system font, no web fonts)
   ============================================================ */
:root{
  --ff-ink:#1b1b1b; --ff-accent:#c2410c; --ff-accent-dark:#a8370c;
  --ff-line:#e6e6e6; --ff-soft:#eee; --ff-muted:#777; --ff-ok:#1b7a3e;
}
body{font-family:Arial,Helvetica,sans-serif;color:var(--ff-ink);line-height:1.6;}
a{color:var(--ff-accent);}
a:hover{text-decoration:underline;}
.muted{color:var(--ff-muted);}
.lead{font-size:18px;color:#333;}

/* Keep the inner content column narrow & readable, matching the design */
.ffnick{max-width:840px;margin:0 auto;padding-left:16px;padding-right:16px;box-sizing:border-box;}
/* Theme không có media query nào, nên dưới 840px khung nội dung ăn trọn bề ngang
   và chữ dính sát mép máy. Dùng ĐÚNG 16px như .ffnick-bar và .ffnick-footer
   để ba khối thẳng hàng nhau trên mọi cỡ màn. */

/* ============================================================
   Inputs / buttons
   ============================================================ */
.ffnick input,.ffnick select,.ffnick button,.ffnick textarea{font-family:inherit;font-size:15px;}
.ffnick .field{width:100%;padding:10px 12px;border:1px solid #bbb;border-radius:4px;}
.ffnick button.act{padding:10px 16px;border:1px solid var(--ff-accent);background:var(--ff-accent);color:#fff;border-radius:4px;cursor:pointer;}
.ffnick button.act:hover{background:var(--ff-accent-dark);}
.ffnick button.lite{padding:10px 14px;border:1px solid #bbb;background:#f5f5f5;color:var(--ff-ink);border-radius:4px;cursor:pointer;}
.ffnick button.lite:hover{background:#ececec;}
.ffnick .toolrow{display:flex;gap:8px;margin:10px 0;flex-wrap:wrap;}
.ffnick .toolrow input{flex:1;min-width:180px;}

/* Section headings on tool pages */
.ffnick h1{font-size:30px;line-height:1.2;margin:0 0 10px;}
.ffnick h2{font-size:22px;margin:38px 0 6px;padding-top:18px;border-top:1px solid var(--ff-soft);}
.ffnick h3{font-size:16px;margin:18px 0 6px;}

/* ============================================================
   Tabs
   ============================================================ */
.ffnick .tabs{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 14px;}
.ffnick .tabs button,.ffnick .tabs .tab{padding:7px 14px;border:1px solid #bbb;background:#fff;border-radius:4px;cursor:pointer;font-size:14px;color:var(--ff-ink);}
.ffnick .tabs button[aria-pressed="true"],.ffnick .tabs .tab[aria-pressed="true"]{background:var(--ff-ink);color:#fff;border-color:var(--ff-ink);}

/* ============================================================
   Result rows
   ============================================================ */
.ffnick .rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px;}
.ffnick .row{display:flex;align-items:center;gap:10px;border:1px solid #e2e2e2;border-radius:4px;padding:10px 12px;background:#fff;}
.ffnick .row .tag{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#999;min-width:58px;width:auto;flex:0 0 auto;word-break:normal;overflow-wrap:normal;}
.ffnick .row .name{flex:1 1 auto;font-size:19px;min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.5;}
.ffnick .row .rk{font-size:12px;color:#bbb;width:24px;flex-shrink:0;text-align:right;}
.ffnick .copy{padding:5px 11px;border:1px solid #bbb;background:#f5f5f5;color:var(--ff-ink);border-radius:4px;cursor:pointer;font-size:13px;line-height:1.3;flex-shrink:0;}
.ffnick .copy:hover{background:#ececec;}
.ffnick .copy.ok{background:var(--ff-ok);color:#fff;border-color:var(--ff-ok);}

/* Vote buttons (detail page) */
.ffnick .votes{display:flex;gap:6px;flex-shrink:0;}
.ffnick .vote{border:1px solid #ddd;background:#fafafa;border-radius:4px;padding:5px 9px;cursor:pointer;font-size:13px;color:#555;}
.ffnick .vote:hover{background:#f0f0f0;}
.ffnick .vote.up.on{color:var(--ff-ok);border-color:var(--ff-ok);}
.ffnick .vote.down.on{color:#b42318;border-color:#b42318;}

/* ============================================================
   Symbols
   ============================================================ */
.ffnick .symgrid{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;}
.ffnick .sym-btn{flex:1 1 auto;min-width:44px;max-width:min(260px,100%);min-height:44px;padding:8px 10px;border:1px solid #ddd;background:#fff;color:var(--ff-ink);border-radius:4px;font-size:20px;font-weight:400;line-height:1.5;overflow-wrap:anywhere;cursor:pointer;}
.ffnick .sym-btn:hover{background:#f3f3f3;}
.ffnick .sym-btn.ok{background:var(--ff-ok);color:#fff;}

/* ============================================================
   Tables (top 100)
   ============================================================ */
.ffnick table{width:100%;border-collapse:collapse;margin-top:10px;}
.ffnick th,.ffnick td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--ff-soft);font-size:15px;}
.ffnick th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#888;border-bottom:1px solid #ddd;}
.ffnick td.rk{width:40px;color:#999;}
.ffnick td.nm{font-size:18px;}
.ffnick td.cp{width:90px;color:#666;white-space:nowrap;}
.ffnick td.empty{color:#888;text-align:center;padding:18px;}

/* top 15 list */
.ffnick ol.t15{list-style:decimal;padding-left:26px;margin:10px 0;}
.ffnick ol.t15 li{padding:6px 0;border-bottom:1px solid #f0f0f0;display:list-item;}
.ffnick ol.t15 .nm{font-size:18px;margin-right:10px;}
.ffnick ol.t15 .vw{color:#888;font-size:13px;margin-right:10px;}

/* ============================================================
   Submit form
   ============================================================ */
.ffnick form.sub{display:flex;flex-direction:column;gap:10px;max-width:420px;margin-top:10px;}
.ffnick form.sub label{font-size:13px;color:#555;}
.ffnick .subitem{display:flex;justify-content:space-between;gap:10px;border:1px solid var(--ff-soft);border-radius:4px;padding:8px 10px;margin-top:6px;}
.ffnick .subitem .nm{font-size:17px;}
.ffnick .subitem .ct{font-size:12px;color:#888;white-space:nowrap;}
.ffnick .form-msg{color:var(--ff-ok);font-size:14px;min-height:18px;}

/* ============================================================
   FAQ + content article helpers (guide/about pages)
   ============================================================ */
.ffnick .faq h3{margin-top:16px;}
.ffnick .faq p{color:#444;}
.entry-content .callout{background:#fbf4ef;border:1px solid #f0d9c8;border-radius:6px;padding:14px 16px;margin:18px 0;}
.entry-content .callout h2,.entry-content .callout h3{border:0;margin:0 0 6px;padding:0;font-size:16px;}
.entry-content .toc{background:#fafafa;border:1px solid #ececec;border-radius:6px;padding:14px 18px;margin:18px 0;}
.entry-content ol.steps{counter-reset:step;list-style:none;padding-left:0;}
.entry-content ol.steps li{position:relative;padding:4px 0 10px 40px;margin:0;}
.entry-content ol.steps li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:2px;width:26px;height:26px;border-radius:50%;background:var(--ff-ink);color:#fff;font-size:14px;display:flex;align-items:center;justify-content:center;}
.entry-content .ex{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;}
.entry-content .ex span{border:1px solid #e2e2e2;border-radius:4px;padding:6px 12px;font-size:18px;}

/* ============================================================
   Detail page extras
   ============================================================ */
.ffnick .breadcrumb{font-size:13px;color:#888;margin:16px 0 4px;}
.ffnick .breadcrumb a{color:#888;}
.ffnick .breadcrumb a:hover{color:var(--ff-accent);}
.ffnick .loadmore-wrap{text-align:center;margin:16px 0;}

/* ============================================================
   Suggestion chips + recently searched
   ============================================================ */
#ff-suggest-bar{margin:14px 0 4px;}
.chips-row{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;margin:8px 0;}
.chips-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#999;padding-top:7px;white-space:nowrap;}
.chips{display:flex;gap:6px;flex-wrap:wrap;}
.ffnick .chip{padding:6px 13px;border:1px solid #ddd;background:#fff;color:var(--ff-ink);border-radius:999px;cursor:pointer;font-size:14px;line-height:1.3;}
.ffnick .chip:hover{border-color:var(--ff-accent);color:var(--ff-accent);}

/* ============================================================
   Trending now
   ============================================================ */
#ff-trending h2 .sub,#ff-foryou h2 .sub{font-size:13px;font-weight:normal;color:#999;}
.trend-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.trend-item{flex:1 1 auto;min-width:min(240px,100%);max-width:100%;}
.trend-item{display:flex;align-items:center;gap:10px;border:1px solid #e2e2e2;border-radius:6px;padding:10px 12px;text-decoration:none;color:var(--ff-ink);background:#fff;}
.trend-item:hover{border-color:var(--ff-accent);text-decoration:none;}
.trend-rk{font-size:13px;color:#bbb;width:18px;flex-shrink:0;text-align:center;}
.trend-name{flex:1 1 auto;font-weight:400;font-size:15px;min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.5;text-transform:capitalize;}
.trend-count{font-size:12px;color:#888;white-space:normal;}
.trend-badge{font-size:12px;font-weight:bold;border-radius:4px;padding:1px 6px;white-space:nowrap;}
.trend-badge.up{color:#1b7a3e;background:#e9f6ee;}
.trend-badge.down{color:#b42318;background:#fdecea;}
.trend-hot{font-size:13px;}

/* ============================================================
   Suggested-for-you cards (tap to copy)
   ============================================================ */
.card-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;}
.card-grid>.ff-card{flex:1 1 auto;min-width:min(150px,100%);max-width:100%;width:auto;}
.ffnick .ff-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:96px;border:1px solid #e2e2e2;border-radius:8px;background:#fff;color:var(--ff-ink);padding:16px 12px;cursor:pointer;text-align:center;}
.ffnick .ff-card:hover{border-color:var(--ff-accent);}
.ff-card-nick{font-size:18px;color:var(--ff-ink);word-break:break-word;line-height:1.4;}
.ff-card-lbl{font-size:11px;color:#999;}
.ffnick .ff-card.copied::after{content:"Copied ✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(27,122,62,.96);color:#fff;border-radius:8px;font-size:15px;font-weight:bold;}

/* ============================================================
   Full nickname list — one per row, show the whole (long) name
   ============================================================ */
#ff-list{grid-template-columns:1fr;}
#ff-list .row{flex-wrap:wrap;}
#ff-list .name{white-space:normal;overflow:visible;text-overflow:clip;font-size:20px;word-break:break-word;min-width:140px;}
.ffnick .skip{position:absolute;left:-999px;}
.ffnick .skip:focus{left:8px;top:8px;background:#fff;padding:8px;border:1px solid var(--ff-accent);}

/* Bảng xếp hạng có 4 cột và ô tên chứa nickname trang trí KHÔNG có khoảng trắng,
   nên trên máy hẹp nó đẩy rộng hơn màn hình và làm cả trang trượt ngang.
   Cho bảng cuộn TRONG khung của nó, và cho chuỗi dài được ngắt. */
.ffnick .tablewrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.ffnick .tablewrap>table{min-width:0;}
.ffnick td.nm,.ffnick td.nm *{overflow-wrap:anywhere;word-break:break-word;}

/* Bình chọn tên nam / nữ */
.ffnick .mf{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;
  padding:12px 14px;border:1px solid var(--ff-line);border-radius:8px;background:var(--ff-soft);}
.ffnick .mf-q{flex:1 1 auto;min-width:min(200px,100%);font-size:14px;color:#555;}
.ffnick .mf-btn{flex:0 0 auto;border:1px solid var(--ff-line);background:#fff;color:var(--ff-ink);
  border-radius:999px;padding:8px 16px;font-size:14px;font-weight:400;cursor:pointer;}
.ffnick .mf-btn:hover{border-color:var(--ff-accent);}
.ffnick .mf-btn[disabled]{opacity:.6;cursor:default;}