/* Queeny gallery: "Công trình thật" (#cong-trinh). Built on base.css tokens and the .reveal/.rv choreography.
   Animate only transform and opacity. Mosaic placement comes from gallery.js (the packer); the .is-* shape
   classes below are the no-JS fallback only. */

#cong-trinh{
  --gl-cols:4;
  --gl-gap:clamp(10px,1.5vw,20px);
  --gl-ar:1.2;                 /* row height as a multiple of column width (the packer assumes the same) */
  --gl-r:16px;
  --gl-row:calc((min(100vw - 2*var(--gutter),var(--maxw)) - (var(--gl-cols) - 1)*var(--gl-gap)) / var(--gl-cols) * var(--gl-ar));
}
@media (max-width:1099.98px){#cong-trinh{--gl-cols:3}}
@media (max-width:699.98px){#cong-trinh{--gl-cols:2}}

.gl{overflow-x:clip;background:linear-gradient(180deg,rgba(5,8,28,0),rgba(5,8,28,.5) 120px,rgba(5,8,28,.5) calc(100% - 140px),rgba(5,8,28,0))}
.gl>.divider{position:absolute;top:0;left:0;right:0}

/* ---------- header: kicker, big title left, lede right on the baseline ---------- */
.gl-head{display:grid;grid-template-columns:minmax(0,1fr)}
.gl-title{max-width:17ch}
.gl-lede{margin-top:1.3em;max-width:44ch}
@media (min-width:900px){
  .gl-head{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);column-gap:clamp(32px,6vw,96px);align-items:end}
  .gl-kicker{grid-column:1/-1}
  .gl-title{grid-column:1;max-width:15ch}
  .gl-lede{grid-column:2;margin:0;padding-bottom:.6em;max-width:34ch}
}

/* ---------- the rail: a gold hairline with rings, the wall the photos hang from ---------- */
.gl-rail{position:relative;height:9px;margin-top:clamp(40px,6vw,76px)}
.gl-rail i{position:absolute;inset:0;display:block;opacity:.8;
  background:radial-gradient(circle,transparent 2.1px,var(--accent) 2.5px,var(--accent) 3.3px,transparent 3.7px) 0 50%/132px 9px repeat-x;
  -webkit-mask-image:linear-gradient(90deg,#000 55%,transparent);mask-image:linear-gradient(90deg,#000 55%,transparent)}
.gl-rail i::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--accent-muted)}
/* the rail lays itself out once, then a thin glint of light slides along it now and then (only while on screen) */
.js .gl-rail i{transform:scaleX(0);transform-origin:left center;transition:transform 1.8s var(--ease-out)}
.js .gl-rail.in i{transform:none}
.gl-rail i::after{content:"";position:absolute;left:0;top:50%;width:16%;height:1px;margin-top:-.5px;opacity:0;transform:translate3d(-100%,0,0);
  background:linear-gradient(90deg,transparent,rgba(255,236,190,.95),transparent)}
.gl.live .gl-rail i::after{animation:gl-glint 9s var(--ease-soft) -2.5s infinite}
@keyframes gl-glint{
  0%{transform:translate3d(-100%,0,0);opacity:0}
  10%{opacity:1}
  62%{opacity:1}
  100%{transform:translate3d(620%,0,0);opacity:0}
}

/* ---------- filter bar ---------- */
.gl-bar{display:flex;flex-direction:column;gap:14px;margin-top:clamp(20px,3vw,32px)}
.gl-filters{display:flex;flex-wrap:wrap;gap:8px}
html:not(.js) .gl-filters{display:none}
.gl-chip{flex:none;display:inline-flex;align-items:center;min-height:42px;padding:0 1.15em;border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--text-secondary);
  font:500 .9375rem/1 var(--font-body);letter-spacing:.005em;white-space:nowrap;cursor:pointer;
  transition:color .3s var(--ease-soft),border-color .3s var(--ease-soft),background-color .3s var(--ease-soft),transform .35s var(--ease-out)}
.gl-chip:hover{color:var(--text-primary);border-color:var(--accent)}
.gl-chip:active{transform:scale(.97)}
.gl-chip[aria-pressed="true"]{color:var(--accent-hover);border-color:var(--accent);background:rgba(232,198,106,.14)}
.gl-count{font:500 .8125rem/1.2 var(--font-mono);letter-spacing:.06em;color:var(--text-secondary)}
.gl-count b{font-weight:500;color:var(--text-primary)}
@media (min-width:900px){
  .gl-bar{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:36px}
  .gl-count{flex:none;padding-top:15px;white-space:nowrap}
}
@media (pointer:coarse){.gl-chip{min-height:44px}}
@media (max-width:699.98px){
  .gl-filters{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1*var(--gutter));padding:2px var(--gutter);scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - 36px),transparent)}
  .gl-filters::-webkit-scrollbar{display:none}
  .gl-chip{scroll-snap-align:start;scroll-margin-inline:var(--gutter)}
}

