/* ==========================================================================
	   1. KHU VỰC THANH ĐIỀU HƯỚNG (THÁNG / NĂM)
	   ========================================================================== */

	.calendar-controls { 
		display: flex; 
		justify-content: space-between; 
		align-items: center; 
		background: #fff; 
		padding: 15px; 
		font-family: Arial, sans-serif; 
	}

	.calendar-controls .btn-nav { 
		background: #fff; 
		border: 1px solid #dadce0; 
		color: #3c4043; 
		padding: 8px 16px; 
		border-radius: 4px; 
		cursor: pointer; 
		text-decoration: none; 
		font-size: 16px; 
		font-weight: 500; 
		white-space: nowrap;
	}

	.calendar-controls .btn-nav:hover { 
		background-color: #f1f3f4; 
	}

	.calendar-controls .select-box { 
		padding: 6px 10px; 
		border-radius: 4px; 
		border: 1px solid #dadce0; 
		font-size: 16px; 
		font-weight: bold; 
		color: #202124; 
		cursor: pointer; 
	}



	/* ==========================================================================
	   2. KHU VỰC LƯỚI LỊCH THÁNG (GRID) VÀ Ô NGÀY CỐ ĐỊNH
	   ========================================================================== */

	.calendar-container { 
		max-width: 100%; 
		border: 1px solid #ccc; 
		background: #fff; 
		overflow: hidden; 
		font-family: Arial, sans-serif; 
	}

	.calendar-header { 
		display: grid; 
		grid-template-columns: repeat(7, 1fr); 
		background-color: #f8f9fa; 
		text-align: center; 
		font-weight: bold; 
		border-bottom: 1px solid #dadce0; 
	}

	.calendar-header-item { 
		padding: 12px 0; 
		color: #5f6368; 
		font-size: 16px; 
	}

	.calendar-grid { 
		display: grid; 
		grid-template-columns: repeat(7, 1fr); 
	}

	/* Ô ngày chuẩn hóa chiều cao cố định để các hàng luôn đều nhau */
	.calendar-day { 
		min-height: 85px; 
		border-right: 1px solid #dadce0; 
		border-bottom: 1px solid #dadce0; 
		padding: 8px; 
		box-sizing: border-box; 
		cursor: pointer; 
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		transition: background 0.1s; 
	}

	.calendar-day:hover { 
		background-color: #f8f9fa; 
	}

	.calendar-day:nth-child(7n) { 
		border-right: none; 
	}

	.calendar-day.empty { 
		background-color: #f8f9fa; 
		cursor: default; 
	}
	
	/* --- Màu nền Phụng vụ (Áo lễ) --- */
	.calendar-day.mua-thuongnien {
		background-color: #e6f4ea; /* Xanh lá nhạt cho Mùa Thường Niên */
	}
	.calendar-day.mua-tim {
		background-color: #f3e5f5; /* Tím nhạt cho Mùa Chay / Mùa Vọng */
	}
	.calendar-day.mua-trang {
		background-color: #ffffff; /* Trắng cho Mùa Giáng Sinh / Mùa Phục Sinh / Lễ Trọng */
		border: 1px solid #dadce0;
	}
	.calendar-day.mua-do {
		background-color: #fce8e6; /* Đỏ nhạt cho Lễ Các Thánh Tử Đạo / Chúa Nhật Lễ Lá... */
	}

	/* --- Màu chữ của Thứ 7 và Chủ Nhật (Không bị ảnh hưởng bởi màu nền) --- */
	.calendar-day.sat .solar-date { color: #1a73e8 !important; font-weight: bold; } /* Chữ xanh dương */
	.calendar-day.sat .lunar-date { color: #4285f4 !important; }

	.calendar-day.sun .solar-date { color: #d93025 !important; font-weight: bold; } /* Chữ đỏ */
	.calendar-day.sun .lunar-date { color: #ea4335 !important; }
	/* --- Định hình màu chữ riêng biệt cho T7 & CN --- */

	/* Thứ 7: Chữ số dương và số âm đổi sang màu xanh dương (Nhẹ nhàng, dễ nhìn) */
	.calendar-day.sat .solar-date {
		color: #1a73e8 !important;
		font-weight: bold;
	}
	.calendar-day.sat .lunar-date {
		color: #4285f4 !important;
	}

	/* Chúa Nhật: Chữ số dương và số âm đổi hẳn sang màu đỏ nổi bật */
	.calendar-day.sun .solar-date {
		color: #d93025 !important;
		font-weight: bold;
	}
	.calendar-day.sun .lunar-date {
		color: #ea4335 !important;
	}
	/* Màu chữ đỏ dành cho ngày lễ Tết (Đồng bộ với màu Chủ Nhật) */
	.calendar-day.tet-holiday .solar-date { color: #d93025 !important; font-weight: bold; }
	.calendar-day.tet-holiday .lunar-date { color: #ea4335 !important; font-weight: bold; }

	/* ==========================================================================
	   3. ĐỊNH DẠNG SỐ NGÀY VÀ THANH BIỂU TƯỢNG XẾP HÀNG NGANG (ICON BAR)
	   ========================================================================== */

	.day-numbers { 
		display: flex; 
		justify-content: space-between; 
		pointer-events: none; 
	}

	.solar-date { 
		font-weight: bold; 
		font-size: 16px; 
		color: #3c4043; 
	}

	.lunar-date { 
		font-size: 11px; 
		color: #70757a; 
	}

	/* Thanh điều phối 4 icon dàn hàng ngang */
	.icon-bar {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 5px;
		padding-top: 2px;
		pointer-events: none;
	}

	/* Định vị cấu trúc ẩn/hiện cho từng icon dựa trên trạng thái active */
	.icon-item {
		font-size: 16px;
		visibility: hidden; /* Mặc định tàng hình để giữ chỗ thẳng hàng */
		opacity: 0.3;
	}

	/* Khi có sự kiện (được gán class active từ PHP), icon sẽ hiện rõ màu */
	.icon-item.active {
		visibility: visible;
		opacity: 1;
	}

	/* Làm nổi bật ngày hôm nay */
	.today { 
		background-color: #f4f9ff; 
		border: 2px solid #1a73e8 !important; 
	}

	.today .solar-date { 
		background: #1a73e8; 
		color: #fff; 
		width: 20px; 
		height: 20px; 
		display: inline-flex; 
		align-items: center; 
		justify-content: center; 
		border-radius: 50%; 
	}


	/* ==========================================================================
	   4. HỘP THOẠI POP-UP (MODAL) HIỂN THỊ NỘI DUNG CHI TIẾT
	   ========================================================================== */

	.modal-overlay { 
		display: none; 
		position: fixed; 
		top: 0; 
		left: 0; 
		width: 100%; 
		height: 100%; 
		background: rgba(0, 0, 0, 0.4); 
		z-index: 1000; 
		justify-content: center; 
		align-items: center; 
		font-family: Arial, sans-serif; 
	}

	.modal-box { 
		background: #fff; 
		width: 450px; 
		border-radius: 8px; 
		box-shadow: 0 4px 20px rgba(0,0,0,0.2); 
		overflow: hidden; 
		animation: fadeIn 0.2s ease-out; 
	}

	.modal-header { 
		background	: #FFE4B5; 
		color		: #8B4513; 
		padding		: 15px; 
		display		: flex; 
		justify-content: space-between; 
		align-items	: left; 
		font-weight	: 600; 
	}

	.modal-close { 
		font-size	: 24px; 
		cursor		: pointer; 
		background	: none; 
		border		: none; 
		color		: #8B4513; 
		line-height	: 1; 
	}

	.modal-body { 
		padding: 20px; 
		min-height: 150px; 
	}

	.modal-footer { 
		display: flex; 
		justify-content: space-between; 
		background: #f8f9fa; 
		padding: 12px 20px; 
		border-top: 1px solid #eee; 
	}

	.btn-modal { 
		padding: 8px 14px; 
		border: 1px solid #dadce0; 
		border-radius: 4px; 
		cursor: pointer; 
		background: white; 
		font-weight: bold; 
		font-size: 13px; 
	}

	.btn-modal:hover { 
		background: #f1f3f4; 
	}

	.modal-date-title { 
		font-size		: 18px; 
		font-weight		: 500; 
		text-align		: left;
		color			: #8B4513; 
		margin-bottom	: 5px; 
	}

	.modal-lunar-title { 
		font-size		: 13px; 
		color			: #5f6368;
		text-align		: left;		
		margin-bottom	: 15px; 
		border-bottom	: 1px solid #eee; 
		padding-bottom	: 10px; 
	}

	.modal-list-item { 
		margin-bottom: 8px; 
		padding: 8px 12px; 
		border-radius: 4px; 
		font-size: 16px; 
		font-weight: 500; 
	}

	@keyframes fadeIn { 
		from { opacity: 0; transform: scale(0.95); } 
		to { opacity: 1; transform: scale(1); } 
	}


	




	/* ==========================================================================
	   5. CẤU HÌNH TƯƠNG THÍCH CHO ĐIỆN THOẠI (MEDIA QUERY MOBILE)
	   ========================================================================== */
	@media (max-width: 768px) {
		.calendar-controls {
			padding: 10px;
			flex-wrap: wrap;
			gap: 10px;
			justify-content: center;
		}
		
		.calendar-controls .btn-nav {
			padding: 6px 10px;
			font-size: 16px;
			order: 2;
		}
		
		.calendar-controls form {
			width: 100%;
			justify-content: center;
			order: 1;
		}

		.calendar-controls .select-box {
			font-size: 18px;
			padding: 5px 8px;
		}

		.calendar-header-item {
			padding: 6px 0;
			font-size: 13px;
		}

		/* Thu hẹp chiều cao ô ngày trên điện thoại, đảm bảo vuông và đều hàng */
		.calendar-day {
			min-height: 68px;
			padding: 4px;
		}

		.solar-date {
			font-size: 15px;
		}

		.lunar-date {
			font-size: 9px;
		}

		/* Thu nhỏ kích thước biểu tượng trên màn hình điện thoại hẹp */
		.icon-item {
			font-size: 11px;
		}

		.modal-box {
			width: 92%;
			margin: 0 4%;
		}

		.modal-body {
			padding: 17px;
		}

		.modal-date-title {
			font-size: 18px;
		}
	}