/* Additions on top of site.css (which is extracted verbatim from the demo). Keep this file small. */

/* Splash shows only on the first page view of a session (see inline script in _Layout). */
.nosplash #splash{display:none}

/* width/height attributes are kept on <img> to reserve space (CLS); let the demo CSS (aspect-ratio) decide the real height. */
.prod .ph img:not(.ph2),.cat img,.gtrack img,.gthumbs img{height:auto}

/* Sticky footer: on short pages <main> grows so the footer stays at the bottom of the viewport. */
#site{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
#main{flex:1 0 auto}
@media (max-width:700px){#site{min-height:calc(100vh - 72px);min-height:calc(100dvh - 72px)}}

/* The carousel must never be scrolled programmatically (media/focus can scroll overflow:hidden boxes). */
.hc{overflow:clip}

/* Admin: tabs are real links (one URL per tab) styled like the demo buttons. */
a.atab{display:inline-flex;align-items:center;text-decoration:none}
/* Admin products: rename / delete (needed for the 301 redirect and file cleanup; not in the demo). */
.pmore{font-size:12px;margin-left:6px;white-space:nowrap}.pmore .linkbtn{font-size:12px;font-weight:600}.linkbtn.danger{color:#991B1B}
/* 6 admin tabs (incl. "Sao lưu") do not fit 980px with the demo padding: tighter padding, wrap instead of clipping on desktop/tablet. Mobile keeps the demo swipe row. */
@media (min-width:701px){.atabs .wrap{flex-wrap:wrap;row-gap:6px}.atab{padding:0 12px}}