/* ===== KyTuDacBiet — shared stylesheet ===== */
:root{
  --pink:#ec2329; --pink-deep:#c01a1f; --coral:#001d49; --coral-deep:#001d49;
  --ink:#001d49; --muted:#586274; --muted2:#8b93a1;
  --paper:#fff; --tint-p:#fdecec; --tint-c:#eef2f8;
  --line-p:#f6d2d3; --line-c:#d6dfea; --tile-bd:#e2e6ee;
  --wrap:1140px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#fff;font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:var(--pink-deep);text-decoration:none}
a:hover{color:#a01318}
::selection{background:#f9cccd;color:var(--ink)}
img{max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}

/* ---- header ---- */
.header{position:sticky;top:0;z-index:30;background:#fff;border-bottom:2px solid #f9cccd;box-shadow:0 2px 10px rgba(236,35,41,.08)}
.header-in{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.logo{display:flex;align-items:center;gap:11px;min-width:0}
.logo-mark{width:42px;height:42px;flex:none;background:var(--pink);color:#fff;border-radius:50% 50% 48% 52%/52% 48% 52% 48%;display:flex;align-items:center;justify-content:center;font-size:29.9px;line-height:1;animation:kt-float 5s ease-in-out infinite}
.brand-name{font-size:24.7px;font-weight:900;letter-spacing:.2px;line-height:1.1;color:var(--ink)}
.brand-sub{font-size:15.6px;font-weight:500;color:var(--coral);line-height:1.2}
.nav{flex:1;display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;align-items:center;min-width:0}
.nav a{font-size:18.2px;font-weight:500;color:var(--ink);padding:8px 12px;border-radius:8px}
.nav a:hover,.nav a.active{background:var(--tint-p);color:var(--pink-deep)}
.nav a.active{font-weight:700}

/* ---- hero ---- */
.hero{position:relative;overflow:hidden;background:#fdeeee url('../assets/bubbles.png') no-repeat center/cover;border-bottom:1px solid #f7d3d4}
.hero-ov{position:absolute;inset:0;background:rgba(255,255,255,.6);pointer-events:none}
.hero-in{position:relative;padding:34px 22px 30px;max-width:var(--wrap);margin:0 auto}
.hero h1{margin:0 0 12px;font-size:36.4px;font-weight:900;color:var(--ink);line-height:1.18}
.hero-sub{margin:0 0 4px;font-size:19.5px;color:var(--muted);font-weight:500;max-width:680px}
.hero-list{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:8px;max-width:820px}
.hero-list li{display:flex;gap:9px;font-size:18.9px;line-height:1.5;color:#26324d}
.hero-list li::before{content:"•";color:var(--pink);font-weight:700}
.crumb{font-size:16.2px;font-weight:500;color:#6a7589;margin-bottom:10px}
.crumb a{color:#6a7589}
.crumb .sep{color:#c2c9d4;margin:0 4px}
.crumb .cur{color:var(--pink-deep);font-weight:700}

/* ---- main ---- */
main{padding-top:24px;padding-bottom:24px}
.counter{display:inline-flex;align-items:center;gap:8px;background:var(--tint-c);padding:6px 13px;border-radius:999px;border:1px solid var(--line-c);font-size:16.2px;font-weight:500;color:var(--coral-deep)}
.counter b{font-size:18.2px;font-weight:900;font-variant-numeric:tabular-nums}
.counter-row{display:flex;justify-content:flex-end;margin-bottom:10px}

/* ---- search ---- */
.search{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line-p);border-radius:12px;padding:0 16px;margin-bottom:14px}
.search .ic{font-size:23.4px;color:var(--pink)}
.search input{flex:1;border:none;outline:none;background:transparent;font-size:19.5px;font-weight:500;color:var(--ink);padding:14px 0}
.search .clr{border:none;background:transparent;cursor:pointer;font-size:19.5px;color:var(--muted2);padding:6px}

/* ---- collection box ---- */
.box{background:var(--tint-c);border:1.5px solid var(--line-c);border-radius:14px;padding:14px 16px;margin-bottom:16px}
.box-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.box-head .t{font-size:16.9px;font-weight:700;color:var(--coral-deep)}
.box-head .h{font-size:15.6px;color:#3a4a6b;font-weight:500}
.box textarea{width:100%;min-height:58px;resize:vertical;border:1.5px solid var(--line-c);border-radius:10px;background:#fff;padding:12px 14px;font-size:26px;line-height:1.5;color:var(--ink);outline:none;font-family:inherit}
.box-actions{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.btn{cursor:pointer;font-size:16.9px;font-weight:600;padding:10px 16px;border-radius:9px;border:1.5px solid var(--line-c);background:#fff;color:var(--coral-deep)}
.btn:hover{border-color:var(--coral)}
.btn-primary{border:none;background:var(--pink);color:#fff;font-weight:700;padding:10px 18px}
.btn-primary:hover{background:var(--pink-deep)}

/* ---- generated names ---- */
.names{margin-top:14px;border-top:1px dashed var(--line-p);padding-top:14px}
.names .cap{font-size:16.2px;font-weight:700;color:var(--pink-deep);margin-bottom:10px}
.names-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.name-card{text-align:left;border:1.5px solid #e6e9f0;background:#fff;border-radius:12px;padding:11px 14px;cursor:pointer;display:flex;flex-direction:column;gap:4px}
.name-card:hover{border-color:var(--pink);background:var(--tint-p)}
.name-card .lbl{font-size:13.7px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--coral)}
.name-card .txt{font-size:24.7px;line-height:1.3;color:var(--ink);word-break:break-word}

/* ---- shortcut rows (fav / recent) ---- */
.row{margin-bottom:16px}
.row .cap{font-size:16.9px;font-weight:700;color:var(--pink-deep);margin-bottom:8px;display:flex;align-items:center;gap:10px}
.row .cap .clr{border:none;background:transparent;cursor:pointer;font-size:15.6px;color:var(--muted2);font-weight:500}
.chips{display:flex;flex-wrap:wrap;gap:8px}

/* ---- tabs ---- */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;padding-bottom:16px;border-bottom:1.5px solid #e6e9f0}
.tab{border:1.5px solid var(--tile-bd);background:#fff;color:#33405c;font-weight:500;font-size:17.6px;padding:8px 15px;border-radius:999px;cursor:pointer}
.tab:hover{border-color:var(--pink)}
.tab.active{background:var(--pink);border-color:var(--pink);color:#fff;font-weight:700}
.tab.fancy.active{background:var(--coral);border-color:var(--coral)}

/* ---- grid / tiles ---- */
.g-head{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.g-head .h2{font-size:23.4px;font-weight:900;color:var(--ink)}
.g-head .n{font-size:16.9px;color:var(--muted2);font-weight:500}
.grid{display:flex;flex-wrap:wrap;gap:8px}
.tile{position:relative;flex:none;width:58px;height:58px;background:#fff;border:1.5px solid var(--tile-bd);border-radius:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:35.1px;line-height:1;color:var(--ink);padding:0;transition:transform .13s ease,border-color .13s ease,box-shadow .13s ease}
.tile.phrase{width:auto;max-width:100%;min-height:52px;height:auto;padding:8px 12px;font-size:19.5px;font-family:monospace;line-height:1.3;word-break:break-word;text-align:center}
.tile:hover{border-color:var(--pink);background:var(--tint-p);transform:translateY(-3px);box-shadow:0 6px 16px rgba(236,35,41,.22)}
.tile:active{transform:scale(.92)}
.tile .fav{position:absolute;top:3px;right:4px;font-size:15.6px;line-height:1;cursor:pointer;color:#ccd2dc;padding:2px}
.tile .fav.on{color:var(--pink)}
.empty{text-align:center;padding:56px 20px;color:var(--muted2)}
.empty .big{font-size:49.4px;margin-bottom:8px}
.empty .t{font-size:19.5px;font-weight:600}
.empty .s{font-size:16.9px;margin-top:4px}

/* ---- fancy panel ---- */
.fancy-wrap{background:var(--tint-p);border:1.5px solid var(--line-p);border-radius:14px;padding:16px;margin-bottom:20px}
.fancy-wrap .cap{font-size:16.9px;font-weight:700;color:var(--pink-deep);margin-bottom:10px}
.fancy-wrap input{width:100%;border:1.5px solid var(--line-p);border-radius:10px;background:#fff;padding:14px 16px;font-size:23.4px;font-weight:600;color:var(--ink);outline:none;font-family:inherit}

/* ---- SEO article ---- */
.seo{max-width:var(--wrap);margin:0 auto;padding:14px 22px 20px}
.seo section{padding:2px 0 2px 16px;margin:26px 0;border-left:3px solid var(--pink)}
.seo section.alt{border-left-color:var(--coral)}
.seo section.card{border-left:none;background:var(--tint-p);border-radius:14px;padding:20px 22px}
.seo section.plain{border-left:none;padding-left:0}
.seo h2{margin:0 0 8px;font-size:26px;font-weight:900;color:var(--ink)}
.seo p{margin:0 0 12px;font-size:18.9px;line-height:1.7;color:#33405c}
.seo p:last-child{margin-bottom:0}

/* ---- footer ---- */
.footer{background:var(--tint-c);border-top:2px solid var(--line-c);margin-top:24px}
.footer-in{padding:28px 22px 30px;max-width:var(--wrap);margin:0 auto}
.footer .lead{margin:0 0 16px;font-size:18.2px;line-height:1.7;color:var(--muted);max-width:820px}
.footer .tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.footer .tags a{font-size:16.9px;font-weight:500;color:var(--coral-deep);background:#fff;border:1px solid var(--line-c);padding:6px 12px;border-radius:999px}
.footer .tags a:hover{border-color:var(--pink);color:var(--pink-deep)}
.footer .info{display:grid;gap:5px;font-size:17.6px;line-height:1.6;color:var(--muted);margin-bottom:16px}
.footer .copy{border-top:1px solid var(--line-c);padding-top:14px;font-size:16.9px;color:#6a7589}

/* ---- toast ---- */
.toast{position:fixed;left:50%;bottom:30px;z-index:60;background:var(--ink);color:#fff;padding:12px 22px;border-radius:999px;font-size:18.2px;font-weight:600;box-shadow:0 8px 28px rgba(0,29,73,.32);display:flex;align-items:center;gap:10px;transform:translate(-50%,8px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast .ok{color:#8FE0B0;font-size:20.8px}

/* ---- article list ---- */
.list-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.art{display:flex;gap:16px;padding:20px 4px;border-bottom:1px solid #e8ebf1}
.art-badge{flex:none;width:46px;height:46px;border-radius:50% 50% 47% 53%/53% 47% 53% 47%;display:flex;align-items:center;justify-content:center;font-size:24.7px;font-weight:900}
.art-body{min-width:0;flex:1}
.art-title{margin:0 0 6px;font-size:23.4px;font-weight:700;line-height:1.3}
.art-title a{color:var(--ink)}
.art-title a:hover{color:var(--pink-deep)}
.art-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:16.2px;color:var(--muted2);font-weight:500;margin-bottom:9px}
.art-excerpt{margin:0 0 11px;font-size:18.2px;line-height:1.6;color:#33405c}
.samples{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:11px}
.sample{border:1.5px solid var(--tile-bd);background:#fff;border-radius:12px;padding:7px 12px;font-size:18.2px;font-family:monospace;color:var(--ink);cursor:pointer;transition:transform .13s,border-color .13s,box-shadow .13s}
.sample:hover{border-color:var(--pink);background:var(--tint-p);transform:translateY(-2px);box-shadow:0 5px 14px rgba(236,35,41,.2)}
.more{display:inline-flex;align-items:center;gap:6px;font-size:17.6px;font-weight:700;color:var(--pink-deep)}
.side{display:grid;gap:18px;position:sticky;top:82px}
.side-card{border-radius:16px;padding:16px 18px}
.side-card.p{background:var(--tint-p);border:1.5px solid #f6d2d3}
.side-card.c{background:var(--tint-c);border:1.5px solid var(--line-c)}
.side-card .cap{font-size:18.2px;font-weight:900;color:var(--ink);margin-bottom:12px}
.side-tags{display:flex;flex-wrap:wrap;gap:8px}
.side-tags a{font-size:16.9px;font-weight:600;color:var(--pink-deep);background:#fff;border:1px solid #f6d2d3;padding:6px 12px;border-radius:999px}
.side-tags a:hover{border-color:var(--pink)}
.pop a{display:flex;gap:10px;align-items:baseline;padding:8px 0;border-bottom:1px dashed #dbe2ec;font-size:18.2px;color:var(--ink)}
.pop a:hover{color:var(--coral-deep)}
.pop .rk{font-size:16.9px;font-weight:900;color:var(--coral);flex:none}
.pop .ti{flex:1;font-weight:500}
.pop .vw{font-size:15.6px;color:#6a7589;flex:none}

/* ---- article detail ---- */
.art-head{position:relative;overflow:hidden;background:#fdeeee url('../assets/bubbles.png') no-repeat center/cover;border-radius:0 0 20px 20px;margin-bottom:24px}
.art-head .ov{position:absolute;inset:0;background:rgba(255,255,255,.6);pointer-events:none}
.art-head .in{position:relative;padding:26px 26px 28px}
.art-head h1{margin:0 0 12px;font-size:36.4px;font-weight:900;color:var(--ink);line-height:1.2}
.art-head .meta{display:flex;flex-wrap:wrap;gap:14px;font-size:16.9px;color:#54607a;font-weight:500}
.intro{margin:0 0 8px;font-size:19.5px;line-height:1.75;color:#182642}
.tip{margin:0 0 22px;font-size:18.2px;line-height:1.7;color:#48546f}
.d-h2{margin:0 0 14px;font-size:24.7px;font-weight:900;color:var(--ink)}
.name-list{display:grid;gap:10px;margin-bottom:28px}
.name-row{display:flex;align-items:center;gap:14px;background:#fff;border:1.5px solid var(--tile-bd);border-radius:14px;padding:14px 16px;cursor:pointer;transition:transform .13s,border-color .13s,box-shadow .13s}
.name-row:hover{border-color:var(--pink);background:var(--tint-p);transform:translateY(-2px);box-shadow:0 6px 16px rgba(236,35,41,.16)}
.name-row .idx{flex:none;width:30px;height:30px;border-radius:50%;background:var(--tint-p);color:var(--pink-deep);display:flex;align-items:center;justify-content:center;font-size:16.9px;font-weight:900}
.name-row .txt{flex:1;min-width:0;font-size:26px;font-family:monospace;color:var(--ink);word-break:break-word}
.name-row .plus{flex:none;font-size:16.2px;color:#5a6b7f;font-weight:700}
.name-row .cp{flex:none;font-size:16.2px;font-weight:700;color:var(--pink-deep);background:var(--tint-p);border:1px solid #f6d2d3;padding:6px 12px;border-radius:999px}
.kwbox{background:var(--tint-c);border:1.5px solid var(--line-c);border-radius:16px;padding:16px 18px;margin-bottom:26px}
.kwbox .cap{font-size:17.6px;font-weight:900;color:var(--ink);margin-bottom:11px}
.kwbox .kw{display:flex;flex-wrap:wrap;gap:8px}
.kwbox .kw span{font-size:16.9px;font-weight:500;color:var(--coral-deep);background:#fff;border:1px solid var(--line-c);padding:6px 12px;border-radius:999px}
.mod{display:flex;align-items:center;gap:10px;font-size:17.6px;color:#48546f;padding:14px 16px;background:var(--tint-p);border-radius:12px;margin-bottom:30px}
.related{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-bottom:10px}
.rel-card{display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--tile-bd);border-radius:14px;padding:13px 15px}
.rel-card:hover{border-color:var(--pink);background:var(--tint-p)}
.rel-card .bd{flex:none;width:38px;height:38px;border-radius:50% 50% 47% 53%/53% 47% 53% 47%;display:flex;align-items:center;justify-content:center;font-size:20.8px;font-weight:900}
.rel-card .ti{display:block;font-size:18.9px;font-weight:700;color:var(--ink)}
.rel-card .vw{display:block;font-size:15.6px;color:var(--muted2)}
.back{display:inline-flex;align-items:center;gap:7px;font-size:18.2px;font-weight:700;color:var(--pink-deep);margin-top:22px}

@keyframes kt-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(-4deg)}}

@media(max-width:760px){
  .list-grid{grid-template-columns:1fr}
  .side{position:static}
}

/* ===== WordPress integration additions ===== */
/* nav menu (wp_nav_menu -> ul.nav-list) */
.nav .nav-list{display:flex;gap:4px;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0}
.nav .nav-list li{margin:0}
.nav .nav-list a{font-size:18.2px;font-weight:500;color:var(--ink);padding:8px 12px;border-radius:8px;display:block}
.nav .nav-list a:hover,.nav .nav-list .current-menu-item>a,.nav .nav-list .current_page_item>a{background:var(--tint-p);color:var(--pink-deep)}
.nav .nav-list .current-menu-item>a{font-weight:700}
.footer .tags .nav-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.footer .tags .nav-list a{font-size:16.9px;font-weight:500;color:var(--coral-deep);background:#fff;border:1px solid var(--line-c);padding:6px 12px;border-radius:999px;display:block}
.footer .tags .nav-list a:hover{border-color:var(--pink);color:var(--pink-deep)}

/* generator (bộ tạo tên) */
.ngen{margin-top:8px;margin-bottom:20px}
.ngen-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ngen-form input[type=text]{flex:1;min-width:200px;border:1.5px solid var(--line-p);border-radius:10px;background:#fff;padding:13px 15px;font-size:20.8px;font-weight:600;color:var(--ink);outline:none;font-family:inherit}
.ngen-form input[type=text]:focus{border-color:var(--pink)}
.ngen-results{margin-top:16px}
.res-sec{margin-bottom:18px}
.res-sec .cap{font-size:16.9px;font-weight:700;color:var(--pink-deep);margin-bottom:10px}

/* cộng đồng */
.ncom{margin-top:20px;border-top:1px dashed var(--line-p);padding-top:16px}
.ncom .cap{font-size:17.6px;font-weight:700;color:var(--pink-deep);margin-bottom:10px}
.ncom section{margin-bottom:18px}
.ncom-loading{font-size:16.9px;color:var(--muted2);padding:8px 0}
.ncom-empty{font-size:17.6px;color:var(--muted);padding:8px 0}
.ncom-item{display:inline-flex;align-items:stretch;margin:0 8px 8px 0}
.ncom-item .sample{border-radius:12px 0 0 12px;margin:0}
.ncom-like{border:1.5px solid var(--tile-bd);border-left:none;background:#fff;border-radius:0 12px 12px 0;padding:7px 11px;font-size:16.2px;color:var(--muted);cursor:pointer;display:flex;align-items:center;gap:3px}
.ncom-like:hover,.ncom-like.on{color:var(--pink-deep);border-color:var(--pink)}
.ncom-like b{font-weight:900}
.ncom-more{margin-top:6px}

/* thống kê */
.stats-block{margin:18px 0}
.stats-block .cap{font-size:18.2px;font-weight:900;color:var(--ink);margin-bottom:11px}

/* nội dung WordPress trong post-body */
.post-body{max-width:var(--wrap);margin:0 auto;font-size:19.5px;line-height:1.75;color:#182642}
.post-body h2{margin:26px 0 10px;font-size:26px;font-weight:900;color:var(--ink)}
.post-body h3{margin:20px 0 8px;font-size:22.1px;font-weight:800;color:var(--ink)}
.post-body p{margin:0 0 14px}
.post-body ul,.post-body ol{margin:0 0 14px;padding-left:22px}
.post-body li{margin:0 0 6px}
.post-body a{color:var(--pink-deep);font-weight:600}
.post-body img{border-radius:12px;height:auto}
.post-body table{width:100%;border-collapse:collapse;margin:0 0 16px;display:block;overflow-x:auto}
.post-body td,.post-body th{border:1px solid var(--line-p);padding:8px 10px}

/* pagination */
.pagination{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.pagination .page-numbers{display:inline-flex;min-width:38px;justify-content:center;align-items:center;padding:8px 12px;border:1.5px solid var(--tile-bd);border-radius:9px;font-size:18.2px;font-weight:600;color:var(--ink)}
.pagination .page-numbers.current{background:var(--pink);border-color:var(--pink);color:#fff}
.pagination a.page-numbers:hover{border-color:var(--pink);color:var(--pink-deep)}

@media(max-width:600px){
  .hero h1{font-size:28.6px}
  .art-head h1{font-size:28.6px}
  .nav .nav-list a{padding:6px 9px;font-size:16.9px}
}

/* logo icon = site favicon */
.logo-mark.has-img{background:#fff;padding:0;overflow:hidden}
.logo-mark img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}

/* ===== Mobile nav (hamburger) ===== */
.nav-toggle{display:none;flex:none;width:46px;height:46px;margin-left:auto;padding:0;border:1.5px solid var(--line-p);border-radius:11px;background:#fff;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav-toggle span{display:block;width:22px;height:2.5px;background:var(--ink);border-radius:3px;transition:transform .22s ease,opacity .22s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

@media(max-width:820px){
  .nav-toggle{display:flex}
  .nav{order:3;flex-basis:100%;flex:0 0 100%}
  .nav .nav-list{display:none;flex-direction:column;align-items:stretch;width:100%;gap:2px;padding:8px 0 4px}
  .nav.open .nav-list{display:flex}
  .nav .nav-list li{width:100%;margin:0}
  .nav .nav-list a{display:block;width:100%;padding:13px 14px;border-radius:9px;font-size:16.9px}
  .nav .nav-list li+li a{border-top:1px solid var(--line-p)}
}