/**
 * Organizational chart – BGBAS
 *
 * Expected HTML structure (repeatable blocks marked with <!-- repeat -->):
 *
 * <div class="org-chart">
 *   <div class="org-chart__top">
 *     <div class="org-chart__node org-chart__node--red">BAN CHẤP HÀNH</div>
 *     <div class="org-chart__vline org-chart__vline--double" aria-hidden="true"></div>
 *     <div class="org-chart__node org-chart__node--orange">BAN ĐIỀU HÀNH</div>
 *     <div class="org-chart__vline org-chart__vline--double" aria-hidden="true"></div>
 *     <div class="org-chart__hub">
 *       <div class="org-chart__hub-main">
 *         <div class="org-chart__node org-chart__node--gold">TRUNG TÂM LOGISTICS CỘNG SINH</div>
 *       </div>
 *       <div class="org-chart__hub-side">
 *         <div class="org-chart__side-rail" aria-hidden="true"></div>
 *         <div class="org-chart__side-list">
 *           <div class="org-chart__node org-chart__node--blue org-chart__node--sm">XD - CÔNG NGHIỆP</div>
 *           <!-- repeat: more .org-chart__node--blue.org-chart__node--sm -->
 *         </div>
 *       </div>
 *     </div>
 *   </div>
 *   <div class="org-chart__bottom">
 *     <div class="org-chart__bottom-rail" aria-hidden="true"></div>
 *     <div class="org-chart__columns">
 *       <div class="org-chart__column"><!-- repeat -->
 *         <div class="org-chart__column-stem" aria-hidden="true"></div>
 *         <div class="org-chart__node org-chart__node--blue org-chart__node--header">TRUNG TÂM KẾT NỐI 1</div>
 *         <div class="org-chart__vline org-chart__vline--double" aria-hidden="true"></div>
 *         <div class="org-chart__content">
 *           <ul class="org-chart__list">
 *             <li>Item</li><!-- repeat -->
 *           </ul>
 *         </div>
 *       </div>
 *     </div>
 *   </div>
 * </div>
 */

/* ------------------------------------------------------------------ */
/* Variables                                                          */
/* ------------------------------------------------------------------ */
.org-chart {
  --org-red: #ed1c24;
  --org-orange: #f7941d;
  --org-gold: #c49a3d;
  --org-blue: #1b3688;
  --org-green: #2e9146;
  --org-line: #222;
  --org-text: #fff;
  --org-radius: 999px;
  --org-radius-content: 4px;
  --org-gap: 0.75rem;
  --org-column-min: 10rem;
  --org-columns-per-row: 4;
  --org-font: inherit;
  --org-frame-bg: #fdfcfa;
  --org-frame-border: var(--org-gold);
  --org-frame-accent: var(--org-blue);
}

/* ------------------------------------------------------------------ */
/* Section wrapper                                                    */
/* ------------------------------------------------------------------ */
.org-chart-section {
  padding: 3rem 0;
  background: linear-gradient(
    180deg,
    #f3f1ec 0%,
    #faf9f7 40%,
    #faf9f7 60%,
    #f3f1ec 100%
  );
}

.org-chart-section__title {
  position: relative;
  margin: 0 auto 2rem;
  padding-bottom: 1.25rem;
  max-width: 36rem;
  text-align: center;
  font-size: clamp(1.15rem, 2.5vw, 1.65rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--org-frame-accent);
}

.org-chart-section__title::before,
.org-chart-section__title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 2px;
}

.org-chart-section__title::before {
  width: min(10rem, 55%);
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--org-gold), transparent);
}

.org-chart-section__title::after {
  bottom: -6px;
  width: min(5rem, 30%);
  height: 1px;
  background: rgba(27, 54, 136, 0.35);
}

/* ------------------------------------------------------------------ */
/* Root – framed block                                                */
/* ------------------------------------------------------------------ */
.org-chart {
  position: relative;
  font-family: var(--org-font);
  color: var(--org-text);
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 2.75rem 1.75rem 2.25rem;
  box-sizing: border-box;
  background: var(--org-frame-bg);
  border: 3px solid var(--org-frame-border);
  border-radius: 6px;
  box-shadow:
    0 8px 32px rgba(27, 54, 136, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.05);
}

