/* ===== TCP Member Modal (thuần) — khớp style Elementor off-canvas ===== */
.tcpm{position:fixed;inset:0;display:none;z-index:9999}
.tcpm.is-open{display:block}
.tcpm__overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);pointer-events:auto}

/* Khung modal */
.tcpm__dialog{
  position:relative;
  margin:5vh auto;
  background:#fff;
  border-radius:24px;
  box-shadow:2px 8px 23px 3px rgba(0,0,0,.2);
  max-width:1000px;
  width:min(96vw,1000px);
  max-height:90vh;            /* khống chế theo viewport */
  overflow:hidden;            /* chỉ phần nội dung cuộn */
  display:flex;               /* giữ header cố định, nội dung cuộn */
  flex-direction:column;
}

/* Nút đóng */
.tcpm__close{
  position:absolute;top:12px;right:16px;
  border:0;background:transparent;color:#0c0c0c;
  font-size:28px;line-height:1;cursor:pointer
}

/* Layout 2 cột */
.tcpm__body{
  display:flex;
  gap:0;
  align-items:stretch;
  max-height:90vh;
  overflow:hidden;            /* body không cuộn, giao vùng cuộn cho cột phải */
}

/* Trái: 40% như Elementor */
.tcpm__left{
  flex-basis:40%;
  background:#fff;
  display:flex;
  justify-content:flex-end;
  align-items:flex-end;       /* ảnh luôn chạm mép dưới */
  padding:0;
  max-height:90vh;
  overflow:hidden;
}

/* Ảnh đại diện */
.tcpm__img{
  width:100%;
  height:auto;
  max-width:100%;
  max-height:90vh;
  object-fit:contain;
  display:block;
  margin:0;
}

