/*
 * assets/css/page-tacgia.css — CSS RIÊNG của trang "Tác giả"
 * (page-templates/tac-gia.php).
 *
 * -----------------------------------------------------------------------
 * CÙNG QUY ƯỚC page-nangluc.css / page-vechungtoi.css
 * -----------------------------------------------------------------------
 * `.nl-sec`/`.nl-sec-alt`/`.nl-head` LẶP LẠI ở đây thay vì tách file dùng
 * chung — đúng tiền lệ đã có (hai file kia cũng tự định nghĩa lại ba class
 * này thay vì gộp): mỗi trang tự nạp CSS của mình qua is_page_template(),
 * gộp ba dòng CSS bất động vào một file "shared.css" nạp trên MỌI trang chỉ
 * để tiết kiệm ba dòng là đổi trade-off sai hướng cho một site không dùng
 * build step nào cả.
 *
 * Không dùng transform/opacity nào ngoài hiệu ứng "hiện dần" của
 * `.au-exp-item` (JS gắn class `.show`, tôn trọng `prefers-reduced-motion`
 * — xem assets/js/tacgia.js).
 *
 * @package Vinpack
 */

/* ============================================================
   1. Nhịp trang & tiêu đề khối — cùng khuôn page-nangluc.css
   ============================================================ */
.nl-sec{ padding-block:calc(var(--sp-6) * 2); padding-inline:0; }
.nl-sec-alt{ background:var(--bg-alt); }
.nl-head{ max-width:720px; margin:0 auto 44px; text-align:center; }
.nl-head h2{ font-size:30px; margin-bottom:14px; line-height:1.25; text-wrap:balance; }
.nl-head p{ color:var(--text-muted); font-size:16px; line-height:1.7; text-wrap:pretty; }
/* --text-muted trên --bg-alt chỉ 4.24:1, trượt AA cho chữ 15.5px — cùng vá đã ghim ở page-nangluc.css mục 2. */
.nl-sec-alt .nl-head p{ color:var(--text); }
/*
 * Nhan "kicker" in hoa phia TREN moi H2 — dung mockup vinpack_tac_gia_3.html
 * (truoc day thieu: commit ef47fab ghi ro day la phan NGOAI PHAM VI vi field
 * group chua tach field rieng cho nhan; dot nay da them 6 field *_label).
 * Mot khai bao dung chung cho CA BA ngu canh dat nhan — .nl-head (Gioi thieu/
 * Hanh trinh/Noi dung chuyen mon), .au-exp-copy (Kinh nghiem), .au-media-copy
 * (Thanh tuu/Cong dong) — thay vi lap ba lan nhu mockup.
 *
 * MAU: mockup ghi var(--cobalt) (#5C90F5) nhung mau do chi dat 3.10:1 tren
 * nen trang — TRUOT AA cho chu 13px. Dung --cobalt-ink (#3366CC, 5.37:1 tren
 * trang va 4.70:1 tren --bg-alt) — dung token ma theme DA dung cho chinh loai
 * nhan nho nay o .au-post .cat ngay trong file nay.
 */
.nl-head .label,
.au-exp-copy .label,
.au-media-copy .label{
  display:inline-block; font-size:13px; font-weight:700; text-transform:uppercase;
  letter-spacing:1px; color:var(--cobalt-ink); margin-bottom:12px;
}

/* ============================================================
   2. Hero (`.au-hero`)
   ============================================================ */
.au-hero{
  /* 160deg: hướng gradient dùng chung của mọi dải nền navy tràn màn hình
     (hero trang chủ, dải video, bảy banner còn lại) — 07/09/2026. */
  background:linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 100%);
  color:var(--white);
  padding:calc(var(--sp-8) + 14px) 0 var(--sp-7);
  position:relative; overflow:hidden;
}
/*
 * Vang sang tron mo goc phai tren — dung mockup vinpack_tac_gia_3.html.
 * Thuan trang tri nen dat o ::after (khong them thang <div> rong vao DOM).
 * `overflow:hidden` o .au-hero cat phan tran ra ngoai; ba khoi noi dung
 * (.au-crumb / .au-head / .hero-facts) deu duoc nang z-index:1 ben duoi vi
 * ::after mac dinh ve DE LEN noi dung khong dinh vi.
 */
