/* =========================================================
   PAGE: VỀ PDENT → PDENT là  (gioi-thieu.html)
   Nền các section nối liền bằng gradient theo chuỗi token --sec-0/1/2
   ========================================================= */
.ab-sec{position:relative; padding-block:clamp(56px,7vw,104px)}
.ab-sec .section-head{margin-bottom:clamp(28px,4vw,48px)}
.ab-toc .brand-pill{text-decoration:none}

/* ---------- Giới thiệu ---------- */
.ab-intro{background:linear-gradient(180deg, var(--sec-0), var(--sec-1))}
.ab-intro__grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px,5vw,80px); align-items:start}
.ab-intro__statement{display:flex; flex-direction:column; gap:var(--space-4)}
.ab-quote{margin:0; font-size:clamp(24px,2.8vw,38px); line-height:1.3; font-weight:var(--fw-bold); color:var(--c-heading); letter-spacing:-.01em; text-wrap:balance}
.ab-quote em{font-style:normal; background:linear-gradient(90deg, var(--pd-blue-2), var(--pd-blue-3)); -webkit-background-clip:text; background-clip:text; color:transparent}
.ab-intro__body{display:flex; flex-direction:column; gap:var(--space-4); padding-top:clamp(0px,2.4vw,40px)}
.ab-intro__body p{margin:0; font-size:15.5px; line-height:1.85; color:var(--c-text)}
.ab-intro__body b{color:var(--c-heading)}
.ab-solutions{list-style:none; margin:clamp(40px,5vw,64px) 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-4)}
.ab-solutions a{display:flex; flex-direction:column; gap:10px; height:100%; padding:var(--space-5); border-radius:var(--radius-lg); background:var(--c-surface); border:1px solid var(--c-line); box-shadow:var(--c-shadow); color:var(--c-text); transition:transform .3s var(--ease), border-color .3s}
.ab-solutions a:hover{transform:translateY(-4px); border-color:var(--c-accent)}
.ab-solutions__ic{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--c-accent-soft); color:var(--c-accent)}
.ab-solutions__ic svg{width:24px; height:24px}
.ab-solutions b{font-size:15px; color:var(--c-heading); text-transform:uppercase; letter-spacing:.04em}
.ab-solutions span:last-child{font-size:13.5px; line-height:1.65; color:var(--c-text-muted)}

