/* Trang "Về JINWA" — CHỈ nạp ở /ve-jinwa (cùng cách pricing.css).
   Bố cục bài viết dài: tiêu đề + ảnh bìa, rồi các chương, mỗi chương một cột
   nhãn sticky bên trái và văn xuôi bên phải. Không dùng lưới thẻ như trang chủ.
   Chỉ dùng token của :root trong base.css; class mới có tiền tố ab-. */

#main{padding-top:var(--header-h)}
.nav-link[aria-current],.drawer a[aria-current]{color:var(--brand-700);background:var(--brand-50)}

/* ---------- Thanh tiến độ đọc (chỉ khi trình duyệt hỗ trợ) ---------- */
.ab-progress{display:none}
@supports (animation-timeline:scroll()){
  .ab-progress{display:block;position:fixed;z-index:60;top:0;left:0;right:0;height:3px;
    background:var(--grad-brand);transform-origin:0 50%;transform:scaleX(0);
    animation:ab-prog linear both;animation-timeline:scroll(root)}
  @keyframes ab-prog{to{transform:scaleX(1)}}
}

/* ---------- Vào trang: từng phần trượt lên lần lượt ---------- */
.ab-in{opacity:0;transform:translateY(18px);animation:ab-in .8s var(--ease) var(--d,0s) forwards}
@keyframes ab-in{to{opacity:1;transform:none}}

/* ---------- Đầu trang ---------- */
.ab-hero{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,var(--brand-50) 0%,#fff 100%);
  padding-block:clamp(26px,3vw,44px) clamp(36px,4vw,60px)}
.ab-hero::before{content:"";position:absolute;z-index:-1;width:520px;height:520px;border-radius:50%;
  right:-140px;top:-200px;background:radial-gradient(closest-side,rgba(91,130,245,.2),transparent);
  animation:ab-drift 14s ease-in-out infinite alternate}
.ab-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:clamp(22px,3vw,40px);
  font-size:.82rem;color:var(--muted)}
.ab-crumb li{display:flex;align-items:center;gap:9px}
.ab-crumb li+li::before{content:"";width:5px;height:5px;border-top:1.5px solid var(--line-2);
  border-right:1.5px solid var(--line-2);transform:rotate(45deg)}
.ab-crumb a{color:var(--ink-2);font-weight:500}
.ab-crumb a:hover{color:var(--brand-600)}
.ab-crumb [aria-current]{color:var(--ink);font-weight:600}

.ab-hero-head{max-width:52rem}
.ab-hero-head h1{font-size:var(--fs-display);margin:18px 0 16px}
.ab-lead{color:var(--ink-2);font-size:var(--fs-lead);line-height:1.75;max-width:44rem}
.ab-banner{margin-top:clamp(28px,3.4vw,48px)}

/* ---------- Khung ảnh + khung giữ chỗ ---------- */
.ab-frame,.ab-banner{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--bg-soft-2);
  border:1px solid var(--line);box-shadow:var(--sh-md)}
.ab-frame img,.ab-banner img{display:block;width:100%;height:auto;object-fit:cover}
.ab-video{display:block;width:100%;height:auto;object-fit:cover;background:var(--navy-900)}
.ab-ph{position:relative;display:grid;place-content:center;justify-items:center;gap:6px;width:100%;
  background:
    repeating-linear-gradient(135deg,rgba(42,82,216,.07) 0 14px,transparent 14px 28px),
    linear-gradient(135deg,var(--brand-100),var(--brand-50));
  color:var(--brand-600);outline:2px dashed var(--brand-300);outline-offset:-14px;border-radius:inherit}
.ab-ph-tag{font-size:.72rem;font-weight:700;letter-spacing:.12em;padding:4px 10px;border-radius:999px;
  background:#fff;border:1px solid var(--brand-200)}
.ab-ph-name{font-family:var(--font-head);font-weight:700;font-size:.92rem}

/* ---------- Các chương ---------- */
.ab-story{padding-block:clamp(24px,3vw,48px) clamp(40px,5vw,72px)}
.ab-chap{display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr);
  gap:clamp(24px,5vw,80px);padding-block:clamp(40px,5vw,72px);border-top:1px solid var(--line)}
.ab-chap:first-child{border-top:0}

/* cột trái dính theo màn hình khi đọc */
.ab-rail-in{position:sticky;top:calc(var(--header-h) + 28px);display:flex;flex-direction:column;gap:8px}
.ab-no{font-family:var(--font-head);font-weight:800;font-size:clamp(2.6rem,2rem + 2.4vw,4rem);line-height:1;
  color:transparent;-webkit-text-stroke:1.5px var(--brand-300);transition:color .4s var(--ease)}
