.elementor-7469 .elementor-element.elementor-element-1cb2093{--display:flex;}.elementor-7469 .elementor-element.elementor-element-51436e7{width:100%;max-width:100%;}.elementor-7469 .elementor-element.elementor-element-51436e7 > .elementor-widget-container{background-color:#FFFFD5;transition:background 0s;border-style:none;}/* Start custom CSS for html, class: .elementor-element-51436e7 *//* =========================================================
   HCMUTE – BCH App UI (final clean)
   - Font + layout chung
   - Banner / Group / Member card / Modal
   - Timeline: alternate, date-chip trong card, equal spacing
   ========================================================= */

/* Font (Google) */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;600;700&display=swap');

#bch-app {
  font-family: "Be Vietnam Pro", Arial, sans-serif;
  background-color: #ffffdf;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------------- Banner khẩu hiệu ---------------- */
#bch-app .slogan-banner {
  background: linear-gradient(90deg, #dc2626, #b91c1c);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  padding: 20px;
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
#bch-app .slogan-text {
  color: #ffeba8;
  font-size: 1rem;
  font-weight: 700;
  text-shadow: 1px 1px 3px rgba(0,0,0,.3);
  font-style: italic;
}
#bch-app .slogan-banner::before {
  content: '';
  position: absolute; top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.4) 50%, rgba(255,255,255,.2) 100%);
  animation: bch-shine 4s infinite;
}
@keyframes bch-shine { 0%{left:-75%;} 100%{left:125%;} }

/* ---------------- Nhóm + thẻ thành viên ---------------- */
#bch-app .group { margin-bottom: 16px; }
#bch-app .members-group { margin-bottom: 6px; }
#bch-app .group-title { margin-top: 0; margin-bottom: 10px; }

#bch-app .group-row{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;
  gap:30px; margin-bottom:16px;
}
#bch-app .group--compact{ margin-bottom:0; max-width:520px; }
#bch-app .group--compact .group-title{ margin-bottom:8px; }
#bch-app .group--compact .members-group{ margin-top:8px; margin-bottom:0; }

@media (max-width:700px){
  #bch-app .group-row{ gap:16px; margin-bottom:14px; }
  #bch-app .group--compact{ max-width:100%; }
  #bch-app .group-row .group:nth-child(2){ margin-top:0 !important; }
}
#bch-app .group-row .group:nth-child(2){ margin-top:25px; }

#bch-app .group-title{
  font-size:20px; font-weight:700; color:#b00000; text-align:center; position:relative;
}
#bch-app .group-title::after{
  content:""; display:block; width:60px; height:3px; background:#b00000; margin:10px auto 0;
}

#bch-app .members-group{
  display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin-top:20px;
}
#bch-app .member-card{
  background:#fff; width:300px; padding:20px 15px; border-radius:16px;
  box-shadow:0 4px 12px rgba(0,0,0,.08); display:flex; flex-direction:column; align-items:center;
  text-align:center; transition:transform .3s ease; cursor:pointer;
}
#bch-app .member-card:hover{ transform:translateY(-5px); }
#bch-app .member-card img{
  width:140px; height:140px; border-radius:50%; margin-bottom:12px; box-shadow:0 0 5px rgba(0,0,0,.1);
}
#bch-app .member-info h3{
  margin:0; color:#c40000; text-transform:uppercase; font-size:1rem; font-weight:700;
}
#bch-app .member-info p{
  margin:4px 0 0; font-size:13px; color:#014EC4;
}

/* ---------------- Modal ---------------- */
#bch-app #member-modal{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:999;
}
#bch-app .modal-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.4); }
#bch-app .modal-content{
  position:relative; background:#fff; padding:30px 25px; border-radius:16px; z-index:1000;
  width:90%; max-width:860px; text-align:center; box-shadow:0 15px 25px rgba(0,0,0,.25);
  max-height:88vh; display:flex; flex-direction:column;
}
#bch-app .modal-content img{
  width:110px; height:110px; border-radius:50%; object-fit:cover; display:block; margin:0 auto 15px; box-shadow:0 0 5px rgba(0,0,0,.1);
}
#bch-app .modal-content h2{ margin:12px 0 5px; color:#b00000; font-size:20px; font-weight:700; }
#bch-app .modal-content p{ margin:6px 0; color:#014EC4; font-size:14px; }

/* Timeline area scroll riêng */
#bch-app .modal-content .timeline{
  flex:1; min-height:0; overflow:auto; padding-right:8px; scroll-behavior:smooth; overscroll-behavior:contain;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
}

#bch-app .close-btn{ position:absolute; top:10px; right:15px; font-size:24px; cursor:pointer; color:#aaa; }
html.bch-no-scroll, body.bch-no-scroll{ overflow:hidden; }

