/* Tùy chỉnh DateRangePicker cho hệ thống Publisher */

.daterangepicker {
  font-family: Arial, sans-serif;
  border-radius: 4px;
  border: 1px solid #ddd;
  box-shadow: 0 6px 12px rgba(0,0,0,0.175);
}

.daterangepicker .ranges li {
  color: #333;
  border-radius: 3px;
}

.daterangepicker .ranges li:hover {
  background-color: #f5f5f5;
}

.daterangepicker .ranges li.active {
  background-color: var(--color-main, #4285f4);
  color: #fff;
}

.daterangepicker td.active, 
.daterangepicker td.active:hover {
  background-color: var(--color-main, #4285f4);
}

.daterangepicker .btn-primary {
  background-color: var(--color-main, #4285f4);
  border-color: var(--color-main, #4285f4);
}

.daterangepicker .btn-primary:hover,
.daterangepicker .btn-primary:focus {
  background-color: var(--color-main-hover, #3367d6);
  border-color: var(--color-main-hover, #3367d6);
}

/* Container tùy chỉnh */
.daterangepicker-container {
  background: #fff; 
  cursor: pointer; 
  padding: 5px 10px; 
  border: 1px solid #ccc; 
  border-radius: 5px; 
  width: 100%; 
  max-width: 250px;
  display: inline-block;
}

.daterangepicker-container i.fa-calendar {
  margin-right: 5px;
}

.daterangepicker-container i.fa-caret-down {
  float: right;
  margin-top: 3px;
}

/* Responsive */
@media (max-width: 767px) {
  .daterangepicker {
    width: 100%;
    max-width: 300px;
  }
  
  .daterangepicker .ranges {
    float: none;
    margin: 0;
    width: 100%;
  }
  
  .daterangepicker .calendar {
    float: none;
    max-width: 100%;
  }
}