/* ---------- the mosaic ---------- */
.gl-grid{display:grid;grid-template-columns:repeat(var(--gl-cols),minmax(0,1fr));grid-auto-rows:var(--gl-row);gap:var(--gl-gap);margin-top:clamp(24px,3.6vw,40px)}
.gl-item{position:relative;min-width:0;min-height:0;
  transition:opacity .55s var(--ease-out),transform .8s var(--ease-out);transition-delay:var(--d,0ms)}
.gl-item[hidden]{display:none}
.gl-item.is-out{opacity:0;transform:scale(.97);transition-duration:.2s;transition-delay:0ms}
.gl-item.is-pre{opacity:0;transform:translate3d(0,24px,0) scale(.985);transition:none}

/* no-JS fallback shapes (gallery.js sets data-packed and places every tile explicitly) */
.gl-grid:not([data-packed]){grid-auto-flow:dense}
.gl-grid:not([data-packed]) .is-wide{grid-column:span 2}
.gl-grid:not([data-packed]) .is-tall{grid-row:span 2}
.gl-grid:not([data-packed]) .is-feat{grid-column:span 2;grid-row:span 2}
.gl-grid:not([data-packed]) .is-pano{grid-column:span 3}
@media (max-width:699.98px){.gl-grid:not([data-packed]) .is-pano{grid-column:span 2}}

.gl-tile{position:relative;height:100%;border-radius:var(--gl-r);overflow:hidden;background:var(--panel);isolation:isolate}
.gl-open{position:absolute;inset:0;display:block;border-radius:inherit;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.gl-open img{width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 40%);transition:transform 1.1s var(--ease-out)}
.gl-open::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,transparent 52%,rgba(5,8,28,.62));opacity:0;transition:opacity .6s var(--ease-soft)}
.gl-tile::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(245,239,224,.13);transition:box-shadow .5s var(--ease-soft)}
.gl-open:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;box-shadow:inset 0 0 0 6px rgba(10,16,48,.7)}

/* the gold caption chip: the photo's own words and the one action */
.gl-cap{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:11px 12px 11px 14px;border-radius:12px;
  background:var(--accent);color:#0A1030;opacity:0;transform:translate3d(0,calc(100% + 16px),0);pointer-events:none;
  transition:transform .6s var(--ease-out),opacity .4s var(--ease-soft)}
.gl-cap-t{font:500 .8125rem/1.35 var(--font-body);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty}
.gl-ask{display:inline-flex;align-items:center;gap:.55em;min-height:32px;padding:0 13px 0 14px;border-radius:999px;background:#0A1030;color:var(--accent-hover);
  font:500 .8125rem/1 var(--font-body);letter-spacing:.01em;text-decoration:none;white-space:nowrap;transition:background-color .3s var(--ease-soft),color .3s}