.au-hero::after{
  content:""; position:absolute; right:-90px; top:-90px;
  width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle, rgba(92,144,245,.25), transparent 70%);
}
.au-crumb{
  display:flex; align-items:center; gap:var(--sp-2);
  font-size:13px; color:var(--on-navy-text); margin-bottom:var(--sp-6);
  position:relative; z-index:1;
}
.au-crumb a{ color:var(--on-navy-text); text-decoration:none; }
.au-crumb a:hover,
.au-crumb a:focus-visible{ color:var(--white); }
.au-crumb [aria-current]{ color:var(--white); font-weight:600; }

.au-head{ display:flex; gap:var(--sp-6); align-items:center; margin-bottom:var(--sp-6); position:relative; z-index:1; }
.au-photo{
  width:300px; height:300px; flex-shrink:0; border-radius:24px;
  overflow:hidden; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center;
}
.au-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.au-photo svg{ width:132px; height:132px; color:rgba(255,255,255,.5); }
.au-head h1{ margin-bottom:14px; }

.au-body h1{ color:var(--white); font-size:38px; margin-bottom:10px; letter-spacing:-.4px; }
.au-title{ font-size:16px; font-weight:700; color:var(--on-navy-accent); margin-bottom:var(--sp-4); }
.au-lead{ font-size:15.5px; line-height:1.75; color:var(--on-navy-text); max-width:560px; margin-bottom:var(--sp-5); }

.au-links{ display:flex; flex-wrap:wrap; gap:var(--sp-3); list-style:none; margin:0; padding:0; }
.au-link{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.28); color:var(--white);
  font-size:13.5px; font-weight:600; text-decoration:none;
  transition:background var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease);
}
.au-link:hover,
.au-link:focus-visible{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.5); }

/*
 * Dai so lieu ke duong doc ngan giua cac muc — dung mockup
 * vinpack_tac_gia_3.html. Dung flex (khong phai grid 5 cot) vi moi muc rong
 * theo noi dung that: nhan "HOC VAN"/"Ky thuat Tau thuy" dai hon "NAM SINH"
 * /"1990" nhieu, chia deu 5 cot se de khoang trong lech nhau giua cac vach.
 * `border-top` + `padding-top` tao vach ngang phia tren ca dai.
 */
.hero-facts{
  display:flex; flex-wrap:wrap;
  list-style:none; padding:0;
  /*
   * margin-top THAY CHO <hr class="au-rule"> da go (khach 03/09/2026:
   * "xoa duong line nay a"). Hai duong ke chong nhau: mot cua <hr>, mot
   * cua chinh dai so lieu. Giu lai duong cua dai so lieu vi no thuoc ve
   * dai — an dai di thi duong bien theo. Khoang cach giu nguyen: <hr>
   * truoc day dong gop margin-bottom var(--sp-6).
   */
  margin:var(--sp-6) 0 0;
  border-top:1px solid rgba(255,255,255,.18); padding-top:24px;
  position:relative; z-index:1;
}
.hf-item{ flex:1 1 auto; min-width:150px; padding:0 26px; border-right:1px solid rgba(255,255,255,.14); }
.hf-item:first-child{ padding-left:0; }
.hf-item:last-child{ border-right:none; }
.hf-k{ display:block; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:#8FB4FF; margin-bottom:6px; }
.hf-v{ display:block; font-family:var(--font-head); font-weight:800; font-size:16px; color:var(--white); line-height:1.35; }

@media(max-width:960px){
  .au-head{ flex-direction:column; text-align:center; }
  .au-photo{ width:200px; height:200px; }
  .au-lead{ margin-inline:auto; }
  .au-links{ justify-content:center; }
  .hero-facts{
    display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--sp-5);
    border-top:none; padding-top:0; text-align:center;
  }
  .hf-item{ padding:0; border-right:none; min-width:0; }
}

/* ============================================================
   3. Giới thiệu (`.au-intro` + `.au-mos`)
   ============================================================ */
