@font-face{font-family:KH;font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/h-vi.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:KH;font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/h-la.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--bg:#0b1222;--s1:#0f172a;--s2:#16213a;--s3:#1d2a48;--line:rgba(148,163,184,.18);--tx:#e6ecf7;--mut:#9fb0c8;--pri:#7c3aed;--pri-h:#6d28d9;--acc:#06b6d4;--acc-t:#22d3ee;--ok:#34d399;--bad:#fb7185;--r:14px;--wrap:1120px;--read:760px;--wide:1080px;--fh:KH,"Chakra Petch","Segoe UI",system-ui,sans-serif;--fb:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--bg);color:var(--tx);font:400 16px/1.7 var(--fb);overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;height:auto}
a{color:var(--acc-t);text-underline-offset:3px}
a:hover{color:#67e8f9}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--acc-t);outline-offset:2px;border-radius:6px}
.k-i{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.k-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.k-skip{position:absolute;left:12px;top:-60px;background:var(--pri);color:#fff;padding:10px 14px;border-radius:8px;z-index:200}
.k-skip:focus{top:10px}
.k-wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(14px,3.5vw,24px)}

/* header */
.k-head{position:sticky;top:0;z-index:60;background:rgba(11,18,34,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.k-head__in{display:flex;align-items:center;gap:14px;min-height:64px}
.k-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--tx);min-width:0}
.k-logo{display:block;width:auto;height:38px;filter:brightness(0) invert(1)}
.k-logo-t{font:700 1.15rem var(--fh)}
.k-tag{font-size:.78rem;color:var(--mut);padding-left:12px;border-left:1px solid var(--line);white-space:nowrap}
.k-nav{margin-left:auto}
.k-nav__l{list-style:none;margin:0;padding:0;display:flex;gap:2px}
.k-nav a{display:block;padding:9px 13px;border-radius:10px;color:var(--tx);text-decoration:none;font-size:.95rem;font-weight:500}
.k-nav a:hover{background:var(--s3)}
.k-nav .current-menu-item>a,.k-nav .current_page_item>a{color:var(--acc-t);background:rgba(6,182,212,.1)}
.k-act{display:flex;gap:6px}
.k-ib{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--line);background:var(--s2);font-size:1.15rem}
.k-ib:hover{background:var(--s3)}
.k-burger{display:none}
.k-search{border-top:1px solid var(--line);background:var(--s1);padding-block:12px}
.k-search[hidden]{display:none}
.k-sf{display:flex;gap:10px}
.k-sf .k-in{flex:1;min-width:0}
@media(max-width:860px){
 .k-burger{display:grid}
 .k-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--s1);border-bottom:1px solid var(--line);padding:8px clamp(14px,3.5vw,24px) 14px}
 .k-head.is-open .k-nav{display:block}
 .k-nav__l{flex-direction:column}
 .k-nav a{padding:13px 12px}
 .k-act{margin-left:auto}
 .k-nav{margin-left:0}
 .k-tag{display:none}
}

/* hero */
.k-hero{position:relative;padding:clamp(28px,6vw,56px) 0 clamp(18px,3vw,28px);overflow:hidden;background:radial-gradient(60% 90% at 12% 0,rgba(124,58,237,.30),transparent 70%),radial-gradient(50% 80% at 92% 0,rgba(6,182,212,.18),transparent 70%)}
.k-hero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(148,163,184,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.06) 1px,transparent 1px);background-size:36px 36px;-webkit-mask-image:linear-gradient(#000,transparent 85%);mask-image:linear-gradient(#000,transparent 85%);pointer-events:none}
.k-hero .k-wrap{position:relative;z-index:1}
.k-hero h1{margin:0;font:700 clamp(1.65rem,4.6vw,2.7rem)/1.18 var(--fh);letter-spacing:.2px;max-width:24ch;text-wrap:balance}
.k-hero--home h1{max-width:30ch}
.k-hero__sub{max-width:62ch;margin:12px 0 0;color:var(--mut)}
.k-hero__meta{margin:10px 0 0;color:var(--mut);font-size:.9rem}
.k-crumbs{display:flex;gap:8px;flex-wrap:wrap;font-size:.85rem;color:var(--mut);margin-bottom:12px}
.k-crumbs a{color:var(--mut)}
.k-badges{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0}
.k-badges li{padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(15,23,42,.6);font-size:.82rem;color:var(--mut)}
.k-badges li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--acc);margin-right:8px;vertical-align:middle}

