#album-dialog{width:920px;max-width:calc(100% - 24px);max-height:92dvh;padding:38px 24px 26px;background:#fcf9f5;color:#493d35;border:1px solid #e9ded1;border-radius:18px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c7ae99 transparent}
#album-dialog::backdrop{background:#211a16c9;backdrop-filter:blur(7px)}
#album-dialog h2{font:30px/1.35 PlayfairDisplay,Georgia,serif;margin:3px 25px 8px;color:#684b3e}
.album-intro{text-align:center;color:#938071;font:11px/1.8 Arial,sans-serif;letter-spacing:2px;margin:0 0 26px;text-transform:uppercase}
#album-dialog .dialog-close{position:absolute;top:9px;right:10px;width:34px;height:34px;border-radius:50%;background:#f3ece4;color:#684b3e;z-index:4}
#album-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start;max-height:calc(92dvh - 200px);overflow-y:auto;padding:3px;scrollbar-width:thin;scrollbar-color:#c7ae99 transparent;overscroll-behavior:contain}
.album-thumb{position:relative;aspect-ratio:2/3;border-radius:5px;background:#e9e0d7;box-shadow:0 3px 12px #4933210c;transition:transform .22s,box-shadow .22s}
.album-thumb.landscape{grid-column:span 2;aspect-ratio:3/2}
.album-thumb img{object-fit:contain;transition:transform .35s;opacity:1}
.album-thumb::after{content:attr(data-number);position:absolute;bottom:8px;right:8px;font:10px/22px Arial;color:white;background:#211a167a;min-width:25px;border-radius:15px}
@media(hover:hover){.album-thumb:hover{transform:translateY(-3px);box-shadow:0 8px 24px #49332125}.album-thumb:hover img{transform:scale(1.025)}}
#album-dialog.is-viewing{background:#211e1b;color:#f8f2ea;padding:18px 20px 20px;border-color:#4c4239}
#album-dialog.is-viewing h2,#album-dialog.is-viewing .album-intro{display:none}
#album-dialog.is-viewing .dialog-close{color:#f8f2ea;background:#ffffff12}
#album-back{color:#e9d8c6;font-size:12px;padding:8px 4px;margin:0 0 3px;min-height:36px}
#album-counter{color:#c6b4a3;font:11px/1.8 Arial;letter-spacing:2px;margin:0 0 12px}
.album-stage{position:relative;display:flex;align-items:center;justify-content:center;background:#191715;border-radius:6px;overflow:hidden;min-height:150px}
#album-photo{height:calc(88dvh - 176px);max-height:720px;min-height:160px;width:100%;object-fit:contain;transition:opacity .18s;touch-action:pan-y pinch-zoom}
#album-viewer.is-loading #album-photo{opacity:.25}
.album-loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#e9d8c6;font-size:12px;pointer-events:none}
#album-error{font-size:12px;line-height:1.6;color:#f2c8b2;padding:10px}
.album-navigation{align-items:center;gap:22px;margin-top:12px}
.album-navigation button{background:#ffffff10;border:1px solid #ffffff25;width:44px;height:44px;color:#f8f2ea;line-height:1}
.album-hint{font-size:11px;color:#ad9c8d;line-height:1.6;margin:0;letter-spacing:.2px}
#album-dialog button:focus-visible{outline:2px solid #bd9175;outline-offset:3px}
@media(max-width:600px){#album-dialog{padding:38px 12px 18px;border-radius:14px}#album-dialog h2{font-size:24px;margin-left:16px;margin-right:16px}.album-intro{font-size:9px;letter-spacing:1.6px;margin-bottom:20px}#album-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}#album-dialog.is-viewing{padding:13px 10px 16px}#album-photo{height:calc(88dvh - 160px)}.album-hint{font-size:10px}}
@media(prefers-reduced-motion:reduce){.album-thumb,.album-thumb img,#album-photo{transition:none}}

/* Keep the album discoverable without widening the mobile toolbar. */
.live-actions #album-open{background:#a83d5c;color:#fff;border:1px solid #ffe1e9;box-shadow:0 0 0 3px #fff8;animation:album-beacon 2.6s ease-in-out infinite;isolation:isolate}
#album-open::before{content:'Album ảnh';position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);white-space:nowrap;background:#fff8f9;color:#96344e;border:1px solid #e5a4b6;border-radius:7px;padding:5px 9px;font:600 11px/1.2 Arial,sans-serif;box-shadow:0 3px 10px #6d213229;pointer-events:none}
#album-open::after{content:'';position:absolute;bottom:calc(100% + 5px);left:50%;width:7px;height:7px;transform:translateX(-50%) rotate(45deg);background:#fff8f9;border-right:1px solid #e5a4b6;border-bottom:1px solid #e5a4b6;pointer-events:none}
#album-open svg{filter:drop-shadow(0 1px 1px #65182c40)}
@keyframes album-beacon{0%,100%{box-shadow:0 0 0 2px #fff9,0 0 0 4px #e77f9a45;filter:brightness(1)}50%{box-shadow:0 0 0 3px #ffedf2,0 0 0 9px #e77f9a12,0 0 18px #e65e8880;filter:brightness(1.2)}}
body:has(dialog[open]) #album-open{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.live-actions #album-open{animation:none;box-shadow:0 0 0 3px #ffe1e9}}