/* ===== giao diện ===== */
:root{
  --pink:#ff2d78;--pink2:#ff5fa2;--pink-soft:#fff0f6;--pink-bd:#ffc0d8;
  --purple:#7c4dff;--blue:#2f7cf6;--green:#10b981;--yellow:#ffb51f;--orange:#f97316;
  --ink:#1e2233;--muted:#6b7288;--faint:#9aa1b8;
  --bg:#fff;--card:#fff;--sub:#f8f9fc;--head:rgba(255,255,255,.93);
  --bd:rgba(20,24,40,.07);--bd2:rgba(20,24,40,.12);
  --shadow:0 8px 24px rgba(30,34,51,.05);--shadow-lg:0 18px 48px rgba(30,34,51,.09);
  --r:16px;--wrap:1120px;--pad:26px;--font:'Be Vietnam Pro',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
[data-theme="dark"]{
  --ink:#f3f4fb;--muted:#9aa1b8;--faint:#8b91a6;
  --bg:#13141d;--card:#1c1e2b;--sub:#232637;--head:rgba(19,20,29,.92);
  --bd:rgba(255,255,255,.08);--bd2:rgba(255,255,255,.14);--pink-soft:#2c1a26;--pink-bd:#5b2340;
  --shadow:0 8px 24px rgba(0,0,0,.4);--shadow-lg:0 18px 48px rgba(0,0,0,.5);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--pink);text-decoration:none}
a:hover{color:#d81b60}
button,input,select,textarea{font-family:inherit}
::selection{background:#ffd6e6}
h1,h2,h3,h4,p{margin:0}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--pink);outline-offset:2px}

.ico{display:inline-block;flex:none;width:1em;height:1em;background:currentColor;
  -webkit-mask-image:var(--i);mask-image:var(--i);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}

/* layout */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.page-main{position:relative;z-index:1;padding-bottom:70px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stack{display:flex;flex-direction:column}
.sec{margin-top:44px}
.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--shadow)}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}
.sec-title{display:flex;align-items:center;gap:10px;font:800 19px/1.3 var(--font);letter-spacing:.2px;color:var(--ink)}
.sec-title .ico{font-size:24px}
.link-all{display:flex;align-items:center;gap:4px;font:600 13px var(--font)}
.link-all .ico{font-size:14px}

