@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');
 .fullContainer {
	 display: flex;
	 flex-direction: column;
	 /* align-items: center; */
	 justify-content: center;
	 /* padding: 20px 40px; */
	 background: rgb(255, 255, 255);
	 font-family: 'Roboto', sans-serif;
}

  .fc-other-month{
    background-color: rgb(255, 243, 243);
  }

  .fc-past{
    background-color: rgb(234, 255, 248);
  }

  .fc-day-header{
    background-color: rgb(255, 118, 118) ;
  }

 .customCalendar .fc-view-container {
	 border-radius: 10px;
	 overflow: hidden;
}

.fc-ltr .fc-dayGrid-view .fc-day-top .fc-day-number{
  float: none !important;
}

 .customCalendar .fc-event {
	 border-radius: 10px;
	 padding: 2px;
	 margin: 2px;
}



.customCalendar .fc-event .fc-content .fc-title p{
  font-size: 12px;
  margin-left: 5px;
}
th{
  padding-top: 0.2rem !important;
  padding-bottom: 0.2rem !important;
  font-size: medium;
  background-color: rgb(255, 118, 118);
  color: white !important;
  text-shadow: 9px solid black;
  font-weight: 600;
}

@media screen and (max-width: 425px) {
  .fullContainer {
    padding: 0 0 !important;
 }
  th{
    font-size: small !important;
    padding-top: 0.2rem !important;
    padding-bottom: 0.2rem !important;
    color: white !important;

  }
  .customCalendar .fc-event {
    border-radius: 5px;
    padding: 0 !important;
    margin: 0 !important;
    font-size: auto !important;
 }
 .customCalendar .fc-event .fc-content .fc-title p{
  font-size: auto !important;
  margin-left: 2px !important;
  }
  .fc-content-skeleton .fc-day-top .fc-day-number{
    text-align: center !important;
  }
  .fc-content-skeleton{
    padding-bottom: 3rem !important;
  }
  .fc-toolbar {
    display: flex;
    flex-wrap: wrap;
  }

  .fc-right .fc-button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    width: 100%; /* Đảm bảo nhóm nút chiếm toàn bộ chiều rộng */
  }

  .fc-right .fc-button-group .fc-button {
    flex: 1 1 22%; /* Đảm bảo mỗi nút chiếm khoảng 22% chiều rộng và co giãn được */
    padding: 5px !important; /* Giảm padding để phù hợp với màn hình nhỏ */
    font-size: 12.5px !important; /* Giảm kích thước chữ */
    min-width: 95px; /* Đặt độ rộng tối thiểu để nút không bị nhỏ quá */
  }

  .fc-left {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .fc-button-group {
    display: flex;
    flex: 1; /* Giúp nhóm nút prev và next chiếm không gian */
  }

  .fc-prev-button {
    margin-right: 10px; /* Khoảng cách giữa nút prev và các phần tử khác */
  }

  .fc-next-button {
    margin-left: 10px; /* Khoảng cách giữa nút next và các phần tử khác */
  }

  .fc-today-button {
    flex: 1; /* Căn giữa */
    text-align: center; /* Căn giữa chữ trong nút */
  }

  .fc-center {
    width: 100%; /* Đảm bảo phần trung tâm chiếm hết chiều rộng */
    text-align: center;
    margin-bottom: 5px; /* Khoảng cách dưới */
  }

  .fc-widget-content .fc-scroller{
    overflow: none !important;
    height: auto !important;
  }
}




@media screen and (max-width: 768px) {
  .fullContainer {
    padding: 0 0 !important;
 }
  th{
    font-size: small !important;
    padding-top: 0.2rem !important;
    padding-bottom: 0.2rem !important;
    color: white !important;

  }
  .customCalendar .fc-event {
    border-radius: 10px;
    padding: 0 !important;
    margin: 0 !important;
    font-size: auto !important;
 }
 .customCalendar .fc-event .fc-content .fc-title p{
  font-size: auto !important;
  }
}



@media screen and (max-width: 375px) {
  .fc-right .fc-button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    width: 100%; /* Đảm bảo nhóm nút chiếm toàn bộ chiều rộng */
  }

  .fc-right .fc-button-group .fc-button {
    flex: 1 1 22%; /* Đảm bảo mỗi nút chiếm khoảng 22% chiều rộng và co giãn được */
    padding: 5px !important; /* Giảm padding để phù hợp với màn hình nhỏ */
    font-size: 12px !important; /* Giảm kích thước chữ */
    min-width: 82px; /* Đặt độ rộng tối thiểu để nút không bị nhỏ quá */
  }
}

@media screen and (max-width: 320px) {
  .fc-right .fc-button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    width: 100%; /* Đảm bảo nhóm nút chiếm toàn bộ chiều rộng */
  }

  .fc-right .fc-button-group .fc-button {
    flex: 1 1 22%; /* Đảm bảo mỗi nút chiếm khoảng 22% chiều rộng và co giãn được */
    padding: 5px !important; /* Giảm padding để phù hợp với màn hình nhỏ */
    font-size: 11.5px !important; /* Giảm kích thước chữ */
    min-width: 68px; /* Đặt độ rộng tối thiểu để nút không bị nhỏ quá */
  }
}