/*
 * Mockup xep hai khoi CHONG LEN NHAU, khong phai hai cot: doan chu hep 720px
 * can giua truoc, roi mosaic anh trai rong het .wrap ben duoi. Ban dung truoc
 * day boc ca hai trong .au-intro-grid 2 cot — mosaic bi ep con ~122px/o, mat
 * han nhip anh lon/nho ma bo cuc 5 cot duoi day tao ra. Wrapper do da duoc go
 * khoi template-parts/tacgia/intro.php.
 */
.au-intro{ max-width:720px; margin-inline:auto; }
.au-intro p{ color:var(--text); font-size:16.5px; line-height:1.9; margin-bottom:18px; text-wrap:pretty; }
.au-intro p:last-child{ margin-bottom:0; }
.au-intro strong{ color:var(--navy); font-weight:700; }

/*
 * Mosaic BAY anh, luoi 5 cot 2 hang, dat tay tung o — khong phai auto-flow.
 * m3 la o doc cao gap doi (cot 3, an ca hai hang), m4 va m5 la hai o ngang
 * doi (span 2 cot). Chinh nhip to/nho khong deu nay tao cam giac "anh bao"
 * ma luoi 4 cot deu tam truoc day khong co.
 */
.au-mos{
  margin-top:46px;
  display:grid; grid-template-columns:1.95fr 2.02fr 3.18fr 2fr 2fr;
  grid-template-rows:214px 214px; gap:12px;
}
.au-mos figure{
  margin:0; border-radius:var(--r-lg); overflow:hidden; background:var(--img-bg);
  transition:transform var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease);
}
.au-mos figure:hover{ transform:translateY(-3px); box-shadow:var(--sh-3); }
.au-mos img{ width:100%; height:100%; object-fit:cover; display:block; }
.au-mos .m1{ grid-column:1; grid-row:1; }
.au-mos .m2{ grid-column:2; grid-row:1; }
.au-mos .m3{ grid-column:3; grid-row:1 / span 2; }
.au-mos .m4{ grid-column:4 / span 2; grid-row:1; }
.au-mos .m5{ grid-column:1 / span 2; grid-row:2; }
.au-mos .m6{ grid-column:4; grid-row:2; }
.au-mos .m7{ grid-column:5; grid-row:2; }

@media(max-width:1000px){
  .au-mos{ grid-template-rows:170px 170px; gap:10px; }
}
@media(max-width:760px){
  .au-mos{ margin-top:32px; grid-template-columns:repeat(2, 1fr); grid-template-rows:none; grid-auto-rows:130px; }
  /* Pha bo moi vi tri dat tay o tren — mobile xep lai tuan tu 2 cot. */
  .au-mos figure{ grid-column:auto !important; grid-row:auto !important; }
  .au-mos .m5, .au-mos .m6, .au-mos .m7{ display:none; }
}

/* ============================================================
   4. Hành trình (`.hj-grid`)
   ============================================================ */
/*
 * BA THE CANH NHAU, cao dan trai -> phai (250/300/350px) va canh MEP DUOI
 * (`align-items:end`) — dung mockup: chieu cao tang dan chinh la hinh anh
 * "leo thang" cua ba giai doan. Ban dung truoc day xep DOC va thut le dan
 * (margin-left 0/32/64px) — cung y do "leo thang" nhung dien dat khac han.
 */
.hj-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;
  align-items:end; margin-inline:auto;
}
.hj-card{
  position:relative; border-radius:var(--r-xl); padding:28px 26px; overflow:hidden;
  background:var(--white); border:1px solid var(--border);
  box-shadow:0 6px 20px rgba(0,27,183,.06);
  display:flex; flex-direction:column; justify-content:flex-end;
  transition:background .25s ease, border-color .25s ease, color .25s ease,
             transform var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease);
}
.hj-card.s1{ min-height:250px; }
.hj-card.s2{ min-height:300px; }
.hj-card.s3{ min-height:350px; }
/*
 * Nang the khi hover — mockup. Doi mau navy o rule ngay duoi CHI khi hover
 * (khach yeu cau, 01/09/2026) — .s3 KHONG con nen navy thuong truc nhu ban
 * dau nua; ca ba the (s1/s2/s3) gio dong nhat: trang mac dinh, chi doi
 * navy/chu trang khi hover.
 */
