.pri-btn-form {
  overflow: hidden;
  position: relative;
  padding: 2.5px;
  /* box-shadow:
    inset 0 -7px 24px #ffffff80,
    0 3px 12px #0057f280; */
  border-radius: 50px;
}
.pri-btn-form::after {
  content: "";
  animation: spin 3s linear infinite;
  background: conic-gradient(
    from 0 at 50% 50%,
    rgba(255, 255, 255, 0.5) 0deg,
    rgba(255, 255, 255, 0) 60deg,
    #233d57 310deg,
    rgba(255, 255, 255, 0.5) 360deg
  );
  display: block;
  width: 350px;
  height: 350px;
  position: absolute;
  z-index: -1;
  left: -12%;
  top: -284%;
}
.pri-btn-form a {
  border-radius: 50px;
  background-image: linear-gradient(
    180deg,
    #00a9e6 0%,
    #85dfff 14%,
    #3ca5ea 40%,
    #0075d9 66%,
    #0075d9 100%
  );
  box-shadow: inset 0 -7px 24px #ffffff80;
  padding: 12px 24px;
}

.pri-btn-form.submit-form::after {
  left: -22%;
  top: -262%;
  width: 350px;
  height: 350px;
  z-index: 0;
}
.pri-btn-form.submit-form a {
  z-index: 1;
  position: relative;
}

.box-pri-form {
  border-radius: 15px !important;
  padding: 30px !important;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.8), rgba(2, 6, 23, 0.8))
      padding-box,
    linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0.05) 100%
      )
      border-box;
  border: 0.5px solid transparent;
}
.box-pri-form::after {
  border-radius: 16px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(0, 7, 28, 1) 0%,
    rgba(0, 18, 44, 1) 19%,
    rgba(6, 38, 81, 1) 50%,
    rgba(7, 41, 85, 1) 77%,
    rgba(0, 17, 44, 1) 100%
  );
}
.box-pri-form > div {
  z-index: 2;
}
.box-sec-form {
  border-radius: 15px !important;
  padding: 30px !important;
  background:
    linear-gradient(90deg, rgba(15, 23, 42, 0.8), rgba(2, 6, 23, 0.8))
      padding-box,
    linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0.05) 100%
      )
      border-box;
  border: 0.5px solid transparent;
}
.box-pri-form.contact {
  padding: 10px 20px !important;
}
.box-sec-form::after {
  border-radius: 16px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    0deg,
    rgba(0, 7, 28, 1) 0%,
    rgba(0, 18, 44, 1) 19%,
    rgba(6, 38, 81, 1) 50%,
    rgba(7, 41, 85, 1) 77%,
    rgba(0, 17, 44, 1) 100%
  );
}
.box-pri-form.title-banner {
  width: fit-content;
  position: absolute;
  border-radius: 50px !important;
  padding: 10px 20px !important;
  top: 25%;
  left: 50%;
  transform: translate(-50%, 0);
}
.box-pri-form.title-banner .elementor-heading-title {
  font-size: 16px;
}
.box-pri-form.title-banner::after {
  border-radius: 50px;
}
.box-sec-form > div {
  z-index: 2;
}