.org-chart::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(27, 54, 136, 0.22);
  border-radius: 3px;
  pointer-events: none;
}

.org-chart::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(12rem, 40%);
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--org-gold), transparent);
  transform: translate(-50%, -2px);
  pointer-events: none;
}

.org-chart *,
.org-chart *::before,
.org-chart *::after {
  box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* Nodes (reusable box)                                               */
/* ------------------------------------------------------------------ */
.org-chart__node {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  font-size: clamp(0.7rem, 1.4vw, 0.95rem);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--org-text);
  border-radius: var(--org-radius);
  padding: 0.65rem 1.25rem;
  min-height: 2.75rem;
  width: 100%;
}

.org-chart__node--red {
  background: var(--org-red);
  max-width: 22rem;
  margin: 0 auto;
  font-size: clamp(0.85rem, 1.8vw, 1.15rem);
  min-height: 3.25rem;
}

.org-chart__node--orange {
  background: var(--org-orange);
  max-width: 20rem;
  margin: 0 auto;
}

.org-chart__node--gold {
  background: var(--org-gold);
  max-width: 26rem;
  margin: 0 auto;
  font-size: clamp(0.75rem, 1.6vw, 1rem);
}

.org-chart__node--blue {
  background: var(--org-blue);
}

.org-chart__node--sm {
  font-size: clamp(0.6rem, 1.1vw, 0.78rem);
  padding: 0.5rem 0.85rem;
  min-height: 2.25rem;
}

.org-chart__node--header {
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  font-size: clamp(0.62rem, 1.1vw, 0.8rem);
  padding: 0.55rem 0.65rem 0.6rem;
  min-height: 2.5rem;
}

.org-chart__node-title {
  display: block;
  line-height: 1.25;
}

.org-chart__contact {
  width: 80%;
  margin-top: 0.1rem;
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.14);
  font-size: clamp(0.55rem, 0.95vw, 0.68rem);
  font-weight: 500;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.org-chart__contact-item {
  margin: 0;
}

.org-chart__contact-item + .org-chart__contact-item {
  margin-top: 0.15rem;
}

/* ------------------------------------------------------------------ */
/* Vertical connectors (double arrow)                                 */
/* ------------------------------------------------------------------ */
.org-chart__vline {
  position: relative;
  width: 2px;
  height: 2rem;
  background: var(--org-line);
  margin: 0 auto;
  flex-shrink: 0;
}

.org-chart__vline--double::before,
.org-chart__vline--double::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

.org-chart__vline--double::before {
  top: -1px;
  border-bottom: 7px solid var(--org-line);
}

.org-chart__vline--double::after {
  bottom: -1px;
  border-top: 7px solid var(--org-line);
}

/* ------------------------------------------------------------------ */
/* Top hierarchy                                                      */
/* ------------------------------------------------------------------ */
.org-chart__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.org-chart__hub {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: 52rem;
  margin: 0 auto;
}

.org-chart__hub-main {
  flex: 0 1 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.org-chart__hub-side {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex: 0 0 auto;
  margin-left: 0.5rem;
}

.org-chart__side-rail {
  position: relative;
  width: 2.5rem;
  flex-shrink: 0;
}

.org-chart__side-rail::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--org-line);
  transform: translateY(-50%);
}

.org-chart__side-rail::after {
  content: "";
  position: absolute;
  top: 12%;
  bottom: 12%;
  right: 0;
  width: 2px;
  background: var(--org-line);
}

.org-chart__side-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.25rem 0;
  min-width: 9.5rem;
  max-width: 12rem;
}

.org-chart__side-list .org-chart__node {
  position: relative;
}

.org-chart__side-list .org-chart__node::before {
  content: "";
  position: absolute;
  left: -0.65rem;
  top: 50%;
  width: 0.65rem;
  height: 2px;
  background: var(--org-line);
  transform: translateY(-50%);
}

