.ap-blog{max-width:760px;margin:0 auto;padding:clamp(20px,4vw,48px) 16px 64px;box-sizing:border-box}
.ap-blog *{box-sizing:border-box}
.ap-crumbs{font-size:.875rem;opacity:.75;margin:0 0 1rem}
.ap-crumbs a{color:inherit}
.ap-kicker{font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;opacity:.75;margin:0 0 .5rem}
.ap-blog h1{margin:0 0 .75rem;line-height:1.15}
.ap-dek{font-size:1.125rem;opacity:.85;margin:0 0 1.75rem;line-height:1.5}
.ap-body{line-height:1.7}
.ap-body h2{margin:2rem 0 .75rem;line-height:1.25}
.ap-body p,.ap-body ul{margin:0 0 1rem}
.ap-body ul,.ap-box ul{list-style:disc;padding-left:1.4rem}
.ap-body li{margin:.25rem 0}
.ap-box{border:1px solid color-mix(in srgb,currentColor 18%,transparent);border-radius:12px;padding:16px 20px;margin:2rem 0}
.ap-box h2{margin-top:0;font-size:1.125rem}
.ap-box ul{margin:0}
.ap-note{font-size:.875rem;opacity:.75;line-height:1.55}
.ap-list{list-style:none;margin:0;padding:0}
.ap-list li{padding:1.25rem 0;border-bottom:1px solid color-mix(in srgb,currentColor 14%,transparent)}
.ap-list h2{font-size:1.25rem;margin:.25rem 0 .5rem;line-height:1.3}
.ap-list h2 a{color:inherit;text-decoration:none}
.ap-list h2 a:hover{text-decoration:underline}
.ap-list p{margin:0;opacity:.85}
.ap-date{font-size:.8125rem;opacity:.7}
.ap-pager{display:flex;justify-content:space-between;gap:1rem;margin-top:2rem}
.ap-accent{color:var(--ap-accent,inherit)}
.ap-figure{margin:0 0 1.75rem}
.ap-figure img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px}
.ap-figure figcaption{font-size:.75rem;opacity:.7;margin-top:.5rem;line-height:1.45}
.ap-figure figcaption a{color:inherit}
.ap-list li.has-thumb{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:start}
.ap-thumb img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:8px}
@media (max-width:560px){.ap-list li.has-thumb{grid-template-columns:1fr;gap:10px}}
@media (max-width:480px){.ap-dek{font-size:1rem}}

/* ---- CSS riêng của web (shell/autopress-blog.css hoặc autopress-blog.css) ---- */
/* FirstPip — /news/ (autopress) "Forex news for beginners" theo thẻ lộ trình (.path) của trang chủ (blog-layout-1021).
   Nạp riêng cho /news/ qua static_blog.py (autopress-blog.css ở gốc web → /news/ap-site.css?v=băm); trang web không đổi.
   Da FirstPip v2: nền trắng, Georgia cho tít, thẻ bo 6px viền mảnh + vạch trái 3px (xanh "pop" khi rê), chip ngày mono như .step.
   Bài mới nhất: thẻ rộng (ảnh 3 | chữ 2) trên nền --paper; còn lại 3 cột (≥960px) / 2 cột (680–959px); hàng cuối thiếu ô tự giãn. */