.hj-card:hover{ transform:translateY(-6px); box-shadow:0 22px 46px rgba(0,27,183,.16); }
.hj-card:hover{
  background:linear-gradient(150deg, var(--navy) 0%, var(--navy-dark) 100%);
  border-color:transparent; color:var(--white);
}
.hj-card:hover h3{ color:var(--white); }
.hj-card:hover p{ color:var(--on-navy-text); }
/*
 * So thu tu la SO LON MO chim goc phai tren (watermark), khong phai nhan nho
 * dat truoc tieu de — dung mockup.
 */
.hj-num{
  position:absolute; right:16px; top:6px;
  font-family:var(--font-head); font-weight:800; font-size:66px; line-height:1;
  color:rgba(0, 27, 183, .07);
  transition:color .25s ease;
}
.hj-card h3,
.hj-card p{ position:relative; z-index:1; }
.hj-card:hover .hj-num{ color:var(--on-navy-accent); }
.hj-card h3{ font-size:19px; margin-bottom:8px; transition:color .25s ease; }
.hj-card p{ color:var(--text-muted); font-size:14.5px; line-height:1.7; max-width:560px; transition:color .25s ease; }

@media(max-width:960px){
  /* Mot cot: chieu cao bac thang mat y nghia, tra ve cao theo noi dung. */
  .hj-grid{ grid-template-columns:1fr; align-items:stretch; max-width:820px; }
  .hj-card.s1,
  .hj-card.s2,
  .hj-card.s3{ min-height:0; }
}

/* ============================================================
   5. Kinh nghiệm thực tế (`.au-exp`)
   ============================================================ */
/*
 * MOT COT, tieu de can giua o tren — dung mockup. Ban dung truoc day chia 2
 * cot (tieu de dinh sticky ben trai, danh sach ben phai); mockup dat tieu de
 * lam "mo dau" can giua roi danh sach chay het be ngang ben duoi.
 */
/*
 * 896px chu khong phai 960px: mockup gan CA HAI class len mot the
 * (`<div class="wrap au-exp">`) nen max-width:960px cua .au-exp con bi tru
 * padding 32px hai ben cua .wrap -> be rong noi dung THUC TE 896px. O day
 * .au-exp nam BEN TRONG .wrap (khong gop class) nen phai ghi thang 896px
 * moi ra dung cung mot be rong.
 */
.au-exp{ display:grid; grid-template-columns:1fr; gap:0; align-items:start; max-width:896px; margin-inline:auto; }
.au-exp-copy{ max-width:720px; margin:0 auto 48px; text-align:center; }
.au-exp-copy h2{ font-size:30px; margin-bottom:16px; line-height:1.25; text-wrap:balance; }
.au-exp-copy p{ color:var(--text-muted); font-size:16px; line-height:1.8; text-wrap:pretty; }

.au-exp-list{ list-style:none; margin:0; padding:0; display:grid; position:relative; }
/*
 * Duong noi doc mo dan hai dau (gradient) thay cho vach dac — mockup.
 */
.au-exp-list::before{
  content:''; position:absolute; left:23px; top:30px; bottom:30px; width:2px;
  background:linear-gradient(180deg, transparent, rgba(0,27,183,.18) 12%, rgba(0,27,183,.18) 88%, transparent);
}
.au-exp-item{
  position:relative; display:grid; grid-template-columns:48px 1fr; gap:24px;
  padding:22px 0; align-items:start;
}
.au-exp-item:first-child{ padding-top:0; }
.au-exp-item:last-child{ padding-bottom:0; }
/*
 * `.au-exp-item` LUÔN opacity:1 mặc định (khai báo ở trên, không đổi).
 * Hiệu ứng "hiện lần lượt khi cuộn tới" đã CHUYỂN sang GSAP + ScrollTrigger
 * dùng chung toàn site (assets/js/motion.js, xem docblock đầu file đó) —
 * không còn gate-class `.js-au-anim`/`.show` nữa: GSAP tự set trạng thái ẩn
 * bằng gsap.set() (inline style), CHỈ KHI đã tải được GSAP + KHÔNG bật
 * prefers-reduced-motion, cùng đúng hợp đồng suy giảm êm như trước.
 */
