/* Projects (patterns/du-an-*.php, templates single-du_an + taxonomy-kieu_website). Loaded only on pages with a block of class "pj". */
.pj{--pj-hero-h:460px;padding-inline:var(--s-4)}
.pj__page{max-width:var(--page);margin-inline:auto}
.pj__page > *{margin:0}

/* heading + counters */
.pj-head{padding-top:var(--s-6)}
.pj-head__text{display:grid;gap:var(--gap-text);max-width:var(--measure)}
.pj-head__text > *{margin:0}
.pj-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-grid);margin-top:var(--gap-head);border-block:1px solid var(--rule);padding-block:var(--s-5)}
.pj-stats > *{margin:0;padding-inline:var(--s-5);border-left:1px solid var(--rule)}
.pj-stats > :first-child{border-left:0;padding-left:0}

/* featured project: the frame grows from 92% to 100% as it scrolls in (CSS view timeline; plain in other browsers) */
.pj-hero{padding-top:var(--gap-head)}
.pj-hero__list{display:grid;gap:var(--gap-stack);margin:0;padding:0;list-style:none}
.pj-hero__list > li{margin:0;display:grid;gap:var(--gap-stack)}
.pj-hero__list > li > *{margin:0}
.pj-hero__expand{--dg-site-w:620px;position:relative;display:flex;flex-direction:column;max-height:var(--pj-hero-h);overflow:hidden;padding:var(--s-7) var(--s-6) 0;border:1px solid var(--rule);border-radius:var(--r-card);background-color:var(--paper-2);background-image:radial-gradient(circle, var(--dotc) 1px, transparent 1.5px);background-size:var(--dotgrid-size) var(--dotgrid-size);transform-origin:50% 100%;animation:pj-expand linear both;animation-timeline:view();animation-range:entry 20% entry 90%}
@keyframes pj-expand{from{transform:scale(.92)}to{transform:none}}
.pj-hero__expand::after{content:"";position:absolute;inset:auto 0 0;height:30%;background:linear-gradient(transparent, var(--paper-2));pointer-events:none}
.pj-hero__expand .dg-mock__stage{align-items:flex-end}
/* the frame hugs the pictures (at most --pj-hero-h) and both sink past its bottom edge by the same amount, desktop and phone alike, at every width (DN 2026-10-07: the desktop one floated with a gap under it) */
.pj-hero__list .pj-hero__expand > *{margin-top:auto}
.pj-hero__expand .dg-mock__stage{margin-bottom:calc(var(--s-7) * -1)}
.pj-hero__cap{gap:var(--gap-grid)}
.pj-hero__cap > *{margin:0}
.pj-hero__text{display:grid;gap:var(--s-2);min-width:0}
.pj-hero__text > *{margin:0}
.pj-hero__tag{font-size:var(--t-2xs)}
.pj-hero__tag a{color:inherit;text-decoration:none}
.pj-hero__name{font-size:var(--t-xl);font-weight:700;letter-spacing:-0.02em}
.pj-hero__name a{color:inherit;text-decoration:none}
.pj-hero__desc{color:var(--ink-2);font-size:var(--t-s);max-width:var(--measure)}
.pj-hero__cap .pj-hero__go{display:inline-flex;width:auto;margin:0;align-items:center;gap:var(--s-2);min-height:var(--ctl);padding:0 var(--s-5);border:1px solid var(--rule);border-radius:var(--r);color:var(--ink);text-decoration:none;font:600 var(--t-s)/1 var(--font-body);transition:border-color var(--dur) var(--ease-out)}
.pj-hero__cap .pj-hero__go:hover{border-color:var(--ink-2)}
.pj-hero__cap .pj-hero__go::after{content:"";width:var(--icon-s);height:var(--icon-s);background:currentColor;-webkit-mask:url(../../../icons/arrow.svg?ver=61b6bacd) center / contain no-repeat;mask:url(../../../icons/arrow.svg?ver=61b6bacd) center / contain no-repeat;transition:transform var(--dur) var(--ease-press)}
.pj-hero__cap .pj-hero__go:hover::after{transform:translate(2px,-2px)}

