/* Blog single post - tokens from brand.js (no :root) */

[data-theme="dark"] .cta-inner{background:linear-gradient(135deg,var(--color-brand-subtle),transparent 55%),var(--cta-bg)}
[data-theme="dark"] .btn-dark{background:var(--color-bg-elevated);border-color:var(--color-border);color:var(--color-text)}
[data-theme="dark"] .btn-ghost{border-color:rgba(250,250,249,.2);color:var(--color-text)}
[data-theme="dark"] .post-callout{background:var(--color-brand-subtle)}
[data-theme="dark"] .related-services{background:var(--color-bg-subtle)}
[data-theme="dark"] .related-services .related-head h2{color:var(--color-text)}
[data-theme="dark"] .related-services .eyebrow{color:var(--color-brand-muted)}
[data-theme="dark"] .rel-card{background:var(--color-bg-elevated);border-color:var(--color-border);color:var(--color-text-secondary)}
[data-theme="dark"] .rel-card:hover{border-color:var(--color-brand);box-shadow:var(--shadow)}
[data-theme="dark"] .rel-card .ic{background:var(--color-brand-subtle);border-color:rgba(249,115,22,.25)}
[data-theme="dark"] .rel-card h3{color:var(--color-text)}
[data-theme="dark"] .rel-card p{color:var(--color-text-secondary)}
.read-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:100;background:var(--accent);pointer-events:none}

.post-mast{padding:1.25rem 0 0}
.breadcrumb{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;font-size:.85rem;color:var(--muted);margin-bottom:.75rem}
.breadcrumb a:hover{color:var(--accent)}.breadcrumb span{opacity:.4}
.post-mast-inner{padding-bottom:2rem}
.post-wrap{margin-inline:auto}
.post-cat{margin:0 0 .75rem;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700}
.post-mast h1{margin:0 0 .85rem;font-weight:800;line-height:1.15;text-align:center}
.post-mast .lead{margin:0;font-size:1.08rem;color:var(--muted);line-height:1.55}
.post-meta{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;justify-content:center;margin-top:1.25rem;font-size:.9rem;color:var(--muted)}
.post-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--muted);opacity:.5}

.post-cover{
  margin:0 0 1.75rem;border-radius:16px;overflow:hidden;
  aspect-ratio:1200 / 630;background:var(--bg-deep);border:1px solid var(--line)
}
.post-cover img{width:100%;height:100%;object-fit:cover;display:block}

.post{padding:0 0 2.5rem}
.post-wrap{margin-inline:auto}
.post-lede{margin:0 0 1.35rem;font-size:1.05rem;color:var(--muted)}

/* Mục lục: trong luồng trên mobile; float ngoài cột đọc trên desktop */
.post-toc{
  margin:0 0 1.75rem;padding:0;border:1px solid var(--line);
  border-radius:14px;background:var(--surface);overflow:hidden
}
.post-toc-title{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  margin:0;padding:.9rem 1.05rem;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);font-weight:700;cursor:pointer;list-style:none;user-select:none
}
.post-toc-title::-webkit-details-marker{display:none}
.post-toc-title::after{
  content:"";width:.45rem;height:.45rem;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform .2s ease;margin-top:-.2rem;flex:none
}
.post-toc[open] .post-toc-title::after{transform:rotate(-135deg);margin-top:.15rem}
.post-toc ol{margin:0;padding:.15rem 1.05rem 1rem;list-style:none;display:grid;gap:.25rem;counter-reset:toc}
.post-toc li{counter-increment:toc}
.post-toc a{
  display:grid;grid-template-columns:1.5rem 1fr;gap:.4rem;align-items:baseline;
  font-size:.92rem;line-height:1.4;color:var(--muted);padding:.28rem 0
}
.post-toc a::before{
  content:counter(toc, decimal-leading-zero);font-family:var(--font-display);
  font-size:.75rem;font-weight:700;color:var(--accent)
}
.post-toc a:hover,.post-toc a.is-active{color:var(--ink)}
.post-toc a.is-active{font-weight:600}

