/* Bống Media – giao diện blog (danh sách + bài viết). Dùng biến màu --t-* khai báo trong b.css nên tự đổi Sáng/Tối. */
.bmb{--bg:var(--t-bg,#fff);--soft:var(--t-soft,#f4f7fc);--card:var(--t-card,#fff);--line:var(--t-line,#e3e9f6);--line2:var(--t-line2,#d3dcf0);--ink:var(--t-ink,#0b1224);--mute:var(--t-mute,#5b6784);--body:var(--t-body,#33405f);--a:var(--t-a,#3f66f0);--g:linear-gradient(120deg,#4f7cff,#8b5cf6 55%,#22d3ee);color:var(--body);background:var(--bg)}
.bmb{--hh:100px}
.bmb *{box-sizing:border-box}
.bmb-tags{display:flex;align-items:center;gap:8px}
.bmb-body ul{list-style:disc}.bmb-body ol{list-style:decimal}
.bmb-new{margin-left:0!important}
.bmb-wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 20px}
.bmb-narrow{max-width:820px}
.bmb a{text-decoration:none}
.bmb-grad{background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent}
.bmb-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--a)}
.bmb-eyebrow:before{content:"";width:18px;height:2px;background:var(--g);border-radius:2px}
.bmb-tag{display:inline-block;padding:4px 11px;border-radius:999px;background:var(--t-tagbg,#eef3ff);color:var(--t-tagfg,#3b5bdb);font-size:12px;font-weight:800;letter-spacing:.02em}
.bmb-btn,.bmb-more{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:15px;cursor:pointer}
.bmb-btn{padding:13px 22px;border-radius:12px;background:var(--g);color:#fff!important;border:0;box-shadow:0 14px 30px -14px rgba(79,124,255,.8);transition:transform .15s}
.bmb-btn:hover{transform:translateY(-2px)}
.bmb-btn svg,.bmb-more svg{width:18px;height:18px}
.bmb-more{color:var(--a);background:none;border:0;padding:0}
.bmb-more:hover svg{transform:translateX(3px)}.bmb-more svg{transition:transform .2s}

/* ===== danh sách ===== */
.bmb-hero{position:relative;padding:calc(var(--hh) + 56px) 0 36px;text-align:center;background:var(--t-hero,#f4f7ff);background-image:radial-gradient(60% 90% at 100% 0,var(--t-glow1,rgba(139,92,246,.16)),transparent 70%),radial-gradient(50% 80% at 0 100%,var(--t-glow2,rgba(34,211,238,.16)),transparent 70%);overflow:hidden}
.bmb-hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--t-grid) 1px,transparent 1px),linear-gradient(90deg,var(--t-grid) 1px,transparent 1px);background-size:38px 38px;-webkit-mask:radial-gradient(70% 100% at 50% 0,#000,transparent);mask:radial-gradient(70% 100% at 50% 0,#000,transparent);pointer-events:none}
.bmb-hero .bmb-wrap{position:relative}
.bmb-hero h1{font-size:clamp(32px,5vw,54px);line-height:1.1;font-weight:800;letter-spacing:-.03em;color:var(--ink);margin:14px 0 12px;text-wrap:balance}
.bmb-hero p{font-size:18px;color:var(--mute);margin:0 auto;max-width:560px}
.bmb-tools{margin-top:30px;display:grid;gap:16px;justify-items:center}
.bmb-search{position:relative;width:100%;max-width:520px;display:block}
.bmb-search svg{position:absolute;left:16px;top:50%;width:20px;height:20px;margin-top:-10px;color:var(--mute)}
.bmb-search input{width:100%;height:50px;padding:0 18px 0 46px;border-radius:14px;border:1px solid var(--line2);background:var(--card);color:var(--ink);font-size:16px;outline:none;box-shadow:0 12px 30px -22px var(--t-shadow,rgba(15,23,60,.4))}
.bmb-search input:focus{border-color:var(--a);box-shadow:0 0 0 3px var(--t-glow3,rgba(79,124,255,.14))}
.bmb-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.bmb-chips button{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;border:1px solid var(--line2);background:var(--card);color:var(--body);font-size:14px;font-weight:700;cursor:pointer;transition:all .15s}
.bmb-chips button i{font-style:normal;font-size:11.5px;min-width:20px;height:20px;border-radius:10px;background:var(--soft);display:grid;place-items:center;color:var(--mute)}
.bmb-chips button:hover{border-color:var(--a);color:var(--a)}
.bmb-chips button.on{background:var(--g);border-color:transparent;color:#fff}.bmb-chips button.on i{background:rgba(255,255,255,.25);color:#fff}
.bmb-sec{padding:48px 0}
.bmb-feat{display:grid;grid-template-columns:1.15fr 1fr;gap:0;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:var(--card);box-shadow:0 30px 70px -40px var(--t-shadow,rgba(15,23,60,.4));margin-bottom:34px}
.bmb-feat .bmb-img{display:block;min-height:300px;position:relative}
.bmb-feat .bmb-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.bmb-feat:hover .bmb-img img{transform:scale(1.04)}
.bmb-feat .bmb-cb{padding:34px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;justify-content:center}
.bmb-feat h2{font-size:clamp(24px,2.6vw,32px);line-height:1.2;font-weight:800;margin:2px 0 0;letter-spacing:-.02em;text-wrap:balance}
.bmb-feat h2 a{color:var(--ink)}.bmb-feat h2 a:hover{color:var(--a)}
.bmb-feat p{margin:0;font-size:16px;line-height:1.65;color:var(--mute)}
.bmb-new{margin-left:8px;font-size:12px;font-weight:800;color:#16a34a}
.bmb-feat .bmb-tag{margin-right:0}
.bmb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.bmb-card{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--card);transition:transform .22s,box-shadow .22s,border-color .22s;animation:bmbIn .6s cubic-bezier(.2,.7,.2,1) backwards}
.bmb-card:nth-child(2){animation-delay:.06s}.bmb-card:nth-child(3){animation-delay:.12s}.bmb-card:nth-child(4){animation-delay:.18s}.bmb-card:nth-child(5){animation-delay:.24s}.bmb-card:nth-child(6){animation-delay:.3s}
@keyframes bmbIn{from{opacity:0;transform:translateY(18px)}}
.bmb-card:hover{transform:translateY(-5px);border-color:var(--a);box-shadow:0 26px 50px -28px rgba(79,124,255,.55)}
.bmb-card .bmb-img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--soft)}
.bmb-card .bmb-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.bmb-card:hover .bmb-img img{transform:scale(1.06)}
.bmb-cb{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.bmb-card h3{font-size:18px;line-height:1.35;font-weight:800;margin:0;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance}
.bmb-card h3 a{color:var(--ink)}.bmb-card h3 a:hover{color:var(--a)}
.bmb-card p{margin:0;font-size:14.5px;line-height:1.6;color:var(--mute);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bmb-card .bmb-tag{align-self:flex-start}
.bmb-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:auto;padding-top:6px;font-size:13px;color:var(--mute)}
.bmb-meta i{width:3px;height:3px;border-radius:50%;background:var(--line2)}
.bmb-card[data-feat]{display:none}
.bmb-filtered .bmb-card[data-feat]{display:flex}.bmb-filtered .bmb-feat{display:none}
.bmb-card[hidden]{display:none!important}
.bmb-empty{text-align:center;padding:50px 0;color:var(--mute)}
.bmb-cta-sec{padding-top:10px;padding-bottom:70px}
.bmb-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:34px 38px;border-radius:22px;background:var(--t-hero,#f4f7ff);background-image:radial-gradient(60% 120% at 100% 0,var(--t-glow1),transparent 70%),radial-gradient(50% 100% at 0 100%,var(--t-glow2),transparent 70%);border:1px solid var(--line)}
.bmb-cta h2{font-size:clamp(20px,2.4vw,26px);font-weight:800;color:var(--ink);margin:0 0 4px}.bmb-cta p{margin:0;color:var(--mute)}

/* ===== bài viết ===== */
.bmb-progress{position:fixed;left:0;top:0;right:0;height:3px;z-index:2000;pointer-events:none}
.bmb-progress i{display:block;height:100%;width:100%;background:var(--g);transform:scaleX(0);transform-origin:0 50%}
.bmb-ph{padding:calc(var(--hh) + 34px) 0 26px;background:var(--t-hero,#f4f7ff);background-image:radial-gradient(60% 120% at 100% 0,var(--t-glow1),transparent 70%),radial-gradient(50% 100% at 0 100%,var(--t-glow2),transparent 70%)}
.bmb-crumb{display:flex;flex-wrap:wrap;gap:6px;font-size:13.5px;color:var(--mute);margin-bottom:18px}
.bmb-crumb a{color:var(--mute)}.bmb-crumb a:hover{color:var(--a)}
.bmb-crumb>*+*:before{content:"›";margin-right:6px;opacity:.6}
.bmb-ph h1{font-size:clamp(28px,4.2vw,44px);line-height:1.15;font-weight:800;letter-spacing:-.025em;color:var(--ink);margin:14px 0 20px;text-wrap:balance}
.bmb-byline{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bmb-byline img{width:42px;height:42px;border-radius:50%;object-fit:cover;background:var(--card);border:1px solid var(--line)}
.bmb-byline b{display:block;color:var(--ink);font-size:15px}.bmb-byline small{color:var(--mute);font-size:13.5px}
.bmb-share{margin-left:auto;display:flex;gap:8px}
.bmb-share a,.bmb-share button{width:40px;height:40px;border-radius:12px;border:1px solid var(--line2);background:var(--card);color:var(--body);display:grid;place-items:center;cursor:pointer;padding:0;transition:all .15s}
.bmb-share svg{width:18px;height:18px}
.bmb-share a:hover,.bmb-share button:hover{border-color:var(--a);color:var(--a);transform:translateY(-1px)}
.bmb-share button.ok{background:#16a34a;border-color:#16a34a;color:#fff}
.bmb-cover{margin:-6px auto 0;max-width:820px;border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 70px -40px var(--t-shadow);position:relative;top:26px;margin-bottom:26px;background:var(--soft)}
.bmb-cover img{display:block;width:100%;aspect-ratio:16/8;object-fit:cover}
.bmb-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;padding:40px 0 20px;max-width:1160px;margin:0 auto;align-items:start}
.bmb-body{font-size:17.5px;line-height:1.8;color:var(--body);min-width:0;max-width:760px}
.bmb-body>*:first-child{margin-top:0}
.bmb-body h2,.bmb-body h3,.bmb-body h4{color:var(--ink)!important;font-weight:800!important;letter-spacing:-.015em;line-height:1.3;scroll-margin-top:96px;margin:2em 0 .6em!important}
.bmb-body h2{font-size:28px!important}.bmb-body h3{font-size:22px!important}.bmb-body h4{font-size:18px!important}
.bmb-body p{margin:0 0 1.2em}
.bmb-body a{color:var(--a);text-decoration:underline;text-underline-offset:3px}
.bmb-body ul,.bmb-body ol{padding-left:1.3em;margin:0 0 1.4em}
.bmb-body li{margin-bottom:.5em}.bmb-body li::marker{color:var(--a)}
.bmb-body img{max-width:100%;height:auto;border-radius:16px;margin:1.4em 0;display:block}
.bmb-body blockquote{margin:1.6em 0;padding:16px 22px;border-left:4px solid var(--a);background:var(--soft);border-radius:0 14px 14px 0;color:var(--ink);font-style:italic}
.bmb-body code{background:var(--soft);padding:2px 7px;border-radius:6px;font-size:.9em}
.bmb-body pre{background:#0b1224;color:#dbe4ff;padding:18px;border-radius:14px;overflow:auto}
.bmb-body table{width:100%;border-collapse:collapse;margin:1.4em 0}.bmb-body th,.bmb-body td{border:1px solid var(--line);padding:10px 12px}
.bmb-tldr{padding:18px 22px;border-radius:16px;background:var(--t-tagbg,#eef3ff);border:1px solid var(--line);margin-bottom:1.8em}
.bmb-tldr b{color:var(--a);font-size:13px;text-transform:uppercase;letter-spacing:.08em}.bmb-tldr p{margin:6px 0 0;color:var(--ink)}
.bmb-faq{margin-top:2.4em}.bmb-faq h2{font-size:26px!important;margin:0 0 .8em!important;color:var(--ink)}
.bmb-faq details{border:1px solid var(--line);border-radius:14px;background:var(--card);margin-bottom:10px;padding:0 18px}
.bmb-faq summary{cursor:pointer;font-weight:700;color:var(--ink);padding:15px 0;list-style:none}.bmb-faq summary::-webkit-details-marker{display:none}
.bmb-faq summary:after{content:"+";float:right;color:var(--a);font-size:20px;line-height:1}.bmb-faq details[open] summary:after{content:"–"}
.bmb-faq p{margin:0 0 16px;font-size:16px;line-height:1.7}
.bmb-side{position:sticky;top:96px;display:grid;gap:18px}
.bmb-toc{padding:20px 22px;border-radius:18px;border:1px solid var(--line);background:var(--card)}
.bmb-toc[hidden]{display:none}
.bmb-toc b{display:block;color:var(--ink);font-size:14px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
.bmb-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;border-left:2px solid var(--line)}
.bmb-toc a{display:block;padding:6px 0 6px 14px;margin-left:-2px;border-left:2px solid transparent;color:var(--mute);font-size:14.5px;line-height:1.4;transition:all .15s}
.bmb-toc a:hover{color:var(--a)}.bmb-toc a.on{color:var(--a);border-left-color:var(--a);font-weight:700}
.bmb-sidecta{padding:22px;border-radius:18px;background:var(--g);color:#fff}
.bmb-sidecta b{display:block;font-size:18px;margin-bottom:6px;color:#fff}.bmb-sidecta p{margin:0 0 16px;font-size:14.5px;opacity:.92;color:#fff}
.bmb-sidecta .bmb-btn{background:#fff;color:#3b4fd8!important;box-shadow:none;padding:11px 18px;font-size:14.5px}
.bmb-rel{padding:30px 0 70px}
.bmb-rel h2{font-size:28px;font-weight:800;color:var(--ink);margin:0 0 22px}
.bmb-rel .bmb-card[data-feat]{display:flex}

@media (max-width:991.98px){
  .bmb-layout{grid-template-columns:minmax(0,1fr);gap:28px}
  .bmb-side{position:static;order:-1}.bmb-sidecta,.bmb-toc{display:none!important}
  .bmb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bmb-feat{grid-template-columns:1fr}.bmb-feat .bmb-img{min-height:0;aspect-ratio:16/9}
}
@media (max-width:575.98px){
  .bmb{--hh:70px}
  .bmb-hero{padding:calc(var(--hh) + 34px) 0 26px}.bmb-hero p{font-size:16px}
  .bmb-grid{grid-template-columns:1fr;gap:18px}
  .bmb-feat .bmb-cb{padding:22px}
  .bmb-cta{flex-direction:column;align-items:flex-start;padding:26px}
  .bmb-ph{padding:calc(var(--hh) + 22px) 0 20px}
  .bmb-share{margin-left:0;width:100%}
  .bmb-body{font-size:16.5px}.bmb-body h2{font-size:24px!important}.bmb-body h3{font-size:20px!important}
  .bmb-cover img{aspect-ratio:16/10}.bmb-cover{border-radius:16px}
}
@media (prefers-reduced-motion:reduce){.bmb-card{animation:none}.bmb-card,.bmb-img img,.bmb-feat .bmb-img img{transition:none}}
@media print{.bmb-progress,.bmb-side,.bmb-share,.bmb-rel,.bmb-cta-sec{display:none!important}}
/* số chú thích nguồn [1] – nhỏ, nhạt, không gạch chân */
.bmb-body sup{font-size:.62em;line-height:0;vertical-align:super;margin-left:2px;font-weight:600;letter-spacing:.02em;color:var(--muted,#8a93a8)}
.bmb-body sup a{color:inherit;text-decoration:none;padding:0 1px}
.bmb-body sup a:hover{color:var(--a);text-decoration:underline}