/* Pangpang - Lo trinh TOC Sidebar template
   Layout tham khao cau truc atlassian.com/agile,
   gam mau/font giu nguyen theo design system dang active (pangpang-seo-blog) */

/* Astra bien .ast-container thanh flex container o desktop (min-width:922px)
   de xep #primary/#secondary canh nhau (CSS dong sinh tu Customizer, nam
   trong <style id="astra-theme-css-inline-css">). Template nay chi co 1 the
   <main> duy nhat (khong dung #primary/#secondary), nen no tro thanh 1
   flex-item bi co lai theo noi dung va don ve sat trai thay vi chiem tron va
   nam giua .ast-container -> chinh la ly do chu trong hero (va toan bo noi
   dung ben duoi) bi lech trai du background da tran vien dung. Ep lai
   display:block, chi rieng cho template Lo trinh, khong dung cac trang khac
   cua site dang can .ast-container la flex de xep sidebar. */
body.page-template-template-landing .site-content > .ast-container {
  display: block;
}

.ltoc-page {
  --ltoc-bg: #F0F1FD;
  --ltoc-surface: #FFFFFF;
  --ltoc-ink: #131739;
  --ltoc-accent: #2235DD;
  --ltoc-support: #E4E7FD;
  /* Mau nen rieng cho khoi hero: lay dung tong mau xanh cua logo (khac voi
     accent chung cua site) theo yeu cau. */
  --ltoc-hero-bg: #114084;

  --ltoc-font-head: "Roboto", sans-serif;
  --ltoc-font-body: "Roboto", sans-serif;

  --ltoc-space-sm: 8px;
  --ltoc-space-md: 16px;
  --ltoc-space-lg: 32px;

  --ltoc-radius-sm: 6px;
  --ltoc-radius-md: 8px;
  --ltoc-radius-lg: 14px;

  background: var(--ltoc-surface);
  color: var(--ltoc-ink);
  font-family: var(--ltoc-font-body);
}

.ltoc-page :where(h1, h2, h3, h4) {
  font-family: var(--ltoc-font-head);
  font-weight: 700;
  color: var(--ltoc-ink);
  line-height: 1.15;
}

.ltoc-page :where(a) {
  color: var(--ltoc-accent);
}

/* ---------- Hero (kieu "What is Agile?": nen xanh accent, H1 + dong phu nho, can giua) ---------- */

.ltoc-hero {
  /* full-bleed: tran vien ngang bat ke container cha (.ast-container) co padding
     hay khong. KHONG dung ky thuat vw (left:50%/margin:-50vw) vi tren desktop
     co scroll doc, vw tinh ca do rong thanh cuon (Chrome/Edge) trong khi %
     cua .ast-container thi khong -> mau bi hut mot khoang ~1/2 do rong
     thanh cuon o mot canh, khong sua duoc bang cach chinh lai cong thuc vw.
     Dung box-shadow spread thay the: phan tu giu nguyen vi tri/kich thuoc
     binh thuong (khong dich chuyen bang margin am), chi "ve" nen tran ra
     ngoai bang box-shadow nen khong phu thuoc vw/scrollbar va khong tao
     scroll ngang thua. */
  padding: 64px 24px 56px;
  text-align: center;
  background: var(--ltoc-hero-bg);
  box-shadow: 0 0 0 100vmax var(--ltoc-hero-bg);
  clip-path: inset(0 -100vmax);
  box-sizing: border-box;
}