/* filter + grid */
.pj-list{padding-block:var(--gap-head)} /* bottom too: the page numbers keep room above the next section's top line */
.pj-list .pj__page{display:grid;gap:var(--gap-grid)}
/* the list: every card the same size, three to a row, nine to a page (Query Loop pagination under it) */
.pj-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-grid);margin:0;padding:0;list-style:none}
.pj-grid > li{margin:0;min-width:0;display:grid}
.pj-pages{gap:var(--s-2);margin-top:var(--s-6);font:500 var(--t-s)/1 var(--font-body)}
.pj-pages :is(a,.page-numbers){display:inline-flex;align-items:center;justify-content:center;gap:var(--s-1);min-width:var(--ctl-s);height:var(--ctl-s);padding:0 var(--s-3);border:1px solid var(--rule);border-radius:var(--r);color:var(--ink);text-decoration:none;transition:border-color var(--dur) var(--ease-press)}
.pj-pages a:hover{border-color:var(--ink-2)}
.pj-pages .page-numbers.current{border-color:var(--accent-fill);background:var(--accent-tint);color:var(--accent)}
.pj-pages .page-numbers.dots{border-color:transparent}
.pj-card{position:relative;display:grid;grid-template-rows:auto 1fr;border:1px solid var(--rule);border-radius:var(--r-card);background:var(--card);overflow:hidden;transition:transform var(--dur-m) var(--ease-out),border-color var(--dur-m) var(--ease-out)}
.pj-card:hover{transform:translateY(-3px);border-color:var(--ink-3)}
.pj-card > *{margin:0;min-width:0}
.pj-stage{--dg-site-w:380px;--pj-drop:var(--s-5);position:relative;display:flex;align-items:flex-start;justify-content:center;overflow:hidden;padding:var(--s-7) var(--s-4) 0;background:color-mix(in oklch, var(--pc, var(--accent-fill)) 9%, var(--paper-2))} /* small card: the window sits --pj-drop below the bottom edge (cropped); on hover it rises until its bottom meets the edge */
.pj-stage .dg-mock{width:100%;margin-bottom:calc(var(--pj-drop) * -1)}
.pj-stage .dg-site{transition:transform var(--dur-morph) var(--ease-out)}
.pj-card:is(:hover,:focus-within) .pj-stage .dg-site{transform:translateY(calc(var(--pj-drop) * -1))}
/* Pick: opens the "make a website like this" dialog (blocks/similar); above the card-wide link, the same pill as a template card */
.pj-pick{--pj-pick-shadow:0 4px 12px var(--shadow);--pj-pick-z:2;position:absolute;top:var(--s-3);right:var(--s-3);z-index:var(--pj-pick-z);margin:0}
.pj-pick .wp-block-button__link{display:inline-flex;align-items:center;gap:var(--s-1);min-height:var(--s-6);padding:0 var(--s-3);border:1px solid var(--rule);border-radius:var(--wp--preset--border-radius--radius-full);background:var(--card);color:var(--ink);font:600 var(--t-xs)/1 var(--font-body);box-shadow:var(--pj-pick-shadow);transition:transform var(--dur) var(--ease-press)}
.pj-pick .wp-block-button__link::before{content:"";flex:none;width:var(--icon-s);height:var(--icon-s);background:currentColor;-webkit-mask:url(../../../icons/plus.svg?ver=8d83d399) center / contain no-repeat;mask:url(../../../icons/plus.svg?ver=8d83d399) center / contain no-repeat}
.pj-pick .wp-block-button__link:hover{transform:scale(1.05)}
/* Details / Live site: round icon buttons before Pick, as on a template card (blocks/template-gallery .hm-templates__zoom);
   their words stay the accessible name; a project without a live address has no link, so no button */