/* prose */
.k-prose{display:grid;grid-template-columns:minmax(0,1fr);row-gap:1.05rem;padding-block:clamp(16px,3vw,28px) clamp(36px,6vw,64px)}
.k-prose>*{width:100%;max-width:var(--read);justify-self:center;margin:0;min-width:0}
.k-prose>.k-tool,.k-prose>.k-hist,.k-prose>.k-chips,.k-prose>.wp-block-image,.k-prose>figure{max-width:var(--wide)}
.k-prose h2{font:700 clamp(1.3rem,2.6vw,1.75rem)/1.3 var(--fh);margin-top:1.5rem;text-wrap:balance}
.k-prose h3{font:700 clamp(1.1rem,2vw,1.3rem)/1.35 var(--fh);margin-top:.8rem}
.k-prose h4{font-weight:700;margin-top:.5rem}
.k-prose p,.k-prose li{color:#d5deec}
.k-prose strong{color:#fff}
.k-prose ul,.k-prose ol{padding-left:1.3rem}
.k-prose li{margin:.3rem 0}
.k-prose img{border-radius:12px;display:block;margin-inline:auto}
.k-prose figure{margin:0}
.k-prose figcaption{text-align:center;color:var(--mut);font-size:.85rem;margin-top:8px}
.k-prose blockquote{border-left:3px solid var(--pri);background:var(--s2);margin:0;padding:12px 16px;border-radius:0 12px 12px 0}
.k-prose table{display:block;overflow-x:auto;border-collapse:collapse;max-width:100%;width:max-content;min-width:min(100%,480px)}
.k-prose th,.k-prose td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
.k-prose th{background:var(--s2)}
.k-prose code{background:var(--s3);padding:2px 6px;border-radius:6px;font-size:.9em}
.k-upd{display:inline-block;font-size:.8rem;color:var(--mut);background:var(--s2);border:1px solid var(--line);border-radius:999px;padding:1px 10px;margin-right:6px}
.k-upd::before{content:"Cập nhật ";}
/* khối công cụ nhỏ có sẵn trong bài (mu-plugin chép/đổi chữ) */
.k-prose .lq-conv{background:var(--s2);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.k-prose .lq-conv label{color:var(--tx)}
.k-prose .lq-in{background:var(--bg);color:var(--tx);border:1px solid var(--line);border-radius:12px;min-height:46px;font-size:1rem}
.k-prose .lq-card,.k-prose .lq-chip{background:var(--s3);color:var(--tx);border:1px solid var(--line);border-radius:12px;min-height:44px}
.k-prose .lq-card:hover,.k-prose .lq-chip:hover{border-color:var(--acc)}
.k-prose .lq-ok{border-color:var(--ok);background:rgba(52,211,153,.12)}
.k-prose .lq-m{opacity:.75}
.k-prose .lq-tbl{overflow-x:auto;max-width:var(--wide)}
.k-prose .lq-tbl table{display:table}
.k-prose .lq-tbl th,.k-prose .lq-tbl td{border-color:var(--line)}
.k-prose .lq-note{color:var(--mut);font-size:.9rem}
.k-prose .kdb-namelist{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.k-prose .kdb-namelist li{background:var(--s3);border:1px solid var(--line);border-radius:10px;padding:6px 12px;margin:0}
.k-feat{max-width:var(--read);margin:20px auto 0}
.k-feat img{width:100%;border-radius:var(--r)}

/* công cụ */
.k-tool{background:linear-gradient(180deg,var(--s2),#121b31);border:1px solid rgba(124,58,237,.38);border-radius:20px;padding:clamp(14px,3vw,26px);box-shadow:0 26px 60px -34px rgba(124,58,237,.6)}
.k-tabs{display:inline-flex;gap:4px;padding:4px;background:var(--bg);border:1px solid var(--line);border-radius:14px;margin-bottom:16px}
.k-tab{min-height:42px;padding:8px 18px;border:0;border-radius:10px;background:transparent;color:var(--mut);font-weight:600;display:inline-flex;align-items:center;gap:8px}
.k-tab[aria-selected=true]{background:var(--pri);color:#fff}
.k-pane[hidden]{display:none}
.k-form{display:flex;gap:10px}
.k-in{flex:1;min-width:0;min-height:52px;padding:10px 16px;border-radius:14px;border:1px solid var(--line);background:var(--bg);color:var(--tx);font-size:1.1rem}
.k-in::placeholder{color:#7384a0}
.k-in:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 3px rgba(6,182,212,.22)}
.k-btn{min-height:52px;padding:10px 22px;border:0;border-radius:14px;background:var(--pri);color:#fff;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;white-space:nowrap;transition:background .18s,transform .18s}
.k-btn:hover{background:var(--pri-h);color:#fff}
.k-btn:active{transform:scale(.98)}
.k-btn--g{background:var(--s3);border:1px solid var(--line)}
.k-btn--g:hover{background:#26365c}
.k-btn[disabled]{opacity:.6;cursor:progress}
.k-opt{margin-top:12px}
.k-opt summary{cursor:pointer;color:var(--mut);font-size:.92rem;padding:6px 0;min-height:36px;display:flex;align-items:center}
.k-opt__g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:8px}
.k-sel{display:flex;flex-direction:column;gap:4px;font-size:.82rem;color:var(--mut)}
.k-sel select{min-height:46px;border-radius:12px;border:1px solid var(--line);background:var(--bg);padding:6px 10px;font-size:1rem;color:var(--tx);width:100%}
.k-quick{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 0;color:var(--mut);font-size:.9rem}
.k-chips{display:flex;flex-wrap:wrap;gap:8px}
.k-chip{display:inline-flex;align-items:center;min-height:38px;padding:6px 14px;border-radius:999px;background:var(--s3);border:1px solid var(--line);color:var(--tx);text-decoration:none;font-size:.92rem;transition:border-color .15s,background .15s}
.k-chip:hover{border-color:var(--acc);color:var(--tx)}
.k-chip.is-on{background:var(--pri);border-color:var(--pri);color:#fff}
.k-out{margin-top:20px}
.k-out__bar{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.k-out__t{margin:0;color:var(--mut)}
.k-out__t b{color:#fff;font-family:var(--fh)}
.k-out__n{font-size:.85rem;color:var(--acc-t)}
.k-filter{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:6px;scrollbar-width:thin}
.k-filter[hidden]{display:none}
.k-filter .k-chip{flex:none;white-space:nowrap}
.k-sec{margin-top:18px}
.k-sec[hidden]{display:none}
.k-sec h3{margin:0 0 10px;font:700 1.08rem var(--fh);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.k-sec h3 small{font:400 .78rem var(--fb);color:var(--mut)}
.k-flow{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:10px}
.k-card{display:flex;flex-direction:column;gap:6px;min-width:0;padding:12px;border-radius:12px;background:var(--s3);border:1px solid var(--line);cursor:pointer;transition:border-color .15s,transform .15s}
.k-card:hover{border-color:var(--acc);transform:translateY(-1px)}
.k-card.is-x{display:none}
.k-card h4{margin:0;font-size:.74rem;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}
.k-card p{margin:0;font-size:1.2rem;line-height:1.45;color:#fff;overflow-wrap:anywhere;flex:1}
.k-copy{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:5px 12px;border-radius:10px;border:1px solid var(--line);background:var(--s2);font-size:.85rem}
.k-copy:hover{border-color:var(--acc)}
.k-copy.is-ok{background:rgba(52,211,153,.15);border-color:var(--ok);color:var(--ok)}
.k-more{display:block;margin:12px auto 0;min-height:44px;padding:8px 20px;border-radius:12px;border:1px solid var(--line);background:var(--s2);color:var(--tx)}
.k-more:hover{border-color:var(--acc)}
.k-more[hidden]{display:none}
.k-emoji{margin-top:22px}
.k-emoji[hidden]{display:none}
.k-emoji h3,.k-comm__h{margin:0 0 10px;font:700 1.08rem var(--fh)}
.k-glyphs{display:flex;flex-wrap:wrap;gap:8px}
.k-g{min-width:46px;min-height:46px;padding:6px 12px;border-radius:12px;border:1px solid var(--line);background:var(--s3);color:#fff;font-size:1.3rem;line-height:1.2;max-width:100%;overflow-wrap:anywhere}
.k-g:hover{border-color:var(--acc)}
.k-g.is-ok{border-color:var(--ok);background:rgba(52,211,153,.15)}
.k-g small{display:block;font-size:.7rem;color:var(--mut);font-family:var(--fb)}
.k-glyphs--big{margin-top:6px}
.k-glyphs--k .k-g{font-size:1.05rem}
.k-note{color:var(--mut);font-size:.9rem;margin:12px 0 0}
.k-comm{margin-top:26px;padding-top:20px;border-top:1px dashed var(--line)}
.k-comm[hidden],.k-comm [hidden]{display:none}
.k-comm__h b{color:var(--acc-t)}
.k-comm__s{margin:18px 0 8px;font-size:.95rem;color:var(--mut)}
.k-nicks{display:flex;flex-wrap:wrap;gap:8px}
.k-nick{display:inline-flex;align-items:stretch;max-width:100%;border:1px solid var(--line);border-radius:12px;background:var(--s3);overflow:hidden}
.k-nick>button{border:0;background:transparent;min-height:42px;padding:6px 12px;display:inline-flex;align-items:center;gap:6px}
.k-nick>button:hover{background:#26365c}
.k-nick .k-n{font-size:1.1rem;color:#fff;text-align:left;overflow-wrap:anywhere}
.k-nick .k-l{border-left:1px solid var(--line);font-size:.82rem;color:var(--mut)}
.k-nick .k-l.is-on{color:var(--ok)}
.k-vote{display:grid;gap:10px;margin-bottom:16px}
.k-vote__r{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.k-vote__r>button{min-height:42px;padding:6px 16px;border-radius:12px;border:1px solid var(--line);background:var(--s3);display:inline-flex;align-items:center;gap:8px}
.k-vote__r>button:hover,.k-vote__r>button.is-on{border-color:var(--acc)}
.k-vote__r>button.is-down .k-i{transform:rotate(180deg)}
.k-bar{flex:1;min-width:80px;height:8px;border-radius:99px;background:var(--pri);overflow:hidden}
.k-bar i{display:block;height:100%;width:50%;background:var(--acc);transition:width .3s}
.k-empty{color:var(--mut)}
.k-form--s{margin-top:18px}
.k-hist[hidden]{display:none}
.k-share{margin:0}
.k-chips--r .k-chip{font-size:.9rem}

/* thẻ bài / danh sách */
.k-listing{padding-block:clamp(18px,4vw,32px) clamp(36px,6vw,64px)}
.k-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:18px;margin-top:20px}
.k-pc{background:var(--s2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.k-pc__i{display:block;aspect-ratio:16/9;background:var(--s3);overflow:hidden}
.k-pc__i img{width:100%;height:100%;object-fit:cover;display:block}
.k-pc__ph{display:grid;place-items:center;height:100%;font-size:2rem;color:var(--pri)}
.k-pc__b{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px}
.k-pc h2{margin:0;font:700 1.08rem/1.35 var(--fh)}
.k-pc h2 a{color:var(--tx);text-decoration:none}
.k-pc h2 a:hover{color:var(--acc-t)}
.k-pc p{margin:0;color:var(--mut);font-size:.92rem}
.k-pc time{font-size:.8rem;color:var(--mut)}
.k-rel{padding-bottom:clamp(36px,6vw,64px)}
.k-rel h2{font:700 1.4rem var(--fh);margin:0}
.nav-links{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:28px}
.page-numbers{min-width:44px;min-height:44px;display:grid;place-items:center;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:var(--s2);color:var(--tx);text-decoration:none}
.page-numbers.current{background:var(--pri);border-color:var(--pri)}
.k-empty-p{color:var(--mut);margin-top:24px}
.k-404{text-align:left}
.k-404__n{margin:0;font:700 clamp(3.5rem,14vw,7rem)/1 var(--fh);background:linear-gradient(90deg,var(--pri),var(--acc));-webkit-background-clip:text;background-clip:text;color:transparent}
.k-404 .k-sf{max-width:560px;margin:18px 0}

/* chân trang */
.k-foot{border-top:1px solid var(--line);background:var(--s1);margin-top:auto}
.k-foot__w{padding-block:28px 8px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:24px}
.k-foot__h{margin:0 0 12px;font:700 1rem var(--fh);color:#fff}
.k-widget ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:2px 18px}
.k-widget a{display:inline-block;padding:7px 0;color:var(--mut);text-decoration:none;min-height:36px}
.k-widget a:hover{color:var(--acc-t)}
.k-foot__b{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--line);padding-block:16px;margin-top:18px;color:var(--mut);font-size:.9rem}
.k-foot__b p{margin:0}
.k-top{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--line);background:var(--s2);color:var(--tx)}
body{min-height:100vh;display:flex;flex-direction:column}
.k-main{flex:1 0 auto}

/* thông báo nổi */
.k-toast{position:fixed;left:50%;bottom:22px;z-index:120;max-width:calc(100vw - 28px);transform:translate(-50%,24px);opacity:0;pointer-events:none;background:#0b1222;border:1px solid var(--ok);color:#fff;padding:11px 18px;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.5);transition:opacity .2s,transform .2s}
.k-toast.is-bad{border-color:var(--bad)}
.k-toast.is-on{opacity:1;transform:translate(-50%,0)}

@media(max-width:620px){
 .k-form{flex-direction:column}
 .k-form .k-btn{width:100%}
 .k-opt__g{grid-template-columns:1fr}
 .k-tabs{display:flex}
 .k-tab{flex:1;justify-content:center;padding-inline:10px}
 .k-flow{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}