/* ---------- Tầm nhìn & sứ mệnh ---------- */
.ab-vm{background:var(--sec-1); padding-block:0 clamp(56px,7vw,104px)}
.ab-vm__grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5)}
.ab-vm__card{position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; gap:var(--space-3); padding:clamp(28px,3.4vw,48px); border-radius:var(--radius-lg); color:var(--c-text);
  background:radial-gradient(120% 140% at 100% 0%, #264682 0%, #12285A 55%, #0C1B3D 100%); border:1px solid rgba(172,205,236,.16)}
.ab-vm__card::after{content:""; position:absolute; right:-40px; bottom:-60px; width:240px; height:240px; border-radius:50%; z-index:-1; background:radial-gradient(circle, rgba(84,125,191,.35), transparent 70%)}
.ab-vm__ic{width:52px; height:52px; border-radius:14px; display:grid; place-items:center; color:#FFFFFF; background:rgba(172,205,236,.14); border:1px solid rgba(172,205,236,.25)}
.ab-vm__ic svg{width:28px; height:28px}
.ab-vm__card h2{margin:var(--space-2) 0 0; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--pd-blue-3)}
.ab-vm__card p{margin:0; font-size:clamp(19px,1.9vw,24px); line-height:1.5; font-weight:var(--fw-medium); color:#FFFFFF; text-wrap:balance}
.ab-vm__card p b{color:#FFFFFF; font-weight:var(--fw-bold); background:linear-gradient(transparent 62%, rgba(84,125,191,.45) 62%)}

/* ---------- Giá trị cốt lõi ---------- */
.ab-values{background:linear-gradient(180deg, var(--sec-1), var(--sec-2))}
.ab-values__list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--space-4); counter-reset:v}
.ab-values__list li{position:relative; display:flex; flex-direction:column; gap:var(--space-4); padding:var(--space-5); border-radius:var(--radius-lg); background:var(--c-surface); border:1px solid var(--c-line); box-shadow:var(--c-shadow)}
.ab-values__list li::before{content:""; position:absolute; left:var(--space-5); right:var(--space-5); top:0; height:3px; border-radius:0 0 3px 3px; background:linear-gradient(90deg, var(--pd-blue-1), var(--pd-blue-3))}
.ab-values__n{font-size:40px; line-height:1; font-weight:var(--fw-xbold); color:transparent; -webkit-text-stroke:1.4px var(--c-accent); letter-spacing:-.02em}
.ab-values__list p{margin:0; font-size:13.5px; line-height:1.7; color:var(--c-text-muted)}
.ab-values__list p{font-size:14px} .ab-values__list b{font-size:15px; color:var(--c-heading)}

/* ---------- Lịch sử ---------- */
.ab-history{background:linear-gradient(180deg, var(--sec-2), var(--sec-1))}
.ab-years{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:-12px 0 var(--space-7)}
.ab-years__btn{font-size:13px; font-weight:var(--fw-semibold); color:var(--c-heading); padding:8px 16px; border-radius:var(--radius-pill); border:1px solid var(--c-line); background:var(--c-surface); transition:background-color .2s,color .2s}
.ab-years__btn:hover{background:var(--c-on); color:#FFFFFF; border-color:var(--c-on)}
.ab-timeline{--rail:150px; position:relative; list-style:none; margin:0 auto; padding:0; max-width:980px}
.ab-timeline::before{content:""; position:absolute; left:var(--rail); top:8px; bottom:8px; width:2px; background:linear-gradient(180deg, var(--pd-blue-2), rgba(84,125,191,.15))}
.ab-timeline__year{position:relative; height:0}
.ab-timeline__year span{position:absolute; left:0; width:calc(var(--rail) - 28px); top:14px; text-align:right; font-size:clamp(26px,3vw,40px); font-weight:var(--fw-xbold); line-height:1; color:var(--c-heading); letter-spacing:-.02em}
.ab-timeline__item{position:relative; padding:0 0 var(--space-4) calc(var(--rail) + 32px); scroll-margin-top:120px}
.ab-timeline__item::before{content:""; position:absolute; left:calc(var(--rail) - 6px); top:22px; width:14px; height:14px; border-radius:50%; background:var(--c-bg); border:3px solid var(--pd-blue-2); box-sizing:border-box}
.ab-timeline__card{padding:var(--space-4) var(--space-5); border-radius:var(--radius-lg); background:var(--c-surface); border:1px solid var(--c-line); box-shadow:var(--c-shadow)}
.ab-timeline__card time{font-size:12px; font-weight:var(--fw-bold); letter-spacing:.12em; text-transform:uppercase; color:var(--c-accent)}
.ab-timeline__card h3{margin:6px 0 4px; font-size:16px; line-height:1.45; color:var(--c-heading)}
.ab-timeline__card p{margin:0; font-size:13.5px; line-height:1.65; color:var(--c-text-muted)}
.ab-timeline__foot{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px}
.ab-timeline__foot .link-arrow{margin-left:auto; font-size:13px}
.ab-timeline__item.is-draft .ab-timeline__card{border-style:dashed; background:transparent; box-shadow:none}
.ab-timeline__item.is-draft::before{border-style:dashed}
#nam-2021{scroll-margin-top:120px}

/* ---------- Cơ cấu tổ chức ---------- */
.ab-org{background:var(--sec-1)}
.org{--ln:rgba(84,125,191,.55); display:flex; flex-direction:column; align-items:center}
.org__node{list-style:none; position:relative; display:flex; flex-direction:column; gap:2px; padding:14px 16px; border-radius:14px; background:var(--c-surface); border:1px solid var(--c-line); box-shadow:var(--c-shadow); text-align:center}
.org__node small{font-size:10.5px; font-weight:var(--fw-bold); letter-spacing:.14em; text-transform:uppercase; color:var(--c-text-muted)}
.org__node b{font-size:14px; line-height:1.35; color:var(--c-heading)}
.org__node span{font-size:11.5px; color:var(--c-text-muted)}
.org__top{position:relative; padding-bottom:28px}
.org__top::after{content:""; position:absolute; left:50%; bottom:0; width:2px; height:28px; background:var(--ln)}
.org__node--lead{padding:16px 36px; color:#FFFFFF; background:linear-gradient(135deg, #264682, #0C1B3D); border-color:rgba(172,205,236,.25)}
.org__node--lead small{color:var(--pd-blue-3)} .org__node--lead b{color:#FFFFFF; font-size:16px}
.org__depts{position:relative; width:100%; margin:0; padding:28px 0 0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--space-3)}
.org__depts::before{content:""; position:absolute; top:0; left:calc((100% - 4 * var(--space-3)) / 10); right:calc((100% - 4 * var(--space-3)) / 10); height:2px; background:var(--ln)}
.org__depts > li::before{content:""; position:absolute; left:50%; top:-28px; width:2px; height:28px; background:var(--ln)}
.org__offices{display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-3) var(--space-6); margin-top:var(--space-5); padding-top:var(--space-4); border-top:1px dashed var(--c-line); width:100%}
.org__offices div{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--c-text)}
.org__offices svg{width:16px; height:16px; color:var(--c-accent)}
.org__offices b{color:var(--c-heading); margin-right:4px}
.ab-note{margin:var(--space-5) 0 0; text-align:center; font-size:12.5px; color:var(--c-text-muted)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .ab-solutions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-values__list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .org__depts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .org__depts::before{left:calc((100% - 2 * var(--space-3)) / 6); right:calc((100% - 2 * var(--space-3)) / 6)}
}
@media (max-width:760px){
  .ab-intro__grid,.ab-vm__grid{grid-template-columns:1fr}
  .ab-intro__body{padding-top:0}
  .ab-values__list{grid-template-columns:1fr}
  .ab-values__list li{flex-direction:row; align-items:flex-start}
  .ab-values__n{font-size:32px; min-width:2.2ch}
  .ab-timeline{--rail:8px}
  .ab-timeline__year{height:auto; padding:var(--space-4) 0 var(--space-3) 32px}
  .ab-timeline__year span{position:static; display:block; width:auto; text-align:left}
  .ab-timeline__item{padding-left:32px}
  /* sơ đồ tổ chức dạng cây dọc trên mobile */
  .org{align-items:stretch}
  .org__top{align-self:stretch}
  .org__node--lead{text-align:left}
  .org__depts{grid-template-columns:1fr; padding:0 0 0 24px; gap:10px}
  .org__depts::before{left:8px; right:auto; top:-28px; bottom:22px; width:2px; height:auto}
  .org__depts > li{text-align:left}
  .org__depts > li::before{left:-16px; top:50%; width:16px; height:2px}
  .org__top::after{left:8px}
}
@media (max-width:560px){ .ab-solutions{grid-template-columns:1fr} }