/* Phải: 60% + padding */
.tcpm__right{
  flex:1 1 60%;
  display:flex;
  flex-direction:column;
  padding:30px;
  gap:10px;
  min-height:0;               /* QUAN TRỌNG: cho phép co để tạo vùng scroll */
  max-height:90vh;
  overflow:auto;              /* cột phải cuộn */
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

/* Tiêu đề */
.tcpm__title{
  margin:0;
  font-family:"Inter",sans-serif;
  font-weight:700;
  color:var(--e-global-color-primary,#0b0b3b);
  font-size:18px;
  line-height:1.33em;
}

/* Meta */
.tcpm__meta{
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  font-family:"Inter",sans-serif;
}
.tcpm__pos{
  font-size:14px;font-weight:500;line-height:1.71em;
  color:var(--e-global-color-primary,#0b0b3b);
}
.tcpm__company{
  font-size:14px;font-weight:700;line-height:1.5em;
  color:var(--e-global-color-primary,#0b0b3b);
}

/* Nội dung (cuộn cùng cột phải) */
.tcpm__content{
  padding:10px 0 0 0;
  font-size:14px;line-height:1.5em;color:#222;
  font-family:"Inter",sans-serif;
  max-height:none;            /* bỏ giới hạn cũ, để cột phải kiểm soát */
  overflow:visible;
}
.tcpm__content p{margin:0 0 14px}
.tcpm__content ul,.tcpm__content ol{margin:0 0 14px 20px}

/* Tỉ lệ 40/60 khi >=768px */
@media (min-width:768px){
  .tcpm__left{flex-basis:40%}
  .tcpm__right{flex-basis:60%}
}

/* Mobile: full màn, xếp dọc */
@media (max-width:900px){
  .tcpm__dialog{margin:0;inset:0;border-radius:0;max-width:none;width:100%;max-height:100vh}
  .tcpm__body{flex-direction:column}
  .tcpm__left{flex-basis:auto}
  .tcpm__right{padding:20px}
}

/* ==== Khóa scroll nền khi mở modal ==== */
html.tcpmodal-open,
body.tcpmodal-open{
  overflow:hidden !important;
  overscroll-behavior:none;
  height:100%;
  touch-action:none;          /* chặn pan trên iOS */
}

/* Bàn tay khi hover card (trừ CTA) */
.tcp8 .tcp8__cell--m,
.tcp8 .tcp8-card:not(.tcp8-card--cta){cursor:pointer}
.tcp8 .tcp8__cell--cta{cursor:default}

/* Thêm bảo hiểm chống chuỗi scroll */
.tcpm,
.tcpm__right{ overscroll-behavior:contain; }


/* ===== Mobile modal: chia 50/50 (ảnh 50vh + nội dung 50vh) ===== */
@media (max-width: 900px){
  /* Khung modal toàn màn */
  .tcpm__dialog{
    margin: 0; inset: 0;
    border-radius: 0;
    max-width: none; width: 100%;
    height: 100vh; max-height: 100vh;
  }

  /* Thân modal chia dọc, không tràn tổng thể */
  .tcpm__body{
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;                 /* nền của body không cuộn */
  }

  /* Khu ảnh = 50% màn hình, ảnh căn giữa trong khung */
  .tcpm__left{
    flex: 0 0 50vh;                   /* chiếm đúng 50% viewport height */
    height: 50vh;
    display: flex;
    align-items: center;              /* căn giữa dọc */
    justify-content: center;          /* căn giữa ngang */
    padding: 0;
    background: #fff;
  }
  .tcpm__img{
    max-height: calc(50vh - 24px);    /* chừa khoảng an toàn */
    width: auto;                      /* giữ đúng tỉ lệ ảnh */
    max-width: 88vw;                  /* không tràn ngang */
    object-fit: contain;
    display: block;
    margin: 0 auto;
  }

  /* Khu nội dung = 50% còn lại, CUỘN ĐƯỢC */
  .tcpm__right{
    flex: 1 1 50vh;                   /* phần còn lại của chiều cao */
    min-height: 0;                    /* QUAN TRỌNG: cho phép overflow */
    max-height: 50vh;
    overflow: auto;                   /* cuộn nội dung */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;     /* tránh kéo lò xo nền */
    padding: 20px;
  }

  /* Nút đóng giữ đúng vị trí trên cùng */
  .tcpm__close{
    position: absolute !important;
    top: 12px !important;
    right: 16px !important;
    z-index: 3 !important;
  }
}


/* ===== Mobile modal: chia 50/50 (ảnh 50vh + nội dung 50vh) ===== */
@media (max-width: 900px){
  /* Khung modal toàn màn */
  .tcpm__dialog{
    margin: 0; inset: 0;
    border-radius: 0;
    max-width: none; width: 100%;
    height: 100vh; max-height: 100vh;
  }

  /* Thân modal chia dọc, không tràn tổng thể */
  .tcpm__body{
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;                 /* nền của body không cuộn */
  }

  /* Khu ảnh = 50% màn hình, ảnh căn giữa trong khung */
  .tcpm__left{
    flex: 0 0 50vh;                   /* chiếm đúng 50% viewport height */
    height: 50vh;
    display: flex;
    align-items: center;              /* căn giữa dọc */
    justify-content: center;          /* căn giữa ngang */
    padding: 0;
    background: #fff;
  }
  .tcpm__img{
    max-height: calc(50vh - 24px);    /* chừa khoảng an toàn */
    width: auto;                      /* giữ đúng tỉ lệ ảnh */
    max-width: 88vw;                  /* không tràn ngang */
    object-fit: contain;
    display: block;
    margin: 0 auto;
  }

  /* Khu nội dung = 50% còn lại, CUỘN ĐƯỢC */
  .tcpm__right{
    flex: 1 1 50vh;                   /* phần còn lại của chiều cao */
    min-height: 0;                    /* QUAN TRỌNG: cho phép overflow */
    max-height: 50vh;
    overflow: auto;                   /* cuộn nội dung */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;     /* tránh kéo lò xo nền */
    padding: 20px;
  }

  /* Nút đóng giữ đúng vị trí trên cùng */
  .tcpm__close{
    position: absolute !important;
    top: 12px !important;
    right: 16px !important;
    z-index: 3 !important;
  }
}