/* ================================================== */
/* == THIẾT LẬP BIẾN TOÀN CỤC & KIỂU DÁNG CƠ BẢN == */
/* ================================================== */

/* :root cho phép định nghĩa các biến CSS dùng chung */
:root {
    --primary-color: #007bff; /* Màu xanh chủ đạo */
    --light-blue: #e0f7fa;
    --background-color: #f4f7f6;
    --text-color: #333;
    --text-light: #6c757d;
    --border-color: #eee;
    --border-radius-main: 8px;
    --border-radius-small: 6px;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.5;
}

/* ================================================== */
/* == BỐ CỤC THEO HƯỚNG "MOBILE FIRST"             == */
/* (Giao diện mặc định cho màn hình nhỏ)          == */
/* ================================================== */

.container {
    background-color: white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-radius: var(--border-radius-main);
    margin: 20px;
    width: 100%;
    max-width: 1000px;
}

.info-section,
.calendar-section,
.time-slots-container {
    padding: 20px; /* Padding nhỏ hơn cho mobile */
}

.clinic-details {
    /* text-align: left; XÓA DÒNG NÀY ĐI */

    /* THÊM CÁC DÒNG SAU ĐỂ CĂN GIỮA BẰNG FLEXBOX */
    display: flex;
    flex-direction: column; /* Xếp các phần tử theo chiều dọc */
    align-items: center;   /* Căn giữa các phần tử theo chiều ngang */
}

.clinic-logo img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin-bottom: 10px;
}

h1 { font-size: 1.4rem; }
h2 { font-size: 1.8rem; margin: 5px 0 20px 0; }
.duration-time { color: var(--text-light); margin-bottom: 25px; font-weight: bold; }

/* --- Lịch --- */
.calendar-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-weight: bold;
}
.nav-arrow {
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--primary-color);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    margin-top: 15px;
}

.day-label {
    font-weight: bold;
    color: var(--text-light);
    font-size: 0.8rem;
}

.date-cell {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    border-radius: 50%;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s;
}
.date-cell:not(.empty):hover { background-color: var(--light-blue); }
.date-cell.selected { background-color: var(--primary-color); color: white; }
.date-cell.empty { visibility: hidden; cursor: default; }
.date-cell.past { color: #ccc; cursor: not-allowed; pointer-events: none; }
.date-cell.today { font-weight: bold; border: 2px solid var(--primary-color); }

/* --- Khung giờ khám (Time Slots) --- */
.time-slots-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Cột nhỏ hơn cho mobile */
    gap: 8px;
    margin-top: 15px;
}

.time-slot {
    background-color: white;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    padding: 10px 5px;
    border-radius: var(--border-radius-small);
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    user-select: none;
}
.time-slot:not(.full):not(.past):hover { background-color: var(--primary-color); color: white; }

.time-slot.full,
.time-slot.past {
    background-color: #f8f9fa;
    border-color: #ced4da;
    color: var(--text-light);
    cursor: not-allowed;
}
.time-slot.full { text-decoration: line-through; }

/* --- Các thông báo --- */
.time-slots-list .initial-message,
.time-slots-list .loading-message,
.time-slots-list .info-message,
.time-slots-list .error-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 20px;
    background-color: #f1f3f5;
    border-radius: var(--border-radius-small);
    font-style: italic;
}
.time-slots-list .error-message { background-color: #fff5f5; color: #c92a2a; font-weight: bold; }

/* --- Menu Lịch Bác sĩ --- */
.schedule-menu-wrapper {
    position: relative;
    width: 100%; /* Chiếm toàn bộ chiều rộng trên mobile */
    max-width: 420px; /* Giới hạn chiều rộng tối đa */
    margin: 0 auto 15px auto;
}
.menu-trigger-button {
    background-color: #f0f4f9;
    color: var(--primary-color);
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: var(--border-radius-main);
    cursor: pointer;
    font-weight: bold;
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.menu-trigger-button .arrow { transition: transform 0.2s; }
.menu-trigger-button.active .arrow { transform: rotate(180deg); }

#schedule-popup-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    width: 100%;
    margin-top: 5px;
    background: white;
    border-radius: var(--border-radius-main);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 8px 0;
}
.popup-item {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: var(--text-color);
    transition: background-color 0.2s;
}
.popup-item:hover, .popup-item.active { background-color: #f0f4f9; color: var(--primary-color); }


/* ================================================== */
/* == LAYOUT CHO DESKTOP (Màn hình lớn hơn 768px)  == */
/* ================================================== */
@media (min-width: 769px) {
    body {
        /* Canh giữa container trên màn hình lớn */
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }

    .container {
        display: flex; /* Bố cục 2 cột */
    }

    .info-section {
        flex: 0 0 360px; /* Chiều rộng cố định 400px */
        border-right: 1px solid var(--border-color);
        padding: 40px;
    }
    
    .calendar-section {
        flex: 1; /* Chiếm phần không gian còn lại */
        padding: 40px;
    }

    .clinic-details {
    /* text-align: left; XÓA DÒNG NÀY ĐI */

    /* THÊM CÁC DÒNG SAU ĐỂ CĂN GIỮA BẰNG FLEXBOX */
    display: flex;
    flex-direction: column; /* Xếp các phần tử theo chiều dọc */
    align-items: center;   /* Căn giữa các phần tử theo chiều ngang */
}
    
    .schedule-menu-wrapper {
        margin-left: 0; /* Canh lề trái trên desktop */
    }

    .time-slots-list {
        /* Cột to hơn trên desktop */
        grid-template-columns: repeat(2, 1fr); 
        gap: 12px;
		 /* === BẮT ĐẦU PHẦN THÊM MỚI === */
    max-height: 560px; /* Giới hạn chiều cao (tương đương 9 hàng x 2 cột = 18 slot) */
    overflow-y: auto;  /* Tự động hiện thanh cuộn dọc khi nội dung vượt quá chiều cao */
    padding-right: 10px; /* Tạo một khoảng trống nhỏ cho thanh cuộn */
    /* === KẾT THÚC PHẦN THÊM MỚI === */
    }

    .time-slot {
        padding: 12px;
        font-size: 1rem;
    }
}