#form-hoc-vien {
  display: none;
}
.custom-input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}
/* =========================================
   STYLE CHO CUSTOM HTML FORM - STARTTRAIN
========================================= */
.form-hoc-vien .e-n-tabs-heading {
  border-bottom: solid 1px #acb1ba;
}
.form-hoc-vien .e-n-tabs-heading .e-n-tab-title {
  flex-basis: 24%;
  background: transparent !important;
}
.form-hoc-vien .e-n-tabs-heading .e-n-tab-title span {
  color: #acb1ba;
}
.form-hoc-vien .e-n-tabs-heading .e-n-tab-title:hover,
.form-hoc-vien .e-n-tabs-heading .e-n-tab-title[aria-selected="true"] {
  background: linear-gradient(180deg, #7cd8fd 0%, #0075d9 100%) !important;
}
.form-hoc-vien .e-n-tabs-heading .e-n-tab-title:hover span,
.form-hoc-vien .e-n-tabs-heading .e-n-tab-title[aria-selected="true"] span {
  color: #fff;
}
.form-hoc-vien .e-n-tabs-heading .e-n-tab-title::before {
  content: attr(data-tab-index); /* Tự động lấy số 1, 2, 3, 4 từ HTML */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: #a0aec0; /* Màu nền xám bạc cho tab chưa active */
  color: #020b1f; /* Màu chữ tối */
  font-size: 13px;
  font-weight: 700;
  margin-right: 12px; /* Khoảng cách từ số đến chữ */
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.form-hoc-vien .e-n-tabs-heading .e-n-tab-title[aria-selected="true"]::before {
  background-color: #ffffff; /* Nền vòng tròn trắng phát sáng */
  color: #007bff; /* Chữ chuyển sang màu xanh dương */
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}
.form-hoc-vien .e-n-tabs-heading .e-n-tab-title:not(:last-child):after {
  content: "";
  display: block;
  width: 1px;
  height: 50%;
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translate(0%, -50%);
  background-color: #acb1ba;
}
.custom-field-wrapper {
  font-family: inherit;
  color: #ffffff;
  padding-right: 15px;
}

.custom-form-group {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Style cho Label */
.custom-form-group label {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 8px;
  letter-spacing: 0.3px;
}

/* Input Fields (Text, Email, Tel, Select, Date, Textarea) */
.custom-input {
  color: #506e9d !important;
  background-color: #030a17 !important;
  border-color: #142c52 !important;
  border-radius: 8px !important;
  font-size: 14px;
  width: 100%;
  outline: none;
  transition: all 0.3s ease;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}
textarea.custom-input {
  height: 150px !important;
}

.custom-input::placeholder {
  color: #3b4e6d; /* Màu chữ mờ placeholder */
}

/* Hiệu ứng Glow khi click vào Input */
.custom-input:focus {
  border-color: #005ce6;
  box-shadow:
    0 0 10px rgba(0, 92, 230, 0.3),
    inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Tùy chỉnh mũi tên của Select Box */
select.custom-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b4e6d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 16px;
  cursor: pointer;
}

select.custom-input option {
  background-color: #030a17;
  color: #ffffff;
}

/* Đổi màu icon Lịch (Date Picker) sang trắng */
::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.6;
  cursor: pointer;
}

/* =========================================
   STYLE CHO RADIO & CHECKBOX (CUSTOM UI)
========================================= */
.custom-radio-group,
.custom-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 5px;
}

.custom-radio-group label,
.custom-checkbox-group label {
  font-weight: 400;
  font-size: 14px;
  color: #d1d5db;
  cursor: pointer;
  position: relative;
  padding-left: 32px; /* Chừa chỗ cho icon */
  display: flex;
  align-items: center;
  line-height: 1.4;
}

/* Ẩn input mặc định */
.custom-radio-group input[type="radio"],
.custom-checkbox-group input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* 1. Thiết kế hình dáng Box/Circle */
.custom-checkbox-group label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 1px solid #3b4e6d;
  border-radius: 4px;
  background-color: #030a17;
  transition: all 0.2s ease;
}

.custom-radio-group label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 1px solid #3b4e6d;
  border-radius: 50%;
  background-color: #030a17;
  transition: all 0.2s ease;
}

/* 2. Đổi màu viền/nền khi được Check */
.custom-checkbox-group label:has(input:checked)::before,
.custom-radio-group label:has(input:checked)::before {
  border-color: #007bff;
}

.custom-checkbox-group label:has(input:checked)::before {
  background-color: #007bff; /* Tích vuông thì đổ nền xanh */
}

/* 3. Vẽ dấu Tick (Cho Checkbox) và Dấu Chấm (Cho Radio) */
.custom-checkbox-group label::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: translateY(-60%) rotate(45deg); /* Vẽ dấu tick */
  opacity: 0;
  transition: opacity 0.2s ease;
}

