/* CSS riêng cho blog. Trang dựa vào /styles.css của site cho nav, màu, class tiện ích. */
body{font-family:"Be Vietnam Pro",sans-serif;font-size:17px}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;background:#172554;color:#fff;padding:8px 14px;border-radius:8px;z-index:100}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.nav-link[aria-current="page"]{color:#172554;text-decoration:underline;text-decoration-color:#FDE047;text-decoration-thickness:3px;text-underline-offset:6px}
html{scroll-behavior:smooth}
.balance{text-wrap:balance}.pretty{text-wrap:pretty}
.w-mid{max-width:1040px;margin-inline:auto}.w-wide{max-width:1240px;margin-inline:auto}.w-read{max-width:700px;margin-inline:auto}
.t-hero{font-size:clamp(2.25rem,6vw,4rem);font-weight:800;letter-spacing:-.04em;line-height:1.04}
.t-body{font-size:1.0625rem;line-height:1.75}@media(min-width:768px){.t-body{font-size:1.125rem}}
.eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.hl{background-image:linear-gradient(transparent 55%,#FDE047 55%,#FDE047 94%,transparent 94%);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #1E3A8A;outline-offset:3px;border-radius:10px}
.draft-badge{margin-left:.6em;background:#FDE047;color:#172554;border-radius:4px;padding:1px 6px;letter-spacing:.1em}
.fbtn{font-size:.9375rem;font-weight:600;padding:.5rem 1.1rem;min-height:44px;display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;border-radius:999px;border:1px solid #17255426;color:#172554;transition:background .2s,color .2s}
.fbtn:hover{background:#E4EAF4}.fbtn[aria-pressed="true"]{background:#172554;color:#fff;border-color:#172554}
.search{width:100%;display:block;min-height:44px;padding:.65rem 1.1rem;border:1px solid #17255440;border-radius:999px;background:#fff;font:inherit;font-size:1rem;color:#172554}
[hidden]{display:none!important}
/* trang bài */
.post{padding-top:2.5rem;padding-bottom:5rem}
.back{display:inline-flex;gap:.4rem;font-size:.875rem;font-weight:600;color:#172554a6;margin-bottom:2rem;transition:color .2s}.back:hover{color:#172554}
.post-title{font-size:clamp(2rem,5.2vw,3.1rem);font-weight:800;letter-spacing:-.035em;line-height:1.12;margin-bottom:1rem}
.post-sub{font-size:1.25rem;line-height:1.55;color:#172554bf;margin-bottom:1.25rem}
.post-meta{display:flex;flex-wrap:wrap;gap:.5rem;font-size:.875rem;font-weight:600;color:#172554bf;padding-bottom:1.75rem;align-items:center;border-bottom:1px solid #17255420;margin-bottom:2rem}
.toc{background:#fff;border:1px solid #17255420;border-radius:1rem;padding:1.1rem 1.4rem;margin-bottom:2rem}
.toc summary{cursor:pointer;list-style:none;min-height:24px;font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#B45309}.toc summary::-webkit-details-marker{display:none}.toc summary::after{content:"▾";float:right;transition:transform .2s}.toc details:not([open]) summary::after{transform:rotate(-90deg)}.toc ol{margin-top:.6rem}
.toc ol{padding-left:1.2rem;list-style:decimal}.toc li{margin:.25rem 0}.toc a{text-decoration:underline;text-decoration-color:#17255433;text-underline-offset:3px}
.prose{font-size:1.125rem;line-height:1.85;color:#172554}
.prose>*+*{margin-top:1.25rem}
.prose h2{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;line-height:1.25;margin-top:2.5rem;scroll-margin-top:5rem}
.prose h3{font-size:1.25rem;font-weight:700;margin-top:2rem;scroll-margin-top:5rem}
.prose a{color:#1E3A8A;text-decoration:underline;text-underline-offset:3px}
.prose strong{font-weight:700}
.prose ul,.prose ol{padding-left:1.5rem}.prose ul{list-style:disc}.prose ol{list-style:decimal}.prose li{margin:.4rem 0}
.prose blockquote{border-left:4px solid #FDE047;padding:.2rem 0 .2rem 1.25rem;font-size:1.2rem;font-style:italic;color:#172554d9}
.prose hr{border:0;border-top:1px solid #17255426;margin:2.5rem 0}
.prose code{background:#E4EAF4;padding:.1em .35em;border-radius:5px;font-size:.92em}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2.5rem}
.tags li{font-size:.8125rem;font-weight:600;border:1px solid #17255426;border-radius:999px;padding:.25rem .8rem;color:#172554b3}
.cta{margin-top:3rem;background:#fff;color:#172554;border:1px solid #17255426;border-left:4px solid #FDE047;border-radius:1rem;padding:1.5rem 1.75rem}
.cta p{color:#172554bf;line-height:1.65}.cta .cta-h{color:#172554;font-size:1.125rem;font-weight:800;margin-bottom:.4rem}
.cta-btn{display:inline-block;margin-top:.9rem;color:#172554;font-weight:700;border:1px solid #172554;border-radius:999px;padding:.6rem 1.3rem;transition:background .2s}.cta-btn:hover{background:#E4EAF4}
.related{margin-top:3.5rem}.related h2{font-size:1.25rem;font-weight:800;margin-bottom:1rem}
.related li{padding:.9rem 0;border-top:1px solid #17255420;display:flex;flex-direction:column;gap:.2rem}
.related a{font-weight:700;font-size:1.0625rem}.related a:hover{text-decoration:underline}.related span{font-size:.8125rem;color:#17255499}
.back{margin-top:2rem;font-weight:600}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms!important}}

/* UX bổ sung */
.toolbar{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.fcount{font-size:.75rem;font-weight:700;opacity:.6}
@media(min-width:768px){.toolbar{flex-direction:row;align-items:center;justify-content:space-between}.searchbox{width:340px}}

.empty{padding:2.5rem 0;display:flex;flex-direction:column;align-items:flex-start;gap:1rem;font-size:1.0625rem;color:#172554bf}
.progress{position:fixed;top:0;left:0;right:0;height:4px;background:#FDE047;transform:scaleX(0);transform-origin:0 50%;z-index:60}
.copylink{margin-left:auto;font:inherit;font-size:.8125rem;font-weight:600;color:#172554;border:1px solid #17255433;border-radius:999px;padding:.35rem .9rem;background:transparent;cursor:pointer;min-height:36px}
.copylink:hover{background:#E4EAF4}
.related li{padding:0}.related li a{display:block;padding:.95rem 0 .1rem}.related li span{display:block;padding-bottom:.95rem}
.related a:hover{color:#1E3A8A}
.prose p{hanging-punctuation:first}
.prose img{max-width:100%;height:auto;border-radius:.75rem}
@media(max-width:640px){.prose{font-size:1.0625rem;line-height:1.8}.post-sub{font-size:1.125rem}.cta{padding:1.4rem 1.25rem}.cta-btn{display:block;text-align:center;padding:.6rem .9rem;white-space:nowrap}.copylink{margin-left:0}}
@media print{nav,footer,.progress,.cta,.related,.copylink,.back{display:none!important}.prose{font-size:12pt}}
.post-meta>span+time::before,.post-meta>time+span::before{content:"·";margin-right:.5rem}
.post-meta{column-gap:.5rem;row-gap:.5rem}
@media(max-width:767px){.copylink{flex-basis:auto}}

/* danh sách bài: chữ thuần, một cột, canh trái cùng mép hero và chân trang */
.blog-hero{padding-top:4.5rem;padding-bottom:2.5rem}@media(min-width:768px){.blog-hero{padding-top:7rem;padding-bottom:3rem}}
.blog-intro{margin-top:2rem;max-width:40rem}
.blog-list-sec{padding-bottom:5rem}@media(min-width:768px){.blog-list-sec{padding-bottom:7rem}}
.toolbar{margin-bottom:0}
.count{margin:1.25rem 0 .5rem;font-size:.875rem;color:#172554b3}
.post-list{max-width:44rem}
.post-list article{border-top:1px solid #17255420}
.post-list article:first-child{border-top-color:#17255433}
.item{display:block;padding:1.75rem 0 1.9rem}
.item-label{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#B45309}
.item-label span{letter-spacing:.02em;text-transform:none;font-weight:600;color:#17255499}
.item-title{margin-top:.55rem;font-size:1.5rem;font-weight:800;letter-spacing:-.025em;line-height:1.25;color:#172554;text-wrap:balance}
.item:hover .item-title{text-decoration:underline;text-decoration-color:#FDE047;text-decoration-thickness:3px;text-underline-offset:5px}
.item-desc{margin-top:.7rem;font-size:1.0625rem;line-height:1.7;color:#172554bf}
.item:focus-visible{outline-offset:-3px}
@media(max-width:640px){.item-title{font-size:1.3rem}.blog-list-sec{padding-bottom:4rem}}

/* màn rộng: mục lục nằm cột phải, dính theo khi cuộn, tô mục đang đọc */
.toc a[aria-current]{color:#B45309;font-weight:700;text-decoration-color:#B45309}
@media(min-width:1280px){
  .w-read.has-toc{max-width:1000px;display:grid;grid-template-columns:minmax(0,700px) 240px;column-gap:60px}
  .w-read.has-toc>*{grid-column:1}
  .w-read.has-toc>.toc{grid-column:2;grid-row:var(--toc-row,1)/span 30;align-self:start;position:sticky;top:6rem;margin:0;background:transparent;border:0;border-left:1px solid #17255420;border-radius:0;padding:.25rem 0 .25rem 1.25rem;font-size:.9375rem;line-height:1.45}
  .w-read.has-toc>.toc summary{pointer-events:none}.w-read.has-toc>.toc summary::after{display:none}
  .w-read.has-toc>.toc ol{list-style:none;padding-left:0}.w-read.has-toc>.toc li{margin:.55rem 0}
  .w-read.has-toc>.toc a{text-decoration:none;color:#172554b3}.w-read.has-toc>.toc a:hover{color:#172554}
  .w-read.has-toc>.toc a[aria-current]{color:#B45309}
}