.post-body h2{margin:2rem 0 .7rem;display:flex;gap:.65rem;align-items:baseline;scroll-margin-top:5.5rem}
.post-body h2 .n{flex:none;font-size:.85rem;font-weight:700;color:var(--accent);letter-spacing:.04em}
.post-body h2 .t{flex:1}
.post-body p{margin:0 0 1.1rem}
.post-body ul{margin:0 0 1.25rem;padding:0;list-style:none;display:grid;gap:.45rem}
.post-body li{position:relative;padding-left:1.15rem;color:var(--muted)}
.post-body li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.post-callout{
  margin:1.5rem 0;padding:1rem 1.15rem;border-left:3px solid var(--accent);
  background:rgba(232,93,4,.06);border-radius:0 12px 12px 0;color:var(--ink);font-size:.98rem
}
.post-callout strong{color:var(--accent)}
.post-closing{margin:2.25rem 0 0;padding-top:1.5rem;border-top:1px solid var(--line)}
.post-closing h2{display:block;margin:0 0 .55rem;font-size:1.1rem}
.post-closing p{margin:0;color:var(--muted)}

.post-nav{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:2.25rem;padding-top:1.35rem;border-top:1px solid var(--line)
}
.post-nav a{font-weight:600;color:var(--accent);font-size:.95rem}
.post-nav a:hover{text-decoration:underline;text-underline-offset:3px}

/* Dich vu lien quan - nen sang mac dinh, dark override rieng */
.related-services{padding:2.5rem 0;background:var(--color-bg-subtle);color:var(--color-text-secondary)}
.related-services .eyebrow{color:var(--color-brand-muted)}
.related-services .related-head{margin:0 0 1.35rem;max-width:var(--content)}
.related-services .related-head h2{margin:0;font-size:clamp(1.45rem,2.8vw,1.95rem);color:var(--color-text)}
.rel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem}
.rel-card{
  display:grid;grid-template-columns:auto 1fr;column-gap:.7rem;row-gap:.4rem;align-items:center;
  padding:1.05rem 1.1rem;border-radius:var(--radius);background:var(--color-bg-elevated);border:1px solid var(--color-border);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;color:inherit
}
.rel-card .ic{
  width:2.35rem;height:2.35rem;border-radius:10px;display:grid;place-items:center;
  background:var(--color-brand-subtle);border:1px solid rgba(249,115,22,.25);color:var(--color-brand-muted);margin:0
}
.rel-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--color-brand)}
.rel-card .ic svg{width:1.3rem;height:1.3rem;display:block}
.rel-card h3{margin:0;font-size:1.05rem;line-height:1.25;color:var(--color-text)}
.rel-card p,.rel-card .more{grid-column:1 / -1}
.rel-card p{margin:0;color:var(--color-text-secondary);font-size:.88rem;line-height:1.45}
.rel-card .more{margin-top:.1rem;font-weight:700;color:var(--color-brand-muted);font-size:.88rem}

.cta-band{padding:2.5rem 0 2.75rem}
.cta-inner{padding:1.65rem 1.5rem;border-radius:var(--radius);text-align:center;background:linear-gradient(135deg,rgba(232,93,4,.1),rgba(244,140,6,.05)),var(--cta-bg);border:1px solid var(--line)}
.cta-inner h2{margin:0 0 .4rem;font-size:1.35rem}.cta-inner p{color:var(--muted);margin:0 auto 1.1rem;max-width:32rem;font-size:.95rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.65rem;justify-content:center}

[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
[data-reveal].is-visible{opacity:1;transform:none}

@media (min-width:1280px){
  /* Float TOC ngoai cot doc - chi khi du rong, khong chen noi dung */
  .post-toc{
    position:fixed;top:5.75rem;z-index:40;margin:0;
    left:calc(50% + var(--content-max) / 2 + 1rem);
    width:12rem;max-height:calc(100vh - 7rem);overflow:auto;
    box-shadow:0 12px 36px rgba(26,23,20,.1);
    transition:opacity .25s ease,visibility .25s ease,transform .25s ease
  }
  .post-toc.is-away{
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translateY(8px)
  }
  .post-toc-title{cursor:default;pointer-events:none}
  .post-toc-title::after{display:none}
}
@media (max-width:1279px) and (min-width:901px){
  /* Màn hẹp vừa: giữ mục lục trong bài dạng accordion, không float */
  .post-toc{position:static;width:auto;max-height:none;box-shadow:none}
}
@media (max-width:900px){
  .rel-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1;transform:none}
}