/* ==========================================================================
   layout.css - Khung trang: container, luoi 3 cot / 2 cot / 1 cot, dai ngang
   Responsive theo SPEC muc 6:
     >= 1024px : 3 cot 22% / 56% / 22%
     768-1023  : 2 cot (cot phai tut xuong duoi)
     < 768px   : 1 cot
   ========================================================================== */

/* ---------- Container ---------- */
.ec-container {
  width: 100%;
  max-width: var(--ec-container);
  margin-inline: auto;
  padding-inline: var(--ec-gutter);
}

.ec-container--narrow {
  max-width: var(--ec-container-narrow);
}

/* Container tran vien (dung cho dai mau full-width) */
.ec-band-full {
  width: 100%;
}

/* ---------- Bo cuc site ---------- */
.ec-site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.ec-main {
  flex: 1 0 auto;
  padding-block: var(--ec-space-6);
}

/* ---------- Luoi 3 cot (landing + archive) ---------- */
.ec-grid-3 {
  display: grid;
  gap: var(--ec-col-gap);
  grid-template-columns: var(--ec-col-left) minmax(0, var(--ec-col-main)) var(--ec-col-right);
  align-items: start;
}

/* ---------- Luoi 2 cot (single post: noi dung 75% / sidebar 25%) ---------- */
.ec-grid-2 {
  display: grid;
  gap: var(--ec-col-gap);
  grid-template-columns: minmax(0, 75fr) minmax(0, 25fr);
  align-items: start;
}

/* ---------- 1 cot ---------- */
.ec-grid-1 {
  display: block;
}

/* ---------- Cac vung cot ---------- */
.ec-col-left,
.ec-col-main,
.ec-col-right {
  min-width: 0;
}

/* ---------- Dai ngang trang landing ----------
   Cac dai cach nhau 2.5rem va phan cach bang 1px solid var(--ec-rule-line) xam (F7) */
.ec-bands > .ec-band + .ec-band {
  margin-top: var(--ec-band-gap);
  padding-top: var(--ec-band-gap);
  border-top: var(--ec-rule-width) solid var(--ec-rule-line);
}

.ec-band {
  margin-top: var(--ec-band-gap);
  padding-top: var(--ec-band-gap);
  border-top: var(--ec-rule-width) solid var(--ec-rule-line);
}

/* Dai dau tien trong .ec-bands khong can ke tren nua neu da co ke */
.ec-bands > .ec-band:first-child {
  margin-top: var(--ec-band-gap);
}

/* Luoi trong 1 dai ngang: 3 vung ngang hang */
.ec-band__grid {
  display: grid;
  gap: var(--ec-col-gap);
  grid-template-columns: var(--ec-col-left) minmax(0, var(--ec-col-main)) var(--ec-col-right);
  align-items: start;
}

/* ---------- 3 card cot giua cua dai ngang: 3 cot x 1 hang ----------
   PDF trang 1-2: cot giua xep 3 bai NGANG hang, khong xep doc */
.ec-band__cards {
  display: grid;
  gap: var(--ec-col-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

/* ---------- Luoi card cho trang category: 3 x 2 ---------- */
.ec-cardgrid {
  display: grid;
  gap: var(--ec-space-6) var(--ec-col-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---------- Tien ich khoang cach ---------- */
.ec-stack > * + * {
  margin-top: var(--ec-space-4);
}

.ec-mt-0 { margin-top: 0; }
.ec-mb-0 { margin-bottom: 0; }

/* ==========================================================================
   Tablet: 768px - 1023px -> 2 cot, cot phai tut xuong duoi chiem het chieu ngang
   ========================================================================== */
@media (max-width: 1023px) {
  /*
   * Cot trai chi chua LATEST (thumbnail 96px + tieu de ngan) nen 30% qua rong,
   * lam cot giua bi bop. Ha ve 26% de noi dung chinh co cho.
   */
  .ec-grid-3 {
    grid-template-columns: 26% minmax(0, 1fr);
  }

  .ec-grid-3 > .ec-col-right {
    grid-column: 1 / -1;
  }

  /*
   * Trong dai ngang, cot giua (cell 2) moi la noi dung chinh voi 3 card.
   * Cho no chiem het chieu ngang, con 2 cot bien 1 card dung chung 1 hang ben duoi.
   * Truoc day cell 3 bi keo full-width con cell 2 bi bop mot nua - nguoc voi thiet ke.
   */
  .ec-band__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ec-band__grid > *:nth-child(2) {
    grid-column: 1 / -1;
    order: -1;
  }

  .ec-cardgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /*
   * Cot giua da chiem full-width o tablet nen giu nguyen 3 card ngang hang -
   * co du cho. Chi ha xuong 1 cot o mobile.
   */
  .ec-grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Mobile: < 768px -> tat ca ve 1 cot
   ========================================================================== */
@media (max-width: 767px) {
  .ec-grid-3,
  .ec-grid-2,
  .ec-band__grid,
  .ec-band__cards,
  .ec-cardgrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ec-grid-3 > .ec-col-right {
    grid-column: auto;
  }

  /*
   * Ve 1 cot thi giu dung thu tu tai lieu (bien - giua - bien) nhu PDF doc doc.
   * Phai reset ca grid-column VA order cua breakpoint tablet trong cung mot rule,
   * neu tach hai rule cung specificity thi rule dung sau se thang.
   */
  .ec-band__grid > *:nth-child(2) {
    grid-column: auto;
    order: 0;
  }

  .ec-band,
  .ec-bands > .ec-band + .ec-band {
    margin-top: var(--ec-space-8);
    padding-top: var(--ec-space-8);
  }

  .ec-container {
    padding-inline: var(--ec-space-4);
  }
}

/* ==========================================================================
   Man rat hep: < 380px (iPhone SE, may cu)
   ========================================================================== */
@media (max-width: 379px) {
  .ec-container {
    padding-inline: var(--ec-space-3);
  }

  /* Card ngang (guest post) xuong dang doc de thumbnail khong bop chu */
  .ec-card--horizontal {
    display: block;
  }

  .ec-card--horizontal .ec-card__thumb {
    margin-bottom: var(--ec-space-3);
  }
}