.custom-radio-group label::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #007bff; /* Chấm tròn xanh */
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Hiển thị Tick/Chấm khi Check */
.custom-checkbox-group label:has(input:checked)::after,
.custom-radio-group label:has(input:checked)::after {
  opacity: 1;
}

/* Input text "Khác..." nằm trong Checkbox */
.custom-checkbox-group input[type="text"] {
  background-color: #030a17;
  border: 1px solid #142c52;
  border-radius: 6px;
  color: #fff;
  padding: 8px 12px;
  outline: none;
  transition: border 0.3s;
  width: 100%;
}
.custom-checkbox-group input[type="text"]:focus {
  border-color: #005ce6;
}
#custom-student-form {
  width: 100%;
}

.ma-lop-1 .ma-lop-2 .ma-lop-3 .ma-lop-4 .ma-lop-5 {
  display: none;
}

/* =========================================
   STYLE CHO PROFILE PREVIEW CARD (TAB 2)
========================================= */
.profile-preview-card {
  background: linear-gradient(145deg, #020b1f 0%, #031435 100%);
  border: 1px solid #142c52;
  border-radius: 12px;
  padding: 30px;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  /* Đảm bảo card luôn hiển thị */
  display: flex !important;
}

/* Các đoạn CSS cho font chữ, biểu đồ, location badges giữ nguyên */
.preview-fullname h3.elementor-heading-title {
  color: #6bcff3;
  font-size: 20px;
  margin: 0 0 5px 0;
  transition: color 0.3s ease;
}
.preview-classcode span.elementor-heading-title {
  color: #8c9bb0;
  font-size: 14px;
}

.profile-middle {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: 40px 0;
  width: 100%;
}

/* Định dạng container ảnh giới tính của Elementor */
.gender-preview .elementor-widget-image img {
  transition: all 0.3s ease;
}

/* --- Hiệu ứng Biểu đồ Tuổi --- */
.age-chart-preview {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  height: 120px;
}
.chart-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  position: relative;
}
.bar-fill {
  width: 24px;
  background-color: #1a3c70;
  border-radius: 4px 4px 0 0;
  transition: all 0.4s ease;
}
.bar-label {
  font-size: 10px;
  color: #8c9bb0;
  margin-top: 5px;
}
.age-number {
  position: absolute;
  top: -20px;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s;
}

.chart-bar.active .age-number {
  opacity: 1;
}

/* --- Hiệu ứng Location Badges --- */
.location-preview {
  display: grid;
  grid-template-rows: repeat(2, 1fr); /* Cấu hình hiển thị đúng 2 hàng */
  grid-auto-flow: column; /* Mọi nội dung bị đẩy sang cột ngang mới -> tạo scroll */
  gap: 12px;
  width: 100%;
  overflow-x: auto; /* Bật thanh cuộn ngang */
  padding-bottom: 12px; /* Tạo khoảng trống cho thanh cuộn */

  /* Cấu hình scrollbar cho Firefox */
  scrollbar-width: thin;
  scrollbar-color: #1a3c70 transparent;
}

/* Trang trí thanh cuộn (Scrollbar) cho Chrome, Safari, Edge đẹp mắt hơn trên nền Dark theme */
.location-preview::-webkit-scrollbar {
  height: 6px;
}
.location-preview::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
}
.location-preview::-webkit-scrollbar-thumb {
  background-color: #1a3c70;
  border-radius: 10px;
}
.location-preview::-webkit-scrollbar-thumb:hover {
  background-color: #007bff;
}