/* ------------------------------------------------------------------ */
/* Bottom section – horizontal rail + columns                         */
/* ------------------------------------------------------------------ */
.org-chart__bottom {
  position: relative;
  margin-top: 0.5rem;
  padding-top: 2rem;
}

.org-chart__bottom-rail {
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 2px;
  background: var(--org-line);
}

.org-chart__bottom-rail::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 2rem;
  background: var(--org-line);
  transform: translateX(-50%);
}

.org-chart__columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--org-gap);
  row-gap: 1.25rem;
  align-items: stretch;
}

.org-chart__column {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 0 0
    calc(
      (100% - (var(--org-columns-per-row) - 1) * var(--org-gap)) /
        var(--org-columns-per-row)
    );
  max-width: calc(
    (100% - (var(--org-columns-per-row) - 1) * var(--org-gap)) /
      var(--org-columns-per-row)
  );
  min-width: min(100%, var(--org-column-min));
  position: relative;
}

/* Ẩn đường nối khi có hơn 4 cột (xuống hàng) */
.org-chart__bottom:has(.org-chart__column:nth-child(5)) .org-chart__bottom-rail,
.org-chart__bottom:has(.org-chart__column:nth-child(5))
  .org-chart__column-stem {
  display: none;
}

.org-chart__bottom:has(.org-chart__column:nth-child(5)) {
  padding-top: 1rem;
}

.org-chart__column-stem {
  position: absolute;
  top: -2rem;
  left: 50%;
  width: 2px;
  height: 2rem;
  background: var(--org-line);
  transform: translateX(-50%);
}

/* ------------------------------------------------------------------ */
/* Green content box (repeatable list)                                */
/* ------------------------------------------------------------------ */
.org-chart__content {
  flex: 0 0 250px;
  height: 250px;
  background: var(--org-green);
  border-radius: var(--org-radius-content);
  padding: 0.75rem 0.65rem;
  overflow-x: hidden;
  overflow-y: auto;
  border: 3px double #ddd;
}

.org-chart__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: clamp(0.62rem, 1vw, 0.78rem);
  font-weight: 400;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
}

.org-chart__list li {
  position: relative;
  padding-left: 0.85rem;
  margin-bottom: 0.2rem;
}

.org-chart__list li::before {
  content: "-";
  position: absolute;
  left: 0;
}

.org-chart__list li:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Tablet                                                             */
/* ------------------------------------------------------------------ */
@media (max-width: 1199px) {
  .org-chart {
    --org-columns-per-row: 2;
  }

  .org-chart__bottom-rail,
  .org-chart__column-stem {
    display: none;
  }

  .org-chart__bottom {
    padding-top: 1rem;
  }
}

@media (max-width: 991px) {
  .org-chart__hub {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .org-chart__hub-side {
    margin-left: 0;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 18rem;
  }

  .org-chart__side-rail {
    width: 2px;
    height: 1.5rem;
  }

  .org-chart__side-rail::before {
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    transform: translateX(-50%);
  }

  .org-chart__side-rail::after {
    display: none;
  }

  .org-chart__side-list {
    width: 100%;
    max-width: 18rem;
    gap: 0.5rem;
  }

  .org-chart__side-list .org-chart__node::before {
    display: none;
  }
}

/* ------------------------------------------------------------------ */
/* Mobile                                                             */
/* ------------------------------------------------------------------ */
@media (max-width: 575px) {
  .org-chart-section {
    padding: 2rem 0;
  }

  .org-chart-section__title {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    letter-spacing: 0.04em;
  }

  .org-chart {
    padding: 2rem 1rem 1.75rem;
    border-width: 2px;
  }

  .org-chart::before {
    inset: 6px;
  }

  .org-chart__node--red,
  .org-chart__node--orange,
  .org-chart__node--gold {
    max-width: 100%;
  }

  .org-chart {
    --org-columns-per-row: 1;
  }

  .org-chart__vline {
    height: 1.5rem;
  }
}