/* ---------- nền tảng ---------- */
@font-face{font-family:Mochi;src:url(../fonts/b-vi.woff2) format("woff2");font-weight:600 800;font-display:swap;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:Mochi;src:url(../fonts/b-la.woff2) format("woff2");font-weight:600 800;font-display:swap;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{--p:#6c2bd9;--p2:#5719b8;--c:#00c2ff;--k:#16112e;--bg:#faf8ff;--bg2:#f1ebff;--card:#fff;--line:#e8e0fa;--bl:#e1d6fa;--mut:#5d5878;--pink:#ff5fa8;--r:20px;--sh:0 12px 32px -14px rgba(76,29,149,.28);--grad:linear-gradient(135deg,#7b3ae8 0%,#5a1fc7 55%,#2b6df0 100%);--head:Mochi,"Be Vietnam Pro",system-ui,sans-serif;--body:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;--sym:system-ui,-apple-system,"Segoe UI","Noto Sans","Noto Sans Symbols","Noto Sans Symbols 2","Noto Sans Math","Apple Symbols","Segoe UI Symbol","Segoe UI Emoji","Noto Color Emoji",sans-serif}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body.mc{margin:0;background:var(--bg);color:var(--k);font:400 17px/1.7 var(--body)}
img,svg,video{max-width:100%;height:auto}
a{color:var(--p);text-underline-offset:3px}
a:hover{color:var(--p2)}
:focus-visible{outline:3px solid var(--c);outline-offset:2px;border-radius:8px}
.w{width:100%;max-width:1120px;margin-inline:auto;padding-inline:20px}
.m-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.m-skip{position:absolute;left:12px;top:-60px;background:var(--k);color:#fff;padding:10px 14px;border-radius:10px;z-index:100}
.m-skip:focus{top:10px;color:#fff}
.m-i{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.m-main{min-height:60vh;padding-bottom:40px}
h1,h2,h3,h4{font-family:var(--head);line-height:1.2;margin:0 0 .5em;color:var(--k)}
.m-h2{font:800 clamp(1.5rem,3.4vw,2rem)/1.15 var(--head);margin:0;display:flex;align-items:center;gap:10px}
.m-sub{margin:.4em 0 1.1em;color:var(--mut);font-size:16px}
.m-note{color:var(--mut);font-size:15px;margin:.6em 0}
.m-lnk{display:inline-flex;align-items:center;gap:6px;font-weight:600;text-decoration:none;white-space:nowrap}
.m-lnk .m-i{width:18px;height:18px}

/* ---------- đầu trang ---------- */
.m-hd{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px)}
.m-hd__in{display:flex;align-items:center;gap:14px;min-height:68px}
.m-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--k);flex:none}
.m-logo__b{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:var(--grad);color:#fff;box-shadow:0 6px 14px -6px rgba(108,43,217,.7)}
.m-logo__b .m-i{fill:currentColor;stroke:none;width:24px;height:24px}
.m-logo__t{font:800 1.2rem/1 var(--head);white-space:nowrap}
.m-logo__t em{font-style:normal;color:var(--p)}
.m-nav{margin-left:auto}
.m-nav__l{display:flex;gap:4px;margin:0;padding:0;list-style:none}
.m-nav__l a{display:block;padding:8px 16px;border-radius:999px;text-decoration:none;color:var(--k);font-weight:600;font-size:15px}
.m-nav__l a:hover,.m-nav__l .current-menu-item a{background:var(--bg2);color:var(--p)}
.m-srch{display:flex;align-items:center;flex:0 1 340px;min-width:0;background:var(--bg);border:1px solid var(--bl);border-radius:999px;padding:3px 4px 3px 18px}
.m-srch input{flex:1;min-width:0;border:0;background:none;font:400 15px var(--body);padding:8px 0;color:var(--k);outline:0}
.m-srch input::placeholder{color:#756f93}
.m-srch button{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:var(--grad);color:#fff;cursor:pointer}
.m-srch:focus-within{border-color:var(--p);box-shadow:0 0 0 3px rgba(108,43,217,.18)}
.m-hd__f,.m-hd__s{position:relative;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--bl);border-radius:50%;background:#fff;color:var(--k);cursor:pointer;flex:none}
.m-hd__f:hover{color:var(--pink);border-color:var(--pink)}
.m-hd__f .m-dk__n{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--pink);color:#fff;font:700 11px/18px var(--body);font-style:normal;text-align:center}
.m-hd__s{display:none;margin-left:auto}
.m-s2{padding-bottom:12px}
.m-s2 .m-srch{flex:1}

/* ---------- hero trang chủ ---------- */
.m-hero{position:relative;overflow:hidden;background:var(--grad);color:#fff;text-align:center;padding:54px 0 48px}
.m-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 25%,rgba(255,255,255,.18),transparent 38%),radial-gradient(circle at 88% 8%,rgba(0,194,255,.35),transparent 40%);pointer-events:none}
.m-hero__in{position:relative;z-index:1}
.m-hero__h{color:#fff;font-size:clamp(1.9rem,5vw,3.2rem);font-weight:800;max-width:900px;margin:0 auto .7em;text-wrap:balance}
.m-jump{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0}
.m-hero .m-chip{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.35)}
.m-hero .m-chip:hover{background:#fff;color:var(--p2);border-color:#fff}
.m-st{position:absolute;font-size:64px;line-height:1;pointer-events:none;font-family:var(--sym);color:rgba(255,255,255,.22)}
.m-st--1{left:5%;top:16%;transform:rotate(-14deg)}.m-st--2{right:7%;top:14%;transform:rotate(12deg)}
.m-st--3{left:12%;bottom:10%;transform:rotate(10deg)}.m-st--4{right:12%;bottom:14%;transform:rotate(-8deg)}
.m-chip{display:inline-flex;align-items:center;min-height:40px;padding:6px 18px;border:1px solid var(--bl);border-radius:999px;background:#fff;color:var(--k);font:600 15px/1.2 var(--body);text-decoration:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.m-chip:hover,.m-chip.is-on{background:var(--p);color:#fff;border-color:var(--p)}

/* ---------- item: kích thước tự do, lấp đầy dòng ---------- */
.m-flow{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;padding:0;list-style:none;min-width:0}
.m-flow::after{content:"";flex:999 1 0}
.m-it,.ktdb-chip,.ktdb-tpl,.bkt-cell,.bkt-nick{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;min-width:0!important;max-width:100%;min-height:46px;margin:0!important;padding:8px 16px!important;border:1px solid var(--bl)!important;border-radius:14px!important;background:#f6f2ff!important;color:var(--k)!important;font:400 18px/1.4 var(--sym)!important;text-align:center;overflow-wrap:anywhere;cursor:pointer;box-shadow:none!important;transition:background .15s,border-color .15s,transform .1s}
.m-it:hover,.ktdb-chip:hover,.ktdb-tpl:hover,.bkt-cell:hover{background:#ece2ff!important;border-color:var(--p)!important}
.m-it:active,.ktdb-chip:active,.ktdb-tpl:active,.bkt-cell:active{transform:scale(.97)}
.m-it.is-ok,.ktdb-ok,.bkt-cell.is-ok{background:var(--p)!important;border-color:var(--p)!important;color:#fff!important}
.m-it *,.ktdb-chip *,.ktdb-tpl *,.bkt-cell *,.m-pod__t,.m-hot__n{font-weight:400!important}
.m-it small,.m-it i,.ktdb-n,.bkt-cell small,.ktdb-tpl small{display:block;width:100%;font:400 12px/1.3 var(--body)!important;font-style:normal;opacity:.7}
.m-it.is-x{display:none}
.m-it__c,.m-it__s{border:0;background:none;color:inherit;font:inherit;cursor:pointer;padding:0}
.m-it:has(.m-it__c){padding:0!important;gap:0;flex-wrap:nowrap;cursor:default;overflow:hidden}
.m-it__c{flex:1 1 auto;min-height:44px;padding:8px 8px 8px 16px;text-align:center;overflow-wrap:anywhere}
.m-it__s{display:grid;place-items:center;width:40px;min-height:44px;color:#9a94b8}
.m-it__s .m-i{width:19px;height:19px}
.m-it__s:hover,.m-it__s[aria-pressed=true]{color:var(--pink)}
.m-it__s[aria-pressed=true] .m-i{fill:currentColor}
.m-it__l{width:auto!important;padding:0 12px;gap:4px;font:400 14px var(--body)}
.m-it__l b{font-weight:400}.m-it__l.is-on{color:var(--p)}.m-it__l.is-on .m-i{fill:currentColor}
.m-it__n{display:grid;place-items:center;align-self:stretch;min-width:34px;padding:0 6px;background:var(--bg2);color:var(--mut);font:600 13px var(--body);border-right:1px solid var(--bl)}
.m-it:has(.m-it__n){padding:0!important;gap:0;flex-wrap:nowrap;overflow:hidden}
.m-it--r{cursor:pointer;gap:6px;font:400 15px var(--body)!important}
.m-it--r input{accent-color:var(--p)}
.m-it--a{text-decoration:none}
.m-nicks .m-it{font-size:17px!important}

/* ---------- công cụ ---------- */
.m-tool{margin:24px 0 32px;background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:var(--sh);padding:20px}
.m-tabs{display:inline-flex;gap:4px;margin-bottom:16px;padding:4px;background:var(--bg2);border-radius:999px;max-width:100%}
.m-tab{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 20px;border:0;border-radius:999px;background:none;color:var(--mut);font:600 16px var(--body);cursor:pointer}
.m-tab[aria-selected=true]{background:#fff;color:var(--p);box-shadow:0 3px 10px -4px rgba(76,29,149,.4)}
.m-form{display:flex;gap:10px;flex-wrap:wrap}
.m-in,.m-form textarea,.m-sel select{width:100%;min-height:52px;border:1px solid var(--bl);border-radius:14px;background:#fff;color:var(--k);font:400 17px var(--body);padding:10px 16px}
.m-form .m-in{flex:1 1 240px;width:auto}
.m-in:focus,.m-sel select:focus,textarea:focus{outline:0;border-color:var(--p);box-shadow:0 0 0 3px rgba(108,43,217,.18)}
.m-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:10px 26px;border:0;border-radius:14px;background:var(--grad);color:#fff;font:700 16px var(--body);cursor:pointer;box-shadow:0 10px 18px -10px rgba(108,43,217,.8);text-decoration:none;transition:transform .12s,box-shadow .12s,filter .12s}
.m-btn:hover{filter:brightness(1.08);color:#fff}
.m-btn:active{transform:translateY(2px);box-shadow:none}
.m-btn[disabled]{opacity:.6;cursor:wait}
.m-btn--g{background:#fff;color:var(--k);border:1px solid var(--bl);box-shadow:none}
.m-btn--g:hover{background:var(--bg2);color:var(--p);filter:none}
.m-opt{margin:12px 0 0;font-size:15px}
.m-opt summary{cursor:pointer;color:var(--p);font-weight:600;padding:6px 0}
.m-opt__g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:8px}
.m-sel{display:block;min-width:0}
.m-sel span{display:block;font-size:14px;color:var(--mut);margin-bottom:4px}
.m-quick{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 4px;font-size:15px;color:var(--mut)}
.m-quick .m-chip,.m-hist .m-chip{min-height:36px;padding:4px 14px;font-size:14px;background:var(--bg)}
.m-out{margin-top:10px}
.m-out__bar{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.m-out__t{margin:0;font:700 1.1rem/1.3 var(--head)}
.m-out__n{font-size:14px;color:var(--mut)}
.m-filter{display:flex;gap:8px;overflow-x:auto;padding:8px 2px 10px;scrollbar-width:thin}
.m-filter .m-chip{flex:none;min-height:36px;padding:4px 14px;font-size:14px}
.m-sec{margin-top:8px}
.m-sec h3{font-size:1.1rem;margin:14px 0 0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.m-sec h3 small{font:400 13px var(--body);color:var(--mut)}
.m-more{display:block;margin:6px auto 0;min-height:44px;padding:8px 22px;border:1px dashed var(--p);border-radius:999px;background:none;color:var(--p);font:600 15px var(--body);cursor:pointer}
.m-more:hover{background:var(--bg2)}
.m-emoji{margin-top:16px}.m-emoji h3{font-size:1.05rem}
.m-kinds{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.m-comm{margin-top:22px;padding-top:16px;border-top:1px dashed var(--bl)}
.m-comm__h{font-size:1.15rem}.m-comm__s{font-size:1rem;margin-top:14px}
.m-vote{display:grid;gap:10px;margin:8px 0 12px}
.m-vote__r{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.m-vote__r button{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:6px 16px;border:1px solid var(--bl);border-radius:999px;background:#fff;font:400 15px var(--body);cursor:pointer}
.m-vote__r button.is-on{background:var(--p);border-color:var(--p);color:#fff}
.m-vote__r b{font-weight:400}
.m-bar{flex:1;min-width:80px;height:10px;border-radius:99px;background:var(--bl);overflow:hidden}
.m-bar i{display:block;height:100%;background:var(--c);width:50%}
.m-form--s{margin-top:14px}
.m-hist{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 0;font-size:15px;color:var(--mut)}
.m-hist__l{display:flex;flex-wrap:wrap;gap:6px}

/* ---------- nội dung ---------- */
.m-prose{max-width:820px;margin-inline:auto;min-width:0;overflow-wrap:break-word}
.m-prose>*{min-width:0}
.m-prose p,.m-prose li{font-size:17px}
.m-prose>p:first-child{font-size:18px;color:#2b2447}
.m-prose h2{font-size:clamp(1.45rem,3vw,1.9rem);margin:1.9em 0 .5em;padding-top:.2em}
.m-prose h3{font-size:clamp(1.2rem,2.4vw,1.4rem);margin:1.5em 0 .4em}
.m-prose ul,.m-prose ol{padding-left:1.3em}
.m-prose li{margin:.3em 0}
.m-prose blockquote{margin:1.2em 0;padding:12px 18px;border-left:4px solid var(--p);background:var(--bg2);border-radius:0 14px 14px 0}
.m-prose code{font-size:.9em;background:var(--bg2);padding:2px 6px;border-radius:6px}
.m-prose table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-collapse:separate;border-spacing:0;margin:1.2em 0;font-size:15px;border:1px solid var(--line);border-radius:14px}
.m-prose th,.m-prose td{border-bottom:1px solid var(--line);padding:10px 14px;text-align:left;vertical-align:top}
.m-prose tr:last-child td{border-bottom:0}
.m-prose th{background:var(--bg2);font-weight:600}
.m-prose .tbl-wrap,.m-prose .wp-block-table{max-width:100%;overflow-x:auto;margin:1.2em 0}
.m-prose .tbl-wrap table,.m-prose .wp-block-table table{display:table;margin:0}
.m-prose pre{max-width:100%;overflow-x:auto}
.m-prose iframe{max-width:100%}
.ktdb-group,.bkt-palette{display:flex!important;flex-wrap:wrap;gap:8px;margin:12px 0!important;line-height:1.4!important}
.ktdb-group::after,.bkt-palette::after{content:"";flex:999 1 0}
.ktdb-note{margin:1.2em 0;padding:14px 18px;border:1px solid #f1dd8a;border-radius:14px;background:#fff9dc}
.m-prose tr.hi td{background:#f6f2ff}

/* ---------- bài / trang ---------- */
.m-crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:20px 0 4px;font-size:14px;color:var(--mut)}
.m-crumbs a{color:var(--mut)}.m-crumbs i{font-style:normal}
.m-art{max-width:820px;margin:0 auto}
.m-art__h{padding:14px 0 6px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.m-art__h h1{font-size:clamp(1.8rem,4.4vw,2.7rem);font-weight:800;text-wrap:balance}
.m-art__h--c{text-align:center;max-width:none;border:0;padding:20px 0 22px}
.m-eyebrow{display:inline-block;margin:0 0 10px;padding:4px 14px;border-radius:999px;background:var(--bg2);color:var(--p2);font:700 13px var(--body);letter-spacing:.02em}
.m-meta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin:14px 0 16px}
.m-meta__a{display:flex;align-items:center;gap:12px}
.m-meta__a span span{display:grid;line-height:1.35}
.m-meta small{color:var(--mut);font-size:13px}
.m-av{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--grad);color:#fff;font:700 14px var(--head);font-style:normal;flex:none}
.m-av--l{width:56px;height:56px;font-size:19px}
.m-ok{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:999px;background:#dcf7ea;color:#0b6b46;font:600 13px var(--body)}
.m-ok .m-i{width:16px;height:16px}
.m-tags{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}
.m-by{display:flex;gap:16px;align-items:flex-start;margin:28px 0;padding:18px;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--sh)}
.m-by p{margin:.2em 0 0;font-size:15px;color:var(--mut)}
.m-pgs{display:flex;gap:8px}
.m-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:18px;margin:16px 0}
.m-card{display:flex;min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);transition:transform .15s,box-shadow .15s;overflow:hidden;position:relative}
.m-card::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,hsl(var(--h,265) 80% 60%),hsl(calc(var(--h,265) + 50) 90% 62%))}
.m-card:hover{transform:translateY(-3px);box-shadow:0 18px 36px -14px rgba(76,29,149,.38)}
.m-card__a{display:flex;flex-direction:column;gap:6px;width:100%;padding:22px 18px 16px;color:var(--k);text-decoration:none}
.m-card__c{align-self:flex-start;padding:2px 12px;border-radius:999px;background:var(--bg2);color:var(--p2);font:700 12px var(--body)}
.m-card__t{font-size:1.1rem;margin:2px 0 2px}
.m-card__a p{margin:0;font-size:15px;color:var(--mut);line-height:1.55}
.m-card__m{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:8px;color:var(--p);font:600 14px var(--body)}
.m-card__m .m-i{width:16px;height:16px}
.m-more-posts{margin-top:36px}
.m-pg .nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:24px 0}
.m-pg .page-numbers{display:inline-grid;place-items:center;min-width:44px;min-height:44px;padding:0 14px;border:1px solid var(--bl);border-radius:12px;background:#fff;color:var(--k);text-decoration:none;font-weight:600}
.m-pg .current{background:var(--p);color:#fff;border-color:var(--p)}
.m-404{text-align:center;padding:50px 20px}
.m-404__g{font:400 3rem/1.3 var(--sym);margin:0;color:var(--p)}
.m-404 .m-srch{max-width:480px;margin:18px auto}

/* ---------- đánh giá ---------- */
.m-rate{max-width:820px;margin:32px auto 0;padding:20px;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--sh);text-align:center}
.m-rate__q{margin:0 0 12px;font:700 1.2rem var(--head)}
.m-rate__b{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.m-rate__f{margin-top:14px;text-align:left}
.m-rate__f[hidden],.m-rate__t[hidden]{display:none}
.m-rate legend{font-weight:600;margin-bottom:6px;padding:0}
.m-rate fieldset{border:0;margin:0;padding:0;min-width:0}
.m-rate textarea{display:block;margin:10px 0;min-height:70px;resize:vertical}
.m-rate__t{margin:12px 0 0;font-weight:600;color:var(--p2)}
.m-rate__s{margin:12px 0 0;font-size:14px;color:var(--mut)}
.m-hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}

/* ---------- SEO + FAQ ---------- */
.m-seo{max-width:820px;margin:36px auto 0;padding:24px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.m-seo h2{font-size:clamp(1.4rem,3vw,1.8rem)}
.m-seo h3{font-size:1.2rem;margin-top:1.3em}
.m-faq details{border:1px solid var(--line);border-radius:14px;margin:8px 0;background:var(--bg)}
.m-faq summary{cursor:pointer;padding:12px 16px;font-weight:600;list-style-position:inside}
.m-faq details p{margin:0;padding:0 16px 14px}

/* ---------- dải chân trang ---------- */
.m-show{background:var(--bg2);padding:40px 0 14px;margin-top:24px}
.m-blk{margin-bottom:36px}
.m-blk__h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.m-star{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,#ff6a6f,#ff3f8e);color:#fff}
.m-pod{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;margin:22px 0 8px;padding:0}
.m-pod__c{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px 12px 16px;border:2px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--sh);text-align:center;min-width:0}
.m-pod__c--1{border-color:#ff6a6f}.m-pod__c--2{border-color:#f0b429}.m-pod__c--3{border-color:#12b886}
.m-pod__n{position:absolute;top:-16px;left:50%;transform:translateX(-50%);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:#fff;font:800 15px var(--head)}
.m-pod__c--1 .m-pod__n{background:#ff6a6f}.m-pod__c--2 .m-pod__n{background:#f0b429;color:var(--k)}.m-pod__c--3 .m-pod__n{background:#12b886}
.m-pod__t{border:0;background:none;color:inherit;font:400 clamp(1.1rem,2.4vw,1.4rem)/1.4 var(--sym);cursor:pointer;overflow-wrap:anywhere;padding:4px}
.m-pod em{font:600 12px var(--body);font-style:normal;padding:3px 12px;border-radius:99px;background:var(--bg2);color:var(--mut)}
.m-hot{display:flex;flex-wrap:wrap;gap:12px;list-style:none;margin:0;padding:0}
.m-hot::after{content:"";flex:999 1 0}
.m-hot li{flex:1 1 200px;min-width:0}
.m-hot__c{display:block;height:100%;padding:14px 18px;border:1px solid var(--line);border-radius:16px;background:#fff;text-decoration:none;color:var(--k);transition:transform .15s,border-color .15s}
.m-hot__c:hover{border-color:var(--p);transform:translateY(-2px)}
.m-hot__r{display:flex;justify-content:space-between;font:600 13px var(--body);color:var(--mut)}
.m-hot__r i{font-style:normal;color:#0c8f66}
.m-hot__r i::before{content:"▲ "}
.m-hot__n{display:block;font:400 1.15rem/1.35 var(--body);overflow-wrap:anywhere;margin:4px 0 2px}
.m-hot small{color:var(--mut);font-size:13px}

/* ---------- chân trang ---------- */
.m-ft{background:#140f2b;color:#d6d1ec;padding:44px 0 24px}
.m-ft a{color:#d6d1ec;text-decoration:none}.m-ft a:hover{color:var(--c);text-decoration:underline}
.m-ft__g{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:30px}
.m-logo--ft{color:#fff}
.m-ft__brand p{margin:12px 0 0;color:#b4aed0;font-size:15px}
.m-ft__h{margin:0 0 10px;font:800 1.05rem var(--head);color:#fff}
.m-ft__l{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:15px}
.m-ft__c{margin:30px auto 0;padding-top:16px;border-top:1px solid #2c2547;font-size:14px;color:#a39dc2}

/* ---------- thanh đáy điện thoại + bảng trượt ---------- */
.m-dock{display:none}
.m-sheet{display:none;position:fixed;inset:0;z-index:90;background:rgba(20,15,43,.55);align-items:center;justify-content:center;padding:16px}
.m-sheet:not([hidden]){display:flex}
.m-sheet__p{position:relative;width:min(560px,100%);max-height:84vh;overflow-y:auto;background:#fff;border-radius:var(--r);padding:26px 18px;box-shadow:0 30px 60px -20px rgba(20,15,43,.5)}
.m-sheet__x{position:absolute;right:10px;top:10px;width:44px;height:44px;border:0;border-radius:50%;background:var(--bg2);color:var(--k);cursor:pointer;display:grid;place-items:center}
.m-sheet__h{margin:14px 0 6px;font:800 1.05rem var(--head)}
.m-sheet__l{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.m-sheet__l a{display:block;padding:11px 14px;border-radius:12px;color:var(--k);text-decoration:none;background:var(--bg)}
.m-toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,20px);max-width:calc(100vw - 32px);padding:10px 18px;border-radius:999px;background:var(--k);color:#fff;font:600 15px/1.3 var(--body);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:80;text-align:center}
.m-toast.is-on{opacity:1;transform:translate(-50%,0)}
.m-toast.is-bad{background:#b3261e}
@media (min-width:821px){.m-toast{bottom:28px}}

/* ---------- điện thoại ---------- */
@media (max-width:820px){
	.m-nav,.m-hd__in>.m-srch,.m-hd__f{display:none}
	.m-hd__s{display:grid}
	.m-hd__in{min-height:62px}
	.m-ft{padding-bottom:104px}
	.m-ft__g{grid-template-columns:1fr 1fr}.m-ft__brand{grid-column:1/-1}
	.m-dock{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;padding-bottom:env(safe-area-inset-bottom)}
	.m-dk{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:60px;padding:6px 2px;border:0;background:none;color:#6c6a82;font:600 12px/1.2 var(--body);text-decoration:none;cursor:pointer}
	.m-dk .m-i{width:24px;height:24px}
	.m-dk.is-on{color:var(--p)}
	.m-dk__n{position:absolute;top:6px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--pink);color:#fff;font:700 11px/18px var(--body);font-style:normal;text-align:center}
	.m-dock--std{background:#fff;border-top:1px solid #e3dff0;border-radius:22px 22px 0 0;box-shadow:0 -6px 20px rgba(16,16,26,.08)}
	.m-dock--std .m-dk--fab{margin-top:-26px;color:#e8473e}
	.m-dock--std .m-fab{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#ee4a3f;color:#fff;border:4px solid #fff;box-shadow:0 6px 16px rgba(238,74,63,.45)}
	.m-dock--std .m-fab .m-i{width:26px;height:26px}
	.m-dock--pill{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));padding:6px;background:#140f2b;border-radius:999px;box-shadow:0 8px 24px rgba(20,15,43,.4)}
	.m-dock--pill .m-dk{min-height:48px;border-radius:999px;color:#c5c0e0;flex-direction:row;justify-content:center;gap:6px;font-size:0;padding:0}
	.m-dock--pill .m-dk span{font-size:0}
	.m-dock--pill .m-dk:active,.m-dock--pill .m-dk:focus-visible{background:#2b2548;color:#fff}
	.m-dock--pill .m-dk--fab{flex:none;width:58px;margin:-18px 4px 0;color:#fff}
	.m-dock--pill .m-fab{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--grad);color:#fff;border:3px solid #140f2b;box-shadow:0 0 0 3px #fff}
	.m-dock--pill .m-fab .m-i{width:26px;height:26px}
	.m-dock--pill .m-dk--fab>span:last-child{display:none}
	.m-dock--pill .m-dk__n{top:4px;left:calc(50% + 4px)}
	.m-sheet{align-items:flex-end;padding:0}
	.m-sheet__p{width:100%;max-height:82vh;border-radius:22px 22px 0 0;padding:26px 14px calc(26px + env(safe-area-inset-bottom));animation:up .22s ease-out}
	@keyframes up{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
	.m-pod{grid-template-columns:1fr;gap:24px;margin-top:28px}
	.m-st{font-size:40px}
	.m-opt__g{grid-template-columns:1fr}
}

/* ---------- điện thoại nhỏ: box không lề, item rộng tối đa ---------- */
@media (max-width:640px){
	.w{padding-inline:12px}
	.m-hero{padding:34px 0 30px}
	.m-tool,.m-rate,.m-seo{margin-inline:-12px;padding:14px 6px;border-radius:0;border-inline:0;box-shadow:none}
	.m-tool{margin-top:16px;margin-bottom:22px}
	.m-seo,.m-rate{padding-inline:14px}
	.m-comm,.m-out{margin-inline:0}
	.m-flow{gap:6px}
	.m-it,.ktdb-chip,.ktdb-tpl,.bkt-cell{padding:8px 12px!important;font-size:18px!important}
	.m-tabs{display:flex;margin-inline:6px}
	.m-tab{flex:1;justify-content:center;padding-inline:10px}
	.m-form .m-btn{flex:1 1 100%}
	.m-by{flex-direction:column;box-shadow:none}
	.m-grid{grid-template-columns:1fr;gap:14px}
	.m-ft__g{grid-template-columns:1fr}
	.m-hot li{flex-basis:calc(50% - 6px)}
	.m-prose .ktdb-group,.m-prose .bkt-palette{margin-inline:0!important}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}