.ab-chap:hover .ab-no{color:var(--brand-100)}
.ab-label{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-600)}
.ab-label::before{content:"";display:block;width:36px;height:2px;background:var(--brand-500);
  margin-bottom:12px;transform-origin:0 50%}

.ab-body{min-width:0;max-width:42rem}
.ab-body h2{font-size:var(--fs-h2);line-height:1.2;margin-bottom:22px}
.ab-p{font-size:1.07rem;line-height:1.9;color:var(--ink-2);margin-bottom:1.15em}
/* chữ cái đầu bài, như mở đầu một bài báo */
.ab-drop::first-letter{float:left;font-family:var(--font-head);font-weight:800;font-size:3.7em;line-height:.82;
  padding:.06em .12em 0 0;color:var(--brand-500)}

/* ---------- Trích dẫn sứ mệnh ---------- */
.ab-quote{position:relative;margin:10px 0 6px;padding:clamp(26px,3vw,40px) clamp(22px,3vw,40px);
  border-radius:var(--r-lg);background:var(--navy-900);color:#fff;overflow:hidden;isolation:isolate}
.ab-quote::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(70% 90% at 0% 0%,rgba(42,82,216,.55),transparent 70%)}
.ab-quote-mark{width:38px;height:auto;color:#5b82f5;opacity:.85;margin-bottom:14px}
.ab-quote p{font-family:var(--font-head);font-weight:700;font-size:clamp(1.3rem,1.1rem + .9vw,1.75rem);
  line-height:1.4;color:#fff}

/* ---------- Giá trị: danh sách có đường kẻ, không dùng thẻ ---------- */
.ab-values{margin-top:8px}
.ab-values li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding-block:20px;
  border-top:1px solid var(--line);transition:padding-left .3s var(--ease)}
.ab-values li:last-child{border-bottom:1px solid var(--line)}
.ab-values li:hover{padding-left:8px}
.ab-values-no{font-family:var(--font-head);font-weight:800;color:var(--brand-500);padding-top:2px}
.ab-values b{display:block;font-family:var(--font-head);font-size:1.08rem;margin-bottom:4px}
.ab-values span:not(.ab-values-no){color:var(--ink-2);line-height:1.7}

/* ---------- Liên kết module: các dòng chữ nối nhau ---------- */
.ab-mods{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 4px}
.ab-mods a{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
  border:1px solid var(--line-2);background:#fff;font-size:.9rem;font-weight:600;color:var(--ink);
  transition:.2s var(--ease)}
.ab-mods a:hover{border-color:var(--brand-300);background:var(--brand-50);color:var(--brand-700);transform:translateY(-2px)}
.ab-mods .ic{font-size:14px;transition:transform .2s var(--ease)}
.ab-mods a:hover .ic{transform:translateX(3px)}

/* ---------- Ảnh trong chương ---------- */
.ab-fig{margin-top:clamp(24px,3vw,36px)}
.ab-fig .ab-frame{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.ab-fig:hover .ab-frame{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.ab-fig figcaption{margin-top:12px;font-size:.86rem;color:var(--muted);padding-left:14px;
  border-left:2px solid var(--brand-200)}

/* ---------- Lời kết ---------- */
.ab-closing{padding-block:clamp(48px,6vw,88px);background:var(--bg-soft);border-top:1px solid var(--line)}
.ab-closing-in{max-width:44rem}
.ab-closing h2{font-size:var(--fs-h2);margin-bottom:14px}
.ab-closing p{color:var(--ink-2);font-size:var(--fs-lead);line-height:1.8}
.ab-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ---------- Chuyển động nền ---------- */
@keyframes ab-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(-36px,28px) scale(1.12)}}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .ab-chap{grid-template-columns:1fr;gap:14px}
  .ab-rail-in{position:static;flex-direction:row;align-items:center;gap:14px}
  .ab-no{font-size:2.2rem}
  .ab-label::before{display:none}
}
@media (max-width:560px){
  .ab-acts .btn{flex:1 1 100%}
}

/* Người dùng tắt chuyển động: nội dung hiện ngay, không animation lặp. */
@media (prefers-reduced-motion:reduce){
  .ab-in{opacity:1;transform:none;animation:none}
  .ab-hero::before,.ab-progress{animation:none}
  .ab-values li,.ab-fig .ab-frame,.ab-mods a{transition:none}
  .ab-values li:hover{padding-left:0}
  .ab-fig:hover .ab-frame,.ab-mods a:hover{transform:none}
}