/* 1. Khung chứa ngoài cùng (Nền xanh navy thẫm & căn giữa nội dung) */
.pina-section {
  background-color: #102a6b; /* Màu xanh navy thẫm chuẩn theo ảnh mẫu */
  padding: 4rem 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* Khung layout 2 cột */
.pina-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem; /* Khoảng cách giữa ảnh và nội dung chữ */
  max-width: 1100px;
  width: 100%;
}

/* 2. Cột trái: Hình ảnh */
.pina-media {
  flex: 0 0 320px; /* Cố định độ rộng khung ảnh */
  display: flex;
  justify-content: center;
  align-items: center;
}

.pina-media img {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
}

/* 3. Cột phải: Nội dung chữ */
.pina-content {
  flex: 1;
  color: #ffffff;
  max-width: 650px;
}

/* Nhãn "NHÂN VẬT TRUNG TÂM" */
.pina-label {
  color: #f59e0b; /* Màu vàng cam */
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px; /* Dãn khoảng cách chữ */
  margin-bottom: 0.75rem;
}

/* Tiêu đề chính "Francisco de Pina" */
.pina-title {
  color: #ffffff;
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1.15;
  margin-top: 0;
  margin-bottom: 1.25rem;
}

/* Đoạn văn bản mô tả chính */
.pina-description p:first-child {
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 300; /* Font mỏng nhẹ theo ảnh */
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* Đoạn văn bản mô tả phụ */
.pina-description p:last-child {
  color: rgba(255, 255, 255, 0.65); /* Màu trắng đục dịu mắt */
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.7;
  margin-bottom: 0;
}

/* Responsive cho thiết bị di động (Tự động chuyển thành 1 cột) */
@media (max-width: 768px) {
  .pina-container {
    flex-direction: column;
    gap: 2rem;
    text-align: center;
  }
  
  .pina-media {
    flex: 0 0 auto;
  }

  .pina-title {
    font-size: 2.25rem;
  }
}