/* ==========================================================================
   CSS CHO QUY TRÌNH TRIỂN KHAI MENKAR
   ========================================================================== */

:root {
  /* ========================================================================
     1. MÀU SẮC CHỦ ĐẠO (PRIMARY COLORS)
     Thay đổi mã màu hex ở đây để tự động áp dụng cho toàn bộ phần tử.
     ======================================================================== */
  --menkar-blue: #0f3a8a;          /* Màu xanh dương đậm (Vòng tròn và tiêu đề bước) */
  --menkar-orange: #f8b020;        /* Màu cam (Vòng tròn số quy trình 01, 02,...) */
  --menkar-text-gray: #000000;     /* Màu đen của nội dung mô tả ngắn (Đổi từ #555555) */
  --menkar-line-gray: #aab2bd;     /* Màu xám của đường kẻ chéo và đường nối nét đứt */
  --menkar-bg-white: #ffffff;      /* Màu nền trắng hoặc màu tương phản */

  /* ========================================================================
     2. KÍCH THƯỚC VÒNG TRÒN (CIRCLE SIZES)
     Thay đổi các thông số này để phóng to/thu nhỏ vòng tròn.
     ======================================================================== */
  --circle-outer-size: 80px;       /* Đường kính của vòng tròn viền mỏng ngoài cùng (Thu nhỏ từ 110px) */
  --circle-inner-size: 64px;       /* Đường kính của vòng tròn màu xanh đậm bên trong (Thu nhỏ từ 90px) */
  
  /* Cấu hình thời gian và kiểu hiệu ứng chuyển động mượt mà (Hover Animation) */
  --menkar-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   3. TIÊU ĐỀ CHÍNH CỦA SECTION (MAIN SECTION TITLE)
   ========================================================================== */
.menkar-qt-section-header {
  text-align: center;
  margin-bottom: 40px;
  width: 100%;
}

.menkar-qt-main-title {
  font-family: inherit;
  font-size: 26px;
  font-weight: 800;
  color: var(--menkar-blue);
  margin: 0;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ==========================================================================
   4. BỐ CỤC CHUNG (GENERAL CONTAINER LAYOUT)
   ========================================================================== */
.menkar-qt-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  padding: 20px 0 50px 0;
  gap: 15px;
  box-sizing: border-box;
}

.menkar-qt-step {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}

/* ==========================================================================
   5. BỘ VÒNG TRÒN ICON (CIRCLE WRAPPER & ELEMENTS)
   ========================================================================== */
.menkar-qt-circle-wrapper {
  position: relative;
  width: var(--circle-outer-size);
  height: var(--circle-outer-size);
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Vòng tròn viền ngoài mỏng */
.menkar-qt-circle-outer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid var(--menkar-blue);
  border-radius: 50%;
  opacity: 0.35;
  transition: var(--menkar-transition);
  box-sizing: border-box;
}

/* Vòng tròn đặc chứa Icon */
.menkar-qt-circle-inner {
  position: relative;
  width: var(--circle-inner-size);
  height: var(--circle-inner-size);
  background-color: var(--menkar-blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--menkar-bg-white);
  box-shadow: 0 4px 15px rgba(15, 58, 138, 0.2);
  transition: var(--menkar-transition);
  z-index: 2;
  box-sizing: border-box;
}

/* Định dạng hình SVG bên trong vòng tròn */
.menkar-qt-circle-inner svg {
  width: 28px;            /* Thu nhỏ từ 40px */
  height: 28px;           /* Thu nhỏ từ 40px */
  color: var(--menkar-bg-white);
  transition: var(--menkar-transition);
}

/* ==========================================================================
   6. ĐƯỜNG KẺ CHÉO VÀ BADGE SỐ 01, 02... (BADGE & DIAGONAL LINE)
   ========================================================================== */
.menkar-qt-badge-group {
  position: absolute;
  left: -14px;            /* Di chuyển vị trí ngang của nút số */
  bottom: -14px;          /* Di chuyển vị trí dọc của nút số */
  width: 26px;
  height: 26px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Nút hình tròn chứa số */
.menkar-qt-badge {
  width: 24px;
  height: 24px;
  background-color: var(--menkar-orange);
  color: var(--menkar-bg-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;        /* Thu nhỏ font chữ số */
  border: 2px solid var(--menkar-bg-white);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 2;
  transition: var(--menkar-transition);
}

/* Đường chỉ chéo nối từ vòng tròn đến nút số */
.menkar-qt-badge-line {
  position: absolute;
  width: 1.5px;
  height: 24px;           /* Chiều dài của đường chỉ chéo */
  background-color: var(--menkar-line-gray);
  bottom: 12px;           /* Điểm bắt đầu từ tâm của badge */
  left: 12px;             /* Điểm bắt đầu từ tâm của badge */
  transform: rotate(45deg);
  transform-origin: bottom left;
  z-index: 1;
  transition: var(--menkar-transition);
}

/* ==========================================================================
   7. ĐƯỜNG NỐI NÉT ĐỨT SANG BƯỚC TIẾP THEO (HORIZONTAL CONNECTORS)
   ========================================================================== */
.menkar-qt-connector {
  position: absolute;
  top: calc(var(--circle-outer-size) / 2); /* Căn giữa theo chiều dọc của vòng tròn */
  left: calc(50% + (var(--circle-outer-size) / 2)); /* Bắt đầu từ mép phải vòng tròn */
  width: calc(100% - var(--circle-outer-size));     /* Kéo dài đến vòng tiếp theo */
  height: 20px;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
  display: flex;
  align-items: center;
}

.menkar-qt-connector svg {
  width: 100%;
  height: 100%;
  display: block;
}

.menkar-qt-connector svg line {
  stroke: var(--menkar-blue) !important;
  opacity: 0.75;
}

.menkar-qt-connector svg polygon {
  fill: var(--menkar-blue) !important;
  opacity: 0.75;
}


/* ==========================================================================
   8. TIÊU ĐỀ BƯỚC VÀ NỘI DUNG MÔ TẢ (TEXT STYLING)
   ========================================================================== */
.menkar-qt-title {
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--menkar-blue);
  margin: 5px 0 10px 0;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: var(--menkar-transition);
  min-height: 42px;       /* Đảm bảo các tiêu đề thẳng hàng ngang trên máy tính */
  display: flex;
  align-items: center;
  justify-content: center;
}

.menkar-qt-desc {
  font-family: inherit;
  font-size: 13.5px;
  color: var(--menkar-text-gray);
  line-height: 1.6;
  margin: 0;
  padding: 0 10px;
}

/* ==========================================================================
   9. HIỆU ỨNG KHI RÊ CHUỘT (PREMIUM HOVER EFFECTS)
   ========================================================================== */
.menkar-qt-step:hover .menkar-qt-circle-outer {
  transform: scale(1.12);
  opacity: 0.8;
  border-color: var(--menkar-orange);
}

.menkar-qt-step:hover .menkar-qt-circle-inner {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(15, 58, 138, 0.35);
}

.menkar-qt-step:hover .menkar-qt-circle-inner svg {
  transform: scale(1.08) rotate(5deg);
}

.menkar-qt-step:hover .menkar-qt-badge {
  transform: scale(1.15);
  background-color: var(--menkar-orange);
  box-shadow: 0 4px 10px rgba(243, 112, 33, 0.4);
}

.menkar-qt-step:hover .menkar-qt-badge-line {
  background-color: var(--menkar-orange);
  height: 26px;
}

.menkar-qt-step:hover .menkar-qt-title {
  color: var(--menkar-orange);
}

/* ==========================================================================
   10. HIỂN THỊ TRÊN MÀN HÌNH MÁY TÍNH BẢNG (TABLET RESPONSIVE)
   ========================================================================== */
@media (max-width: 991px) {
  .menkar-qt-container {
    gap: 10px;
  }
  .menkar-qt-title {
    font-size: 13px;
    min-height: 38px;
  }
  .menkar-qt-desc {
    font-size: 12.5px;
    padding: 0;
  }
  
  :root {
    --circle-outer-size: 72px;
    --circle-inner-size: 56px;
  }
  
  .menkar-qt-circle-inner svg {
    width: 24px;
    height: 24px;
  }
  
  .menkar-qt-badge-group {
    left: -10px;
    bottom: -10px;
    width: 22px;
    height: 22px;
  }
  
  .menkar-qt-badge {
    width: 20px;
    height: 20px;
    font-size: 9px;
    border: 1.5px solid var(--menkar-bg-white);
  }
  
  .menkar-qt-badge-line {
    height: 20px;
    bottom: 10px;
    left: 10px;
  }

  .menkar-qt-step:hover .menkar-qt-badge-line {
    height: 22px;
  }
}

/* ==========================================================================
   11. HIỂN THỊ TRÊN MÀN HÌNH ĐIỆN THOẠI (MOBILE RESPONSIVE)
   Chuyển cấu trúc hàng ngang thành cột dọc và xoay dọc đường nét đứt nối bước.
   ========================================================================== */
@media (max-width: 767px) {
  .menkar-qt-container {
    flex-direction: column;
    align-items: center;
    gap: 45px;             /* Khoảng cách giữa các bước ở giao diện mobile */
    padding: 10px 0;
  }

  .menkar-qt-step {
    width: 100%;
    max-width: 320px;
  }

  .menkar-qt-title {
    min-height: auto;
    margin: 5px 0 8px 0;
  }

  /* Định vị lại đường kẻ nối hướng đi xuống phía dưới trên mobile bằng CSS thuần */
  .menkar-qt-connector {
    top: auto;
    bottom: -38px;         /* Đưa xuống dưới khoảng trống giữa các bước */
    left: 50%;
    width: 10px;
    height: 32px;          /* Chiều cao đường nối */
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

  .menkar-qt-connector svg {
    display: none;         /* Ẩn hình SVG nằm ngang để tránh bị méo */
  }

  /* Tạo nét đứt thẳng đứng */
  .menkar-qt-connector::before {
    content: "";
    width: 0;
    height: 24px;
    border-left: 2px dotted var(--menkar-line-gray);
    display: block;
  }

  /* Tạo hình mũi tên hướng xuống */
  .menkar-qt-connector::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid var(--menkar-line-gray);
    display: block;
    margin-top: -1px;      /* Ghép sát vào nét đứt */
  }
}