/* Trang bài dự án (du-an/<slug>/) — dùng chung style.css + motion.css của trang chủ */
.pg main{padding-top:var(--hdr-h)}

/* đầu bài */
.pj-head{margin-bottom:0;padding-bottom:36px;text-align:center}
.pj-head h1{margin-bottom:16px}
.pj-lead{max-width:820px;margin:0 auto;font-size:19px;line-height:1.6;color:var(--ink-2)}

/* ảnh bìa + thông số */
.pj-cover{width:86%;margin:0 auto;height:min(60vh,640px);overflow:hidden;background:var(--soft)}
.pj-cover img{width:100%;height:100%;object-fit:cover}
/* thông số dự án: cùng kiểu thẻ số liệu ở mục Giới thiệu — nền tối, khung viền vàng, chữ vàng ánh kim, rê chuột phủ vàng */
.pj-facts{position:relative;width:86%;margin:0 auto;list-style:none;padding:10px;display:grid;grid-template-columns:repeat(6,1fr);background:radial-gradient(120% 160% at 50% 0%,rgba(183,149,82,.2),transparent 62%),#0f0f0f;box-shadow:0 30px 60px -30px rgba(0,0,0,.55)}
.pj-facts::before{content:"";position:absolute;inset:10px;border:1px solid rgba(224,198,141,.3);pointer-events:none}
.pj-facts li{position:relative;isolation:isolate;padding:30px 18px 28px;text-align:center}
.pj-facts li+li::before{content:"";position:absolute;left:0;top:24%;bottom:24%;width:1px;background:linear-gradient(transparent,rgba(224,198,141,.45),transparent)}
.pj-facts span{display:block;font:500 11px/1.4 var(--f-head);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.pj-facts span::after{content:"";display:block;width:24px;height:1px;margin:12px auto;background:#c39a44}
.pj-facts b{display:block;font:600 17px/1.4 var(--f-disp);background:linear-gradient(100deg,#f0d492 0%,#c39a44 45%,#e9cd8a 70%,#9c7535 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (hover:hover) and (min-width:769px){
  .pj-facts li::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,#f0d492 0%,#c39a44 45%,#e9cd8a 70%,#9c7535 100%);opacity:0;transition:opacity .45s cubic-bezier(.22,.61,.36,1)}
  .pj-facts li:hover::after{opacity:1}
  .pj-facts li:hover::before,.pj-facts li:hover+li::before{opacity:0}
  .pj-facts li:hover span{color:#1d1606}
  .pj-facts li:hover span::after{background:#1d1606}
  .pj-facts li:hover b{background:none;color:#1d1606;-webkit-text-fill-color:#1d1606}
  .pj-facts span{transition:color .35s}
}

/* thân bài */

.pj-sec{margin-bottom:56px}
.pj-txt{max-width:820px;margin:0 auto}
.pj-txt h2{display:flex;align-items:baseline;gap:14px;font-size:30px;line-height:1.3;margin-bottom:18px}
.pj-txt h2 span{font:500 15px/1 var(--f-head);letter-spacing:.1em;color:var(--accent)}
.pj-txt p{font-size:17px;line-height:1.75;color:var(--ink-2)}
.pj-txt p+p{margin-top:14px}
.pj-list{list-style:none;padding:0;margin:4px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:14px 28px}
.pj-list li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.55;color:var(--ink-2)}
.pj-list .ic{width:22px;height:22px;flex:none;color:var(--accent);margin-top:1px}

.pj-fig{margin:32px 0 0}
.pj-fig img{width:100%;max-height:60vh;object-fit:cover;background:var(--soft)}
.pj-fig figcaption{margin-top:10px;font-size:13px;line-height:1.5;color:var(--muted)}
.pj-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pj-pair .pj-fig img{aspect-ratio:4/5;height:auto}

.pj-quote{max-width:1000px;margin:0 auto 56px;padding:44px 48px;background:var(--soft);text-align:center}
.pj-quote .ic{width:44px;height:44px;color:var(--accent);margin:0 auto 16px}
.pj-quote blockquote{margin:0 0 18px;font:500 24px/1.55 var(--f-disp);letter-spacing:0;color:var(--ink)}
.pj-quote figcaption{font-size:14px;color:var(--muted)}
.pj-result{max-width:820px;margin:0 auto;padding:32px 0 0;border-top:2px solid var(--ink)}
.pj-result h2{font-size:24px;margin-bottom:12px}
.pj-result p{max-width:760px;font-size:17px;line-height:1.75;color:var(--ink-2)}

.pj-more{border-top:1px solid var(--line)}
.pj-all{text-align:center;margin-top:40px}

@media (max-width:1180px){
  .pj-facts{grid-template-columns:repeat(3,1fr)}
  .pj-facts li:nth-child(4)::before{display:none}
  .pj-facts li:nth-child(n+4){border-top:1px solid rgba(224,198,141,.2)}
}
@media (max-width:768px){
  .pj-head{padding-bottom:22px}
    .pj-lead{font-size:16px}
  .pj-cover{height:auto;aspect-ratio:4/3;max-height:60vh}
  .pj-facts{grid-template-columns:1fr 1fr;padding:7px}
  .pj-facts::before{inset:7px}
  .pj-facts li{padding:20px 10px 18px;border-top:0}
  .pj-facts li:nth-child(odd)::before{display:none}
  .pj-facts li:nth-child(even)::before{display:block}
  .pj-facts li:nth-child(n+3){border-top:1px solid rgba(224,198,141,.2)}
  .pj-facts span{font-size:10px;letter-spacing:.1em}
  .pj-facts span::after{margin:9px auto}
  .pj-facts b{font-size:14px}
  .pj-sec{margin-bottom:40px}
  .pj-txt h2{font-size:24px;margin-bottom:14px}
  .pj-txt p,.pj-result p{font-size:15px;line-height:1.7}
  .pj-list{grid-template-columns:1fr}
  .pj-list li{font-size:15px}
  .pj-fig{margin-top:22px}
  .pj-pair{gap:10px}
  .pj-quote{padding:30px 20px;margin-bottom:40px}
  .pj-quote blockquote{font-size:18px}
}

/* bài tin tức + trang danh sách (dùng chung khung bài dự án) */
.nw-h1{font-size:35px;line-height:1.25;max-width:960px;margin-left:auto;margin-right:auto}
.nw-eb span{margin:0 .7em}
.nw-art .pj-body{padding-top:56px}
.nw-art .pj-txt h2{display:block}
.nw-proj{text-align:center;margin-top:8px}
.nw-list-head{padding-bottom:0}
.nw-list{padding-top:20px}
@media (max-width:768px){
  .nw-h1{font-size:24px}
  .nw-art .pj-body{padding-top:32px}
}