/* public/css/style.css */

/* CSS chung cho toàn bộ trang */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f7fc;
    color: #333;
}

/* Header */
header {
    background-color: #4CAF50;
    color: white;
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

header nav {
    display: flex;
    justify-content: center;
    gap: 20px;
}

header nav a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    font-size: 16px;
}

header nav a:hover {
    color: #f4f7fc;
    text-decoration: underline;
}

/* Main content */
main {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

/* Footer */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px 0;
    margin-top: 30px;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
    font-size: 14px;
}

footer p {
    margin: 5px 0;
}

footer p strong {
    font-size: 18px;
    color: #4CAF50;
    /* Màu cho tiêu đề */
}

footer a {
    color: #4CAF50;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

footer .footer-content p {
    font-size: 14px;
}

footer .footer-content a {
    font-size: 14px;
}

footer .footer-content a:hover {
    color: #45a049;
}


/* Responsive design */
@media (max-width: 768px) {
    header nav {
        flex-direction: column;
        gap: 10px;
    }

    header nav a {
        font-size: 14px;
    }
}

/* Tạo khoảng cách giữa các link */
.nav-link {
    padding: 5px 15px;
    border-radius: 5px;
}

.nav-link:hover {
    background-color: #45a049;
}

/* Style cho các nút phân trang */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

/* Style cho các mũi tên */
.pagination .arrow {
    font-size: 30px;
    padding: 10px;
    color: #4C1D95;
    /* Màu sắc cho mũi tên */
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
    /* Hiệu ứng khi hover */
}

/* Mũi tên trái */
.pagination .prev {
    transform: rotate(180deg);
    /* Quay mũi tên trái */
}

/* Mũi tên khi hover */
.pagination .arrow:hover {
    color: #6B4E9C;
    /* Màu sắc khi hover */
    transform: scale(1.2);
    /* Phóng to mũi tên khi hover */
}

/* Style cho các trang phân trang số */
.pagination .page {
    margin: 0 5px;
    padding: 10px 15px;
    background-color: #f4f7fc;
    border: 1px solid #ddd;
    color: #333;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Style cho trang đang được chọn */
.pagination .page.active {
    background-color: #4C1D95;
    color: white;
}

/* Hover hiệu ứng cho các trang phân trang số */
.pagination .page:hover {
    background-color: #ddd;
}

/* public/css/style.css */

/* Các thẻ h1-h6 */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Roboto', Arial, sans-serif;
    /* Chọn font chữ dễ đọc cho Tiếng Việt */
    line-height: 1.2;
    /* Tăng chiều cao dòng để dễ đọc */
    letter-spacing: 0.5px;
    /* Giãn cách chữ nhẹ */
    color: #333;
    /* Màu chữ tối cho dễ đọc */
    margin-top: 20px;
    margin-bottom: 10px;
}

/* Cài đặt cho từng thẻ tiêu đề */
h1 {
    font-size: 2.5rem;
    /* Kích thước chữ cho h1 */
    font-weight: bold;
}

h2 {
    font-size: 2rem;
    /* Kích thước chữ cho h2 */
    font-weight: bold;
}

h3 {
    font-size: 1.75rem;
    /* Kích thước chữ cho h3 */
    font-weight: bold;
}

h4 {
    font-size: 1.5rem;
    /* Kích thước chữ cho h4 */
    font-weight: bold;
}

h5 {
    font-size: 1.25rem;
    /* Kích thước chữ cho h5 */
    font-weight: normal;
}

h6 {
    font-size: 1rem;
    /* Kích thước chữ cho h6 */
    font-weight: normal;
}

/* Đặt font chữ mặc định cho văn bản */
body {
    font-family: 'Roboto', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

/* Các đoạn văn bản bình thường */
p {
    margin-bottom: 1rem;
    /* Khoảng cách dưới mỗi đoạn văn */
    font-size: 1rem;
    /* Kích thước chữ của đoạn văn */
}

/* Các liên kết (links) */
a {
    text-decoration: none;
    color: #4CAF50;
}

a:hover {
    text-decoration: underline;
    color: #45a049;
}

/* Đảm bảo có khoảng cách tốt giữa các thẻ */
h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-left: 10px;
    margin-right: 10px;
}

/* Thêm style cho các tiêu đề lớn để dễ nhìn */
h1 {
    font-size: 2.5rem;
    /* Thẻ h1 */
    color: #2c3e50;
}

h2 {
    font-size: 2rem;
    /* Thẻ h2 */
    color: #34495e;
}

h3 {
    font-size: 1.75rem;
    /* Thẻ h3 */
    color: #7f8c8d;
}

h4 {
    font-size: 1.5rem;
    /* Thẻ h4 */
    color: #95a5a6;
}

h5 {
    font-size: 1.25rem;
    /* Thẻ h5 */
    color: #bdc3c7;
}

h6 {
    font-size: 1rem;
    /* Thẻ h6 */
    color: #ecf0f1;
}

/* CSS cho ô tìm kiếm giống Google */
.form-group {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    width: 100%;
}

#search {
    width: 500px;
    /* Chiều rộng của ô tìm kiếm */
    padding: 12px 20px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 25px;
    /* Tạo góc bo tròn */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    outline: none;
    transition: border 0.3s ease;
}

