/* Pangpang Custom TOC v2.1 -- dung sidebar that cua Astra (Separate Containers),
   TOC la mot khoi doc lap ben ngoai khung bai viet. Cau truc/hanh vi dong bo
   voi muc luc trang Lo trinh (astra-child/template-landing.php + landing.css):
   cay H2 -> H3 co the mo rong/thu gon tung muc, tren mobile thu gon thanh
   1 nut vuong co dinh goc tren-phai, mo rong thanh bang khi bam vao. */

@media (min-width: 993px) {
  /* Ep cot sidebar ve dung 264px co dinh, giong het cot muc luc 264px cua
     trang Lo trinh (thay vi width:30% mac dinh cua Astra ~360-400px, khien
     khung muc luc o bai viet to hon han so voi trang Lo trinh). #primary
     duoc nhuong lai phan con trong bang flex:1 auto. Chi ap dung cho single
     post (khong dung cac kieu trang khac dang dung sidebar 30%). */
  body.single-post #primary {
    width: auto !important;
    flex: 1 1 auto !important;
  }

  body.single-post #secondary {
    width: 264px !important;
    flex: 0 0 264px !important;
    max-width: 264px !important;
    /* Astra co nhieu luat padding-left/right rieng cho #secondary tuy theo
       kieu container (60px, 30px, 1em...). Neu khong ep ve 0, khung muc luc
       se bi thu hep hon 264px thuc te, nhin nho hon so voi trang Lo trinh
       (noi .ltoc-sidebar khong co wrapper padding nao ca). */
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  body.single-post #secondary .sidebar-main {
    padding: 0 !important;
    margin: 0 !important;
  }

  body.ast-left-sidebar #secondary {
    position: sticky;
    top: 32px;
    align-self: flex-start;
    height: fit-content;
  }

  /* Dong bo giao dien voi muc luc trang Lo trinh (.ltoc-sidebar trong
     landing.css): them vien, bo goc, do bong va thanh cuon rieng cho
     khung muc luc khi noi dung dai hon chieu cao con lai cua man hinh.
     width:100% + box-sizing:border-box de widget chiem dung toan bo 264px
     cua #secondary, giong het .ltoc-sidebar (264px bao gom ca border+padding). */
  .widget_pangpang_toc_widget {
    width: 100% !important;
    box-sizing: border-box !important;
    background: #FFFFFF !important;
    border: 1px solid var(--pp-support);
    border-radius: 14px;
    box-shadow: 0 12px 28px -20px rgba(19, 23, 57, 0.25);
    /* !important vi Astra co san luat ".widget{padding:2em}" voi do dac
       trung cao hon (co #secondary + 2 class), neu khong ep se bi doi
       thanh 32px thay vi 16px giong khung muc luc trang Lo trinh. */
    padding: 16px !important;
    margin: 0 !important;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }
}

.widget_pangpang_toc_widget {
  --pp-ink: #131739;
  --pp-accent: #2235DD;
  --pp-support: #E4E7FD;
  font-family: 'Roboto', sans-serif;
}

/* Thanh cuon co mau, dong bo giao dien voi muc luc trang Lo trinh
   (.ltoc-sidebar trong landing.css) -- cung mau accent/support nen 2 noi
   hien thi giong het nhau khi noi dung dai hon khung hien thi. */
.widget_pangpang_toc_widget,
.pp-toc.is-open {
  scrollbar-width: thin;
  scrollbar-color: #8b8b8b var(--pp-support);
}

.widget_pangpang_toc_widget::-webkit-scrollbar,
.pp-toc.is-open::-webkit-scrollbar {
  width: 6px;
}

.widget_pangpang_toc_widget::-webkit-scrollbar-track,
.pp-toc.is-open::-webkit-scrollbar-track {
  background: var(--pp-support);
  border-radius: 999px;
}

.widget_pangpang_toc_widget::-webkit-scrollbar-thumb,
.pp-toc.is-open::-webkit-scrollbar-thumb {
  background-color: #8b8b8b;
  border-radius: 999px;
  border: 1px solid var(--pp-support);
}

.widget_pangpang_toc_widget::-webkit-scrollbar-thumb:hover,
.pp-toc.is-open::-webkit-scrollbar-thumb:hover {
  background-color: #636363;
}

.pp-toc__fab {
  display: none;
}

.pp-toc__title {
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pp-ink);
  opacity: 0.6;
  margin: 0 0 8px;
}

.pp-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pp-toc__item.pp-toc__item--h2 {
  margin-bottom: 2px;
}