.ltoc-hero__inner {
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

.ltoc-hero__title {
  color: #FFFFFF;
  font-size: clamp(28px, 4vw, 42px);
  margin: 0 0 var(--ltoc-space-sm);
}

.ltoc-hero__sub {
  font-family: var(--ltoc-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  color: #FFFFFF;
  opacity: 0.85;
  margin: 0 auto;
  max-width: 560px;
}

/* ---------- Two-column layout ---------- */

.ltoc-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 24px 96px;
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

/* ---------- Sidebar TOC: boc trong 1 khung rieng, tach biet vung noi dung ---------- */

.ltoc-sidebar {
  position: sticky;
  top: 96px;
  align-self: start;
  max-height: calc(100vh - 128px);
  overflow-y: auto;

  background: var(--ltoc-surface);
  border: 1px solid var(--ltoc-support);
  border-radius: var(--ltoc-radius-lg);
  box-shadow: 0 12px 28px -20px rgba(19, 23, 57, 0.25);
  padding: var(--ltoc-space-md);
}

.ltoc-fab {
  display: none;
}

.ltoc-panel__title {
  font-family: var(--ltoc-font-body);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ltoc-ink);
  opacity: 0.6;
  margin: 0 0 var(--ltoc-space-sm);
}

.ltoc-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ltoc-nav__item.is-level-2 {
  margin-bottom: 2px;
}

.ltoc-nav__row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.ltoc-nav__link {
  display: block;
  flex: 1;
  min-width: 0;
  padding: 6px 0 6px 14px;
  margin-left: -16px;
  border-left: 2px solid transparent;
  font-family: var(--ltoc-font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.4;
  color: var(--ltoc-ink);
  opacity: 0.75;
  text-decoration: none;
}

.ltoc-nav__item.is-level-2 .ltoc-nav__link {
  font-weight: 700 !important;
  opacity: 0.95;
}

/* Muc co nut mo rong/thu gon o dau hang (ben trai header cha): khong can
   thu thuat margin am nua vi khoang cach da duoc icon/spacer dam nhiem. */
.ltoc-nav__row .ltoc-nav__link {
  margin-left: 0;
  padding-left: 8px;
}

/* Header con (H3) thut vao them de phan biet ro voi header cha (H2).
   Tang khoang cach ro ret hon (thay vi chi hon vai px) de nhin thay
   ngay su phan cap giua H2 va H3 khi luot nhanh muc luc. */
.ltoc-nav__item.is-level-3 .ltoc-nav__link {
  font-weight: 400 !important;
  opacity: 0.8;
  padding-left: 46px;
  margin-left: 0;
}

.ltoc-nav__link:hover {
  color: var(--ltoc-accent);
  opacity: 1;
}

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

/* Nut mo rong / thu nho cho muc co header con: dat o dau hang (ben trai
   header cha). Icon don gian la dau ">" (thu gon), xoay xuong khi mo rong,
   tuong tu thanh muc luc cua atlassian.com/agile. */
.ltoc-nav__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: var(--ltoc-radius-sm);
  color: var(--ltoc-accent) !important;
  cursor: pointer;
  line-height: 1;
  font-size: inherit;
  transition: background-color 0.2s ease;
}

.ltoc-nav__expand:hover {
  background: var(--ltoc-support) !important;
}

.ltoc-nav__expand:focus,
.ltoc-nav__expand:focus-visible {
  outline: none;
  box-shadow: none !important;
}

/* Spacer vo hinh cho muc khong co header con, de giu thang hang phan chu
   voi cac muc co nut mo rong ben canh. */
.ltoc-nav__expand-spacer {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.ltoc-nav__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. */
.ltoc-nav__item.is-collapsed .ltoc-nav__expand-icon {
  transform: rotate(0deg);
}

.ltoc-nav__sublist {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
}

.ltoc-nav__item.is-collapsed .ltoc-nav__sublist {
  display: none;
}

/* ---------- Article content ---------- */

.ltoc-content {
  background: transparent;
  max-width: 720px;
}

.ltoc-content :where(h2) {
  font-size: 26px;
  margin: 48px 0 var(--ltoc-space-md);
  scroll-margin-top: 100px;
}

.ltoc-content :where(h2):first-child {
  margin-top: 0;
}

.ltoc-content :where(h3) {
  font-size: 20px;
  margin: 28px 0 var(--ltoc-space-sm);
  scroll-margin-top: 100px;
}

.ltoc-content :where(p, ul, ol) {
  font-size: 16px;
  line-height: 1.75;
  margin: 0 0 var(--ltoc-space-md);
}

.ltoc-content :where(ul, ol) {
  padding-left: 22px;
}

.ltoc-content :where(img) {
  max-width: 100%;
  height: auto;
  border-radius: var(--ltoc-radius-md);
}

.ltoc-content :where(strong) {
  color: var(--ltoc-ink);
}

.ltoc-content :where(blockquote) {
  margin: var(--ltoc-space-md) 0;
  padding: var(--ltoc-space-md) var(--ltoc-space-lg);
  background: var(--ltoc-support);
  border-left: 3px solid var(--ltoc-accent);
  border-radius: var(--ltoc-radius-sm);
  font-style: normal;
}

/* ---------- Khoi mo bai: anh minh hoa + doan gioi thieu, dua len dau phan noi dung ---------- */

.ltoc-intro {
  margin: 0 0 48px;
}

.ltoc-intro__media {
  border-radius: var(--ltoc-radius-lg);
  overflow: hidden;
  margin-bottom: var(--ltoc-space-lg);
  box-shadow: 0 16px 32px -20px rgba(19, 23, 57, 0.28);
}

.ltoc-intro__media img {
  display: block;
  width: 100%;
  height: auto;
}

.ltoc-intro__text :where(p) {
  font-size: 18px;
  line-height: 1.75;
  color: var(--ltoc-ink);
  opacity: 0.85;
  margin: 0;
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .ltoc-wrap {
    grid-template-columns: 1fr;
    gap: var(--ltoc-space-lg);
  }

  .ltoc-content {
    max-width: none;
  }

  /* Muc luc thu gon thanh 1 o vuong bo goc nho, co dinh o goc tren-phai
     bat ke dang o vi tri nao cua bai viet, mo rong thanh bang khi bam vao */
  .ltoc-sidebar {
    position: fixed;
    top: 16px;
    right: 16px;
    left: auto;
    z-index: 200;
    width: 44px;
    height: 44px;
    max-height: 44px;
    padding: 0;
    overflow: hidden;
    border-radius: var(--ltoc-radius-md);
    transition: width 0.18s ease, height 0.18s ease, border-radius 0.18s ease;
  }

  /* Dung id (#ltoc-sidebar #ltoc-fab) de thang duoc quy tac mau nut chung cua
     theme, ma khong can !important (giu duoc trang thai is-open ben duoi). */
  #ltoc-sidebar #ltoc-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: var(--ltoc-radius-md);
    background-color: var(--ltoc-accent);
    color: #FFFFFF;
    box-shadow: 0 6px 16px -6px rgba(19, 23, 57, 0.45);
    cursor: pointer;
  }

  /* Dam bao icon luon hien ro, khong bi CSS nen ghi de mau trung mau nen */
  .ltoc-fab__icon {
    display: block;
    flex-shrink: 0;
  }

  #ltoc-sidebar #ltoc-fab .ltoc-fab__icon path {
    stroke: #FFFFFF;
  }

  .ltoc-fab__icon-close {
    display: none;
  }

  .ltoc-panel {
    display: none;
  }

  .ltoc-sidebar.is-open {
    width: min(320px, calc(100vw - 32px));
    height: auto;
    max-height: calc(100vh - 96px);
    border-radius: var(--ltoc-radius-lg);
    overflow-y: auto;
    padding: var(--ltoc-space-md);
  }

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

  #ltoc-sidebar.is-open #ltoc-fab .ltoc-fab__icon path {
    stroke: currentColor;
  }

  .ltoc-sidebar.is-open .ltoc-fab__icon-open {
    display: none;
  }

  .ltoc-sidebar.is-open .ltoc-fab__icon-close {
    display: block;
  }

  .ltoc-sidebar.is-open .ltoc-panel {
    display: block;
  }
}

@media (min-width: 961px) {
  .ltoc-fab {
    display: none;
  }

  /* Mui ten to hon mot chut tren desktop, chieu cao can bang chieu cao
     chu hoa dau tien cua dong chu ben canh (font 14px -> cap-height ~10-11px). */
  .ltoc-nav__expand {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    max-width: 20px;
  }

  .ltoc-nav__expand-icon {
    font-size: 17px;
  }
}

@media (max-width: 600px) {
  .ltoc-hero {
    padding: 40px 16px 32px;
  }
}