.loc-badge {
  background: #011842;
  /* border: 1px solid #1a3c70; */
  color: #506e9d;
  padding: 6px 15px;
  border-radius: 20px;
  font-size: 12px;
  transition: all 0.3s ease;
  white-space: nowrap; /* Ép chữ không được rớt xuống dòng bên trong nút */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================
   THEME MÀU SẮC ĐỘNG (XANH & HỒNG) CHO ELEMENTOR
========================================= */

/* THEME XANH (NAM) */
.profile-preview-card.theme-blue .preview-fullname .elementor-heading-title {
  color: #6bcff3 !important;
}
.profile-preview-card.theme-blue .preview-classcode .elementor-heading-title {
  color: #6bcff3 !important;
}
.profile-preview-card.theme-blue .chart-bar.active .bar-fill {
  background: linear-gradient(180deg, #00d2ff 0%, #007bff 100%);
  box-shadow: 0 0 15px rgba(0, 123, 255, 0.4);
}
.profile-preview-card.theme-blue .loc-badge.active {
  background: linear-gradient(180deg, #74d2fa 0%, #0176da 100%);
  color: #fff;
  /* border-color: #6bcff3; */
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}

/* THEME HỒNG (NỮ) */
.profile-preview-card.theme-pink .preview-fullname .elementor-heading-title {
  color: #fe84b1 !important;
}
.profile-preview-card.theme-pink .preview-classcode .elementor-heading-title {
  color: #fe84b1 !important;
}
.profile-preview-card.theme-pink .chart-bar.active .bar-fill {
  background: linear-gradient(180deg, #ff81af 0%, #b71650 100%);
  box-shadow: 0 0 15px rgba(230, 0, 57, 0.4);
}
.profile-preview-card.theme-pink .loc-badge.active {
  background: linear-gradient(180deg, #ff81af 0%, #b71650 100%);
  color: #fff;
  /* border-color: #fe84b1; */
  box-shadow: 0 0 10px rgba(230, 0, 57, 0.5);
}

/* Màu mặc định khi chưa chọn giới tính */
.profile-preview-card:not(.theme-blue):not(.theme-pink)
  .preview-fullname
  h3.elementor-heading-title {
  color: #8c9bb0;
}
.profile-preview-card:not(.theme-blue):not(.theme-pink)
  .chart-bar.active
  .bar-fill {
  background: #5b749c;
}
.profile-preview-card:not(.theme-blue):not(.theme-pink) .loc-badge.active {
  background-color: #5b749c;
  border-color: #5b749c;
  color: #fff;
}

/* =========================================
   STYLE CHO TAB 3 (Cấu trúc Elementor Chia Nhỏ)
========================================= */
/* Ép thẻ cha tổng chứa Tab 3 luôn hiển thị */
.business-preview-card {
  display: flex !important;
  flex-direction: column;
  gap: 30px;
}

/* --- THÔNG TIN CÁ NHÂN --- */
.biz-profile-info {
  position: relative; /* Bỏ absolute để Elementor tự xếp dòng */
  z-index: 10;
}
.biz-profile-info h3.elementor-heading-title {
  color: #4da6ff;
  margin: 0 0 10px 0;
  font-size: 22px;
}
.biz-profile-info span.elementor-heading-title,
.biz-profile-info p.elementor-heading-title {
  color: #b0c4de;
  margin: 4px 0;
  font-size: 14px;
  font-weight: 500;
}
.biz-profile-info span.preview-biz-dob,
.biz-profile-info span.preview-biz-email,
.biz-profile-info span.preview-biz-company {
  color: #e6f2ff;
  font-weight: normal;
}

/* --- PIE CHART (SỬ DỤNG TRỰC TIẾP SVG) --- */
.pie-slice {
  transition:
    fill 0.3s ease,
    filter 0.3s ease;
  transform-origin: center;
}

/* Đổi màu mảng (fill) và toả hào quang (filter) khi Active */
.pie-slice.active {
  fill: url(#activeGrad) !important;
  filter: drop-shadow(0 0 10px rgba(0, 255, 170, 0.6));
}

/* --- LĨNH VỰC TREEMAP (Widget riêng) --- */

/* Container bao bọc 27 khối */
.industry-treemap {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: repeat(24, 1fr);
  gap: 6px;
  width: 100%;
  aspect-ratio: 1.35 / 1; /* Tỷ lệ khung hình để giữ form giống ảnh mẫu */
}

.tree-item {
  font-weight: 500;
  background: #0e0f2d;
  border: 1px solid #20315a;
  border-radius: 4px;
  color: #506e9d;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  transition: all 0.3s ease;
  box-sizing: border-box;
  cursor: default;
}

/* HIỆU ỨNG KHI ĐƯỢC CHỌN (ACTIVE) */
.tree-item.active {
  border: solid 1px #ff4885;
  background: linear-gradient(
    180deg,
    #ff4885 0%,
    #ff85b2 10%,
    #ff75a3 56%,
    #c91f60 100%
  );
  color: #010d28;
  font-weight: bold;
  box-shadow: 0 0 15px rgba(255, 75, 114, 0.5);
  transform: scale(1.02);
  z-index: 10;
}

/* ==========================================
   TOẠ ĐỘ CSS GRID CHÍNH XÁC (27 ITEMS)
   ========================================== */
/* Dòng 1 */
.tree-item:nth-child(1) {
  grid-area: 1 / 1 / 5 / 8;
} /* F&B */
.tree-item:nth-child(2) {
  grid-area: 1 / 8 / 5 / 12;
} /* Healthcare */
.tree-item:nth-child(3) {
  grid-area: 1 / 12 / 5 / 19;
} /* Software */
.tree-item:nth-child(4) {
  grid-area: 1 / 19 / 5 / 25;
} /* Banking */

/* Dòng 2 */
.tree-item:nth-child(5) {
  grid-area: 5 / 1 / 9 / 5;
} /* Insurance */
.tree-item:nth-child(6) {
  grid-area: 5 / 5 / 9 / 10;
} /* Aviation */
.tree-item:nth-child(7) {
  grid-area: 5 / 10 / 9 / 17;
} /* Construction */
.tree-item:nth-child(8) {
  grid-area: 5 / 17 / 9 / 25;
} /* Hospitality */

/* Dòng 3 */
.tree-item:nth-child(9) {
  grid-area: 9 / 1 / 13 / 4;
} /* Manufacturing */
.tree-item:nth-child(10) {
  grid-area: 9 / 4 / 13 / 9;
} /* Agriculture */
.tree-item:nth-child(11) {
  grid-area: 9 / 9 / 13 / 14;
} /* Real Estate */
.tree-item:nth-child(12) {
  grid-area: 9 / 14 / 13 / 17;
} /* FMCG */
.tree-item:nth-child(13) {
  grid-area: 9 / 17 / 13 / 21;
} /* Pharmaceuticals */
.tree-item:nth-child(14) {
  grid-area: 9 / 21 / 13 / 25;
} /* Automotive */

/* Dòng 4 - Khối giữa */
.tree-item:nth-child(15) {
  grid-area: 13 / 1 / 17 / 9;
} /* Supply Chain */
.tree-item:nth-child(16) {
  grid-area: 13 / 9 / 15 / 14;
} /* Headhunt */
.tree-item:nth-child(17) {
  grid-area: 15 / 9 / 17 / 14;
} /* Consulting */
.tree-item:nth-child(18) {
  grid-area: 13 / 14 / 19 / 17;
} /* Energy */
.tree-item:nth-child(19) {
  grid-area: 13 / 17 / 19 / 20;
} /* E-commerce */
.tree-item:nth-child(20) {
  grid-area: 13 / 20 / 19 / 25;
} /* Telecommunications */

/* Dòng 5 & 6 - Đáy bản đồ */
.tree-item:nth-child(21) {
  grid-area: 17 / 1 / 25 / 4;
} /* Retail & Trading */
.tree-item:nth-child(22) {
  grid-area: 17 / 4 / 21 / 9;
} /* Transportation */
.tree-item:nth-child(23) {
  grid-area: 21 / 4 / 25 / 9;
} /* Government */
.tree-item:nth-child(24) {
  grid-area: 17 / 9 / 25 / 14;
} /* Education */
.tree-item:nth-child(25) {
  grid-area: 19 / 14 / 22 / 20;
} /* Non-profit */
.tree-item:nth-child(26) {
  grid-area: 22 / 14 / 25 / 20;
} /* Testing */
.tree-item:nth-child(27) {
  grid-area: 19 / 20 / 25 / 25;
} /* Media & Entertainment (Đã mở rộng lấp chỗ trống) */

/* Trạng thái Active (Giữ nguyên) */
/* .tree-item.active {
  border: solid 1px #c91f60;
  background: linear-gradient(
    180deg,
    #ff4885 0%,
    #ff85b2 10%,
    #ff75a3 56%,
    #c91f60 100%
  );
  color: #010d28;
  box-shadow: 0 0 15px rgba(255, 75, 114, 0.5);
} */

/* --- PHÒNG BAN & VỊ TRÍ (Widget riêng) --- */
.dept-pos-wrapper {
  display: flex;
  gap: 15px;
  justify-content: center; /* Đưa ra giữa nếu bị chệch */
}
.dept-cloud,
.position-list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  justify-content: center;
}
.position-list {
  align-items: flex-start;
}

.dept-tag,
.pos-tag {
  font-weight: bold;
  background: transparent;
  border: 1px solid #3b5b8c;
  color: #5b749c;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 10px;
  transition: all 0.3s ease;
  /* white-space: nowrap; */
}
.dept-tag {
  border: solid 1px #7b7654;
  background: #151d21;
  color: #7b7654;
}
.pos-tag {
  padding: 10px 8px;
  border: solid 1px #5373a5;
  background: #011b46;
  color: #5373a5;
}
.ghost-tag {
  opacity: 0;
  pointer-events: none;
}

.dept-tag.active {
  border: solid 1px #d9ae00;
  background: linear-gradient(
    180deg,
    #e69600 0%,
    #ffeb85 14%,
    #eacd3c 40%,
    #d9ae00 66%,
    #d9ae00 100%
  );
  color: #010d28;
  box-shadow: 0 0 10px rgba(255, 220, 0, 0.4);
}
.pos-tag.active {
  border: solid 1px #0075d9;
  background: linear-gradient(
    180deg,
    #00a9e6 0%,
    #85dfff 20%,
    #3ca5ea 63%,
    #0075d9 100%
  );
  color: #010d28;
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}
/* =========================================
   STYLE CHO TAB 4 (DONUT KẾT HỢP SVG)
========================================= */

/* SỬA LỖI ẨN CỦA ELEMENTOR */
.course-profile-info {
  display: flex !important;
  flex-direction: column;
  background: linear-gradient(145deg, #020b1f 0%, #031435 100%);
  border: 1px solid #142c52;
  border-radius: 12px;
  padding: 30px;
  color: #fff;
  gap: 30px;
}

/* THÔNG TIN CÁ NHÂN */
.biz-profile-info h3.elementor-heading-title {
  color: #4da6ff;
  margin: 0 0 5px 0;
  font-size: 22px;
}
.biz-profile-info span.elementor-heading-title,
.biz-profile-info p.elementor-heading-title {
  font-size: 13px;
  color: #b0c4de;
  margin: 4px 0;
}
.biz-profile-info span.elementor-heading-title span {
  color: #e6f2ff;
}
.biz-profile-info .preview-tab4-classcode {
  color: #8c9bb0;
  display: block;
  margin-bottom: 15px;
  font-size: 14px;
}

/* --- XỬ LÝ MÀU SẮC CHO MÚI SVG DONUT --- */
.donut-slice {
  transition:
    transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    filter 0.3s;
  transform-origin: center; /* Để nảy từ tâm */
  cursor: pointer;
}

/* Đổi màu Gradient khi kích hoạt (Active) */
.donut-slice.active .slice-fill {
  fill: url(#donutActive) !important;
  fill-opacity: 0.9 !important;
}

/* Đổi màu viền và làm phát sáng */
.donut-slice.active .slice-stroke {
  stroke: #ffb75e !important;
  stroke-width: 2px !important;
  filter: drop-shadow(0 0 15px rgba(237, 143, 3, 0.8));
}

/* Nảy các lát cắt ra ngoài */
/* .donut-slice[data-src="Recommendation"].active {
  transform: translate(5px, -5px);
}
.donut-slice[data-src="Events"].active {
  transform: translate(7px, 0px);
}
.donut-slice[data-src="Social media"].active {
  transform: translate(-5px, -5px);
}
.donut-slice[data-src="Website"].active {
  transform: translate(0px, -7px);
}
.donut-slice[data-src="Organization"].active {
  transform: translate(5px, 5px);
}
.donut-slice[data-src="Email/SMS"].active {
  transform: translate(0px, 7px);
}
.donut-slice[data-src="AI Tools"].active {
  transform: translate(-5px, 5px);
}
.donut-slice[data-src="Khác"].active {
  transform: translate(-7px, 0px);
} */

/* --- NHÃN CHỮ ẢO (VÔ HÌNH, CHỈ SÁNG KHI ACTIVE) --- */
.donut-labels {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}
.d-label {
  position: absolute;
  font-size: 11px;
  color: #5373a5;
  text-align: center;
  line-height: 1.2;
  transition: 0.3s;
  font-weight: bold;
}
.d-label.active {
  color: #ffffff; /* Sáng màu trắng */
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}

/* --- DANH SÁCH MỤC TIÊU --- */
.objective-list {
  display: flex;
  flex-direction: column;
  /* align-items: flex-end; */
  gap: 8px;
  margin-top: 20px;
  width: 100%;
}
.obj-item {
  background: #0a1931;
  border: 1px solid #142c52;
  color: #5b749c;
  padding: 12px 20px;
  border-radius: 6px;
  font-size: 12px;
  transition: all 0.3s ease;
  width: 100%;
  text-align: left;
}
.obj-item.active {
  background: linear-gradient(90deg, #007cdb 0%, #007bff 100%);
  color: #fff;
  border-color: #007bff;
  font-weight: bold;
  box-shadow: 0 0 15px rgba(0, 123, 255, 0.4);
  /* transform: translateX(-10px); */
}
.preview-tab1-ten-khoa-hoc span {
  display: inline-block;
  color: #62bbdb;
  padding: 10px 20px;
  border-radius: 40px;
  background: linear-gradient(90deg, #183267 0%, #01143a 100%);
  border: solid 1px #354f81;
}
.preview-tab1-ten-giang-vien .elementor-heading-title,
.preview-tab1-thoi-luong p {
  color: #b5c0ca;
}
@media (max-width: 768px) {
  div[style*="display: flex; gap: 20px;"] {
    flex-direction: column;
    gap: 0 !important;
  }
  .industry-treemap {
    display: block;
  }
  .industry-treemap .tree-item {
    margin-bottom: 10px;
  }
  .box-pri-form,
  .box-sec-form {
    padding: 30px !important;
  }
  .form-hoc-vien .e-n-tabs-heading .e-n-tab-title {
    justify-content: flex-start;
  }
  .form-hoc-vien .e-n-tabs-heading .e-n-tab-title::after {
    display: none !important;
  }
  .box-pri-form.title-banner {
    top: 50%;
  }
  .box-pri-form.title-banner .elementor-heading-title {
    font-size: 10px;
  }
  .donut-svg-wrapper {
    width: 100% !important;
    height: 100% !important;
  }
  .d-label[data-match="Recommendation"] {
    right: 14% !important;
  }
  .text-intro-banking .elementor-widget-container::before,
  .text-intro-banking .elementor-widget-container::after {
    width: 50px;
  }
  .preview-tab1-ten-khoa-hoc span {
    padding: 5px 15px;
  }
}