* { box-sizing: border-box; margin:0; padding:0; }

/* ================== CONTAINER ================== */
.neo-plans {
  width: 100%;
  font-family: "Inter", sans-serif;
  color: #c9d0e8;
  border-collapse: collapse;
  table-layout: fixed;
}

/* ================== HEADER ================== */
.neo-header-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-bottom: 18px;
}
.neo-header-table th {
  text-align: center;
  background: transparent;
  border: none;
}
.neo-header-graphic {
  text-align: center;
  padding: 8px 20px;
}
.neo-header-img {
  max-width: 400px;  /* tăng lên để ảnh lớn hơn */
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  transform: translateY(86px);
}

/* ================== PLAN CARD ================== */
.neo-plan-card {
  width: 240px;
  border-radius: 14px;
  overflow: hidden;
  margin: 0 auto;       /* căn giữa theo chiều ngang */
  box-shadow: 0 10px 30px rgba(2,6,23,0.6);
  display: flex;
  flex-direction: column;
  border: 2px solid transparent;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  /* transform: translateY(48px);  => bỏ dòng này */
  justify-content: flex-end; /* căn lề dưới */
}
.neo-header-table th {
  text-align: center;
  vertical-align: bottom; /* căn nội dung về lề dưới */
  height: 260px;           /* chỉnh độ cao của hàng theo px */
  padding-bottom: 10px;    /* khoảng cách từ card đến đáy */
}
.neo-plan-header {
  padding: 16px 12px;
  text-align: center;
  font-weight: 800;
  font-size: 20px;                  /* tăng lên 30px */
  font-family: "Segoe UI", sans-serif;  /* đổi font */
  color: #02101a;
}