.ap-blog.ap-hub{max-width:1120px;padding:28px 24px 88px}
.ap-crumbs a{display:inline-block;padding:4px 0;min-height:24px;color:var(--muted)}
.ap-hub .ap-crumbs{font-size:13px;color:var(--muted);opacity:1}
/* CSS web đặt header{sticky; nền; kẻ dưới} cho mọi <header> → gỡ cho <header class="ap-head"> của blog (hub + bài) */
main .ap-blog header.ap-head,:root[data-theme] main .ap-blog header.ap-head,:root:not([data-theme="light"]) main .ap-blog header.ap-head{position:static;top:auto;z-index:auto;background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.ap-hub .ap-head{max-width:46rem;margin:0 0 32px}
.ap-hub .ap-head h1{font-family:var(--serif);font-weight:700;font-size:clamp(2.2rem,4.6vw,3.25rem);line-height:1.06;letter-spacing:-.02em;margin:0 0 14px;max-width:18ch}
.ap-hub .ap-dek{font-size:17.5px;color:var(--muted);opacity:1;max-width:60ch;margin:0}
.ap-hub .ap-list{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.ap-hub .ap-list>li,.ap-hub .ap-list>li.has-thumb{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:12px 12px 22px 15px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);transition:border-color .15s,box-shadow .15s}
.ap-hub .ap-list>li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:var(--r) 0 0 var(--r);background:var(--line-2);transition:background .15s}
.ap-hub .ap-thumb{display:block;border-radius:4px;overflow:hidden;background:var(--paper)}
.ap-hub .ap-thumb img{border-radius:0}
.ap-hub .ap-card-body{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:0 6px}
.ap-hub .ap-date{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--ink-2);opacity:1;background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:3px 7px}
.ap-hub .ap-list h2{font-family:var(--serif);font-weight:700;font-size:1.25rem;line-height:1.25;letter-spacing:-.01em;margin:0}
.ap-hub .ap-list h2 a{color:var(--ink);text-decoration:none}
.ap-hub .ap-list h2 a::after{content:"";position:absolute;inset:0}
.ap-hub .ap-list h2 a:focus-visible{outline:none}
.ap-hub .ap-list>li:focus-within{outline:3px solid var(--green-2);outline-offset:2px}
.ap-hub .ap-list>li:hover{border-color:var(--green-2);box-shadow:0 1px 2px rgba(16,28,36,.04),0 10px 24px -14px rgba(12,53,80,.28)}
.ap-hub .ap-list>li:hover::before,.ap-hub .ap-list>li[data-ap-lead]::before{background:var(--pop)}
.ap-hub .ap-list>li:hover h2 a{color:var(--green)}
.ap-hub .ap-list p{font-size:15px;color:var(--ink-2);opacity:1;line-height:1.55;margin:0}
.ap-hub .ap-list>li[data-ap-lead]{background:var(--paper);padding:14px 14px 24px 17px}
.ap-hub .ap-list>li[data-ap-lead] h2{font-size:clamp(1.6rem,3vw,2.25rem);line-height:1.1}
.ap-hub .ap-list>li[data-ap-lead] p{font-size:16.5px}
@media (min-width:680px){
  .ap-hub .ap-list{grid-template-columns:repeat(2,1fr);gap:22px}
  .ap-hub .ap-list>li[data-ap-lead]{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:28px;align-items:center;padding:14px 14px 14px 17px}
}
@media (min-width:680px) and (max-width:959px){
  .ap-hub .ap-list>li[data-ap-lead]~li:nth-child(2n):last-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:center;padding-bottom:12px}
}
@media (min-width:960px){
  .ap-hub .ap-list{grid-template-columns:repeat(3,1fr)}
  .ap-hub .ap-list>li[data-ap-lead]~li:nth-child(3n+2):last-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:28px;align-items:center;padding-bottom:12px}
  .ap-hub .ap-list>li[data-ap-lead]~li:nth-child(3n+3):last-child{grid-column:span 2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:center;padding-bottom:12px}
}
@media (prefers-reduced-motion:reduce){.ap-hub .ap-list>li,.ap-hub .ap-list>li::before{transition:none}}
/* trang bài autopress (cùng file): vùng chạm ≥24px cho link "Read next" và "← All posts" (breadcrumb ở trên) */
.ap-article .ap-box:not(.ap-sources) li>a:only-child{display:inline-block;padding:2px 0;min-height:24px}
.ap-article>p>a:only-child{display:inline-block;padding:4px 0;min-height:24px}
.ap-hub .ap-list h2 a{display:block;min-height:24px}
/* fix-1027 (kiểm UI/UX 24/10): breadcrumb trang bài bị mờ bởi opacity .75 mặc định (#839098/#fff = 3.27). Bỏ mờ, giữ màu --muted của web (sáng ~5.5:1, tối ~7.7:1). */
.ap-crumbs{opacity:1;color:var(--muted)}