.pj-pick{gap:var(--s-2)}
.pj-pick .pj-zoom .wp-block-button__link{justify-content:center;width:var(--s-6);padding:0;gap:0;border-radius:50%;font-size:0;opacity:0;transform:scale(.8);transition:opacity var(--dur-m) var(--ease-out),transform var(--dur-m) var(--ease-out),background-color var(--dur) var(--ease-press),color var(--dur) var(--ease-press)}
.pj-pick .pj-zoom--detail .wp-block-button__link::before{-webkit-mask-image:url(../../../icons/expand.svg?ver=9ef235e0);mask-image:url(../../../icons/expand.svg?ver=9ef235e0)}
.pj-pick .pj-zoom--site .wp-block-button__link::before{-webkit-mask-image:url(../../../icons/link.svg?ver=8b82e494);mask-image:url(../../../icons/link.svg?ver=8b82e494)}
.pj-card:is(:hover,:focus-within) .pj-zoom .wp-block-button__link{opacity:1;transform:none}
.pj-pick .pj-zoom .wp-block-button__link:hover{background:var(--accent-fill);color:var(--on-accent);transform:none}
.pj-pick .pj-zoom .wp-block-button__link:not([href]){display:none}
@media (hover: none){
  .pj-pick .pj-zoom .wp-block-button__link{opacity:1;transform:none}
}
.pj-body{display:grid;gap:var(--s-2);padding:var(--gap-card-s);align-content:start}
.pj-body > *{margin:0;min-width:0}
.pj-body__kind{gap:var(--s-2);font-size:var(--t-2xs)}
.pj-body__kind > *{margin:0}
.pj-body__kind a{color:inherit;text-decoration:none}
.pj-body__kind > :has(+ p)::after{content:"·";margin-left:var(--s-2)} /* dot stays with the word before it when the next part wraps */
.pj-body__name{font-size:var(--t-l);font-weight:700;letter-spacing:-0.01em}
.pj-body__name a{color:inherit;text-decoration:none}
.pj-body__name a::after{content:"";position:absolute;inset:0;z-index:1} /* the whole card is the link */
.pj-body__desc{color:var(--ink-2);font-size:var(--t-s);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pj-body .dg-mlist--chips{margin-top:var(--s-1)}
.pj-empty{padding:var(--gap-card);border:1px dashed var(--rule);border-radius:var(--r-card);color:var(--ink-2);text-align:center}

/* project page */
.pj-detail{padding-top:var(--s-6)}
.pj-detail__page{display:grid;gap:var(--gap-head)}
.pj-crumb{gap:var(--s-2);color:var(--ink-3);font-size:var(--t-xs)}
.pj-crumb > *{margin:0}
.pj-crumb a{color:var(--ink-2);text-decoration:none}
.pj-crumb a:hover{color:var(--accent)}
.pj-crumb > * + *::before{content:"›";margin-right:var(--s-2);color:var(--ink-3)}
.pj-detail__head{display:grid;gap:var(--s-3)}
.pj-detail__head > *{margin:0}
.pj-detail__title{font-size:var(--t-2xl);font-weight:800;letter-spacing:-0.03em;line-height:1.08}
.pj-meta{gap:var(--s-2)}
.pj-meta > *{margin:0}
.pj-meta__item,.pj-meta__item a{display:inline-flex;align-items:center;min-height:var(--s-6);padding:0 var(--s-3);border:1px solid var(--rule);border-radius:var(--r);font:500 var(--t-xs)/1 var(--font-mono);color:var(--ink-2);text-decoration:none}
.pj-meta__item.wp-block-post-terms{border:0;padding:0}
.pj-detail__stage{--dg-site-w:720px;--dg-phone-w:260px;position:relative;min-height:420px;display:grid;align-content:start;gap:var(--s-4);padding:var(--s-5) var(--s-6) 0;border:1px solid var(--rule);border-radius:var(--r-card);overflow:hidden;background-color:var(--paper-2);background-image:radial-gradient(circle, var(--dotc) 1px, transparent 1.5px);background-size:var(--dotgrid-size) var(--dotgrid-size)}
.pj-detail__stage .dg-mock__stage[data-show="phone"]{padding-bottom:var(--s-7)}
.pj-detail__stage:has(.dg-live){padding-bottom:var(--s-6)} /* the live site is a whole window, not a window rising from the bottom edge */
/* sample design page (pattern giao-dien-mau-single) */
.gd-detail .dg-site--shot .dg-shot{aspect-ratio:16 / 10;object-fit:cover;object-position:top} /* ds-ok: a sample design's screenshot is the whole long page; the window shows its top at a screen's proportions */
/* spec strip under the live site: the facts of the project in one row, like a spec sheet */
.pj-spec{--pj-spec-min:160px;display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--pj-spec-min),1fr));border-block:1px solid var(--rule)}
.pj-spec__item{display:grid;gap:var(--s-2);align-content:start;padding:var(--s-4);border-left:1px solid var(--rule)}
.pj-spec > *{margin:0} /* no flow-layout gap between the facts: they sit in one row */
.pj-spec__item:first-child{border-left:0;padding-left:0}
.pj-spec__item > *{margin:0}
.pj-spec__item:has(> .pj-spec__k:only-child){display:none} /* an empty fact (no place, no website) leaves no label behind */
.pj-spec__k{font-size:var(--t-2xs);color:var(--ink-3)}
.pj-spec__v{font:600 var(--t-s)/1.35 var(--font-body);color:var(--ink)}
.pj-spec__v a{color:inherit;text-decoration:none}
/* the case study beside a contents list and the call to action, which stay in view while reading */
.pj-two{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:var(--gap-col);align-items:start}
.pj-side{position:sticky;top:calc(var(--admin-h) + var(--nav-h-float) + var(--s-6));display:grid;gap:var(--s-5)}
.pj-side > *{margin:0}
.pj-side .pj-cta{margin-top:0}
/* the facts table the case study opens with moves to the side column (block digotech/pj-facts, same rule: first table,
   no heading before it); without that block it stays in the article */
