.pricing-section {
  padding: 40px 20px;
  margin-top: 34px;
  font-family: "Roboto", sans-serif;
}

.pricing-title {
  text-align: center;
  font-size: 32px;
  margin-bottom: 40px;
  font-weight: 800;
  color: #003c47;
  letter-spacing: 1px;
  line-height: 40px;
}

.pricing-wrapper {
  display: grid;
  gap: 25px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* CARD BASE */
.pricing-card {
  background: #fff;
  border-radius: 18px;
  padding: 30px;
  text-align: center;
  border: 1px solid #e0e6ed;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
  transition: 0.35s ease;
  position: relative;
}

.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

/* TÊN GÓI */
.plan-name {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.plan-name.free {
  color: #4a4a4a;
}
.plan-name.silver {
  color: #9ca3af;
}
.plan-name.gold {
  color: #d4a017;
}
.plan-name.diamond {
  color: #0097a7;
}

/* GIÁ */
.plan-price {
  font-size: 28px;
  font-weight: 800;
  color: #003c47;
  margin-bottom: 20px;
}

/* DANH SÁCH */
.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.plan-features li {
  margin-bottom: 6px;
  font-size: 15px;
  color: #444;
}

/* BUTTON */
.plan-btn {
  display: inline-block;
  padding: 12px 25px;
  background: linear-gradient(135deg, #0097a7, #006c73);
  color: #fff;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.3px;
  transition: 0.3s ease;
}

.plan-btn:hover {
  opacity: 0.9;
}

/* --- HIỆU ỨNG SANG TRỌNG CHO TỪNG GÓI --- */

/* Silver */
.silver-card {
  border: 2px solid #c9cdd3;
  background: linear-gradient(180deg, #ffffff, #f5f7fa);
}

/* Gold */
.gold-card {
  border: 2px solid #e3b341;
  background: linear-gradient(180deg, #fff9e6, #fff4d2);
}

/* Diamond */
.diamond-card {
  border: 2px solid #00a8b5;
  background: linear-gradient(180deg, #e9fcff, #e0f7fa);
}

/* Ribbon */
.ribbon {
  position: absolute;
  top: -10px;
  right: -10px;
  background: linear-gradient(90deg, #ff9800, #ffb74d);
  color: #fff;
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
