/* Căn giữa toàn bộ nội dung */
.pinet-container {
    text-align: center;
    font-family: Arial, sans-serif;
    padding: 20px;
    background: #ffffff; /* Nền trắng */
    max-width: 608px; /* Kích thước theo ảnh */
    margin: 0 auto;
}

/* Logo chính */
.pinet-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.pinet-logo img {
    width: 120px;
}

/* Tiêu đề chính */
.pinet-title {
    font-size: 24px;
    font-weight: normal;
    color: #000;
    margin-top: 10px;
    margin-bottom: 60px; /* Tăng khoảng cách xuống */
}

/* "PiNet" đậm hơn */
.pinet-title strong {
    font-weight: bold;
}

/* Grid chứa các icon */
.pinet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 608px; /* Kích thước theo ảnh */
    margin: 60px auto 20px; /* Tăng khoảng cách trên */
}

/* Khung chứa icon */
.pinet-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Hover vào icon */
.pinet-icon-box:hover {
    border-color: #703d92;
    box-shadow: 0px 4px 10px rgba(112, 61, 146, 0.3);
}

/* Tên dưới icon */
.pinet-item span {
    display: block;
    font-size: 14px;
    color: #333;
    margin-top: 8px;
}

/* Link Privacy Policy */
.pinet-privacy {
    display: inline-block;
    margin-top: 5px;
    color: #703d92; /* Màu tím giống ảnh */
    text-decoration: underline; /* Gạch chân mặc định */
    font-weight: bold; /* Chữ đậm */
    font-size: 1.125rem;
    font-family: Arial, sans-serif; /* Font chuẩn */
}

/* Hover hiệu ứng nhẹ */
.pinet-privacy:hover {
    text-decoration: none; /* Khi hover thì bỏ gạch chân */
    opacity: 0.8; /* Hiệu ứng mờ nhẹ khi di chuột */
}


/* Nút Explore */
.pinet-explore {
    background: #703d92; /* Màu nền tím */
    color: white; /* Chữ màu trắng */
    border: none; /* Không có viền */
    padding: 12px 20px; /* Tăng padding để nút cao hơn */
    border-radius: 8px; /* Bo góc */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px; /* Khoảng cách giữa icon và chữ */
    cursor: pointer;
    margin: 15px auto;
    font-size: 16px;
    font-family: Arial, sans-serif; /* Font chữ */
    font-weight: normal; /* Bỏ đậm chữ */
    width: 100%; /* Full chiều ngang */
    max-width: 608px; /* Giữ kích thước theo ảnh */
    text-transform: capitalize; /* Viết hoa chữ cái đầu */
}

/* Icon trong nút Explore */
.pinet-explore img {
    width: 28px; /* Tăng kích thước icon */
    height: 28px;
    filter: brightness(0) invert(1); /* Đảm bảo icon màu trắng */
}

/* Hover nút Explore */
.pinet-explore:hover {
    background: #5a2ebc; /* Màu tím sáng hơn khi hover */
}

/* Chỉnh kích thước ô icon thành 64x64 */
.pinet-icon-box {
    background: #ffffff; /* Nền trắng */
    border-radius: 12px;
    border: 1px solid #88828b;
    padding: 1px; /* Giảm padding để icon có không gian lớn hơn */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 64px; /* Đặt kích thước ô */
    height: 64px;
}

/* Đảm bảo icon giữ nguyên tỷ lệ */
.pinet-item img {
    width: auto; /* Không ép chiều rộng */
    height: auto; /* Không ép chiều cao */
    max-width: 100%; /* Đảm bảo icon không tràn ra ngoài ô */
    max-height: 100%; /* Giữ icon trong khung */
    object-fit: contain; /* Giữ nguyên tỷ lệ mà không méo icon */
}


/* Hover vào icon */
.pinet-icon-box:hover {
    border-color: #703d92;
    box-shadow: 0px 4px 10px rgba(112, 61, 146, 0.3);
}

/* pida */
/* Container bảng */
.pinet-data-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    font-family: Arial, sans-serif;
}

/* Tiêu đề */
.pinet-data-title {
    font-size: 24px;
    color: #703d92;
    margin-bottom: 20px;
}

/* Bảng dữ liệu */
.pinet-data-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

/* Header bảng */
.pinet-data-table th {
    background: #703d92;
    color: white;
    padding: 12px;
}

/* Dòng dữ liệu */
.pinet-data-table td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    text-align: center;
}

/* Dòng chẵn có màu nền khác */
.pinet-data-table tr:nth-child(even) {
    background: #f4f4f4;
}

/* Khi hover vào dòng */
.pinet-data-table tr:hover {
    background: #e0c3fc;
}

/* Không có dữ liệu */
.pinet-data-table td[colspan="3"] {
    color: #888;
    font-style: italic;
}