/* O vuong bo goc 48px (mockup), khong phai tron 44px. */
.au-exp-n{
  position:relative; z-index:1; flex-shrink:0;
  width:48px; height:48px; border-radius:14px;
  background:var(--white); border:1px solid var(--border);
  box-shadow:0 4px 14px rgba(0,27,183,.07);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:800; font-size:16px; line-height:1; color:var(--cobalt-ink);
  transition:background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
/* Dao mau o so khi ro chuot vao dong — mockup. */
.au-exp-item:hover .au-exp-n{
  background:var(--cobalt-ink); border-color:var(--cobalt-ink); color:var(--white);
  box-shadow:0 10px 24px rgba(0,27,183,.22);
}
.au-exp-item h3{ font-size:18px; margin-bottom:8px; padding-top:12px; text-wrap:balance; }
.au-exp-item p{ color:var(--text); font-size:15.5px; line-height:1.85; text-wrap:pretty; }

@media(max-width:960px){
  .au-exp-copy{ margin-bottom:36px; }
}
@media(max-width:600px){
  .au-exp-list::before{ left:19px; }
  .au-exp-item{ grid-template-columns:40px 1fr; gap:16px; }
  .au-exp-n{ width:40px; height:40px; border-radius:12px; font-size:14.5px; }
  .au-exp-item h3{ font-size:16.5px; padding-top:8px; }
}

/* ============================================================
   6. Thành tựu / Cộng đồng (`.au-media`, dùng chung, `.rev` đảo chiều)
   ============================================================ */
.au-media{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.au-media.rev{ grid-template-columns:1fr 1fr; }
.au-media.rev .au-media-visual{ order:2; }
.au-media.rev .au-media-copy{ order:1; }

.au-shots{ position:relative; aspect-ratio:1/.92; }
.au-shot{
  position:absolute; border-radius:var(--r-lg); overflow:hidden;
  border:6px solid var(--white); box-shadow:var(--sh-3);
  background:var(--img-bg);
  transition:transform .35s ease, box-shadow .35s ease;
}
.au-shot img{ width:100%; height:100%; object-fit:cover; display:block; }
/*
 * Ba anh chong lech theo dung toa do mockup: anh lon goc trai tren, anh vua
 * dam sang PHAI-DUOI, anh nho dam sang TRAI-DAY. Ban dung truoc day dat anh
 * vua o trai-duoi va anh nho o phai-tren (nguoc lai), lam cum anh nghieng ve
 * huong khac. Anh lon giu vien + do do trang nhu hai anh kia (mockup), khong
 * con bi bo vien rieng.
 */
.au-shot.big{ top:0; left:0; width:76%; height:64%; z-index:1; }
.au-shots .au-shot:nth-child(2){ top:36%; right:0; width:52%; height:46%; z-index:2; }
.au-shots .au-shot:nth-child(3){ bottom:0; left:9%; width:35%; height:37%; z-index:3; }
.au-shots:hover .au-shot:nth-child(2){ transform:translateY(-6px); box-shadow:0 26px 56px rgba(0,27,183,.18); }
.au-shots:hover .au-shot:nth-child(3){ transform:translateY(-4px); box-shadow:0 24px 50px rgba(0,27,183,.18); }
/* Dao chieu khoi "Cong dong": lat guong de lop chong huong ve phia chu. */
.au-media.rev .au-shot.big{ left:auto; right:0; }
.au-media.rev .au-shots .au-shot:nth-child(2){ right:auto; left:0; }
.au-media.rev .au-shots .au-shot:nth-child(3){ left:auto; right:9%; }

/* Khoi nay CAN TRAI (chu ben canh anh) nen dung `pretty`: `balance` de lai
   mot mang trong ben phai — do that 156/530px. Cac h2 khac trong file nay
   (.nl-head, .au-exp-copy, .au-cta-box) CAN GIUA nen giu `balance`. */
.au-media-copy h2{ font-size:30px; margin-bottom:16px; line-height:1.25; text-wrap:pretty; }
.au-media-copy > p{ color:var(--text); font-size:16px; line-height:1.85; margin-bottom:20px; text-wrap:pretty; }

.au-mlist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-3); }
.au-mlist li{ display:flex; gap:var(--sp-3); align-items:flex-start; }
.au-mlist svg{ flex-shrink:0; width:20px; height:20px; margin-top:2px; color:var(--cobalt-ink); }
.au-mlist span{ font-size:14.5px; line-height:1.65; color:var(--text); }
/*
 * Danh sách thành tựu/cộng đồng KHÔNG nhấn màu/đậm cục bộ trong nội dung —
 * chữ đã đủ nổi nhờ icon dấu tích, thêm <strong> ngẫu nhiên trong dữ liệu
 * ACF (nhân viên gõ tự do) sẽ trông như nhấn mạnh không chủ đích.
 */