/* Nút điều hướng modal */
#bch-app #member-modal{ --modal-w:460px; --gap:320px; }
#bch-app #member-modal .modal-prev,
#bch-app #member-modal .modal-next{
  position:fixed; top:50%; transform:translateY(-50%); z-index:1001;
  width:42px; height:42px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(229,57,53,.95); color:#fff; font-size:22px; font-weight:700;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px rgba(229,57,53,.25);
}
#bch-app #member-modal .modal-prev{ left:calc(50% - (var(--modal-w)/2) - var(--gap)); }
#bch-app #member-modal .modal-next{ right:calc(50% - (var(--modal-w)/2) - var(--gap)); }
#bch-app #member-modal .modal-prev:hover,
#bch-app #member-modal .modal-next:hover{ filter:brightness(1.05); }
@media (max-width:520px){
  #bch-app #member-modal{ --modal-w:92vw; --gap:8px; }
  #bch-app #member-modal .modal-prev{ left:8px; }
  #bch-app #member-modal .modal-next{ right:8px; }
}

/* =========================================================
   TIMELINE (clean style – date-chip trong card, spacing đều)
   ========================================================= */

/* ===== Timeline (Ant alternate, trunk full height) ===== */
/* ===== Timeline (Ant alternate, trunk always full) ===== */
#bch-app .timeline{
  --trunk-w: 2px;
  --trunk-h: 100%;          /* JS sẽ cập nhật theo scrollHeight */
  --gap-to-trunk: 34px;
  --dot-size: 10px;
  --dot-border: 3px;
  --chip-bg: #fff5f5;
  --chip-bd: #fecaca;

  position: relative;       /* để vẽ trục giữa */
  height: 100%;             /* chiếm full chiều cao box chứa (modal) */
  overflow: visible;        /* đừng cắt trục */
}

/* Trục giữa – nằm ở KHUNG NGOÀI nên không bị mask/overflow cắt */
#bch-app .timeline::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--trunk-w);
  height: var(--trunk-h);         /* << chiều cao trục lấy từ JS */
  transform: translateX(-50%);
  background: linear-gradient(#ffe5e7, #e53935);
  opacity: .95;
  pointer-events: none;
}

/* VÙNG CUỘN – chỉ chứa item + mask mờ đầu/cuối */
#bch-app .timeline-scroll{
  position: relative;
  height: 100%;
  overflow: auto;
  padding-right: 8px;

  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-top: 6px;
  padding-bottom: 6px;

  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}

/* ===== Items (alternate bằng nth-child) ===== */
#bch-app .timeline-scroll .timeline-item{
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: 56px;
}

#bch-app .timeline-scroll .timeline-item .timeline-tail{
  position:absolute; top:0; bottom:0; left:50%;
  width: var(--trunk-w);
  transform: translateX(-50%);
}

#bch-app .timeline-scroll .timeline-item .timeline-content{
  position: relative;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 6px 14px rgba(229,57,53,.08);
  padding: 16px 20px;
  width: calc(50% - var(--gap-to-trunk));
  text-align: left;
}

/* DOT + connector (cùng hàng với date-chip) */
#bch-app .timeline-scroll .timeline-item .timeline-content::before{
  content:"";
  position:absolute; top: 30px;
  width: var(--dot-size); height: var(--dot-size);
  background:#fff; border: var(--dot-border) solid #e53935;
  border-radius:50%; box-shadow:0 0 0 3px #fff;
}
#bch-app .timeline-scroll .timeline-item .timeline-content::after{
  content:"";
  position:absolute; top: calc(30px + var(--dot-size)/2 - 1px);
  height:2px; background:#e53935;
  width: calc(var(--gap-to-trunk) - 12px);
}

/* Trái (odd) */
#bch-app .timeline-scroll .timeline-item:nth-child(odd){ justify-content:flex-start; }
#bch-app .timeline-scroll .timeline-item:nth-child(odd) .timeline-content{
  margin-right: calc(var(--gap-to-trunk) + var(--trunk-w)/2);
}
#bch-app .timeline-scroll .timeline-item:nth-child(odd) .timeline-content::before{
  right: calc(-1 * (var(--gap-to-trunk) - 12px));
}
#bch-app .timeline-scroll .timeline-item:nth-child(odd) .timeline-content::after{
  right: calc(-1 * var(--gap-to-trunk));
}

/* Phải (even) */
#bch-app .timeline-scroll .timeline-item:nth-child(even){ justify-content:flex-end; }
#bch-app .timeline-scroll .timeline-item:nth-child(even) .timeline-content{
  margin-left: calc(var(--gap-to-trunk) + var(--trunk-w)/2);
}
#bch-app .timeline-scroll .timeline-item:nth-child(even) .timeline-content::before{
  left: calc(-1 * (var(--gap-to-trunk) - 12px));
}
#bch-app .timeline-scroll .timeline-item:nth-child(even) .timeline-content::after{
  left: calc(-1 * var(--gap-to-trunk));
}