.pp-toc__row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.pp-toc__link {
  display: block;
  flex: 1;
  min-width: 0;
  padding: 6px 0 6px 8px;
  color: var(--pp-ink);
  opacity: 0.75;
  text-decoration: none;
  font-family: 'Roboto', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.4;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.pp-toc__item--h2 .pp-toc__link {
  font-weight: 700 !important;
  opacity: 0.95;
}

.pp-toc__item--h3 .pp-toc__link {
  font-weight: 400 !important;
  opacity: 0.8;
  padding-left: 46px;
}

.pp-toc__link:hover {
  color: var(--pp-accent);
  opacity: 1;
}

.pp-toc__link.is-active {
  color: var(--pp-accent);
  font-weight: 600;
  opacity: 1;
}

/* Nut mo rong / thu nho cho muc co header con, dat o dau hang, giong
   thanh muc luc cua trang Lo trinh. */
.pp-toc__expand {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  max-width: 18px;
  padding: 0 !important;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 6px;
  color: var(--pp-accent) !important;
  cursor: pointer;
  line-height: 1;
  font-size: inherit;
  transition: background-color 0.2s ease;
}

.pp-toc__expand:hover {
  background: var(--pp-support) !important;
}

.pp-toc__expand:focus,
.pp-toc__expand:focus-visible {
  outline: none;
  box-shadow: none !important;
}

.pp-toc__expand-spacer {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.pp-toc__expand-icon {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}

/* Mac dinh (dang mo rong): mui ten huong xuong. Khi bi rut gon: don gian
   hoa thanh dau ">" huong sang phai. */
.pp-toc__item.is-collapsed .pp-toc__expand-icon {
  transform: rotate(0deg);
}

.pp-toc__sublist {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
}

.pp-toc__item.is-collapsed .pp-toc__sublist {
  display: none;
}

@media (min-width: 993px) {
  .pp-toc__expand {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    max-width: 20px;
  }

  .pp-toc__expand-icon {
    font-size: 17px;
  }
}

/* Bai viet: chi can chua khoang dem de tieu de khong dinh sat mep tren khi
   cuon toi bang lien ket muc luc (bu cho header neu co). */
.entry-content h2,
.entry-content h3 {
  scroll-margin-top: 96px;
}

/* Mobile / tablet: sidebar cua Astra tu xuong duoi bai viet. Muc luc thu
   gon thanh 1 nut vuong bo goc nho, co dinh goc tren-phai bat ke dang o vi
   tri nao cua bai viet, mo rong thanh bang khi bam vao -- giong het hanh vi
   tren trang Lo trinh. */
@media (max-width: 992px) {
  /* Trung hoa box/padding/border rieng cua widget nay (Astra Separate
     Containers boc box cho toan bo #secondary, khong phai tung widget, nen
     phai tu reset o day de khong de lai 1 khung trong khi noi dung ben
     trong da chuyen sang position:fixed). */
  .widget_pangpang_toc_widget {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .pp-toc {
    position: fixed;
    top: 16px;
    right: 16px;
    left: auto;
    z-index: 200;
    width: 44px;
    height: 44px;
    max-height: 44px;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid var(--pp-support);
    border-radius: 8px;
    box-shadow: 0 12px 28px -20px rgba(19, 23, 57, 0.25);
    transition: width 0.18s ease, height 0.18s ease, border-radius 0.18s ease;
  }

  #pp-toc #pp-toc-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 8px;
    background-color: var(--pp-accent);
    color: #FFFFFF;
    box-shadow: 0 6px 16px -6px rgba(19, 23, 57, 0.45);
    cursor: pointer;
  }

  .pp-toc__fab-icon {
    display: block;
    flex-shrink: 0;
  }

  #pp-toc #pp-toc-fab .pp-toc__fab-icon path {
    stroke: #FFFFFF;
  }

  .pp-toc__fab-icon--close {
    display: none;
  }

  .pp-toc__panel {
    display: none;
  }

  .pp-toc.is-open {
    width: min(320px, calc(100vw - 32px));
    height: auto;
    max-height: calc(100vh - 96px);
    border-radius: 14px;
    overflow-y: auto;
    padding: 16px;
  }

  #pp-toc.is-open #pp-toc-fab {
    position: static;
    width: 28px;
    height: 28px;
    margin: 0 0 8px auto;
    background: transparent;
    box-shadow: none;
    color: var(--pp-ink);
  }

  #pp-toc.is-open #pp-toc-fab .pp-toc__fab-icon path {
    stroke: currentColor;
  }

  .pp-toc.is-open .pp-toc__fab-icon--open {
    display: none;
  }

  .pp-toc.is-open .pp-toc__fab-icon--close {
    display: block;
  }

  .pp-toc.is-open .pp-toc__panel {
    display: block;
  }
}