/* ==========================================================================
   Photo / video libraries ≤767 px — Figma "Thư viện Video – Mobile" 3638:15369 / "Thư viện Hình ảnh – Mobile" 3638:15888
   (390 wide). Desktop rules: css/ohio-media-gallery.css. Frame px in comments (y = frame y at 390).
   Type = Style Guide mobile: H1 26/34, H2 22/30, body 15/24, caption 13/20, button 14/20 h44.
   ========================================================================== */
@media (max-width:767px){
  .ohio-gal .ohio-container{padding-left:20px;padding-right:20px}
  .ohio-gal .ohio-gal__ic{width:16px;height:16px}

  /* hero 3638:15466: p20, gap 16 — crumbs 84 (12/20) → bar + H1 120 (26/34) → switch 181 (video 100 / photos 78 tall) */
  .ohio-gal__hero,.ohio-gal--image .ohio-gal__hero{padding:20px 0}
  .ohio-gal__hero .ohio-container{display:flex;flex-direction:column;gap:16px}
  .ohio-gal__crumbs,.ohio-gal--image .ohio-gal__crumbs{margin:0;font-size:12px;line-height:20px;color:#6E6780}
  .ohio-gal__sep{color:#BDB7C8}
  .ohio-gal__h1{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
  .ohio-gal__h1::before,.ohio-gal__title::before{content:"";display:block;width:32px;height:3px;margin:0 0 8px;border-radius:2px;background:var(--ohio-cta)}

  /* library switch 3638:15465: 2 cols gap 10; tab p12 r12 gap 10; icon box 32 r8; title 600 14/20, sub 12/16 (gap 2) */
  .ohio-gal__switch{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}   /* tabs keep their own height (video frame: 78 | 100) */
  .ohio-gal--image .ohio-gal__switch{grid-template-columns:minmax(0,161fr) minmax(0,179fr)}       /* photo frame: both titles on one line (103 + 122 px of text in 340) */
  .ohio-gal--image .ohio-gal__tab{column-gap:8px;padding:12px 6px 12px 10px}   /* 6 px text-to-edge minimum (frame text overflows its tab) */
  .ohio-gal__tab-ic .ohio-gal__ic{display:none}
  .ohio-gal__tab-ic .ohio-gal__ic--m{display:block}                                             /* icon/video 3638:15448, icon/image 3638:15456 (16, stroke) */
  .ohio-gal__tab{display:grid;grid-template-columns:32px minmax(0,1fr);align-content:start;gap:10px;min-height:0;padding:12px 8px 12px 12px;   /* content top, icon centred on the text; inactive +1 border (frame: 194 vs 193); pr 8 so "Thư viện Video" (103 px) fits one line */
border:1px solid #ECEAF0;border-radius:12px}
  .ohio-gal__tab.is-active{background:var(--ohio-purple-700);border:0}
  .ohio-gal__tab-ic{flex-basis:32px;height:32px;border-radius:8px;background:#F7F3FB}
  .ohio-gal__tab.is-active .ohio-gal__tab-ic{background:#5E3D8A}
  .ohio-gal__tab-tx{gap:2px}
  .ohio-gal__tab strong{font-size:14px;line-height:20px;color:var(--ohio-purple-700)}
  .ohio-gal__m{display:inline}
  .ohio-gal__tab small{font-size:12px;line-height:16px;color:#6E6780}
  .ohio-gal__tab.is-active small{color:#EFE7F7}

  /* section heads 3638:15520: bar 32×3 → 8 → H2 22/30 → 8 → count / lead 15/24 #6E6780; 20 to the content */
  .ohio-gal__head,.ohio-gal--video .ohio-gal__head--all,.ohio-gal--image .ohio-gal__head--all{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:20px}
  .ohio-gal__lead,.ohio-gal__total{max-width:none;font-size:15px;line-height:24px;color:#6E6780;white-space:normal}
  .ohio-gal--video .ohio-gal__lead{display:none}                                  /* video frame: no lead */

  /* featured groups 3638:15527: bg #F7F3FB, py 40; cards stacked gap 16, border #ECEAF0 r16, cover 196, body p16 gap 8 */
  .ohio-gal__groups{padding:40px 0;background:#F7F3FB}
  .ohio-gal__carousel{display:flex;flex-direction:column;gap:16px;margin:0;padding:0;overflow:visible}
  .ohio-gal__carousel:not(.is-all)>.ohio-gal__grp:nth-child(n+4){display:none}   /* frame stacks 3 groups; the rest open with the button below */
  .ohio-gal__more.ohio-gal__grp-all{display:inline-flex;margin:20px 0 0;padding:0;border:0;background:none;cursor:pointer;font-family:var(--ohio-font-body);text-transform:none;letter-spacing:0;min-height:0}
  .ohio-gal__grp{border-color:#ECEAF0;border-radius:16px;box-shadow:none}
  .ohio-gal__grp-img{aspect-ratio:auto;height:196px;background:#F7F3FB}
  .ohio-gal__grp-body{gap:8px;padding:16px}
  .ohio-gal__grp-t{font-size:18px;line-height:26px;color:var(--ohio-purple-700)}
  .ohio-gal__grp-d{font-size:13px;line-height:20px;color:#6E6780}
  .ohio-gal__grp-foot{flex-direction:column;align-items:flex-start;gap:8px;min-height:0;margin:0;padding:0}
  .ohio-gal__grp-n{font-size:12px;line-height:20px;color:#6E6780}
  .ohio-gal__grp-n .ohio-gal__ic{display:none}
  .ohio-gal__more{font-size:14px;line-height:20px;color:#5E3D8A}
  .ohio-gal__play,.ohio-gal__play--s{width:52px;height:52px;margin:-26px 0 0 -26px;filter:drop-shadow(0 4px 6px rgba(66,38,102,.25))}
  .ohio-gal__play{color:var(--ohio-cta)}
  .ohio-gal__play .ohio-gal__ic{width:22px;height:22px}

  /* "Tất cả" 3638:15708: p20, gap 20; tags = pills 12/20 600 p4/10; title 16/24 600; meta 13/20 then 12/20 */
  .ohio-gal__all{padding:20px 0}
  .ohio-gal__tags{gap:6px}
  .ohio-gal__tag{height:28px;padding:0 10px;border:0;border-radius:999px;background:#F7F3FB;font-size:12px;line-height:20px;color:var(--ohio-purple-700)}
  .ohio-gal__tag--type{background:#F6F5F8;color:#3D3849}
  .ohio-gal__tag--type .ohio-gal__ic{display:none}                                 /* 3638:15550: plain text chip, no icon */
  .ohio-gal__t{font-size:16px;line-height:24px;color:var(--ohio-purple-700)}
  .ohio-gal__meta{display:block;font-size:12px;line-height:20px;color:#6E6780}
  .ohio-gal__meta .ohio-gal__ic{display:none}
  .ohio-gal__meta span{display:inline}
  .ohio-gal__meta span+span::before{content:" · "}
  .ohio-gal__media{border-radius:0;background:#F7F3FB}
  .ohio-gal__dur{right:6px;bottom:8px;height:24px;padding:0 8px;border-radius:6px;background:rgba(26,18,33,.75);font-size:12px}

  /* photo grid 3638:16203: 2 cols gap 12; card border r16, cover 128, body p12 gap 8; odd last card spans both columns */
  .ohio-gal__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .ohio-gal--image .ohio-gal__item{gap:8px;padding-bottom:12px;border:1px solid #ECEAF0;border-radius:16px;overflow:hidden;background:#fff}
  .ohio-gal--image .ohio-gal__item>:not(.ohio-gal__media){margin:0 12px}
  .ohio-gal--image .ohio-gal__media{aspect-ratio:auto;height:128px;margin-bottom:4px}
  .ohio-gal--image .ohio-gal__item:last-child:nth-child(odd){grid-column:1/-1}

  /* video list 3638:15545 + 3638:15701: first card full (cover 196, body p16 gap 8), then rows 128×96 r10 | text gap 6, gap 16 */
  .ohio-gal--video .ohio-gal__grid{grid-template-columns:1fr;gap:16px}
  .ohio-gal--video .ohio-gal__item:first-child{gap:8px;margin-bottom:4px;padding-bottom:16px;border:1px solid #ECEAF0;border-radius:16px;overflow:hidden;background:#fff}
  .ohio-gal--video .ohio-gal__item:first-child>:not(.ohio-gal__media){margin:0 16px}
  .ohio-gal--video .ohio-gal__item:first-child .ohio-gal__media{aspect-ratio:auto;height:196px;margin-bottom:8px}
  .ohio-gal--video .ohio-gal__item:not(:first-child){display:grid;grid-template-columns:128px minmax(0,1fr);grid-template-rows:auto auto auto 1fr;gap:6px 12px;align-items:start}
  .ohio-gal--video .ohio-gal__item:not(:first-child) .ohio-gal__media{grid-row:1/5;height:96px;aspect-ratio:auto;border-radius:10px}
  .ohio-gal--video .ohio-gal__item:not(:first-child) .ohio-gal__t{font-size:15px;line-height:22px}
  .ohio-gal--video .ohio-gal__item:not(:first-child) .ohio-gal__play{width:31px;height:31px;margin:-15.5px 0 0 -15.5px;filter:drop-shadow(0 2.4px 3.6px rgba(66,38,102,.25))}
  .ohio-gal--video .ohio-gal__item:not(:first-child) .ohio-gal__play .ohio-gal__ic{width:13px;height:13px}
  .ohio-gal--video .ohio-gal__item:not(:first-child) .ohio-gal__dur,
  .ohio-gal--video .ohio-gal__item:not(:first-child) .ohio-gal__tag--type{display:none}
  /* "type · duration" 3638:15558 / "type · N ảnh" 3638:16048: 13/20 #6E6780 under the title; album pill + type chip move into it */
  .ohio-gal__sub{display:block;margin:0;font:400 13px/20px var(--ohio-font-body);color:#6E6780}
  .ohio-gal--video .ohio-gal__item:first-child .ohio-gal__sub,.ohio-gal__cnt,.ohio-gal--image .ohio-gal__tag--type{display:none}

  /* progress 3638:15705: 20 below the list; 13/20 → 8 → bar 160×4 #ECEAF0 r2; 20 → button 44 full width, border 1.5 r12 */
  .ohio-gal__progress{gap:8px;padding-top:20px}
  .ohio-gal__progress p{font-size:13px;line-height:20px;color:#6E6780}
  .ohio-gal__bar{width:160px;border-radius:2px;background:#ECEAF0}
  .ohio-gal__loadmore.ohio-btn{align-self:stretch;min-width:0;height:44px;margin-top:12px;padding:0 20px;border-width:1.5px;font-size:14px;letter-spacing:.56px}
}