.neo-plan-body {
  background: #1a1f2c;
  padding: 18px 14px;
  text-align:center;
  min-height: 110px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.neo-price {
  font-size: 25px;
  font-weight: 800;
  font-family: "Segoe UI", sans-serif;  /* thêm font Segoe UI */
  color: #fff;
  margin: 6px 0 12px;
}
.neo-price span { font-size: 12px; color: #9fa6c1; font-weight:600; margin-left:4px; }
.neo-select-btn {
  background: linear-gradient(180deg,#2f6fff,#3384ff);
  color: #fff;
  border: none;
  padding: 9px 60px;
  border-radius: 9px;
  cursor: pointer;
  font-weight: 700;
  font-family: "Segoe UI", sans-serif;
  letter-spacing: 0.6px;
  box-shadow: 0 6px 12px rgba(47,103,255,0.18);
}

/* Plan types */
.neo-budget { border-color: #18d0a2; }
.neo-budget .neo-plan-header { background: linear-gradient(90deg,#1bd19f,#2be1aa); color:#02101a; }
.neo-premium { border-color: #b25bff; }
.neo-premium .neo-plan-header { background: linear-gradient(90deg,#c58bff,#b25bff); color:#fff; }
.neo-addon { border-color: #2f7ff9; }
.neo-addon .neo-plan-header { background: linear-gradient(90deg,#3b82f6,#3384ff); color:#fff; }

/* ================== FEATURES FRAME ================== */
.neo-features-frame {
  border: 2px solid rgba(53,57,78,0.9);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 10px;
  background: transparent;
}
.neo-body-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: #1a1f2c;
  color: #e2e8f0;
}
.neo-body-table td {
  padding: 12px 15px;
  font-size: 16px;
  font-weight: 600;
  font-family: "Segoe UI", sans-serif;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.neo-body-table td:first-child { text-align: left; }
.neo-body-table tr:last-child td { border-bottom: none; }
.neo-body-table td:not(:first-child) {
  border-left: 2px solid rgba(255,255,255,0.15); 
}


/* ================== TOOLTIP ================== */
/* Tooltip icon "i" */
.neo-tooltip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #9fb4d7;   /* viền icon */
  background: transparent;      
  font-weight: bold;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  cursor: help;
  margin-left: 6px;
  position: relative;           /* bắt buộc để tooltip-text căn đúng */
}

/* Tooltip content (hiển thị bên dưới icon) */
.neo-tooltip .neo-tooltip-text {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 80%;                     /* hiện bên dưới icon */
  transform: translateX(-50%);
  border: 2px solid rgba(53,57,78,0.9); /* viền khung */
  border-radius: 12px;           /* bo tròn */
  overflow: hidden;
  margin-top: 10px;
  background: #111520;           /* nền màu bạn muốn */
  padding: 12px;
  font-size: 12px;
  font-weight: normal;
  min-width: 220px;               /* khung rộng hơn */
  max-width: 300px;
  white-space: normal;            /* text xuống dòng */
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 10;
  transition: opacity 0.2s, transform 0.2s;
  font-family: "Segoe UI", sans-serif;
   line-height: 1.6; /* tăng khoảng cách dòng */
   text-align: left; /* thêm dòng này để căn trái */
}

/* Hiển thị khi hover icon */
.neo-tooltip:hover .neo-tooltip-text {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0);
}


/* Xen kẽ màu nền */
.neo-body-table tbody tr:nth-child(odd) td { background: #111520; }
.neo-body-table tbody tr:nth-child(even) td { background: #1a1f2c; }

/* Responsive */
@media (max-width: 920px) {
  .neo-header-graphic { display:none; }
  .neo-plan-card { width: 180px; }
  .neo-header-table th { padding: 10px; }
}
@media (max-width: 800px) {
  .neo-header-table, .neo-body-table { table-layout: auto; }
  .neo-plan-body { max-width: 100%; }
}
.neo-body-table td:first-child {
  text-align: center;
  vertical-align: middle;
}
.neo-body-table td .badge {
  display: inline-flex;         /* flex để canh chữ giữa cả ngang + dọc */
  align-items: center;
  justify-content: center;
  width: 208px;                  /* khung cố định, không co dãn theo chữ */
  height: 32px;                 /* chiều cao cố định */
  border-radius: 6px;           /* bo tròn */
  background-color: #3384ff;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;          /* không xuống dòng */
}

.neo-body-table td .badge-hieu-nang {
  display: inline-flex;         /* flex để canh chữ giữa cả ngang + dọc */
  align-items: center;
  justify-content: center;
  width: 208px;                  /* khung cố định, không co dãn theo chữ */
  height: 32px;                 /* chiều cao cố định */
  border-radius: 6px;           /* bo tròn */
  background-color: #b25bff;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;          /* không xuống dòng */
}

.neo-body-table td .badge-tiet-kiem {
  display: inline-flex;         /* flex để canh chữ giữa cả ngang + dọc */
  align-items: center;
  justify-content: center;
  width: 208px;                  /* khung cố định, không co dãn theo chữ */
  height: 32px;                 /* chiều cao cố định */
  border-radius: 6px;           /* bo tròn */
  background-color: #34394d;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;          /* không xuống dòng */
}

.neo-body-table td .status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background-color: #2be1aa;
  color: #111520;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  line-height: 1;

  /* Hình bát giác đều */
  clip-path: polygon(
    30% 0%,   70% 0%,   /* trên cạnh */
    100% 30%, 100% 70%, /* phải cạnh */
    70% 100%, 30% 100%, /* dưới cạnh */
    0% 70%,   0% 30%    /* trái cạnh */
  );
}

.neo-body-table td .status-badge-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background-color: #34394d;
  color: #111520;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  line-height: 1;

  /* Hình bát giác đều */
  clip-path: polygon(
    30% 0%,   70% 0%,   /* trên cạnh */
    100% 30%, 100% 70%, /* phải cạnh */
    70% 100%, 30% 100%, /* dưới cạnh */
    0% 70%,   0% 30%    /* trái cạnh */
  );
}

.plan-cta {
  display: block;
  width: fit-content;
  margin: 40px auto 0; /* căn giữa và cách bảng phía trên */
  text-align: center;
  cursor: pointer;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  color: #ffffff;
  transition: color 0.3s ease;
}

/* Gạch chân khi hover vào phần <strong> */
.plan-cta strong:hover {
  text-decoration: underline;
}

.plan-cta .arrow {
  display: inline-block;
  font-size: 16px; /* chỉnh nhỏ hơn */
  transition: transform 0.3s ease;
  transform: rotate(180deg); /* mặc định hướng xuống */
}

/* Khi hover vào toàn bộ nút, mũi tên quay lên */
.plan-cta:hover .arrow {
  transform: rotate(0deg); /* quay lên */
}

.neo-features-frame {
  border-radius: 12px;
  overflow: hidden;
  background-color: #111520;
  margin-top: 1rem;
  box-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.1),
    0 10px 30px rgba(0, 0, 0, 0.15),
    0 20px 60px rgba(0, 0, 0, 0.2);
}