/* Pangpang - Global site-wide fixes (Astra child theme)
   Ap dung cho MOI trang (page, single post, archive...), khong rieng gi
   trang Lo trinh. 2 muc dich:
   1) Header luon co dinh (sticky) khi cuon, o moi kich thuoc man hinh.
   2) Tren mobile: nut mo/dong muc luc thu gon (o trang single post lan
      trang Lo trinh) bi trung vi tri voi nut header (hamburger/menu) o goc
      tren-phai khi header tro thanh sticky -- ha thap nut muc luc xuong
      bang 1/4 chieu cao man hinh de khong con chong len nhau.
*/

/* 1) Sticky header - moi breakpoint, moi loai trang.
   #masthead la wrapper <header> chuan cua Astra, bao gom ca thanh menu
   tren desktop lan thanh header rut gon tren mobile, nen chi can 1 luat
   duy nhat la du cho toan bo cac breakpoint responsive. */
body #masthead {
  position: sticky;
  top: 0;
  z-index: 999;
}

/* Dam bao header co nen dac (khong trong suot) khi noi dung cuon o phia
   duoi, tranh chu/anh bai viet bi de len nhin roi mat. Astra da dat nen
   trang cho header trong hau het cac theme option, nhung khai bao lai o
   day cho chac chan trong moi truong hop (vd header dang trong suot). */
body:not(.ast-header-transparent) #masthead {
  background-color: #FFFFFF;
}

/* 2) Mobile: ha nut mo/dong muc luc thu nho xuong bang 1/4 chieu cao
   thiet bi, TINH TU DUOI LEN (bottom: 25vh thay vi top), de khong con
   trung voi nut header goc tren-phai. Ap dung cho MOI giao dien co nut
   muc luc dang thu gon:
   - .pp-toc  (widget muc luc o trang single post, plugin Pangpang Custom
     TOC, breakpoint max-width: 992px)
   - .ltoc-sidebar (muc luc o trang Lo trinh, template-landing.php,
     breakpoint max-width: 960px)
   !important vi CSS goc cua plugin/template dat top:16px cung do dac
   trung, can dam bao luat nay luon thang bat ke thu tu nap file CSS. */
@media (max-width: 992px) {
  .pp-toc {
    top: auto !important;
    bottom: 25vh !important;
  }

  /* Khi bang muc luc da mo rong, neo lai gan dinh man hinh de co du khong
     gian hien thi toan bo noi dung (giu nguyen max-height sẵn co cua
     plugin la calc(100vh - 96px), chi hop ly khi bat dau tu gan dinh chu
     khong phai tu duoi len). */
  .pp-toc.is-open {
    top: 16px !important;
    bottom: auto !important;
  }
}

@media (max-width: 960px) {
  .ltoc-sidebar {
    top: auto !important;
    bottom: 25vh !important;
  }

  .ltoc-sidebar.is-open {
    top: 16px !important;
    bottom: auto !important;
  }
}