/* header */
.site-head{position:sticky;top:0;z-index:40;background:var(--head);backdrop-filter:blur(12px);border-bottom:1px solid var(--bd)}
.head-in{height:74px;display:flex;align-items:center;gap:16px}
.logo{display:flex;align-items:center;gap:10px;flex:none}
.logo-x{position:relative;width:36px;height:36px;flex:none}
.logo-x .a,.logo-x .b{position:absolute;-webkit-mask-image:var(--i);mask-image:var(--i);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.logo-x .a{inset:0;background:var(--ink)}
.logo-x .b{left:12px;top:1px;width:24px;height:24px;background:var(--pink)}
.logo-txt{display:flex;flex-direction:column;line-height:1.05}
.logo-txt b{font:800 16px var(--font);letter-spacing:.5px;color:var(--ink)}
.logo-sub{display:flex;align-items:center;gap:5px}
.logo-sub span{font:800 13px var(--font);letter-spacing:.5px;color:var(--ink)}
.tag-ff{font:800 12px var(--font);color:#fff;background:var(--pink);border-radius:5px;padding:1px 5px}
.nav{display:flex;align-items:center;gap:2px;margin:0 auto;padding:0;list-style:none;white-space:nowrap}
.nav li{position:relative}
.nav a{display:block;padding:8px 11px;border-radius:999px;font:700 12px var(--font);letter-spacing:.3px;color:var(--muted);text-transform:uppercase}
.nav a:hover,.nav .on>a{background:var(--pink-soft);color:var(--pink)}
.nav .sub-menu{display:none;position:absolute;left:0;top:100%;min-width:190px;padding:8px;margin:0;list-style:none;background:var(--card);border:1px solid var(--bd);border-radius:12px;box-shadow:var(--shadow-lg)}
.nav li:hover>.sub-menu,.nav li:focus-within>.sub-menu{display:block}
.nav .sub-menu a{text-transform:none;white-space:normal}
.head-act{display:flex;align-items:center;gap:4px;margin-left:auto;flex:none}
.iconbtn{width:38px;height:38px;border:none;border-radius:50%;background:transparent;display:grid;place-items:center;cursor:pointer;color:#3c4257}
[data-theme="dark"] .iconbtn{color:#cfd4e4}
.iconbtn:hover{background:var(--sub)}
.iconbtn .ico{font-size:19px}
.burger{display:none;width:38px;height:38px;border:none;border-radius:10px;background:var(--pink-soft);place-items:center;cursor:pointer;color:var(--pink)}
.burger .ico{font-size:20px}
.mobmenu{display:none;border-top:1px solid var(--bd);background:var(--head)}
.mobmenu.open{display:block;animation:slidedown .18s ease}
.mobnav{margin:0;padding:10px 0 14px;list-style:none;display:flex;flex-direction:column;gap:2px}
.mobmenu .wrap{display:flex;flex-direction:column}
.mobnav a{display:block;padding:12px 14px;border-radius:10px;font:700 13px var(--font);color:var(--muted);text-transform:uppercase}
.mobnav .on>a,.mobnav a:hover{background:var(--pink-soft);color:var(--pink)}
.mobnav .sub-menu{list-style:none;margin:0;padding:0 0 0 14px}
.mobnav .sub-menu a{text-transform:none;font-weight:600}
.headsearch{border-top:1px solid var(--bd);background:var(--head)}
.headsearch .wrap{padding:12px var(--pad)}

/* trang trí */
.decor{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.decor span{position:absolute;display:block}
.dots{background-image:radial-gradient(circle,currentColor 1.7px,transparent 1.8px);background-size:13px 13px;opacity:.8}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes spinslow{to{transform:rotate(360deg)}}
@keyframes pop{from{transform:translate(-50%,14px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@keyframes slidedown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
.float{animation:floaty 5.5s ease-in-out infinite}
.spin{animation:spinslow 28s linear infinite}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* hero */
.hero{padding:48px 0 28px;text-align:center;position:relative}
.hero h1{font:800 38px/1.2 var(--font);letter-spacing:-.5px;color:var(--ink);text-wrap:balance;max-width:900px;margin:0 auto}
.hero p{margin:18px auto 0;max-width:640px;font:500 15.5px/1.6 var(--font);color:var(--muted)}

/* công cụ tạo tên */
.gen{border-radius:24px;padding:28px;box-shadow:var(--shadow-lg);display:grid;grid-template-columns:320px 1fr;gap:26px;margin:8px 0 10px;scroll-margin-top:90px}
.gen-side{gap:14px}
.gen-main{gap:14px;min-width:0}
.gen-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:9px}
.step i{width:21px;height:21px;border-radius:50%;color:#fff;font:800 11px var(--font);display:grid;place-items:center;font-style:normal}
.step b{font:700 14.5px var(--font);color:var(--ink)}
.i1{background:var(--pink)}.i2{background:var(--purple)}.i3{background:var(--blue)}
.field{background:var(--sub);border:1px solid var(--bd2);border-radius:12px;display:flex;align-items:center;padding:0 14px;height:46px;gap:10px}
.field input{flex:1;min-width:0;border:none;outline:none;background:transparent;font:600 14.5px var(--font);color:var(--ink)}
.field .count{font:600 12.5px var(--font);color:var(--faint)}
.selects{display:grid;grid-template-columns:1fr;gap:8px}
.sel{width:100%;height:40px;padding:0 12px;border:1px solid var(--bd2);border-radius:10px;background:var(--sub);color:var(--ink);font:500 13px var(--font);cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),linear-gradient(135deg,var(--faint) 50%,transparent 50%);
  background-position:calc(100% - 16px) 17px,calc(100% - 11px) 17px;background-size:5px 5px;background-repeat:no-repeat;padding-right:32px}
.sel:focus{border-color:var(--pink);outline:none}
.gen-run{display:flex;gap:8px}
.btn{border:none;border-radius:10px;cursor:pointer;font-family:var(--font);display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:filter .15s ease}
.btn:hover{filter:brightness(1.07)}
.btn[disabled]{opacity:.6;cursor:default}
.btn-pink{background:linear-gradient(90deg,var(--pink),var(--pink2));color:#fff;box-shadow:0 6px 16px rgba(255,45,120,.28)}
.btn-ghost{background:var(--sub);border:1px solid var(--bd2);color:var(--muted)}
.btn-run{flex:1;height:46px;font:800 13.5px var(--font);letter-spacing:.4px}
.btn-run .ico{font-size:17px}
.gen-run .btn-ghost{width:46px;height:46px;flex:none}
.gen-run .btn-ghost .ico{font-size:18px}
.btn-block{width:100%;height:40px;margin-top:14px;font:700 13.5px var(--font)}
.btn-lg{height:48px;padding:0 26px;font:800 13.5px var(--font);letter-spacing:.4px}
.is-busy .ico{animation:spin .9s linear infinite}
.panel{background:var(--sub);border:1px solid var(--bd);border-radius:14px;padding:16px}
.panel-h{display:flex;align-items:center;gap:8px;margin-bottom:13px;font:700 13.5px var(--font);color:var(--ink)}
.panel-h .ico{font-size:16px;color:var(--pink)}
.symbols{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.sym{height:34px;border:1px solid var(--bd2);background:var(--card);border-radius:9px;font:500 14px var(--font);color:var(--ink);cursor:pointer;display:grid;place-items:center;overflow:hidden;transition:transform .12s ease,border-color .12s ease,color .12s ease}
.sym:hover{border-color:var(--pink);color:var(--pink);transform:translateY(-2px)}
.sym.more{display:none}
.symbols.open .sym.more{display:grid}
.tabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tab{padding:9px 15px;border-radius:10px;border:1px solid var(--bd2);background:var(--card);color:var(--muted);font:700 12.5px var(--font);cursor:pointer;transition:all .15s ease;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tab:hover{border-color:var(--pink);color:var(--pink)}
.tab.on{background:var(--pink);border-color:var(--pink);color:#fff}
.acts{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.linkbtn{display:flex;align-items:center;gap:6px;border:none;background:transparent;cursor:pointer;font:600 12.5px var(--font);color:var(--pink);padding:0}
.linkbtn.danger{color:#e0396b}
.linkbtn .ico{font-size:15px}
.results{display:flex;flex-direction:column;gap:10px;min-height:120px;max-height:430px;overflow-y:auto;overscroll-behavior:contain;padding:2px 8px 2px 2px}
.results::-webkit-scrollbar{width:6px}
.results::-webkit-scrollbar-thumb{background:var(--pink-bd);border-radius:8px}
.results::-webkit-scrollbar-track{background:var(--sub);border-radius:8px}
.results-hint{font:500 13.5px/1.7 var(--font);color:var(--muted);padding:12px 2px}
.res-sec{margin:6px 0 -2px;font:800 12px var(--font);letter-spacing:.5px;text-transform:uppercase;color:var(--faint)}
.res{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--bd2);border-radius:12px;padding:10px 12px 10px 16px;transition:box-shadow .15s ease,border-color .15s ease}
.res:hover{box-shadow:0 6px 18px rgba(30,34,51,.08);border-color:var(--pink-bd)}
.res-txt{flex:1;min-width:0;font:500 15.5px var(--font);color:var(--ink);letter-spacing:.6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fav{width:32px;height:32px;border:none;background:transparent;display:grid;place-items:center;cursor:pointer;border-radius:8px;color:#b9bfd0}
.fav:hover{background:var(--pink-soft)}
.fav .ico{font-size:18px}
.fav.on{color:var(--pink)}
.btn-copy{height:34px;padding:0 14px;border-radius:9px;font:700 11.5px var(--font);letter-spacing:.5px}
.btn-copy .ico{font-size:14px}

/* biểu tượng gợi ý */
.emojis{padding:18px;margin-top:16px}
.emoji-grid{display:flex;flex-wrap:wrap;gap:8px}
.emoji{border:1px solid var(--bd2);background:var(--sub);border-radius:9px;min-width:38px;height:38px;padding:0 8px;font-size:17px;cursor:pointer;color:var(--ink)}
.emoji:hover{border-color:var(--pink)}

/* tên do cộng đồng đóng góp */
.comm{padding:22px;margin-top:16px}
.comm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.comm-name{color:var(--pink)}
.comm-count{font:600 12.5px var(--font);color:var(--faint)}
.comm-body{min-width:0}
.comm-latest{padding-top:4px}
.comm-sub{display:flex;align-items:center;gap:8px;margin:22px 0 12px;font:800 13px var(--font);letter-spacing:.3px;color:var(--ink)}
.comm-sub .ico{font-size:15px;color:var(--pink)}
.nicks{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.nick{display:flex;align-items:center;gap:8px;background:var(--sub);border:1px solid var(--bd);border-radius:11px;padding:9px 10px 9px 13px}
.nick-txt{flex:1;min-width:0;font:500 14.5px var(--font);color:var(--ink);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nick-like{display:flex;align-items:center;gap:5px;border:none;background:transparent;cursor:pointer;color:var(--muted);font:700 11.5px var(--font);padding:4px 6px;border-radius:8px}
.nick-like:hover,.nick-like.on{background:var(--pink-soft);color:var(--pink)}
.nick-like .ico{font-size:14px}
.nick-by{display:block;font:400 10.5px var(--font);color:var(--faint);margin-top:2px}
.comm-form{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap}
.comm-form input{flex:1;min-width:200px;height:44px;padding:0 14px;border:1px solid var(--bd2);border-radius:11px;background:var(--sub);color:var(--ink);font:500 14px var(--font)}
.comm-form input:focus{outline:none;border-color:var(--pink)}
.comm-form .btn{height:44px;padding:0 20px;font:800 12.5px var(--font);letter-spacing:.4px}

/* thẻ tên phổ biến */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip-name{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;background:var(--sub);border:1px solid var(--bd);color:var(--ink);font:600 13px var(--font)}
.chip-name:hover{border-color:var(--pink);color:var(--pink)}
.chip-name b{font:700 11px var(--font);color:var(--faint)}

/* thẻ tính năng */
.feat{padding:24px 20px 0;text-align:center;overflow:hidden;transition:transform .18s ease}
.feat:hover{transform:translateY(-4px)}
.feat .bubble{width:54px;height:54px;margin:0 auto;border-radius:16px;display:grid;place-items:center}
.feat .bubble .ico{font-size:26px}
.feat h3{margin:16px 0 8px;font:700 14.5px var(--font);color:var(--ink)}
.feat p{margin:0 0 22px;font:400 12.5px/1.65 var(--font);color:var(--muted)}
.feat .bar{height:4px;margin:0 -20px}
.tint-purple{background:#f3ecff;color:var(--purple)}
.tint-blue{background:#e8f1ff;color:var(--blue)}
.tint-green{background:#e6f9f1;color:var(--green)}
.tint-yellow{background:#fff6e0;color:var(--yellow)}
.tint-pink{background:var(--pink-soft);color:var(--pink)}
.bg-purple{background:var(--purple)}.bg-blue{background:var(--blue)}.bg-green{background:var(--green)}.bg-yellow{background:var(--yellow)}.bg-pink{background:var(--pink)}

/* tên được yêu thích */
.hot{overflow:hidden;cursor:pointer;transition:transform .18s ease}
.hot:hover{transform:translateY(-4px)}
.hot-name{padding:26px 12px;text-align:center;font:500 16px var(--font);letter-spacing:1.4px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hot-foot{border-top:1px solid var(--bd);padding:11px;display:flex;align-items:center;justify-content:center;gap:6px;font:700 12.5px var(--font);color:var(--pink)}
.hot-foot .ico{font-size:14px}

/* công cụ */
.tool{border-radius:18px;padding:24px 20px;text-align:center;border:1px solid}
.tool .bubble{width:52px;height:52px;margin:0 auto;border-radius:15px;background:#fff;display:grid;place-items:center}
.tool .bubble .ico{font-size:25px}
.tool h3{margin:15px 0 8px;font:700 14.5px var(--font);color:#1e2233}
.tool p{margin:0 0 18px;font:400 12.5px/1.6 var(--font);color:#6b7288}
.tool .btn{padding:9px 18px;border-radius:9px;color:#fff;font:700 11.5px var(--font);letter-spacing:.5px}
.tool-pink{background:linear-gradient(180deg,#fff1f7,#fff8fb);border-color:#ffdcea}
.tool-blue{background:linear-gradient(180deg,#eef5ff,#f8fbff);border-color:#d9e7fb}
.tool-green{background:linear-gradient(180deg,#ecfaf3,#f7fdfa);border-color:#d3f0e2}
.tool-yellow{background:linear-gradient(180deg,#fff8e8,#fffdf6);border-color:#f7e6bf}

/* dải kêu gọi */
.cta{margin-top:44px;position:relative;overflow:hidden;border-radius:18px;background:linear-gradient(100deg,#7c3aed,#a855f7 42%,#ff2d78 78%,#f43f7e);padding:30px 40px;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 34px rgba(124,58,237,.28)}
.cta span.deco{position:absolute}
.cta-title{font:800 24px var(--font);color:#fff;letter-spacing:.3px;text-align:center}
.cta-script{font:400 28px 'Pacifico',cursive;color:#ffd43c;margin-top:2px;text-align:center}

/* chân trang */
.site-foot{position:relative;z-index:1;background:var(--card);border-top:1px solid var(--bd)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:34px;padding:44px var(--pad) 26px}
.foot-brand .logo{margin-bottom:18px}
.foot-brand p,.foot-col p{margin:16px 0 18px;max-width:320px;font:400 12.5px/1.7 var(--font);color:var(--muted)}
.foot-col h4,.foot-col .widget-title{margin:0 0 16px;font:800 13px var(--font);letter-spacing:.6px;color:var(--ink);text-transform:uppercase}
.foot-col ul,.foot-links{display:flex;flex-direction:column;gap:11px;margin:0;padding:0;list-style:none}
.foot-col ul a,.foot-links a{font:400 12.5px var(--font);color:var(--muted)}
.foot-col ul a:hover,.foot-links a:hover{color:var(--pink)}
.foot-col .textwidget{color:var(--muted);font:400 12.5px/1.7 var(--font)}
.copyright{border-top:1px solid var(--bd)}
.copyright p{padding:18px var(--pad);text-align:center;font:400 12px var(--font);color:var(--faint)}

/* nút nổi + thông báo */
.fab{position:fixed;right:26px;bottom:26px;z-index:50;width:44px;height:44px;border:none;border-radius:50%;background:linear-gradient(135deg,#7c3aed,var(--pink));display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 24px rgba(124,58,237,.35);color:#fff;opacity:0;pointer-events:none;transition:opacity .2s ease}
.fab.show{opacity:1;pointer-events:auto}
.fab .ico{font-size:19px}
.toast{position:fixed;left:50%;bottom:34px;z-index:60;transform:translateX(-50%);display:none;align-items:center;gap:9px;background:#1e2233;color:#fff;padding:12px 20px;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.28);max-width:calc(100vw - 30px)}
.toast.show{display:flex;animation:pop .22s ease}
.toast .ico{font-size:16px;color:#34d399}
.toast span.msg{font:600 13px var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* breadcrumb + đầu trang */
.crumb{display:flex;align-items:center;gap:7px;font:500 12px var(--font);color:var(--faint);flex-wrap:wrap}
.crumb a{color:var(--faint)}
.crumb a:hover{color:var(--pink)}
.crumb .ico{font-size:13px;color:#c3c8d6}
.crumb .now{color:var(--pink)}
.page-head{padding:38px 0 26px}
.page-head h1{margin-top:16px;font:800 36px/1.18 var(--font);letter-spacing:-.4px;color:var(--ink)}
.page-head p{margin-top:14px;max-width:640px;font:500 15px/1.65 var(--font);color:var(--muted)}

/* danh sách bài viết */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px;border-radius:var(--r);flex-wrap:wrap}
label.search{display:flex;align-items:center;gap:9px;background:var(--sub);border:1px solid var(--bd2);border-radius:11px;height:42px;padding:0 14px;min-width:220px;flex:1;max-width:300px}
label.search .ico{font-size:16px;color:var(--faint)}
label.search input{flex:1;min-width:0;border:none;outline:none;background:transparent;font:500 13.5px var(--font);color:var(--ink)}
.searchform{display:flex;gap:10px;align-items:center}
.searchform label.search{max-width:none}
.searchform .btn{height:42px;padding:0 20px;font:800 12.5px var(--font);letter-spacing:.4px}
.doc{display:grid;grid-template-columns:1fr 320px;gap:30px;margin-top:28px;align-items:start}
.feed{min-width:0;display:flex;flex-direction:column;gap:18px}
.thumb{overflow:hidden;background:var(--sub)}
.thumb img{width:100%;height:100%;object-fit:cover}
.ph{background-image:repeating-linear-gradient(135deg,#eef1f8 0 10px,#f7f9fd 10px 20px)}
[data-theme="dark"] .ph{filter:brightness(.45)}
.lead{display:grid;grid-template-columns:minmax(0,320px) 1fr;border-radius:18px;overflow:hidden;transition:transform .18s ease}
.lead:hover{transform:translateY(-3px)}
.lead-thumb{position:relative;min-height:210px}
.lead-thumb .thumb,.lead-thumb .ph{height:100%;min-height:210px}
.pill-hot{position:absolute;top:14px;left:14px;padding:5px 11px;border-radius:999px;background:var(--pink);color:#fff;font:700 10.5px var(--font);letter-spacing:.5px}
.lead-body{padding:26px;display:flex;flex-direction:column;gap:11px}
.lead-body h2{font:800 22px/1.35 var(--font);color:var(--ink);text-wrap:pretty}
.lead-body p{font:400 13.5px/1.7 var(--font);color:var(--muted)}
.more{display:flex;align-items:center;gap:6px;margin-top:auto;font:700 12.5px var(--font);color:var(--pink)}
.more .ico{font-size:15px}
.card.post{display:grid;grid-template-columns:200px 1fr;overflow:hidden;transition:transform .18s ease,border-color .18s ease}
.card.post:hover{transform:translateY(-3px);border-color:var(--pink-bd)}
.card.post .thumb,.card.post .ph{min-height:150px;height:100%}
.post-body{padding:20px 22px;display:flex;flex-direction:column;gap:9px}
.meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:400 11.5px var(--font);color:var(--faint)}
.meta .ico{font-size:12px;margin-right:4px}
.chip{padding:4px 10px;border-radius:999px;font:700 10.5px var(--font);letter-spacing:.4px}
.post-body h3{font:700 16.5px/1.42 var(--font);color:var(--ink);text-wrap:pretty}
.post-body p{font:400 13px/1.68 var(--font);color:var(--muted)}
.empty{border:1px dashed var(--bd2);border-radius:var(--r);padding:44px;text-align:center;display:none;box-shadow:none}
.empty.show{display:block}
.empty .ico{font-size:30px;color:#c3c8d6}
.empty b{display:block;margin:12px 0 4px;font:700 15px var(--font);color:var(--ink)}
.empty p{font:400 13px var(--font);color:var(--muted);margin-bottom:14px}
.empty .searchform{justify-content:center}
.pager{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.pager .page-numbers{min-width:40px;height:40px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--bd2);border-radius:10px;background:var(--card);color:var(--muted);font:700 13px var(--font)}
.pager .page-numbers:hover{border-color:var(--pink);color:var(--pink)}
.pager .current{background:var(--pink);border-color:var(--pink);color:#fff}
aside{display:flex;flex-direction:column;gap:18px;min-width:0}
.side{padding:22px}
.side h4,.side .widget-title{margin-bottom:14px;font:800 13.5px var(--font);letter-spacing:.4px;color:var(--ink);display:flex;align-items:center;gap:9px}
.side h4 .ico{font-size:19px;color:var(--orange)}
.pop{display:flex;flex-direction:column;gap:14px}
.pop a{display:flex;gap:12px;align-items:flex-start;font:600 13px/1.5 var(--font);color:var(--ink)}
.pop a:hover{color:var(--pink)}
.pop i{flex:none;width:26px;height:26px;border-radius:8px;background:var(--pink-soft);color:var(--pink);font:800 12px var(--font);font-style:normal;display:grid;place-items:center}
.side-cta{border-radius:var(--r);padding:22px;background:linear-gradient(150deg,#7c3aed,#ff2d78);box-shadow:0 12px 28px rgba(124,58,237,.26);position:relative;overflow:hidden}
.side-cta .glow{position:absolute;right:-6px;top:-6px;font-size:70px;color:rgba(255,255,255,.22)}
.side-cta h4{color:#fff;margin:0 0 8px;font:800 16px/1.35 var(--font)}
.side-cta p{margin:0 0 16px;font:400 12.5px/1.65 var(--font);color:rgba(255,255,255,.88)}
.side-cta a{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:10px;background:#fff;color:var(--pink);font:700 12.5px var(--font)}
.side-widgets .widget+.widget{margin-top:18px}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags a{padding:7px 12px;border-radius:8px;background:var(--sub);border:1px solid var(--bd);color:var(--muted);font:600 11.5px var(--font)}
.tags a:hover{border-color:var(--pink);color:var(--pink)}

/* bài viết */
.progress{position:fixed;left:0;top:0;height:3px;width:0;z-index:60;background:linear-gradient(90deg,#7c3aed,var(--pink))}
.art-head{padding:32px 0 20px;max-width:820px}
.pill-cat{display:inline-block;padding:5px 12px;border-radius:999px;background:var(--pink-soft);color:var(--pink);font:700 11px var(--font);letter-spacing:.5px;margin-top:18px}
.art-h1{margin-top:14px;font:800 34px/1.24 var(--font);letter-spacing:-.4px;color:var(--ink);text-wrap:pretty}
.art-lead{margin-top:16px;font:500 15.5px/1.7 var(--font);color:var(--muted)}
.art-meta{display:flex;align-items:center;gap:16px;margin-top:20px;flex-wrap:wrap}
.art-meta .bit{display:flex;align-items:center;gap:6px;font:400 12px var(--font);color:var(--faint)}
.art-meta .bit .ico{font-size:13px}
.art-acts{display:flex;gap:8px;margin-left:auto}
.chipbtn{display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:10px;border:1px solid var(--bd2);background:var(--card);color:var(--muted);font:700 12px var(--font);cursor:pointer}
.chipbtn:hover{border-color:var(--pink);color:var(--pink)}
.chipbtn .ico{font-size:14px}
.cover{border-radius:18px;overflow:hidden;max-height:460px}
.cover img{width:100%;object-fit:cover}
.body{min-width:0;max-width:820px}
.toc{position:sticky;top:96px;padding:20px}
.toc h4{margin-bottom:14px;font:800 12.5px var(--font);letter-spacing:.5px;color:var(--ink)}
.toc nav{display:flex;flex-direction:column;gap:3px;max-height:52vh;overflow:auto}
.toc a{padding:8px 11px;border-radius:9px;font:600 12.5px/1.5 var(--font);border-left:3px solid transparent;color:var(--muted)}
.toc a:hover{background:var(--pink-soft);color:var(--pink)}
.toc a.on{background:var(--pink-soft);color:var(--pink);border-left-color:var(--pink)}
.toc .btn{margin-top:16px;height:42px;border-radius:11px;width:100%;font:700 12.5px var(--font);color:#fff}
.taglist{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--bd);margin-top:26px}
.taglist b{font:600 12px var(--font);color:var(--faint)}
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.prevnext a{background:var(--sub);border:1px solid var(--bd);border-radius:14px;padding:16px 18px;font:700 13.5px/1.5 var(--font);color:var(--ink)}
.prevnext a:hover{border-color:var(--pink)}
.prevnext span{display:flex;align-items:center;gap:6px;font:600 11.5px var(--font);color:var(--faint);margin-bottom:6px}
.prevnext .nx{justify-content:flex-end}
.prevnext .next{text-align:right}
.rel{overflow:hidden;transition:transform .18s ease}
.rel:hover{transform:translateY(-3px)}
.rel .thumb,.rel .ph{aspect-ratio:16/9}
.rel-body{padding:18px}
.rel-body .chip{display:inline-block;background:#f3ecff;color:var(--purple)}
.rel-body h3{margin:11px 0 8px;font:700 15px/1.45 var(--font);color:var(--ink);text-wrap:pretty}
.rel-body .date{font:400 11.5px var(--font);color:var(--faint)}

/* 404 */
.err404{padding:60px 0 40px;text-align:center}
.err404-code{font:800 96px/1 var(--font);letter-spacing:-4px;background:linear-gradient(100deg,#7c3aed,var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.err404 h1{margin-top:16px;font:800 30px/1.25 var(--font);color:var(--ink)}
.err404 p{margin:14px auto 0;max-width:560px;font:500 14.5px/1.7 var(--font);color:var(--muted)}
.err404-acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.err404-search{max-width:460px;margin:22px auto 0}

/* ===== nội dung bài viết (thay cho CSS khối mặc định) ===== */
.entry{min-width:0}
.entry>*{margin-bottom:18px}
.entry p{font:400 15px/1.85 var(--font);color:var(--muted)}
.entry strong{color:var(--ink)}
.entry h2{margin:34px 0 14px;font:800 22px/1.35 var(--font);color:var(--ink);scroll-margin-top:96px}
.entry h3{margin:26px 0 12px;font:700 18px/1.4 var(--font);color:var(--ink);scroll-margin-top:96px}
.entry h4{margin:22px 0 10px;font:700 16px/1.4 var(--font);color:var(--ink)}
.entry ul,.entry ol{margin:0 0 18px;padding-left:22px;font:400 15px/1.9 var(--font);color:var(--muted)}
.entry li{margin-bottom:4px}
.entry img{border-radius:14px;margin-inline:auto}
.entry figure{margin:0 0 22px}
.entry figcaption,.entry .wp-element-caption{text-align:center;font:400 12px var(--font);color:var(--faint);margin-top:8px}
.entry blockquote{margin:0 0 24px;padding:18px 22px;border-left:4px solid var(--pink);background:var(--pink-soft);border-radius:0 12px 12px 0}
.entry blockquote p{margin:0;font:500 14.5px/1.8 var(--font);color:#8a2554}
[data-theme="dark"] .entry blockquote p{color:#ffb0d0}
.entry code{background:var(--sub);border:1px solid var(--bd);border-radius:6px;padding:2px 6px;font-size:13px}
.entry pre{background:var(--sub);border:1px solid var(--bd);border-radius:12px;padding:16px;overflow:auto}
.entry hr{border:none;border-top:1px solid var(--bd);margin:28px 0}
.entry table{width:100%;border-collapse:collapse;font:400 14px/1.6 var(--font);color:var(--muted);margin-bottom:22px}
.entry .wp-block-table{overflow-x:auto}
.entry th,.entry td{border:1px solid var(--bd2);padding:10px 12px;text-align:left}
.entry th{background:var(--sub);color:var(--ink);font-weight:700}
.entry tr:nth-child(even) td{background:rgba(127,127,127,.03)}
.entry .wp-block-buttons{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0}
.entry .wp-block-button__link{display:inline-flex;align-items:center;padding:11px 20px;border-radius:10px;background:linear-gradient(90deg,var(--pink),var(--pink2));color:#fff;font:700 13px var(--font)}
.entry .wp-block-columns{display:flex;gap:22px;flex-wrap:wrap}
.entry .wp-block-column{flex:1;min-width:240px}
.entry .wp-block-group{margin-bottom:18px}
.entry .aligncenter{margin-inline:auto;text-align:center}
.entry .alignright{float:right;margin:0 0 16px 20px}
.entry .alignleft{float:left;margin:0 20px 16px 0}
.entry .alignwide,.entry .alignfull{max-width:100%}
.entry .has-text-align-center{text-align:center}
.entry .has-text-align-right{text-align:right}
.entry iframe,.entry video{max-width:100%;border-radius:14px}
.entry .gen,.entry .comm,.entry .emojis,.entry .sec{margin-left:0;margin-right:0}
.entry #toc_container{background:var(--sub)!important;border:1px solid var(--bd)!important;border-radius:14px;padding:16px 20px;font-family:var(--font);max-width:100%}
.entry #toc_container a{color:var(--muted)}
.entry #toc_container a:hover{color:var(--pink)}
.page-tool .entry{max-width:none}

/* ===== responsive ===== */
@media (max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .gen,.doc{grid-template-columns:1fr}
  .toc{position:static}
  .hero h1{font-size:32px}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .selects{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:860px){
  :root{--pad:15px}
  .nav{display:none}
  .burger{display:grid}
  .decor{display:none}
  .hero{padding:30px 0 20px}
  .hero h1{font-size:27px}
  .lead,.card.post{grid-template-columns:1fr}
  .lead-thumb,.lead-thumb .thumb,.lead-thumb .ph{min-height:180px}
  .card.post .thumb,.card.post .ph{aspect-ratio:16/9;min-height:0}
  .foot-grid{grid-template-columns:1fr 1fr;gap:26px}
  .page-head h1{font-size:28px}
  .art-h1{font-size:27px}
  .prevnext{grid-template-columns:1fr}
  .prevnext .next{text-align:left}
  .prevnext .nx{justify-content:flex-start}
  .art-acts{margin-left:0}
  .results{max-height:none}
}
@media (max-width:600px){
  .grid-4,.grid-3,.grid-2,.foot-grid{grid-template-columns:1fr}
  .hero h1{font-size:23px}
  .hero p{font-size:14px}
  .page-head h1{font-size:24px}
  .art-h1{font-size:23px}
  .gen{padding:16px;border-radius:18px}
  .card,.side,.toolbar,.comm{padding:16px}
  .lead-body,.post-body,.rel-body{padding:18px}
  .cta{padding:22px 16px}
  .cta-title{font-size:17px}
  .cta-script{font-size:22px}
  .toolbar{flex-direction:column;align-items:stretch}
  label.search{max-width:none}
  .selects{grid-template-columns:1fr}
  .res{padding:10px}
  .res-txt{font-size:14.5px}
  .btn-copy{padding:0 12px}
  .entry h2{font-size:19px}
  .err404-code{font-size:70px}
  .fab{right:15px;bottom:15px}
  .nicks{grid-template-columns:1fr 1fr}
}
@media (max-width:380px){
  .symbols{grid-template-columns:repeat(3,1fr)}
  .btn-copy span.lbl{display:none}
  .nicks{grid-template-columns:1fr}
}