/* date-chip + text */
#bch-app .timeline-content .date-chip{
  display:inline-block;
  font-weight:800; font-size:13.5px; color:#b91c1c;
  background: var(--chip-bg);
  border:1px solid var(--chip-bd);
  border-left:4px solid #e53935;
  padding:6px 10px; border-radius:12px;
  margin:0 0 8px 0;
}
#bch-app .timeline-content h4{
  margin:0 0 6px 0; font-size:18px; font-weight:700; color:#c62828; line-height:1.35;
}
#bch-app .timeline-content p{ margin:0; font-size:15px; color:#374151; line-height:1.6; }

/* Xem thêm / Thu gọn */
#bch-app .timeline-scroll .timeline-more.is-collapsed{ display:none; }
#bch-app .timeline-scroll .timeline-toggle{
  align-self:center;
  margin-top: 4px;
  padding:8px 14px; font-weight:700; border-radius:10px;
  background:#fff; border:1px solid #fecaca; color:#b91c1c;
  box-shadow:0 2px 8px rgba(229,57,53,.08);
}

/* ===== Mobile: 1 cột ===== */
/* ===== Mobile 1 cột: card full width, khoảng cách đều ===== */
@media (max-width: 600px){
  /* Trục giữa dịch sang trái và giữ đủ chiều cao như desktop */
  #bch-app .timeline::before{
    left: 20px;                     /* vị trí trục */
    height: var(--trunk-h);         /* vẫn dùng biến JS set */
  }

  /* Vùng cuộn + khoảng cách */
  #bch-app .timeline-scroll{
    gap: 16px;
    padding-right: 6px;
    padding-top: 8px;
    padding-bottom: 12px;
  }

  /* Item: chừa chỗ cho trục + dot bên trái */
  #bch-app .timeline-scroll .timeline-item{
    padding-left: 44px;             /* 20 (trục) + 24 (khoảng) */
    align-items: stretch;
  }

  /* Card: phủ full chiều rộng (ghi đè rule 50%) */
  #bch-app .timeline-scroll .timeline-item .timeline-content{
    width: 100% !important;         /* << quan trọng */
    margin: 0 !important;           /* bỏ margin trái/phải theo alternate */
    padding: 14px 16px;
    border-radius: 12px;
    border-left: 5px solid #e53935; /* nhấn cạnh trái */
    border-right: 1px solid #e5e7eb;
    box-shadow: 0 6px 12px rgba(229,57,53,.08);
  }

  /* Dot: đặt cạnh trái card, ẩn connector ngang */
  #bch-app .timeline-scroll .timeline-item .timeline-content::before{
    left: -26px;                    /* lệch ra trục */
    right: auto;
    top: 18px;
    width: 10px; height: 10px; 
    border-width: 3px;
  }
  #bch-app .timeline-scroll .timeline-item .timeline-content::after{
    display: none;
  }

  /* Chip ngày + typo gọn hơn chút */
  #bch-app .timeline-content .date-chip{
    font-size: 13px;
    margin-bottom: 6px;
  }
  #bch-app .timeline-content h4{
    font-size: 16.5px;
    line-height: 1.35;
    margin-bottom: 6px;
  }
  #bch-app .timeline-content p{
    font-size: 14px;
    line-height: 1.55;
  }

  /* Nút xem thêm ở giữa, thở đều */
  #bch-app .timeline-scroll .timeline-toggle{
    margin-top: 4px;
  }
}



/* Khoảng cách giữa các mục trong phần "Xem thêm" */
#bch-app .timeline .timeline-more{
  display: flex;                 /* xếp theo cột */
  flex-direction: column;
  gap: 22px;                     /* khoảng cách giữa các item */
  margin-top: 16px;              /* tách với item cuối của phần visible */
}

/* Mobile: gap nhỏ hơn một chút cho gọn */
@media (max-width:600px){
  #bch-app .timeline .timeline-more{
    gap: 14px;
    margin-top: 12px;
  }
}

#bch-app .modal-section-title{
  margin: 6px 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: #014EC4;
  text-align: left;
  letter-spacing: .2px;
}







/* ---------------- Footer nhỏ ---------------- */
#bch-app footer .credit{ font-size:1rem; color:#014ec5; }
#bch-app footer .credit a{ color:#ff0000; text-decoration:none; font-weight:700; }
#bch-app footer .sub{ font-size:.9rem; color:#666; }/* End custom CSS */