/* Lịch chọn ngày (jQuery UI datepicker) theo bảng màu brand.css, thay giao diện "base" của jQuery UI 1.9 (nền xám, ô viền,
   ảnh sprite). Áp cho mọi lịch của trang quản trị; tiếng Việt và Thứ 2 đầu tuần ở /admin/js/datepicker-vi.js. */
.ui-datepicker.ui-widget {
  width: 288px;
  padding: 12px;
  border: 1px solid var(--tts-vien, #e4e9f0);
  border-radius: 12px;
  color: var(--tts-muc, #23334e);
  background: var(--tts-trang, #fff);
  box-shadow: 0 12px 32px rgba(35, 51, 78, 0.16);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
}
.ui-datepicker .ui-datepicker-header.ui-widget-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--tts-navy, #22356b);
}
.ui-datepicker .ui-datepicker-title { margin: 0; font-size: 15px; font-weight: 700; line-height: 36px; letter-spacing: .1px; }

/* Nút tháng trước / sau: ô tròn có mũi tên, bỏ ảnh sprite của jQuery UI */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  top: 2px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--tts-vien, #e4e9f0) !important;
  border-radius: 8px;
  background: var(--tts-trang, #fff) !important;
  color: var(--tts-muc, #23334e);
  cursor: pointer;
}
.ui-datepicker .ui-datepicker-prev { left: 0; }
.ui-datepicker .ui-datepicker-next { right: 0; }
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover { top: 2px; background: #edf4fa !important; color: var(--tts-xanh, #146db1); }
.ui-datepicker .ui-datepicker-prev-hover { left: 0; }
.ui-datepicker .ui-datepicker-next-hover { right: 0; }
.ui-datepicker .ui-datepicker-prev.ui-state-disabled,
.ui-datepicker .ui-datepicker-next.ui-state-disabled { opacity: .35; cursor: default; }
.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon { display: none; }
.ui-datepicker .ui-datepicker-prev::before,
.ui-datepicker .ui-datepicker-next::before {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 12px;
}
.ui-datepicker .ui-datepicker-prev::before { content: "\f053"; }
.ui-datepicker .ui-datepicker-next::before { content: "\f054"; }

/* Lưới ngày */
.ui-datepicker table.ui-datepicker-calendar { width: 100%; margin: 0; border-collapse: separate; border-spacing: 2px; font-size: 13px; }
.ui-datepicker .ui-datepicker-calendar th {
  padding: 4px 0 6px;
  border: 0;
  color: var(--tts-muc-nhat, #64748b);
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}
.ui-datepicker .ui-datepicker-calendar th span[title="Chủ nhật"] { color: var(--tts-do, #b91e23); }
.ui-datepicker .ui-datepicker-calendar td { padding: 0; border: 0; }
.ui-datepicker .ui-datepicker-calendar td a.ui-state-default,
.ui-datepicker .ui-datepicker-calendar td span.ui-state-default {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--tts-muc, #23334e);
  background: transparent;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: center;
  text-decoration: none;
}
.ui-datepicker .ui-datepicker-calendar td a.ui-state-default.ui-state-hover { border-color: transparent; color: var(--tts-navy, #22356b); background: #edf4fa; }
/* Hôm nay: viền vàng thương hiệu; ngày đang chọn: nền xanh đậm */
.ui-datepicker .ui-datepicker-calendar td a.ui-state-highlight { border-color: var(--tts-vang, #f8d114); color: var(--tts-navy, #22356b); background: #fff8d7; font-weight: 700; }
.ui-datepicker .ui-datepicker-calendar td a.ui-state-active,
.ui-datepicker .ui-datepicker-calendar td a.ui-state-active.ui-state-hover { border-color: var(--tts-navy, #22356b); color: #fff; background: var(--tts-navy, #22356b); font-weight: 700; }
/* Ngày của tháng trước/sau và ngày không chọn được (ví dụ sau hôm nay khi có maxDate) */
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-other-month a.ui-state-default { color: #a6b2c3; }
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-unselectable { opacity: 1; }
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-unselectable span.ui-state-default { color: #c4ccd8; background: transparent; }
.ui-datepicker .ui-datepicker-calendar td.ui-state-disabled { opacity: 1; }

/* Hàng nút (nếu màn hình bật showButtonPanel) */
.ui-datepicker .ui-datepicker-buttonpane { margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid var(--tts-vien, #e4e9f0); background: transparent; }
.ui-datepicker .ui-datepicker-buttonpane button { margin: 0 0 0 6px; padding: 5px 12px; border: 1px solid var(--tts-vien, #e4e9f0); border-radius: 7px; color: var(--tts-muc, #23334e); background: #fff; font-weight: 600; opacity: 1; }
.ui-datepicker .ui-datepicker-buttonpane button:hover { background: #edf4fa; }

@media (max-width: 575px) {
  .ui-datepicker.ui-widget { width: min(320px, calc(100vw - 24px)); }
  .ui-datepicker .ui-datepicker-calendar td a.ui-state-default,
  .ui-datepicker .ui-datepicker-calendar td span.ui-state-default { height: 38px; font-size: 14px; }
}

/* Ô ngày dùng chung (common/components/JqDatePicker.js): ô chữ dd/mm/yyyy, biểu tượng lịch bên phải, tuỳ chọn hiện thứ trong tuần.
   Trang nào bọc bằng lớp riêng (rv-date…) thì giữ CSS của trang đó. */
.jq-date { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.jq-date > label { margin: 0; }
.jq-date .jq-date-input { height: 40px; padding-right: 36px; border-radius: 8px; font-variant-numeric: tabular-nums; cursor: pointer; }
.jq-date .jq-date-input:disabled { cursor: wait; opacity: .6; }
.jq-date > .fa-calendar-alt { position: absolute; right: 12px; bottom: 12px; color: var(--tts-xanh, #146db1); pointer-events: none; }
.jq-date .jq-date-weekday { position: absolute; right: 34px; bottom: 11px; color: #6a7587; font-size: 13px; pointer-events: none; }
.jq-date:has(.jq-date-weekday) .jq-date-input { padding-right: 110px; }