.au-mlist strong{ color:inherit; font-weight:inherit; }

@media(max-width:960px){
  .nl-head h2,
  .au-exp-copy h2,
  .au-media-copy h2{ font-size:25px; }
}
@media(max-width:960px){
  .au-media,
  .au-media.rev{ grid-template-columns:1fr; gap:var(--sp-6); }
  .au-media.rev .au-media-visual,
  .au-media.rev .au-media-copy{ order:initial; }
  .au-shots{ max-width:420px; margin-inline:auto; }
}

/* ============================================================
   7. Triết lý (`.au-quote-sec` + `.au-quote`)
   ============================================================ */
/*
 * Hai vang sang tron mo o hai goc doi nhau — dung mockup. Cung ky thuat va
 * cung ly do z-index nhu .au-hero::after (xem muc 2).
 */
.au-quote-sec{
  background:linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 100%);
  position:relative; overflow:hidden;
}
.au-quote-sec::before{
  content:""; position:absolute; right:-80px; top:-80px;
  width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle, rgba(92,144,245,.28), transparent 70%);
}
.au-quote-sec::after{
  content:""; position:absolute; left:-70px; bottom:-90px;
  width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle, rgba(92,144,245,.18), transparent 70%);
}
.au-quote{ max-width:820px; margin-inline:auto; text-align:center; color:var(--white); position:relative; z-index:1; }
.au-quote-mark{
  font-family:var(--font-head); font-weight:800; font-size:70px; line-height:1;
  color:rgba(255, 255, 255, .32); margin-bottom:2px;
}
.au-quote p{ font-size:27px; font-weight:600; line-height:1.55; color:var(--white); margin-bottom:22px; }
.au-quote cite{ font-style:normal; font-size:14.5px; letter-spacing:.2px; color:var(--on-navy-text-2); }

@media(max-width:700px){
  .au-quote p{ font-size:20px; }
}
@media(max-width:600px){
  .au-quote p{ font-size:18px; }
  .au-shots{ aspect-ratio:1/.98; }
  .au-shot{ border-radius:14px; border-width:5px; }
}

/* ============================================================
   8. Nội dung chuyên môn (`.au-posts`)
   ============================================================ */
.au-posts{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-5); }
.au-post{
  display:block; text-decoration:none; color:inherit;
  border-radius:var(--r-lg); overflow:hidden;
  background:var(--white); border:1px solid var(--border);
  transition:box-shadow var(--dur-state) var(--ease), transform var(--dur-state) var(--ease);
}
.au-post:hover,
.au-post:focus-visible{ box-shadow:var(--sh-3); transform:translateY(-3px); }
/*
 * display:flex + svg — feedback khách (21/08/2026): bài không có ảnh đại
 * diện trước đây để khung này trống trơn (ô xám câm). Icon dự phòng CÙNG
 * hình, CÙNG cỡ, CÙNG màu với `.news-card .photo svg`/`.feat-main .photo svg`
 * (page-tintuc.css) — đúng icon mà vinpack_news_card() đã dùng cho tình
 * huống này, giữ nhất quán icon "không có ảnh" trên toàn site.
 */
