/* Original Nam Lê project detail: compact sidebar, wide article, four projects. */
body.single-featured_item { background:#fff; }
body.single-featured_item #page > :is(.az-site-breadcrumb,.az-shared-trail,.az-shared-banner) { display:none; }
#page .az-project-detail { padding:30px 0 60px; background:#fff; color:#888; font:16px/1.6 var(--az-font-main,Arial,sans-serif); }
.az-project-detail *, .az-project-detail *::before, .az-project-detail *::after { box-sizing:border-box; }
#page .az-project-detail > .az-container { width:min(1312px,calc(100% - 64px)); max-width:none; margin-inline:auto; padding:0; }
#page .az-project-detail .az-project-page__layout { grid-template-columns:minmax(0,400px) minmax(0,1fr); gap:60px; align-items:start; }
.az-project-detail .az-project-sidebar { position:relative; min-width:0; }
.az-project-detail .az-project-content::before { position:absolute; top:0; left:-30px; bottom:0; content:''; width:1px; background:#eee; }
#page .az-project-detail .az-project-summary__terms { margin:0 0 16px; padding:10px 12px; border-radius:5px; background:#181d24; color:#fff3c1; font-size:16px; font-weight:600; text-align:center; }
#page .az-project-detail .az-project-summary__terms a { color:inherit; text-decoration:none; }
#page .az-project-detail :is(.az-project-summary,.az-project-contact) { margin:0 0 16px; padding:16px; border:1px solid #eee; border-radius:12px; background:#fff; box-shadow:0 4px 12px #0003; }
#page .az-project-detail .az-project-details { margin:0; }
#page .az-project-detail .az-project-details > div { padding:0; margin-bottom:12px; border:0; }
#page .az-project-detail .az-project-details > div:last-child { margin:0; }
#page .az-project-detail .az-project-details dt { display:flex; align-items:center; gap:7px; color:#555; font-size:16px; font-weight:600; line-height:1.4; text-transform:uppercase; }
#page .az-project-detail .az-project-details dd { margin:4px 0 0; color:#888; font-size:16px; line-height:1.5; white-space:pre-line; overflow-wrap:anywhere; }
.az-project-detail .az-project-details dd::before { content:'- '; }
.az-project-detail-icon { display:inline-block; flex-shrink:0; width:20px; height:20px; color:#ffc559; vertical-align:middle; }
#page .az-project-detail .az-project-summary__tags { margin:14px 0 0; font-size:14px; overflow-wrap:anywhere; }
#page .az-project-detail .az-project-summary__tags a { color:#777; }
#page .az-project-detail .az-project-contact h2 { display:flex; align-items:center; gap:12px; margin:0 0 16px; color:#888; font:600 16px/1.4 var(--az-font-main,Arial,sans-serif); }
.az-project-contact__icon { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#5ca1ff; }
.az-project-contact__icon .az-project-detail-icon { width:18px; height:18px; color:#fff; }
#page .az-project-detail .az-project-contact p { margin:0 0 18px; color:#888; font-size:16px; line-height:1.5; }
#page .az-project-detail .az-project-contact__links { display:flex; flex-direction:column; gap:8px; }
#page .az-project-detail .az-project-contact__links a { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:40px; padding:8px 12px; border:0; border-radius:5px; color:#888; text-decoration:none; }
#page .az-project-detail .az-project-contact__links .az-project-contact__zalo { min-height:60px; background:#3984ff; color:#fff; }
.az-project-contact__zalo .az-project-detail-icon { width:34px; height:34px; }
.az-project-contact__zalo img.az-project-detail-icon { display:block; object-fit:contain; }
.az-project-contact__phone .az-project-detail-icon { color:currentColor; }
.az-project-contact__links .az-project-detail-icon { animation:az-project-contact-shake 2.4s ease-in-out infinite; transform-origin:50% 50%; }
.az-project-contact__phone .az-project-detail-icon { animation-delay:.25s; }
@keyframes az-project-contact-shake {
  0%,28%,100% { transform:rotate(0); }
  4%,12%,20% { transform:rotate(-14deg); }
  8%,16%,24% { transform:rotate(14deg); }
}
#page .az-project-detail .az-project-contact__links .az-project-contact__phone { background:#f8f8f8; color:#777; font-weight:700; }
#page .az-project-detail .az-project-contact__links a:hover { filter:brightness(.94); }
#page .az-project-detail .az-project-content { position:relative; min-width:0; }
#page .az-project-detail .az-project-content > h1 { margin:0 0 8px; color:#181d24; font:500 24px/1.35 var(--az-font-main,Arial,sans-serif); text-align:center; text-transform:uppercase; }
#page .az-project-detail .az-project-gallery { margin:0 0 24px; border-radius:8px; background:#fff; box-shadow:0 3px 10px #0003; }
#page .az-project-detail .az-project-gallery img { width:100%; height:auto; aspect-ratio:15/8; object-fit:cover; object-position:center; }
#page .az-project-detail .az-project-gallery__count { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); }
#page .az-project-detail .az-project-gallery .az-slider-autoplay { opacity:0; }
#page .az-project-detail .az-project-gallery:is(:hover,:focus-within) .az-slider-autoplay { opacity:1; }
#page .az-project-detail .az-post-content { color:#888; font:16px/1.6 var(--az-font-main,Arial,sans-serif); overflow-wrap:anywhere; }
#page .az-project-detail .az-post-content :is(h1,h2,h3,h4,h5,h6) { margin:24px 0 10px; color:#666; font:600 16px/1.5 var(--az-font-main,Arial,sans-serif); }
#page .az-project-detail .az-post-content p { margin:0 0 18px; }
#page .az-project-detail .az-post-content a { color:inherit; }
#page .az-project-detail .az-post-content :is(figure,.wp-caption,.wp-block-image) { width:100%; max-width:100%; margin:0 0 28px; }
#page .az-project-detail .az-post-content img { display:block; width:100%; max-width:100%; height:auto; aspect-ratio:15/8; object-fit:cover; border-radius:8px; box-shadow:0 3px 10px #0003; }
#page .az-project-detail .az-post-content :is(figcaption,.wp-caption-text) { margin:0; padding:4px 8px; background:#f3f3f3; color:#888; font-size:13px; font-style:italic; text-align:center; }
#page .az-project-detail .az-post-content :is(ul,ol) { margin:0 0 24px; padding-left:28px; }
#page .az-project-detail .az-post-content li { margin-bottom:18px; }
#page .az-project-detail .az-post-content li > p { margin-bottom:12px; }
#page .az-project-detail .az-project-related { margin-top:60px; }
#page .az-project-detail .az-project-related > h2 { margin:0 0 12px; font:600 24px/1.35 var(--az-font-main,Arial,sans-serif); text-align:center; }
.az-project-detail .az-project-related > h2 span { display:inline-block; padding:8px 20px; border-radius:5px; background:#181d24; color:#fff3c1; }
.az-project-related__grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.az-project-related__card { min-width:0; }
#page .az-project-detail .az-project-related__card a { display:block; color:#555; text-decoration:none; }
#page .az-project-detail .az-project-related__card img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:5px; }
#page .az-project-detail .az-project-related__card h3 { margin:10px 0 0; color:#555; font:400 14px/1.4 var(--az-font-main,Arial,sans-serif); text-align:center; text-transform:uppercase; }
#page .az-project-detail .az-project-related__card a:hover { filter:brightness(1.08); }
#page .az-project-detail a:focus-visible { outline:2px solid #ffc559; outline-offset:3px; }
@media (max-width:1000px) {
  #page .az-project-detail > .az-container { width:calc(100% - 40px); }
  #page .az-project-detail .az-project-page__layout { grid-template-columns:minmax(240px,1fr) minmax(0,2fr); gap:30px; }
  .az-project-detail .az-project-content::before { left:-15px; }
}
@media (max-width:782px) {
  #page .az-project-detail .az-project-page__layout { grid-template-columns:minmax(0,1fr); }
  .az-project-detail .az-project-content::before { display:none; }
  #page .az-project-detail .az-project-content { grid-row:1; }
  .az-project-related__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px) {
  #page .az-project-detail { padding:24px 0 40px; }
  #page .az-project-detail > .az-container { width:calc(100% - 32px); }
  #page .az-project-detail .az-project-content > h1 { font-size:22px; }
  #page .az-project-detail .az-project-related { margin-top:36px; }
  .az-project-related__grid { gap:16px; }
}
@media (prefers-reduced-motion:reduce) {
  .az-project-contact__links .az-project-detail-icon { animation:none; }
}