.pj-two:has(.pj-facts) .pj-article .wp-block-post-content > .wp-block-table:not(:is(h1,h2,h3,h4,h5,h6) ~ *):not(.wp-block-table ~ *){display:none}
.pj-article .wp-block-post-content h2{margin-top:var(--s-6);font-size:var(--t-xl);letter-spacing:-0.02em}
.pj-article .wp-block-post-content h3{margin-top:var(--s-4);font-size:var(--t-l)}
/* features and deliverables side by side, the whole width */
.pj-deliv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-col);align-items:start;padding-top:var(--gap-head);border-top:1px solid var(--rule)}
.pj-deliv > *{margin:0}
.pj-two > *{margin:0}
.pj-sec{display:grid;gap:var(--gap-text);align-content:start}
.pj-sec > *{margin:0}
.pj-sec__h{font-size:var(--t-xl);font-weight:700;letter-spacing:-0.02em}
.pj-sec__h + .pj-sec__h,.pj-sec .dg-mlist + .pj-sec__h,.pj-sec .wp-block-post-content + .pj-sec__h{margin-top:var(--s-4)}
.pj-sec__lede{color:var(--ink-2)}
.pj-sec .wp-block-post-content > *{margin:0 0 var(--gap-text)}
.pj-cta{display:grid;gap:var(--s-3);margin-top:var(--s-4);padding:var(--gap-card-s);border:1px solid var(--rule);border-radius:var(--r-card);background:var(--paper-2)}
.pj-cta > *{margin:0}
.pj-cta__h{font-size:var(--t-l);font-weight:700}
.pj-cta__p{color:var(--ink-2);font-size:var(--t-s)}
.pj-cta__btns{gap:var(--s-2)}
.pj-cta__btns .wp-block-button__link{min-height:var(--ctl-s);padding-inline:var(--s-4);font-size:var(--t-s)}
.pj-rel{display:grid;gap:var(--gap-grid)}
/* sections tied to the page's own post that found nothing (inc/giao-dien-mau.php, template-gallery "related"): no heading left alone */
.gd-twin:not(:has(.pj-card)),.gd-tpl:not(:has(.hm-templates__gallery)){display:none}
.gd-same{display:grid;gap:var(--gap-grid)}
.gd-same > *{margin:0}
.gd-same__links{gap:var(--s-3) var(--s-6)}
.pj-rel > *{margin:0}
.pj-pn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-grid)}
.pj-pn > *{margin:0}
.pj-pn > :empty{display:none}
.pj-pn .pj-pn__next{text-align:right}

/* type page */
.pj-tax{padding-top:var(--s-6)}
.pj-tax .pj__page{display:grid;gap:var(--gap-text)}
.pj-tax .pj-query{margin-top:var(--gap-head)}

@media (max-width: 1023px){
  .pj-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pj-stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s-5)} /* four numbers: two by two */
  .pj-stats > :nth-child(odd){border-left:0;padding-left:0}
  .pj-two,.pj-deliv{grid-template-columns:minmax(0,1fr)}
  .pj-side{display:contents} /* one column: the facts card goes above the article, contents and call to action after it */
  .pj-facts{order:-1}
}
@media (max-width: 767px){
  .pj-spec{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-4)}
  .pj-spec__item{padding-inline:0;border-left:0}
  .pj-head{padding-top:var(--s-4)}
  .pj-hero__expand{--pj-hero-h:360px;padding:var(--s-5) var(--s-4) 0}
  .pj-hero__expand .dg-phone{display:none}
  .pj-grid{grid-template-columns:minmax(0,1fr)}
  .pj-detail__stage{min-height:340px;padding:var(--s-5) var(--s-4) 0}
  .pj-pn{grid-template-columns:minmax(0,1fr)}
  .pj-pn .pj-pn__next{text-align:left}
}
@media (prefers-reduced-motion: reduce){
  .pj-hero__expand{animation:none}
  .pj-card,.pj-stage .dg-site,.pj-pick .wp-block-button__link,.pj-pick .pj-zoom .wp-block-button__link{transition:none}
}
@media (max-width: 479px){
  .pj-stats .dg-counter__n{font-size:var(--t-xl)} /* "24 tháng" stays on one line in half a phone */
}