.gl-ask:hover{background:#18235C;color:#FFE9A8}
.gl-ask:focus-visible{outline:2px solid #0A1030;outline-offset:2px}
.gl-ico{width:1em;height:1em;flex:none;transition:transform .4s var(--ease-out)}
.gl-ask:hover .gl-ico{transform:translate3d(3px,0,0)}
/* keyboard focus reveals the chip (a mouse or touch click that merely returns focus does not) */
.gl-tile:has(:focus-visible) .gl-cap{opacity:1;transform:none;pointer-events:auto}
.gl-tile:has(:focus-visible) .gl-open::after{opacity:1}
.gl-tile:has(:focus-visible)::after{box-shadow:inset 0 0 0 1px var(--accent-muted)}
@supports not selector(:has(*)){
  .gl-tile:focus-within .gl-cap{opacity:1;transform:none;pointer-events:auto}
  .gl-tile:focus-within .gl-open::after{opacity:1}
}
@media (hover:hover) and (pointer:fine){
  .gl-tile:hover .gl-open img{transform:scale(1.04)}
  .gl-tile:hover .gl-open::after{opacity:1}
  .gl-tile:hover::after{box-shadow:inset 0 0 0 1px var(--accent-muted)}
  .gl-tile:hover .gl-cap{opacity:1;transform:none;pointer-events:auto}
}
@media (pointer:coarse){.gl-ask{min-height:44px}}

.gl-note{display:flex;align-items:center;gap:16px;margin-top:clamp(28px,4vw,48px);font-size:.875rem;line-height:1.5;color:var(--text-secondary)}
.gl-note::before{content:"";flex:none;width:44px;height:1px;background:var(--accent)}

/* ---------- lightbox ---------- */
html.gl-lock{overflow:hidden;padding-right:var(--gl-sbw,0px)}   /* --gl-sbw: the scrollbar width, set by gallery.js, so the page behind does not shift */
.gl-lb{border:0;padding:0;margin:0;max-width:none;max-height:none;width:100%;height:100vh;height:100dvh;overflow:hidden;background:#050820;color:var(--text-primary)}
.gl-lb::backdrop{background:rgba(5,8,28,.9)}
.gl-lb[open]{display:grid;grid-template-columns:clamp(60px,8vw,112px) minmax(0,1fr) clamp(60px,8vw,112px);grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"top top top" "prev stage next" ". foot ."}
.gl-lb[open]{animation:gl-lb-in .35s var(--ease-out)}
@keyframes gl-lb-in{from{opacity:0}to{opacity:1}}

.gl-lb-top{grid-area:top;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(16px,3vw,32px) 6px}
.gl-lb-count{font:500 .875rem/1 var(--font-mono);letter-spacing:.14em;color:var(--text-secondary)}
.gl-lb-close{display:inline-flex;align-items:center;gap:.6em;min-height:44px;padding:0 20px 0 16px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(10,16,48,.6);color:var(--text-primary);
  font:500 .9375rem/1 var(--font-body);cursor:pointer;transition:border-color .3s var(--ease-soft),color .3s}
.gl-lb-close:hover{border-color:var(--accent);color:var(--accent-hover)}

.gl-stage{grid-area:stage;display:grid;place-items:center;min-width:0;min-height:0;container-type:size;padding:clamp(4px,1vw,12px) 0;touch-action:pan-y pinch-zoom;cursor:default}
.gl-fig{position:relative;width:min(100%,calc(66vh * var(--ar,.75)));width:min(100cqw,calc(100cqh * var(--ar,.75)));aspect-ratio:var(--ar,.75);border-radius:12px;overflow:hidden;background:var(--panel) center/cover no-repeat;box-shadow:0 30px 90px rgba(0,0,0,.5),0 0 0 1px rgba(245,239,224,.12)}
.gl-full{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s var(--ease-soft);user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.gl-full.is-in{opacity:1}

.gl-nav{align-self:center;justify-self:center;display:inline-flex;align-items:center;justify-content:center;gap:.5em;width:52px;height:52px;border-radius:50%;border:1px solid var(--line-strong);background:rgba(10,16,48,.6);color:var(--text-primary);
  font:500 .9375rem/1 var(--font-body);cursor:pointer;transition:border-color .3s var(--ease-soft),color .3s,transform .4s var(--ease-out)}
.gl-nav:hover{border-color:var(--accent);color:var(--accent-hover)}
.gl-nav:disabled{opacity:.35;cursor:default}
.gl-nav .gl-ico{width:20px;height:20px}
.gl-nav span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.gl-prev{grid-area:prev}.gl-next{grid-area:next}
.gl-prev:hover .gl-ico{transform:translate3d(-3px,0,0)}
.gl-next:hover .gl-ico{transform:translate3d(3px,0,0)}

.gl-lb-foot{grid-area:foot;display:flex;align-items:center;justify-content:space-between;gap:20px 28px;padding:14px 0 clamp(16px,2.4vw,28px)}
.gl-lb-cap{font:400 1rem/1.5 var(--font-body);color:var(--text-secondary);text-wrap:pretty;max-width:62ch}
.gl-lb-ask{flex:none}

@media (max-width:699.98px){
  .gl-lb[open]{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto auto;
    grid-template-areas:"top top top" "stage stage stage" "foot foot foot" "prev ask next"}
  .gl-lb-foot{display:contents}
  .gl-lb-cap{grid-area:foot;padding:12px var(--gutter) 10px;font-size:.9375rem;max-width:none}
  .gl-lb-ask{grid-area:ask;justify-self:center;white-space:nowrap;margin-bottom:max(16px,env(safe-area-inset-bottom))}
  .gl-nav{margin-bottom:max(16px,env(safe-area-inset-bottom))}
  .gl-prev{justify-self:start;margin-left:var(--gutter)}
  .gl-next{justify-self:end;margin-right:var(--gutter)}
  .gl-stage{padding:0 8px}
}

@media (prefers-reduced-motion:reduce){
  .gl-item,.gl-item.is-out,.gl-item.is-pre{opacity:1!important;transform:none!important}
  .gl-lb[open]{animation:none}
}