.au-post .photo{
  aspect-ratio:16/10;
  background:var(--img-bg);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.au-post .photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.au-post .photo svg{ width:44px; height:44px; color:#c2cad8; }
.au-post .body{ padding:var(--sp-4) var(--sp-5) var(--sp-5); }
.au-post .cat{
  display:inline-block; font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.4px; color:var(--cobalt-ink); margin-bottom:8px;
}
.au-post h3{ font-size:16.5px; line-height:1.4; margin-bottom:10px; }
.au-post .meta{ font-size:12.5px; color:var(--text-muted); }

@media(max-width:960px){ .au-posts{ grid-template-columns:repeat(2, 1fr); } }
@media(max-width:600px){ .au-posts{ grid-template-columns:1fr; } }

/* ============================================================
   9. CTA (`.au-cta` + `.au-cta-box`) — cùng khuôn .contact-cta-box
   ============================================================ */
.au-cta{ padding-block:var(--sp-8); }
.au-cta-box{
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  border-radius:var(--r-xl);
  padding:var(--sp-7);
  text-align:center;
  color:var(--white);
  position:relative;
  overflow:hidden;
}
/*
 * NÚT "GỌI ..." TRÊN NỀN NAVY (03/09/2026) — cùng lỗi và cùng cách sửa với
 * `.proj-banner .btn-primary` (xem ghi chú đầy đủ trong page-duan.css):
 * `.au-cta-box` không mang `.on-navy`, nút `.au-cta-btn.btn.btn-primary`
 * (template-parts/tacgia/cta.php) dùng mặc định `background:var(--navy)`
 * — trùng hệt nền gradient của chính hộp — 1:1, vô hình.
 */
.au-cta-box .btn-primary,
.au-cta-box .btn-primary:hover{ background:var(--white); color:var(--navy); border-color:var(--white); }
/* Vang sang goc trai duoi — dung mockup. */
.au-cta-box::after{
  content:""; position:absolute; left:-60px; bottom:-60px;
  width:260px; height:260px; border-radius:var(--r-full);
  background:radial-gradient(circle, rgba(92,144,245,.25), transparent 70%);
}
.au-cta-box > *{ position:relative; z-index:1; }
/*
 * BỎ font-size GHI CỨNG (07/09/2026, đợt đồng bộ CTA — lượt kiểm điện thoại).
 * Đo tại 375px: tiêu đề khối này 32px trong khi `.cta-box` của trang chủ/dịch
 * vụ/dự án/tuyển dụng chỉ 25px, vì `.cta-box h2` KHÔNG khai cỡ chữ nên co theo
 * `h2{font-size:25px}` của global.css ở mốc ≤900px, còn khối này khai đè nên
 * đứng nguyên 32px trên hộp chỉ rộng 279px. Bỏ khai đi thì cả sáu khối cùng
 * một cỡ ở cả hai đầu: 32px desktop, 25px điện thoại.
 */
.au-cta-box h2{ color:var(--white); margin-bottom:var(--sp-4); text-wrap:balance; }
.au-cta-box p{ color:var(--on-navy-text); font-size:16px; line-height:1.7; margin-bottom:var(--sp-6); max-width:600px; margin-inline:auto; }
.au-cta-btn{ display:inline-flex; }
/*
 * KHUÔN CTA CHUẨN TRÊN ĐIỆN THOẠI (07/09/2026) — khai cuối file để chắc chắn
 * đứng SAU rule chính của hộp (bài học từ page-tacgia.css: rule điện thoại nằm
 * TRƯỚC rule chính thì thua thứ tự nguồn, khai đúng mà không hiệu lực nào —
 * hộp đó đo ra đệm 36px trong khi năm hộp kia 32/24).
 *
 * NÚT FULL-WIDTH: đo tại 375px, nút co theo độ dài chữ nên hai nút trong cùng
 * một khối lệch nhau (dự án 187px và 155px, năng lực 199px và 171px) và mỗi
 * trang một bề ngang. Kéo bằng bề ngang hộp thì cột nút thẳng nhau ở mọi
 * trang, và vùng chạm cũng rộng hơn hẳn.
 */
@media (max-width:600px){
  .au-cta-box{ padding:var(--sp-6) var(--sp-5); }
  .au-cta-box .btn{ width:100%; }
}
/*
 * THANG CỠ TIÊU ĐỀ BANNER CHUẨN (07/09/2026): 38px desktop, 30px từ 900px,
 * 28px từ 600px. Trước đợt này mỗi banner tự chọn mốc và cỡ riêng nên ở 800px
 * màn hình có ba cỡ tiêu đề khác nhau cùng lúc — xem docblock đầy đủ trong
 * scratchpad/banner-dong-bo.py và các khối tương ứng ở tám file banner khác.
 */
@media (max-width:900px){
  .au-body h1{ font-size:30px; }
}

@media (max-width:600px){
  .au-body h1{ font-size:28px; }
}