#search:focus {
    border: 1px solid #4CAF50;
    /* Màu viền khi focus */
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

button {
    background-color: #4CAF50;
    /* Màu nền cho nút */
    color: white;
    font-size: 16px;
    padding: 12px 25px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-left: 10px;
    /* Khoảng cách giữa ô tìm kiếm và nút */
}

button:hover {
    background-color: #45a049;
    /* Màu nền khi hover */
}

/* Style cho form tìm kiếm */
#search-form {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    width: 100%;
}

/* Style cho input tìm kiếm */
#search-form input[type="text"] {
    width: 450px;
    /* Chiều rộng của ô tìm kiếm */
    padding: 15px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 25px;
    /* Bo tròn các góc */
    outline: none;
    transition: border 0.3s ease, box-shadow 0.3s ease;
}

/* Hiệu ứng khi ô tìm kiếm focus */
#search-form input[type="text"]:focus {
    border: 1px solid #4CAF50;
    /* Màu viền khi focus */
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
    /* Hiệu ứng bóng */
}

/* Style cho button tìm kiếm */
#search-form button {
    background-color: #4CAF50;
    /* Màu nền nút */
    color: white;
    font-size: 16px;
    padding: 14px 30px;
    border: none;
    border-radius: 25px;
    /* Bo tròn góc nút */
    cursor: pointer;
    margin-left: 10px;
    transition: background-color 0.3s ease;
}

/* Hiệu ứng hover cho nút tìm kiếm */
#search-form button:hover {
    background-color: #45a049;
    /* Màu nền khi hover */
}

/* Responsive: Điều chỉnh cho màn hình nhỏ hơn */
@media (max-width: 768px) {
    #search-form input[type="text"] {
        width: 80%;
        /* Thay đổi chiều rộng của ô tìm kiếm trên các thiết bị di động */
    }

    #search-form button {
        padding: 12px 25px;
        /* Điều chỉnh kích thước nút */
    }
}

/* Style chỉ ảnh hưởng đến phần chi tiết xét nghiệm */
.test-detail {
    background-color: #fff;
    padding: 30px;
    max-width: 800px;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Tiêu đề chính của xét nghiệm */
.test-detail h1 {
    font-size: 28px;
    color: #333;
    text-align: center;
    margin-bottom: 20px;
}

/* Định dạng các đoạn thông tin */
.test-detail .test-info p {
    font-size: 16px;
    line-height: 1.6;
    margin: 10px 0;
    color: #555;
}

/* Tiêu đề phụ - "Các xét nghiệm khác trong nhóm" */
.test-detail h2 {
    font-size: 20px;
    color: #4CAF50;
    /* Màu xanh lá cho tiêu đề phụ */
    margin-top: 30px;
}

/* Liên kết nhóm xét nghiệm */
.test-detail .test-group-link {
    color: #4CAF50;
    text-decoration: none;
}

.test-detail .test-group-link:hover {
    text-decoration: underline;
}

/* Danh sách các xét nghiệm liên quan */
.test-detail ul {
    list-style-type: none;
    padding-left: 0;
}

.test-detail ul li {
    margin: 10px 0;
}

.test-detail ul li a {
    color: #2c3e50;
    font-weight: bold;
    text-decoration: none;
}

.test-detail ul li a:hover {
    text-decoration: underline;
}

/* Quay lại danh sách xét nghiệm */
.test-detail .test-back-link {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    text-decoration: none;
    border-radius: 25px;
    font-size: 16px;
    transition: background-color 0.3s;
}

.test-detail .test-back-link:hover {
    background-color: #45a049;
}

/* CSS cho danh sách xét nghiệm */
.test-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Tạo 3 cột */
    gap: 20px;
    /* Khoảng cách giữa các cột */
    margin-top: 30px;
}

.test-item {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    font-size: 14px;
}

.test-item h3 {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
}

.test-item p {
    margin: 10px 0;
}

.test-item a {
    color: #4CAF50;
    text-decoration: none;
}

.test-item a:hover {
    text-decoration: underline;
}

.test-back-link {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    text-decoration: none;
    border-radius: 25px;
    font-size: 16px;
    transition: background-color 0.3s;
}

.test-back-link:hover {
    background-color: #45a049;
}

.yct-header {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: "Times New Roman", serif;
    color: #000;
}

.yct-header img {
    width: 90px;
    height: auto;
}

.yct-title {
    font-weight: bold;
    font-size: 18px;
    text-transform: uppercase;
}

.yct-desc {
    font-size: 15px;
    margin: 4px 0;
}

.yct-hotline {
    font-size: 15px;
    font-weight: bold;
}