/* =================================================================
   XITO CALENDAR - Sanctuary Design System v3.0  [v1.3.0 CSS-Scoped]
   Tac gia: Fr. C. Acutis Vu Van Tan

   CSS SCOPING / NAMESPACE - v1.3.0
   TOAN BO selector trong file nay deu duoc boc boi:
   #xito-calendar-app-wrapper (outer wrapper cua shortcode)
   Ngoai le hop le: cac singleton position:fixed (popup overlay, avatar
   lightbox) phai attach vao body — co prefix xito- de tranh xung dot.
   ================================================================= */


/* ═══════════════════════════════════════════════════════════════════
   XITO CALENDAR — Sanctuary Design System v3.0
   Tác giả: Fr. C. Acutis Vũ Văn Tân
   
   Mục lục:
   1.  Design tokens (CSS variables)
   2.  Base & box-sizing
   3.  Layout gốc (.xito-app)
   4.  Header (sticky, 3 hàng)
   5.  Tab bar
   6.  Lịch tháng (month grid)
   7.  Ô ngày (day cells)
   8.  Calendar layout (2 pane)
   9.  Panel chi tiết ngày
   10. Khối accordion (sections)
   11. Danh sách thành viên
   12. Tab Khánh Niệm
   13. Tab Tưởng Niệm
   14. Ô tìm kiếm + dropdown
   15. Shared components
   16. Shortcode inline [xito_lich_ngay]
   17. Shortcode [xito_lich_thang] standalone
   18. Responsive
   19. Reduced motion
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Design Tokens ──────────────────────────────────────────── */
#xito-calendar-app-wrapper .xito-page {
  /* Màu nền & bề mặt */
  --xb: #FAFAF8;
  /* background chính — trắng kem ấm */
  --xs: #FFFFFF;
  /* surface (card, panel) */
  --xb2: #F4F1EC;
  /* background hover/muted */

  /* Viền */
  --xe: #E8E4DE;
  /* border thường */
  --xe2: #D4CFC8;
  /* border đậm hơn */

  /* Chữ */
  --xt: #1A1614;
  /* text chính */
  --xtm: #6B6460;
  /* text muted */
  --xtf: #A09690;
  /* text faint */

  /* Accent (xanh đan tu) */
  --xa: #2D5016;
  --xah: #3D6B20;
  --xal: #EDF4E8;
  /* accent light background */

  /* Màu phụng vụ */
  --cl-green: #4A7C3F;
  --cl-red: #B5251B;
  --cl-white: #C8B89A;
  --cl-purple: #5C3670;
  --cl-rose: #A03060;
  --cl-black: #2A2620;

  /* Màu mùa phụng vụ (nền badge NĂM A/B/C) */
  --season-advent: #5C3670;
  --season-christmas: #C8A830;
  --season-lent: #5C3670;
  --season-triduum: #2A2620;
  --season-easter: #C8A830;
  --season-ordinary: #4A7C3F;

  /* Màu today */
  --today-bg: #EDF4E8;
  --today-border: #4A7C3F;

  /* Typography scale */
  --fs-title: 2rem;
  /* 32px */
  --fs-subtitle: 1.375rem;
  /* 22px */
  --fs-feast: 1.375rem;
  /* 22px */
  --fs-date: 1.125rem;
  /* 18px */
  --fs-label: 0.9375rem;
  /* 15px */
  --fs-body: 1rem;
  /* 16px */
  --lh-body: 1.6;

  /* Layout padding (≈90% / 94% / 96% effective width) */
  --page-pad-x: 5%;

  /* Card */
  --card-pad: 26px;
  --card-gap: 24px;
  --card-radius: 20px;

  /* Spacing (8px grid) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --s12: 48px;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Shadow */
  --sh-xs: 0 1px 2px rgba(0, 0, 0, .04);
  --sh-sm: 0 2px 8px rgba(0, 0, 0, .06);
  --sh-md: 0 4px 16px rgba(0, 0, 0, .08);
  --sh-lg: 0 8px 24px rgba(0, 0, 0, .10);

  /* Transition */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 150ms;
  --dur-mid: 200ms;
  --dur-slow: 350ms;

  /* Header height (updated by JS after render) */
  --header-h: 148px;

  /* Màu Đan viện */
  --mon-ps: #5D4037;
  --mon-csnq: #2E7D32;
  --mon-csdd: #558B2F;
  --mon-pl: #1565C0;
  --mon-ct: #4527A0;
  --mon-tp: #00695C;
  --mon-pv: #D84315;
  --mon-ap: #AD1457;
  --mon-ftm: #6A1B9A;
  --mon-ph-hiep: #C62828;
  --mon-vp: #7B1FA2;
  --mon-ph: #0277BD;
  --mon-pt: #33691E;

  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--xt);
  background: var(--xb);
}

/* ── 2. Base & Page container ───────────────────────────────────── */
#xito-calendar-app-wrapper .xito-page *, #xito-calendar-app-wrapper .xito-page *::before, #xito-calendar-app-wrapper .xito-page *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#xito-calendar-app-wrapper .xito-page {
  width: 100%;
  padding-left: var(--page-pad-x);
  padding-right: var(--page-pad-x);
  position: relative;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: hidden;
  background-color: #fff4ec; /* YC3: nền tổng thể app — cam đào nhạt */
}

/* Typography */
#xito-calendar-app-wrapper .xito-title {
  font-size: var(--fs-title);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--xt);
  line-height: 1.2;
}

/* YC1: Tiêu đề ngày dương lịch — màu xanh gọi ý lịch phụng vụ */
#xito-calendar-app-wrapper .xito-title--sub {
  font-size: var(--fs-subtitle);
  font-weight: 700;
  line-height: 1.35;
  color: #7097a8;
}

/* YC1: Desktop — tăng 2px tiêu đề ngày cột phải (22px → 24px) */
@media (min-width: 768px) {
  #xito-calendar-app-wrapper .xito-app .xito-panel__head .xito-title--sub {
    font-size: 1.5rem;
    /* 24px = 22px + 2px */
  }
}

/* YC1: Dòng âm lịch bên dưới tiêu đề — thêm khoảng cách trên */
#xito-calendar-app-wrapper .xito-panel__head .xito-label {
  margin-top: 5px;
}

#xito-calendar-app-wrapper .xito-label {
  font-size: var(--fs-label);
  color: var(--xtm);
  line-height: 1.5;
}

#xito-calendar-app-wrapper .xito-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #d5d0c9;                        /* YC1: nền khu vực header */
  border-bottom: 1px solid var(--xe);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* YC1: đổ bóng nhẹ */
  padding: var(--s3) var(--s4);
  margin-bottom: var(--card-gap);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  /* YC1: Phá container — trải nền 100% chiều ngang vượt ra ngoài padding của .xito-page */
  margin-left: calc(-1 * var(--page-pad-x));
  margin-right: calc(-1 * var(--page-pad-x));
  padding-left: var(--page-pad-x);
  padding-right: var(--page-pad-x);
  border-radius: 0;       /* xóa bo góc nếu có */
  max-width: none;        /* gỡ giới hạn chiều rộng */
}

/* YC1: Ô input tìm kiếm giữ màu nền riêng, không kế thừa #d5d0c9 */
#xito-calendar-app-wrapper .xito-header .xito-search__input {
  background: var(--xs) !important; /* giữ trắng */
}

#xito-calendar-app-wrapper .xito-calendar-layout {
  display: flex;
  gap: var(--s3);
  align-items: stretch;
}

/* ── Layout 2 cột cố định cho [xito_lich] (bỏ tabs) ──────────────── */
#xito-calendar-app-wrapper .xito-main-layout {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  width: 100%;
}

/* Cột trái 40% — sticky theo header */
#xito-calendar-app-wrapper .xito-cal-pane {
  flex: 0 0 40%;
  min-width: 0;
  position: sticky;
  top: calc(var(--header-h) + var(--s3));
  align-self: flex-start;
}

/* Cột phải 60% — cuộn độc lập */
#xito-calendar-app-wrapper .xito-day-pane {
  flex: 1 1 60%;
  min-width: 0;
  max-height: calc(100vh - var(--header-h) - var(--s6) * 2);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--xe2) transparent;
}

/* Padding trên cho layout 2 cột */
#xito-calendar-app-wrapper .xito-main-layout {
  padding-top: var(--s4);
}

/* ── Danh sách phụ: Khánh Niệm + Tưởng Niệm (full-width, dưới lịch) ── */
#xito-calendar-app-wrapper .xito-secondary-lists {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap, 24px);
  width: 100%;
  margin-top: var(--s6);
}

#xito-calendar-app-wrapper .xito-secondary-list {
  width: 100%;
  min-width: 0;
}

#xito-calendar-app-wrapper .xito-secondary-list:empty {
  display: none;
}

/* Panel ngày trong app: full chiều ngang cột */
#xito-calendar-app-wrapper .xito-app .xito-day-pane .xito-panel__inner {
  max-width: none;
  margin: 0;
  min-height: 100%;
}

/* Lưới tháng compact trong [xito_lich] */
#xito-calendar-app-wrapper .xito-app .xito-cal-pane .xito-calendar__cell {
  min-height: 62px;
  max-height: 68px;
  padding: var(--s1) var(--s2);
}

/* YC2: Ẩn tên lễ/ghi chú trong ô lịch tháng — chỉ giữ số ngày + màu nền + dot */
#xito-calendar-app-wrapper .xito-app .xito-cal-pane .xito-calendar__name {
  display: none !important;
}

#xito-calendar-app-wrapper .xito-app .xito-cal-pane .xito-calendar__festival {
  font-size: .5625rem;
  -webkit-line-clamp: 1;
}

#xito-calendar-app-wrapper .xito-app .xito-cal-pane .xito-calendar__weekhead-cell {
  padding: var(--s1) var(--s2);
  font-size: .6875rem;
}

#xito-calendar-app-wrapper .xito-app .xito-cal-pane .xito-calendar__dot {
  width: 5px;
  height: 5px;
  margin-bottom: 2px;
}

/* ── 4. Header (sticky, 3 hàng) ─────────────────────────────────── */
#xito-calendar-app-wrapper .xito-header__row--brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}

#xito-calendar-app-wrapper .xito-brand {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

#xito-calendar-app-wrapper .xito-brand__icon {
  color: var(--xa);
  flex-shrink: 0;
  display: flex;
}

#xito-calendar-app-wrapper .xito-brand__text {
  display: none;
}

/* Badge NĂM A/B/C */
#xito-calendar-app-wrapper .xito-badge, #xito-calendar-app-wrapper .xito-year-badge {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  flex-shrink: 0;
  color: #fff;
  background: var(--season-ordinary);
}

/* Season overrides — target cả .xito-year-badge (legacy) và .xito-badge--year (Page Shell) */
#xito-calendar-app-wrapper .xito-badge--year.xito-season-advent, #xito-calendar-app-wrapper .xito-badge--year.xito-season-lent, #xito-calendar-app-wrapper .xito-year-badge.xito-season-advent, #xito-calendar-app-wrapper .xito-year-badge.xito-season-lent {
  background: var(--season-advent);
}

#xito-calendar-app-wrapper .xito-badge--year.xito-season-christmas, #xito-calendar-app-wrapper .xito-badge--year.xito-season-easter, #xito-calendar-app-wrapper .xito-year-badge.xito-season-christmas, #xito-calendar-app-wrapper .xito-year-badge.xito-season-easter {
  background: var(--season-easter);
  color: #3D2800;
}

#xito-calendar-app-wrapper .xito-badge--year.xito-season-ordinary, #xito-calendar-app-wrapper .xito-year-badge.xito-season-ordinary {
  background: var(--season-ordinary);
}

#xito-calendar-app-wrapper .xito-badge--year.xito-season-holy_triduum, #xito-calendar-app-wrapper .xito-badge--year.xito-season-triduum, #xito-calendar-app-wrapper .xito-year-badge.xito-season-holy_triduum, #xito-calendar-app-wrapper .xito-year-badge.xito-season-triduum {
  background: var(--season-triduum);
}

/* Hàng 2: Search */
#xito-calendar-app-wrapper .xito-header__row--search {
  display: flex;
}

#xito-calendar-app-wrapper .xito-search {
  position: relative;
  width: 100%;
}

#xito-calendar-app-wrapper .xito-search__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--xtm);
  pointer-events: none;
  display: flex;
}

#xito-calendar-app-wrapper .xito-search__input {
  width: 100%;
  height: 54px;
  padding: 0 44px 0 48px;
  border: 1px solid var(--xe);
  border-radius: var(--r-pill);
  background: var(--xb);
  font-size: var(--fs-body);
  font-family: inherit;
  color: var(--xt);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
  appearance: none;
  -webkit-appearance: none;
}

#xito-calendar-app-wrapper .xito-search__input:focus {
  border-color: var(--xa);
  box-shadow: 0 0 0 3px rgba(45, 80, 22, .1);
  background: var(--xs);
}

#xito-calendar-app-wrapper .xito-search__input::placeholder {
  color: var(--xtf);
}

/* Nút xoá */
#xito-calendar-app-wrapper .xito-search__clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  cursor: pointer;
  color: var(--xtm);
  font-size: .75rem;
  padding: 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  transition: background var(--dur-fast) var(--ease);
}

#xito-calendar-app-wrapper .xito-search__clear:hover {
  background: var(--xb2);
}

/* Toolbar + Buttons (Design System) */
#xito-calendar-app-wrapper .xito-toolbar, #xito-calendar-app-wrapper .xito-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  flex-wrap: wrap;
  width: 100%;
}

#xito-calendar-app-wrapper .xito-button, #xito-calendar-app-wrapper .xito-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--xe);
  border-radius: var(--r-md);
  background: var(--xs);
  font-size: var(--fs-label);
  font-family: inherit;
  font-weight: 600;
  color: var(--xt);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
  flex-shrink: 0;
}

#xito-calendar-app-wrapper .xito-button:hover, #xito-calendar-app-wrapper .xito-nav__btn:hover {
  background: var(--xb2);
  border-color: var(--xe2);
}

#xito-calendar-app-wrapper .xito-button--primary, #xito-calendar-app-wrapper .xito-nav-today {
  background: var(--xa);
  border-color: var(--xa);
  color: #fff;
}

#xito-calendar-app-wrapper .xito-button--primary:hover, #xito-calendar-app-wrapper .xito-nav-today:hover {
  background: var(--xah);
  border-color: var(--xah);
}

#xito-calendar-app-wrapper .xito-button--outline, #xito-calendar-app-wrapper .xito-nav__btn--outline {
  border-color: var(--xa);
  color: var(--xa);
}

#xito-calendar-app-wrapper .xito-button--outline:hover, #xito-calendar-app-wrapper .xito-nav__btn--outline:hover {
  background: var(--xal);
}

#xito-calendar-app-wrapper .xito-nav-prev, #xito-calendar-app-wrapper .xito-nav-next {
  padding: 0 12px;
}

#xito-calendar-app-wrapper .xito-toolbar__selects, #xito-calendar-app-wrapper .xito-nav__selects {
  display: flex;
  gap: var(--s2);
}

#xito-calendar-app-wrapper .xito-select {
  height: 44px;
  padding: 0 32px 0 14px;
  font-size: var(--fs-label);
  font-family: inherit;
  font-weight: 600;
  color: var(--xt);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--xe);
  border-radius: var(--r-md);
  background-color: var(--xs);
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B6460' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease);
}

#xito-calendar-app-wrapper .xito-select:focus {
  border-color: var(--xa);
}

/* Date picker input ẩn */
#xito-calendar-app-wrapper .xito-date-picker-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ── 5. Tab Bar ─────────────────────────────────────────────────── */
#xito-calendar-app-wrapper .xito-tabs {
  display: flex;
  border-bottom: 2px solid var(--xe);
  background: var(--xs);
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

#xito-calendar-app-wrapper .xito-tabs::-webkit-scrollbar {
  display: none;
}

#xito-calendar-app-wrapper .xito-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s5);
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  background: none;
  font-size: .875rem;
  font-family: inherit;
  font-weight: 500;
  color: var(--xtm);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
  outline: none;
  flex-shrink: 0;
}

#xito-calendar-app-wrapper .xito-tab-btn:hover {
  color: var(--xt);
}

#xito-calendar-app-wrapper .xito-tab-btn.is-active {
  color: var(--xa);
  border-bottom-color: var(--xa);
  font-weight: 700;
}

#xito-calendar-app-wrapper .xito-tab-btn:focus-visible {
  outline: 2px solid var(--xa);
  outline-offset: -2px;
}

#xito-calendar-app-wrapper .xito-tab-panels {
  padding-top: var(--s3);
}

#xito-calendar-app-wrapper .xito-tab-panel {
  display: block;
}

#xito-calendar-app-wrapper .xito-tab-panel[hidden] {
  display: none;
}

/* ── 6. Lịch Tháng (.xito-calendar) ─────────────────────────────── */
#xito-calendar-app-wrapper .xito-panel {
  width: 100%;
}

#xito-calendar-app-wrapper .xito-panel--month, #xito-calendar-app-wrapper .xito-panel--day {
  margin-bottom: var(--s4);
}

#xito-calendar-app-wrapper .xito-calendar {
  background: var(--xs);
  border: 1px solid var(--xe);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  width: 100%;
}

/* Header cột ngày trong tuần — nền xanh nhạt */
#xito-calendar-app-wrapper .xito-calendar__weekhead {
  grid-column: 1 / -1;
  /* ← span all 7 cols of parent grid */
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--xal);
  border-bottom: 1px solid var(--xe);
}

#xito-calendar-app-wrapper .xito-calendar__weekhead-cell {
  padding: var(--s2) var(--s3);
  text-align: center;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--xa);
}

#xito-calendar-app-wrapper .xito-calendar__weekhead-cell:first-child {
  color: var(--cl-red);
}

/* Lưới ô ngày */
#xito-calendar-app-wrapper .xito-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--xe);
  border-left: 1px solid var(--xe);
}

#xito-calendar-app-wrapper .xito-calendar__cell {
  border-right: 1px solid var(--xe);
  border-bottom: 1px solid var(--xe);
  height: 88px;
  min-height: 88px;
  max-height: 88px;
  padding: var(--s2) var(--s3);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: background var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
  border-left: 3px solid transparent;
}

#xito-calendar-app-wrapper .xito-calendar__cell:hover {
  background: var(--xb2);
}

#xito-calendar-app-wrapper .xito-calendar__cell.is-today {
  background: var(--today-bg);
  border-left-color: var(--today-border) !important;
}

#xito-calendar-app-wrapper .xito-calendar__cell.is-selected {
  background: #E8F0E4;
  outline: 2px solid var(--xa);
  outline-offset: -2px;
}

#xito-calendar-app-wrapper .xito-calendar__cell.is-outside {
  opacity: .45;
  cursor: default;
}

#xito-calendar-app-wrapper .xito-calendar__cell:focus-visible {
  outline: 2px solid var(--xa);
  outline-offset: -2px;
}

#xito-calendar-app-wrapper .xito-calendar__cell.xito-day-RED {
  border-left-color: var(--cl-red);
}

#xito-calendar-app-wrapper .xito-calendar__cell.xito-day-WHITE {
  border-left-color: var(--cl-white);
}

#xito-calendar-app-wrapper .xito-calendar__cell.xito-day-GREEN {
  border-left-color: var(--cl-green);
}

#xito-calendar-app-wrapper .xito-calendar__cell.xito-day-PURPLE {
  border-left-color: var(--cl-purple);
}

#xito-calendar-app-wrapper .xito-calendar__cell.xito-day-ROSE {
  border-left-color: var(--cl-rose);
}

#xito-calendar-app-wrapper .xito-calendar__cell.xito-day-BLACK {
  border-left-color: var(--cl-black);
}

/* CN cells = child 7n+2 vì child 1 = weekhead */
#xito-calendar-app-wrapper .xito-calendar__cell:nth-child(7n+2) .xito-calendar__solar {
  color: var(--cl-red);
}

#xito-calendar-app-wrapper .xito-calendar__cell-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2px;
  flex-shrink: 0;
}

#xito-calendar-app-wrapper .xito-calendar__solar {
  font-size: var(--fs-date);
  font-weight: 700;
  color: var(--xt);
  line-height: 1.1;
}

#xito-calendar-app-wrapper .xito-calendar__lunar {
  font-size: var(--fs-label);
  color: var(--xtf);
  line-height: 1.2;
  text-align: right;
}

#xito-calendar-app-wrapper .xito-calendar__dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-top: 2px;
  flex-shrink: 0;
  background: var(--xe2);
}

#xito-calendar-app-wrapper .xito-day-RED .xito-calendar__dot {
  background: var(--cl-red);
}

#xito-calendar-app-wrapper .xito-day-WHITE .xito-calendar__dot {
  background: var(--cl-white);
}

#xito-calendar-app-wrapper .xito-day-GREEN .xito-calendar__dot {
  background: var(--cl-green);
}

#xito-calendar-app-wrapper .xito-day-PURPLE .xito-calendar__dot {
  background: var(--cl-purple);
}

#xito-calendar-app-wrapper .xito-day-ROSE .xito-calendar__dot {
  background: var(--cl-rose);
}

#xito-calendar-app-wrapper .xito-day-BLACK .xito-calendar__dot {
  background: var(--cl-black);
}

#xito-calendar-app-wrapper .xito-calendar__name {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--xtm);
  flex: 1 1 auto;
  min-height: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

#xito-calendar-app-wrapper .xito-calendar__cell[data-rank="SOLEMNITY"] .xito-calendar__name, #xito-calendar-app-wrapper .xito-calendar__cell[data-rank="SUNDAY"] .xito-calendar__name, #xito-calendar-app-wrapper .xito-calendar__cell[data-rank="FEAST"] .xito-calendar__name {
  color: var(--xt);
}

#xito-calendar-app-wrapper .xito-calendar__cell[data-rank="SOLEMNITY"]:not(.is-today) {
  background: #FFF8F6;
}

#xito-calendar-app-wrapper .xito-calendar__festival {
  display: none;
}

#xito-calendar-app-wrapper .xito-calendar__member-flag {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #C8A830;
  box-shadow: 0 0 0 1px rgba(200, 168, 48, .3);
}

#xito-calendar-app-wrapper .xito-calendar.is-loading, #xito-calendar-app-wrapper .xito-panel.is-loading {
  opacity: .55;
  pointer-events: none;
}

/* ── 9. Panel & Card (chi tiết ngày) ───────────────────────────── */
#xito-calendar-app-wrapper .xito-card {
  background: var(--xs);
  border: 1px solid var(--xe);
  border-radius: var(--card-radius);
  box-shadow: var(--sh-sm);
  padding: var(--card-pad);
  transition: box-shadow var(--dur-fast) var(--ease);
}

#xito-calendar-app-wrapper .xito-card:hover {
  box-shadow: var(--sh-md);
}

#xito-calendar-app-wrapper .xito-card--panel {
  width: 100%;
  padding: 0;
  overflow: hidden;
}

#xito-calendar-app-wrapper .xito-panel__inner.xito-card--panel {
  animation: xito-fade-in var(--dur-mid) var(--ease) both;
}

#xito-calendar-app-wrapper .xito-panel__head {
  padding: var(--card-pad);
  border-bottom: 1px solid var(--xe);
  background: var(--xb);
}

#xito-calendar-app-wrapper .xito-panel__body {
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
}

#xito-calendar-app-wrapper .xito-panel__cols {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  width: 100%;
}

#xito-calendar-app-wrapper .xito-panel__col-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
}

#xito-calendar-app-wrapper .xito-panel__col-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

#xito-calendar-app-wrapper .xito-card--liturgy {
  border-left: 4px solid var(--xe);
  padding: var(--card-pad);
}

#xito-calendar-app-wrapper .xito-card--red {
  border-left-color: var(--cl-red);
}

#xito-calendar-app-wrapper .xito-card--white {
  border-left-color: var(--cl-white);
}

#xito-calendar-app-wrapper .xito-card--green {
  border-left-color: var(--cl-green);
}

#xito-calendar-app-wrapper .xito-card--purple {
  border-left-color: var(--cl-purple);
}

#xito-calendar-app-wrapper .xito-card--rose {
  border-left-color: var(--cl-rose);
}

#xito-calendar-app-wrapper .xito-card--black {
  border-left-color: var(--cl-black);
}

#xito-calendar-app-wrapper .xito-card__feast {
  font-size: var(--fs-feast);
  font-weight: 700;
  line-height: 1.35;
  color: var(--xt);
}

#xito-calendar-app-wrapper .xito-card__feast--highlight {
  color: var(--cl-red);
}

#xito-calendar-app-wrapper .xito-card__rank {
  display: inline-block !important;
  margin: 4px 0 6px 0 !important;
  font-weight: 600;
}

/* Thánh Tùy Chọn / Thánh bị át — dòng phụ ngay dưới tiêu đề lễ chính */
#xito-calendar-app-wrapper .xito-sub-saints {
  display: block !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: #555 !important;
  margin: 4px 0 8px 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
  word-break: break-word !important;
  white-space: normal !important;
}

/* Tiêu đề Lễ Trọng / Chúa Nhật — Màu Đỏ Đô nổi bật */
#xito-calendar-app-wrapper .xito-title--darkred,
#xito-calendar-app-wrapper .xito-card--solemnity .xito-card__feast,
#xito-calendar-app-wrapper .xito-card--sunday .xito-card__feast {
  color: #8B0000 !important;
}

/* Danh hiệu bold trong tiêu đề lễ (VD: <strong>Viện phụ</strong>, <strong>Tông Đồ</strong>) */
#xito-calendar-app-wrapper .xito-card__feast strong {
  font-weight: 700;
  text-transform: none; /* Giữ nguyên chữ hoa đầu, không ép IN HOA */
  font-style: inherit;
}

/* Legacy aliases (popup AJAX) */
#xito-calendar-app-wrapper .xito-day-static, #xito-calendar-app-wrapper .xito-day-inline {
  background: var(--xs);
  border: 1px solid var(--xe);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}

/* Static header */
#xito-calendar-app-wrapper .xito-static-hd {
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--xe);
  background: var(--xb);
}

#xito-calendar-app-wrapper .xito-static-hd__title {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--xtm);
  margin-bottom: var(--s1);
}

#xito-calendar-app-wrapper .xito-static-hd__icon {
  font-size: 1rem;
}

#xito-calendar-app-wrapper .xito-static-hd__date {
  font-size: 1rem;
  font-weight: 700;
  color: var(--xt);
  margin-bottom: 2px;
}

#xito-calendar-app-wrapper .xito-static-hd__lunar {
  font-size: .8125rem;
  color: var(--xtm);
}

#xito-calendar-app-wrapper .xito-static-hd__hr {
  border: none;
  border-top: 1px solid var(--xe);
  margin: var(--s3) 0 0;
}

/* Body nội dung */
#xito-calendar-app-wrapper .xito-static-body {
  padding: var(--s4) var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

#xito-calendar-app-wrapper .xito-static-body .xito-day__cols {
  width: 100%;
}

/* Popup inner (dùng khi mode=popup trong legacy shortcode) */
#xito-calendar-app-wrapper .xito-popup__header {
  display: flex;
  align-items: center;
  gap: 14px; /* Tăng khoảng thở giữa Badge và khối Ngày Tháng */
  padding: var(--s4) var(--s5);
  background: var(--xb);
  border-bottom: 1px solid var(--xe);
}

#xito-calendar-app-wrapper .xito-popup__badge {
  width: 52px;
  height: 62px;
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}

#xito-calendar-app-wrapper .xito-popup__badge--white {
  color: var(--xt);
}

#xito-calendar-app-wrapper .xito-badge__month {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .85;
}

#xito-calendar-app-wrapper .xito-badge__day {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
}

#xito-calendar-app-wrapper .xito-popup__heading {
  flex: 1;
  min-width: 0;
}

#xito-calendar-app-wrapper .xito-popup__heading h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--xt);
  line-height: 1.3;
}

#xito-calendar-app-wrapper .xito-popup__heading p {
  font-size: .8125rem;
  color: var(--xtm);
  margin-top: 2px;
}

#xito-calendar-app-wrapper .xito-popup__close {
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--xtm);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease);
}

#xito-calendar-app-wrapper .xito-popup__close:hover {
  background: var(--xb2);
}

#xito-calendar-app-wrapper .xito-popup__body {
  /* YC1: giữ padding trên/dưới, lề trái/phải = 2% */
  padding: var(--s4) 2% !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

/* 2-column layout panel ngày */
#xito-calendar-app-wrapper .xito-day__cols, #xito-calendar-app-wrapper .xito-panel__cols {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  width: 100%;
}

#xito-calendar-app-wrapper .xito-day__col-main, #xito-calendar-app-wrapper .xito-panel__col-main {
  flex: 1;
  min-width: 0;
}

#xito-calendar-app-wrapper .xito-day__col-side, #xito-calendar-app-wrapper .xito-panel__col-side {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  /* YC3: Nền màu xám xanh nhạt cho cột chi tiết bên phải */
  background-color: #ddded9;
  padding: 16px;
  border-radius: 8px;
}

/* ── 10. Info Card — Separate Cards (Bài đọc, Bổn mạng, Ngày giỗ…) ─ */
/* Khung Card chính - Tách biệt hoàn toàn */
#xito-calendar-app-wrapper .xito-info-card {
  background-color: #FFFBF2 !important;
  border: 1px solid #F0D8A8 !important;
  border-left: 4px solid #C58A00 !important;
  border-radius: 12px !important;
  padding: 20px 24px !important;
  margin-bottom: 24px !important;
  transition: all 0.3s ease !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#xito-calendar-app-wrapper .xito-panel__col-side>.xito-info-card:last-child, #xito-calendar-app-wrapper .xito-day__col-side>.xito-info-card:last-child {
  margin-bottom: 0 !important;
}

/* Hiệu ứng Hover */
#xito-calendar-app-wrapper .xito-info-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(197, 138, 0, 0.15) !important;
  border-color: #D6B97A !important;
  /* đổi màu border thường */
  border-left-color: #C58A00 !important;
  /* giữ thanh nhấn vàng bên trái */
}

#xito-calendar-app-wrapper .xito-info-card--deceased {
  border-left: 4px solid #6b3fa0 !important;
}

#xito-calendar-app-wrapper .xito-info-card--deceased:hover {
  border-left: 4px solid #6b3fa0 !important;
  box-shadow: 0 8px 24px rgba(107, 63, 160, 0.15) !important;
}

/* Tiêu đề Card */
#xito-calendar-app-wrapper .xito-info-card header h3 {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #9A6B00 !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
  line-height: 1.4 !important;
}

/* Khoảng cách Bài đọc Thánh Lễ */
#xito-calendar-app-wrapper .xito-panel__body--split {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: var(--card-pad) 0 !important;
}

#xito-calendar-app-wrapper .xito-panel__col-side>.xito-info-card {
  flex-shrink: 0;
}

#xito-calendar-app-wrapper .xito-card-body .xito-reading-line, #xito-calendar-app-wrapper div.xito-reading-line {
  font-size: 1.05rem !important;
  color: #4A4035 !important;
  line-height: 1.7 !important;
  margin-bottom: 6px !important;
  /* YC 3.2: giảm từ 14px xuống 6px để sát hơn */
  display: block !important;
}

#xito-calendar-app-wrapper .xito-card-body .xito-reading-line:last-child {
  margin-bottom: 0 !important;
}

#xito-calendar-app-wrapper .xito-reading-line--optional-centered {
  text-align: center;
}

/* YC 3.2: Label 'Bài Đọc' / 'Tin Mừng' in đậm, màu xám */
#xito-calendar-app-wrapper .xito-reading-label {
  font-weight: bold;
  color: #555;
}

#xito-calendar-app-wrapper .xito-card-body {
  font-size: 1rem;
  line-height: 1.8;
  color: #4A4035;
}

/* Danh sách cuộn dọc — YC1: nền phớt hồng, bo góc, thụt vào */
#xito-calendar-app-wrapper .xito-info-card ul {
  list-style: none !important;
  padding: 10px 10px 10px 25px !important;
  /* YC1: chừa 25px trái cho dấu bullet */
  margin: 0 !important;
  margin-top: 8px !important;
  /* YC1: cách tiêu đề một chút */
  max-height: 250px;
  overflow-y: auto;
  padding-right: 10px !important;
  scrollbar-width: thin;
  scrollbar-color: #F0D8A8 transparent;
  background-color: #f4f4f4;
  /* YC1: xám nhẹ */
  border-radius: 6px;
  /* YC1: bo góc mềm mại */
}

#xito-calendar-app-wrapper .xito-info-card ul::-webkit-scrollbar {
  width: 4px;
}

#xito-calendar-app-wrapper .xito-info-card ul::-webkit-scrollbar-thumb {
  background-color: #F0D8A8;
  border-radius: 4px;
}

#xito-calendar-app-wrapper .xito-info-card ul li {
  font-size: 1rem !important;
  color: #4A4035 !important;
  line-height: 1.5 !important;
  /* Giãn dòng cho tên dài xuống hàng vẫn thoáng */
  margin-top: 2px !important;
  margin-bottom: 8px !important;
  /* Giãn cách giữa các đan sĩ trong danh sách */
  padding-top: 0 !important;
  /* YC1: triệt tiêu padding bullet */
  padding-bottom: 0 !important;
  padding-left: 14px !important;
  position: relative !important;
}

#xito-calendar-app-wrapper .xito-info-card ul li:last-child {
  margin-bottom: 0 !important;
}

/* Bullet list */
#xito-calendar-app-wrapper .xito-info-card ul li::before {
  content: "•" !important;
  color: #9A6B00 !important;
  font-size: 1.2rem !important;
  position: absolute !important;
  left: 0 !important;
  top: -2px !important;
}

#xito-calendar-app-wrapper .xito-info-card ul li em {
  font-style: italic;
  font-weight: 600;
}

/* Mobile — tăng cỡ chữ danh sách Đan sĩ +1px và tràn Card sát lề */
@media (max-width: 767px) {
  #xito-calendar-app-wrapper .xito-info-card ul li {
    font-size: 13px !important;
  }

  /* Giảm lề trong của cột chi tiết bên phải để Card ra sát mép màn hình */
  #xito-calendar-app-wrapper .xito-panel__col-side, #xito-calendar-app-wrapper .xito-day__col-side, #xito-calendar-app-wrapper .xito-day-pane .xito-panel__col-side {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  /* Card bung rộng tối đa: bỏ lề trái/phải, mép chỉ cách 4px,
     GIỮ NGUYÊN viền vàng nâu bên trái, các viền còn lại mỏng 1px */
  #xito-calendar-app-wrapper .xito-info-card, #xito-calendar-app-wrapper .xito-card {
    padding: 10px 4px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-left: 4px solid #C58A00 !important;
    border-top-width: 1px !important;
    border-right-width: 1px !important;
    border-bottom-width: 1px !important;
  }

  /* Giữ màu viền trái đặc trưng của các card biến thể (không ép về vàng nâu) */
  #xito-calendar-app-wrapper .xito-info-card--deceased { border-left-color: #6b3fa0 !important; }
  #xito-calendar-app-wrapper .xito-info-card--monastery { border-left-color: #1565c0 !important; }
  #xito-calendar-app-wrapper .xito-info-card--order { border-left-color: #00695c !important; }

  /* Danh sách ngoài cùng: chỉ chừa 14px cho bullet — dóng cùng trục với
     tiêu đề nhóm đỏ (nằm trong <li> nhóm có padding-left:0). */
  #xito-calendar-app-wrapper .xito-info-card ul {
    padding-left: 14px !important;
    padding-right: 4px !important;
    margin-left: 0 !important;
  }

  /* Danh sách LỒNG (Hồng Ân Khấn Dòng / Linh Mục): KHÔNG thụt thêm lần nữa,
     để bullet thẳng hàng với tiêu đề nhóm đỏ phía trên. */
  #xito-calendar-app-wrapper .xito-info-card ul ul {
    padding-left: 0 !important;
    margin-left: 0 !important;
    background: transparent !important;
  }
}

/* ── 11. Accordion legacy (giữ cho tương thích popup cũ) ───────── */
#xito-calendar-app-wrapper .xito-section {
  border: 1px solid var(--xe);
  border-radius: var(--r-md);
  overflow: hidden;
}

#xito-calendar-app-wrapper .xito-section__toggle {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  padding: var(--s3) var(--s4);
  background: var(--xb);
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

#xito-calendar-app-wrapper .xito-section__toggle:hover {
  background: var(--xb2);
}

#xito-calendar-app-wrapper .xito-section__toggle h4 {
  flex: 1;
  font-size: .875rem;
  font-weight: 600;
  color: var(--xt);
}

#xito-calendar-app-wrapper .xito-section__chevron {
  color: var(--xtm);
  transition: transform var(--dur-mid) var(--ease);
  flex-shrink: 0;
}

#xito-calendar-app-wrapper .xito-section.is-open .xito-section__chevron {
  transform: rotate(180deg);
}

/* Grid-rows accordion animation */
#xito-calendar-app-wrapper .xito-section__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-mid) var(--ease);
}

#xito-calendar-app-wrapper .xito-section.is-open .xito-section__body {
  grid-template-rows: 1fr;
}

#xito-calendar-app-wrapper .xito-section__body>div {
  overflow: hidden;
  padding: 0 var(--s4) 0;
}

#xito-calendar-app-wrapper .xito-section.is-open .xito-section__body>div {
  padding-bottom: var(--s4);
}

/* Celebration card (Khối A) */
#xito-calendar-app-wrapper .xito-celebration-card {
  padding: var(--s4);
  border-radius: var(--r-md);
  border-left: 4px solid var(--xe);
  background: var(--xs);
}

#xito-calendar-app-wrapper .xito-celebration-card--red {
  border-left-color: var(--cl-red);
}

#xito-calendar-app-wrapper .xito-celebration-card--white {
  border-left-color: var(--cl-white);
}

#xito-calendar-app-wrapper .xito-celebration-card--green {
  border-left-color: var(--cl-green);
}

#xito-calendar-app-wrapper .xito-celebration-card--purple {
  border-left-color: var(--cl-purple);
}

#xito-calendar-app-wrapper .xito-celebration-card--rose {
  border-left-color: var(--cl-rose);
}

#xito-calendar-app-wrapper .xito-celebration-card--black {
  border-left-color: var(--cl-black);
}

#xito-calendar-app-wrapper .xito-celebration__name {
  font-family: 'Noto Serif', 'Palatino', Georgia, serif;
  font-size: var(--fs-feast);
  font-weight: 700;
  color: var(--xt);
  line-height: 1.35;
  margin-bottom: var(--s1);
}

#xito-calendar-app-wrapper .xito-celebration__name--highlight {
  color: var(--cl-red);
}

#xito-calendar-app-wrapper .xito-celebration__rank {
  display: inline-block;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--xtm);
  text-transform: uppercase;
  margin-bottom: var(--s2);
}

#xito-calendar-app-wrapper .xito-meta-row {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s2);
}

#xito-calendar-app-wrapper .xito-meta-text {
  font-size: .8125rem;
  color: var(--xtm);
}

#xito-calendar-app-wrapper .xito-color-gem {
  flex-shrink: 0;
}

#xito-calendar-app-wrapper .xito-transfer-note, #xito-calendar-app-wrapper .xito-vespers-note {
  font-size: .8125rem;
  color: var(--xtm);
  margin-top: var(--s2);
}

/* Bài đọc */
#xito-calendar-app-wrapper .xito-readings {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

#xito-calendar-app-wrapper .xito-reading-row {
  display: flex;
  gap: var(--s2);
  align-items: baseline;
  font-size: .875rem;
}

#xito-calendar-app-wrapper .xito-reading__label {
  font-weight: 600;
  color: var(--xtm);
  white-space: nowrap;
  font-size: .8125rem;
  min-width: 80px;
  flex-shrink: 0;
}

#xito-calendar-app-wrapper .xito-reading__ref {
  color: var(--xt);
}

#xito-calendar-app-wrapper .xito-section__header {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s3);
}

#xito-calendar-app-wrapper .xito-section__header h4 {
  font-size: .875rem;
  font-weight: 600;
  color: var(--xt);
  flex: 1;
}

#xito-calendar-app-wrapper .xito-icon {
  flex-shrink: 0;
  color: var(--xtm);
}

/* ── 11. Danh sách thành viên ───────────────────────────────────── */
#xito-calendar-app-wrapper .xito-mlist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#xito-calendar-app-wrapper .xito-mlist--scroll {
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--xe2) transparent;
  padding-right: 4px;
}

#xito-calendar-app-wrapper .xito-mlist li {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: .875rem;
  color: var(--xt);
  line-height: 1.35;
  margin-bottom: 0;
  /* YC2: loại bỏ khoảng cách, dòng sát nhau hoàn toàn */
}

#xito-calendar-app-wrapper .xito-mlist li em {
  font-style: italic;
  font-weight: normal;
}

#xito-calendar-app-wrapper .xito-mlist li b {
  font-weight: 700;
  font-style: normal;
}

/* YC3.3: Viết tắt Đan viện trong ngoặc — màu xám, nhỏ hơn */
#xito-calendar-app-wrapper .xito-monastery-abbr {
  font-size: .8em;
  color: #888;
  font-style: normal;
  font-weight: normal;
}

/* YC2: Mobile — giảm 2px font-size danh sách Đan sĩ */
@media (max-width: 767px) {
  #xito-calendar-app-wrapper .xito-mlist li {
    font-size: .8125rem;
    /* .875rem - 2px ≈ 13px */
  }
}

#xito-calendar-app-wrapper .xito-mlist__code {
  font-size: .75rem;
  color: var(--xtm);
}

#xito-calendar-app-wrapper .xito-mlist__meta {
  font-size: .75rem;
  color: var(--xa);
  font-weight: 500;
  flex-shrink: 0;
}

#xito-calendar-app-wrapper .xito-mlist__year {
  font-size: .8125rem;
  color: var(--xtm);
  font-weight: 600;
}

#xito-calendar-app-wrapper .xito-mlist__cross {
  color: var(--cl-black);
  font-size: .875rem;
}

#xito-calendar-app-wrapper .xito-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--xb2);
  font-size: .6875rem;
  font-weight: 700;
  color: var(--xtm);
}

/* ── 12. Tab Khánh Niệm ─────────────────────────────────────────── */
#xito-calendar-app-wrapper .xito-tab-intro {
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
  padding: var(--s5);
  border: 1px solid var(--xe);
  border-radius: var(--r-lg);
  background: var(--xs);
  box-shadow: var(--sh-xs);
  margin-bottom: var(--s5);
}

#xito-calendar-app-wrapper .xito-tab-intro__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--xal);
  color: var(--xa);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#xito-calendar-app-wrapper .xito-tab-intro__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--xt);
  margin-bottom: 4px;
}

#xito-calendar-app-wrapper .xito-tab-intro__sub {
  font-size: .875rem;
  color: var(--xtm);
}

#xito-calendar-app-wrapper .xito-jub-group {
  margin-bottom: var(--s6);
}

#xito-calendar-app-wrapper .xito-jub-group__hd {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--xe);
}

#xito-calendar-app-wrapper .xito-jub-group__title {
  font-size: .9375rem;
  font-weight: 700;
  color: var(--xt);
  flex: 1;
}

/* Cards khánh niệm */
#xito-calendar-app-wrapper .xito-jub-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s3);
}

#xito-calendar-app-wrapper .xito-jub-card {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--xs);
  border: 1px solid var(--xe);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  transition: box-shadow var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

#xito-calendar-app-wrapper .xito-jub-card:hover {
  box-shadow: var(--sh-sm);
  border-color: var(--xe2);
}

#xito-calendar-app-wrapper .xito-jub-card__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8125rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: .02em;
}

#xito-calendar-app-wrapper .xito-jub-card__name {
  font-size: .875rem;
  font-weight: 600;
  color: var(--xt);
  line-height: 1.3;
  margin-bottom: 3px;
}

#xito-calendar-app-wrapper .xito-jub-card__name em {
  font-style: normal;
}

#xito-calendar-app-wrapper .xito-jub-card__meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .75rem;
}

#xito-calendar-app-wrapper .xito-jub-card__mon {
  font-weight: 600;
}

#xito-calendar-app-wrapper .xito-jub-card__sep {
  color: var(--xtf);
}

#xito-calendar-app-wrapper .xito-jub-card__date {
  color: var(--xtm);
}

#xito-calendar-app-wrapper .xito-jub-extra[hidden] {
  display: none;
}

#xito-calendar-app-wrapper .xito-show-more-btn {
  margin-top: var(--s3);
  padding: 6px 14px;
  border: 1px dashed var(--xe2);
  border-radius: var(--r-md);
  background: none;
  font-size: .8125rem;
  font-family: inherit;
  font-weight: 500;
  color: var(--xa);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
  display: block;
  width: 100%;
  text-align: center;
}

#xito-calendar-app-wrapper .xito-show-more-btn:hover {
  background: var(--xal);
}

#xito-calendar-app-wrapper .xito-tab-empty {
  padding: var(--s10);
  text-align: center;
  color: var(--xtm);
  font-size: .9375rem;
}

/* ── 13. Tab Tưởng Niệm ─────────────────────────────────────────── */

/* YÊU CẦU 1: Override màu Tab Button Tưởng Niệm khi active */
#xito-calendar-app-wrapper #xito-tbtn-memorial.is-active, #xito-calendar-app-wrapper .xito-app #xito-tbtn-memorial.is-active {
  background: #470e75 !important;
  color: #ffffff !important;
  border-bottom-color: #470e75 !important;
  box-shadow: 0 2px 8px rgba(71, 14, 117, .35) !important;
}

/* YÊU CẦU 2: Header Tưởng Niệm — nền tím đậm, chữ trắng */
#xito-calendar-app-wrapper .xito-memorial-tab .xito-tab-intro {
  background: #470e75;
  border-color: #470e75;
  box-shadow: 0 4px 16px rgba(71, 14, 117, .3);
}

#xito-calendar-app-wrapper .xito-memorial-tab .xito-tab-intro__icon {
  background: rgba(255, 255, 255, .18);
  color: #ffffff;
}

#xito-calendar-app-wrapper .xito-memorial-tab .xito-tab-intro__title {
  color: #ffffff;
}

/* Subtitle tăng 2px (từ .875rem = 14px lên ~16px) */
#xito-calendar-app-wrapper .xito-memorial-tab .xito-tab-intro__sub {
  color: rgba(255, 255, 255, .88);
  font-size: 1rem;
}

/* Tên tháng trong subtitle: vàng + đậm */
#xito-calendar-app-wrapper .xito-memorial-tab .xito-tab-intro__sub .memorial-month-highlight {
  color: #ffd700;
  font-weight: 700;
}

/* YÊU CẦU 3: Container danh sách — nền tím nhạt, viền kép */
#xito-calendar-app-wrapper .xito-memorial-month {
  margin-bottom: var(--s6);
}

#xito-calendar-app-wrapper .xito-memorial-month__hd {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s4);
  padding-bottom: var(--s2);
  border-bottom: 2px solid #470e75;
}

#xito-calendar-app-wrapper .xito-memorial-month__name {
  font-size: .9375rem;
  font-weight: 700;
  color: #470e75;
  flex: 1;
}

/* Container bọc danh sách: nền tím nhạt + viền kép */
#xito-calendar-app-wrapper .xito-memorial-list {
  list-style: none;
  background: #e9dbf7;
  border: 4px double #470e75;
  padding: 20px;
  border-radius: 8px;
  /* CSS Columns: 2 cột với đường chỉ giữa */
  column-count: 2;
  column-gap: 40px;
  column-rule: 1px solid #470e75;
}

/* YÊU CẦU 3 cont.: font tăng 2px; break-inside để tránh đứt dòng */
#xito-calendar-app-wrapper .xito-memorial-row {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 7px var(--s3);
  border-radius: var(--r-sm);
  font-size: .9375rem;
  /* tăng từ .875rem (14px) lên .9375rem (15px) */
  transition: background var(--dur-fast) var(--ease);
  break-inside: avoid;
  /* tránh đứt dòng giữa 2 cột */
  -webkit-column-break-inside: avoid;
}

#xito-calendar-app-wrapper .xito-memorial-row:hover {
  background: rgba(71, 14, 117, .08);
}

#xito-calendar-app-wrapper .xito-memorial-row__day {
  width: 24px;
  text-align: center;
  font-weight: 700;
  font-size: .9375rem;
  color: #470e75;
  flex-shrink: 0;
}

/* YÊU CẦU 1: Icon Thánh giá — to hơn, đậm hơn, dãn ra tí */
#xito-calendar-app-wrapper .xito-cross-icon {
  font-size: 1.15em;
  font-weight: bold;
  color: #470e75;
  margin-right: 5px;
  flex-shrink: 0;
  line-height: 1;
}

#xito-calendar-app-wrapper .xito-memorial-row__name {
  flex: 1;
  color: var(--xt);
  min-width: 0;
}

/* YÊU CẦU 1 & 4: religious_name in nghiêng (<i>), full_name in đậm (<b>/<strong>) */
#xito-calendar-app-wrapper .xito-memorial-row__name i, #xito-calendar-app-wrapper .xito-memorial-row__name em {
  font-style: italic;
  font-weight: normal;
}

#xito-calendar-app-wrapper .xito-memorial-row__name b, #xito-calendar-app-wrapper .xito-memorial-row__name strong {
  font-weight: 700;
  font-style: normal;
}

/* Meta block: viết tắt ĐV + số năm giỗ — nằm bên phải */
#xito-calendar-app-wrapper .xito-memorial-row__meta {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  white-space: nowrap;
}

#xito-calendar-app-wrapper .xito-memorial-row__abbr {
  font-size: .75rem;
  font-weight: 700;
  flex-shrink: 0;
}

#xito-calendar-app-wrapper .xito-memorial-row__year {
  font-size: .75rem;
  color: var(--xtm);
  flex-shrink: 0;
}

/* Cần giữ lại class cũ phòng trường hợp có cách dùng khác */
#xito-calendar-app-wrapper .xito-memorial-row__mon {
  font-size: .75rem;
  font-weight: 600;
  flex-shrink: 0;
}

#xito-calendar-app-wrapper .xito-memorial-row__cross {
  color: #470e75;
  font-size: .9375rem;
  flex-shrink: 0;
}

/* Mobile: 1 cột */
@media (max-width: 767px) {
  #xito-calendar-app-wrapper .xito-memorial-list {
    column-count: 1;
    column-rule: none;
  }
}

/* ── 14. Search dropdown ─────────────────────────────────────────── */
#xito-calendar-app-wrapper .xito-search__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--xs);
  border: 1px solid var(--xe);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  /* Nổi đè lên mọi nội dung phía dưới (kể cả danh sách Khánh niệm/Tưởng niệm).
     KHÔNG đẩy layout: position absolute + z-index cao. */
  z-index: 9999;
  overflow: hidden;
  max-height: 480px;
  overflow-y: auto;
  scrollbar-width: thin;
}

#xito-calendar-app-wrapper .xito-search__dropdown[hidden] {
  display: none;
}

#xito-calendar-app-wrapper .xito-search__group {}

#xito-calendar-app-wrapper .xito-search__group-label {
  display: block;
  padding: 10px var(--s4) 6px;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--xtf);
  border-top: 1px solid var(--xe);
}

#xito-calendar-app-wrapper .xito-search__group:first-child .xito-search__group-label {
  border-top: none;
}

#xito-calendar-app-wrapper .xito-search__item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 10px var(--s4);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}

#xito-calendar-app-wrapper .xito-search__item:hover, #xito-calendar-app-wrapper .xito-search__item.is-focused {
  background: var(--xb2);
}

#xito-calendar-app-wrapper .xito-search__item-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: .875rem;
}

#xito-calendar-app-wrapper .xito-search__item-icon--feast {
  background: #FFF0EE;
  color: var(--cl-red);
}

#xito-calendar-app-wrapper .xito-search__item-icon--member {
  background: var(--xal);
  color: var(--xa);
}

#xito-calendar-app-wrapper .xito-search__item-icon--deceased {
  background: #F0EFF5;
  color: var(--cl-black);
}

#xito-calendar-app-wrapper .xito-search__item-text {
  flex: 1;
  min-width: 0;
}

#xito-calendar-app-wrapper .xito-search__item-name {
  font-size: .875rem;
  font-weight: 600;
  color: var(--xt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#xito-calendar-app-wrapper .xito-search__item-name em {
  font-style: normal;
}

#xito-calendar-app-wrapper .xito-search__item-sub {
  font-size: .75rem;
  color: var(--xtm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#xito-calendar-app-wrapper .xito-search__item-arrow {
  color: var(--xtf);
  font-size: .875rem;
  flex-shrink: 0;
}

/* Trạng thái loading/empty search */
#xito-calendar-app-wrapper .xito-search__status {
  padding: var(--s4);
  text-align: center;
  font-size: .875rem;
  color: var(--xtm);
}

/* ── Danh thiếp Đan sĩ (Profile Card) — LUỒNG 2 ────────────────── */
#xito-calendar-app-wrapper .xito-search__group--cards {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#xito-calendar-app-wrapper .xito-search__group--cards .xito-search__group-label {
  padding: 4px 6px 2px;
}

#xito-calendar-app-wrapper .xito-profile-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  padding: 14px;
  background: #FFF8E1;
  border: 1px solid #EFE3B8;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(60, 44, 12, .16);
}

#xito-calendar-app-wrapper .xito-profile-card__avatar {
  position: relative;
  flex-shrink: 0;
  width: 64px !important;
  height: 64px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 8px !important;
  border: 3px solid #7B1FA2;
  overflow: hidden;
  background: #F0EFF5;
}

#xito-calendar-app-wrapper .xito-profile-card__avatar-wrapper {
  position: relative;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  cursor: zoom-in;
  outline: none;
}

#xito-calendar-app-wrapper .xito-profile-card__avatar-wrapper:focus-visible {
  border-radius: 10px;
  box-shadow: 0 0 0 3px rgba(123, 31, 162, .35);
}

#xito-calendar-app-wrapper .xito-profile-card__avatar-img {
  width: 64px !important;
  height: 64px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  display: block;
  transition: transform .3s ease-in-out;
}

#xito-calendar-app-wrapper .xito-profile-card__avatar-wrapper:hover .xito-profile-card__avatar-img {
  transform: scale(1.8);
}

#xito-calendar-app-wrapper .xito-profile-card__avatar-initials {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: .02em;
}

#xito-calendar-app-wrapper .xito-profile-card__avatar.is-fallback .xito-profile-card__avatar-initials {
  display: flex;
}

#xito-calendar-app-wrapper .xito-profile-card__body {
  flex: 1;
  min-width: 0;
}

#xito-calendar-app-wrapper .xito-profile-card__name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0D47A1;
  line-height: 1.25;
}

#xito-calendar-app-wrapper .xito-profile-card__name em {
  font-style: normal;
}

#xito-calendar-app-wrapper .xito-profile-card__monastery {
  margin-top: 2px;
  font-size: .8125rem;
  font-style: italic;
  color: #8D6E63;
}

#xito-calendar-app-wrapper .xito-profile-card__lines {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  color: #5D4037;
  font-size: .9375rem;
  line-height: 1.55;
}

#xito-calendar-app-wrapper .xito-profile-card__lines li {
  margin: 0;
}

#xito-calendar-app-wrapper .xito-profile-card__lines strong {
  font-weight: 700;
  color: #5D4037;
}

#xito-calendar-app-wrapper .xito-profile-card__jubilee {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed #E0CFA0;
}

#xito-calendar-app-wrapper .xito-profile-card__jubilee-title {
  font-weight: 700;
  color: #B7791F;
  font-size: .9375rem;
}

#xito-calendar-app-wrapper .xito-profile-card__jubilee-list {
  margin: 6px 0 0;
  padding-left: 18px;
  color: #5D4037;
  font-size: .875rem;
  line-height: 1.5;
}

/* Biến thể tưởng niệm (người đã khuất). */
#xito-calendar-app-wrapper .xito-profile-card--deceased {
  background: #FDFBF7;
  border-color: #E4DED4;
}

#xito-calendar-app-wrapper .xito-profile-card--deceased .xito-profile-card__name {
  color: #37474F;
}

#xito-calendar-app-wrapper .xito-profile-card--deceased .xito-profile-card__avatar-initials {
  font-size: 2rem;
}

#xito-calendar-app-wrapper .xito-avatar-lightbox {
  position: fixed;
  z-index: 100000;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 16, 24, .78);
  cursor: zoom-out;
}

#xito-calendar-app-wrapper .xito-avatar-lightbox__dialog {
  position: relative;
  max-width: min(90vw, 900px);
  max-height: 90vh;
  cursor: default;
}

#xito-calendar-app-wrapper .xito-avatar-lightbox__dialog img {
  display: block;
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .42);
}

#xito-calendar-app-wrapper .xito-avatar-lightbox__close {
  position: absolute;
  z-index: 1;
  top: -12px;
  right: -12px;
  width: 32px;
  height: 32px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #24202a;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 480px) {
  #xito-calendar-app-wrapper .xito-profile-card {
    gap: 12px;
    padding: 12px;
  }

  #xito-calendar-app-wrapper .xito-profile-card__avatar {
    width: 64px !important;
    height: 64px !important;
  }

  #xito-calendar-app-wrapper .xito-profile-card__name {
    font-size: 1rem;
  }
}

/* ── 15. Shared components ──────────────────────────────────────── */
#xito-calendar-app-wrapper .xito-notice {
  padding: var(--s4) var(--s5);
  border: 1px solid var(--xe);
  border-radius: var(--r-md);
  background: var(--xb);
  color: var(--xtm);
  font-size: .875rem;
}

#xito-calendar-app-wrapper .xito-notice--error {
  border-color: #F5C6C3;
  background: #FFF5F5;
  color: #8B1A1A;
}

/* Overlay popup (dùng cho [xito_lich_thang] standalone) */
#xito-calendar-app-wrapper .xito-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 22, 20, .5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s4);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease);
}

#xito-calendar-app-wrapper .xito-popup-overlay.is-open {
  opacity: 1;
}

#xito-calendar-app-wrapper .xito-popup-overlay[hidden] {
  display: none;
}

#xito-calendar-app-wrapper .xito-popup {
  /* Nền tổng thể phủ toàn bộ popup — đồng bộ nền app (cam đào nhạt) */
  background: var(--xs);
  background-color: #fff4ec !important;
  /* YC2: bo góc mềm mại cho khối nền tổng thể.
     overflow-y:auto sẵn có đã clip nội dung theo góc bo (không dùng
     overflow:hidden để tránh mất cuộn dọc khi nội dung dài). */
  border-radius: 12px !important;
  box-shadow: var(--sh-lg);
  /* YC1: Popup trải rộng full width, đồng bộ giao diện chính */
  width: 95%;
  max-width: 1100px;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(8px);
  transition: transform var(--dur-mid) var(--ease);
}

#xito-calendar-app-wrapper .xito-popup-overlay.is-open .xito-popup {
  transform: translateY(0);
}

/* Loading spinner */
#xito-calendar-app-wrapper .xito-popup-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}

#xito-calendar-app-wrapper .xito-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid var(--xe);
  border-top-color: var(--xa);
  border-radius: 50%;
  animation: xito-spin .7s linear infinite;
}

/* Panel loading */
#xito-calendar-app-wrapper .xito-day-pane.is-loading, #xito-calendar-app-wrapper .xito-cal-pane.is-loading, #xito-calendar-app-wrapper .xito-panel.is-loading {
  opacity: .55;
  pointer-events: none;
}

@keyframes xito-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes xito-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── 18. Responsive ─────────────────────────────────────────────── */

@media (max-width: 1023px) {
  #xito-calendar-app-wrapper .xito-page {
    --page-pad-x: 3%;
  }

  #xito-calendar-app-wrapper .xito-info-card {
    padding: 16px 20px !important;
  }
}

@media (max-width: 767px) {
  #xito-calendar-app-wrapper .xito-page {
    --page-pad-x: 2%;
  }
}

@media (min-width: 768px) {
  #xito-calendar-app-wrapper .xito-header {
    padding: var(--s4) var(--s6);
    gap: var(--s3);
  }

  #xito-calendar-app-wrapper .xito-calendar__cell {
    height: 96px;
    min-height: 96px;
    max-height: 96px;
  }

  #xito-calendar-app-wrapper .xito-app .xito-cal-pane .xito-calendar__cell {
    height: 58px;
    min-height: 58px;
    max-height: 58px;
  }
}

@media (min-width: 1024px) {
  #xito-calendar-app-wrapper .xito-calendar__cell {
    height: 104px;
    min-height: 104px;
    max-height: 104px;
  }

  #xito-calendar-app-wrapper .xito-app .xito-cal-pane .xito-calendar__cell {
    height: 68px;
    min-height: 68px;
    max-height: 68px;
  }

  #xito-calendar-app-wrapper .xito-cal-pane {
    flex: 0 0 40%;
  }

  #xito-calendar-app-wrapper .xito-day-pane {
    flex: 1 1 60%;
  }

  #xito-calendar-app-wrapper .xito-jub-cards {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }

  /* Layout cột bên trong panel popup/standalone (KHÔNG áp dụng cho .xito-day-pane)
     Khi .xito-day-pane đã chiếm 60% rồi, nội dung trong đó luôn ưu tiên 1 cột dọc. */
  #xito-calendar-app-wrapper :not(.xito-day-pane)>.xito-panel__cols, #xito-calendar-app-wrapper :not(.xito-day-pane)>.xito-day__cols {
    flex-direction: row;
    align-items: flex-start;
  }

  #xito-calendar-app-wrapper :not(.xito-day-pane)>.xito-panel__cols>.xito-panel__col-main, #xito-calendar-app-wrapper :not(.xito-day-pane)>.xito-day__cols>.xito-day__col-main {
    flex: 0 0 40%;
  }

  #xito-calendar-app-wrapper :not(.xito-day-pane)>.xito-panel__cols>.xito-panel__col-side, #xito-calendar-app-wrapper :not(.xito-day-pane)>.xito-day__cols>.xito-day__col-side {
    flex: 1 1 60%;
  }
}

/* ══════════════════════════════════════════════════════════════════
   OVERRIDE: Buộc toàn bộ nội dung trong .xito-day-pane (cột 60%)
   luôn là 1 CỘT DỌC DUY NHẤT — triệt tiêu flex-row của layout cũ.
   Áp dụng mọi breakpoint, không điều kiện.
   ══════════════════════════════════════════════════════════════════ */

/* Bản thân cột 60% là flex column */
#xito-calendar-app-wrapper .xito-day-pane {
  display: block !important;
  /* dùng block thay flex để tránh conflict với overflow-y */
}

/* Wrapper xito-panel__body--split: reset về transparent, no-padding */
#xito-calendar-app-wrapper .xito-day-pane .xito-panel__body--split {
  display: block !important;
  padding: 0 !important;
}

/* xito-panel__cols — gốc của bug: ép thành 1 cột dọc */
#xito-calendar-app-wrapper .xito-day-pane .xito-panel__cols {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  /* margin-bottom của .xito-info-card lo khoảng cách */
  width: 100% !important;
}

/* Hai cột con col-main và col-side: mỗi cái chiếm 100% chiều ngang */
#xito-calendar-app-wrapper .xito-day-pane .xito-panel__col-main, #xito-calendar-app-wrapper .xito-day-pane .xito-panel__col-side {
  flex: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Đảm bảo .xito-card--liturgy (Card Lễ Chính) full width */
#xito-calendar-app-wrapper .xito-day-pane .xito-card--liturgy {
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 24px !important;
}

/* Đảm bảo mọi .xito-info-card full width */
#xito-calendar-app-wrapper .xito-day-pane .xito-info-card {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ══════════════════════════════════════════════════════════════════
   OVERRIDE POPUP (MODAL CHI TIẾT NGÀY) — YC2 + YC3
   Chỉ áp dụng bên trong .xito-popup: ép nội dung ngày thành 1 CỘT DỌC
   trải từ trên xuống dưới. KHÔNG chạm .xito-day-pane (Lịch Mini của app),
   nên layout 2 cột khi xem bình thường (không qua popup) giữ nguyên.
   ══════════════════════════════════════════════════════════════════ */

/* Nền #fff4ec phủ đồng bộ toàn bộ popup: header + body trong suốt để lộ nền container */
#xito-calendar-app-wrapper .xito-popup .xito-popup__header, #xito-calendar-app-wrapper .xito-popup .xito-popup__body {
  background: transparent !important;
  background-color: transparent !important;
}

/* YC2: Triệt tiêu flex-row (2 cột) từ media-query :not(.xito-day-pane) */
#xito-calendar-app-wrapper .xito-popup .xito-panel__cols, #xito-calendar-app-wrapper .xito-popup .xito-day__cols {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: 100% !important;
}

/* YC2: Hai cột con chiếm trọn chiều ngang, xếp block dọc */
#xito-calendar-app-wrapper .xito-popup .xito-panel__col-main, #xito-calendar-app-wrapper .xito-popup .xito-panel__col-side, #xito-calendar-app-wrapper .xito-popup .xito-day__col-main, #xito-calendar-app-wrapper .xito-popup .xito-day__col-side {
  display: block !important;
  flex: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* YC3(cũ)+YC1: Khối thông tin chính (Ngày, Tên lễ) — nền + viền để
   không bị trong suốt nhìn thấu lịch bên dưới; giãn cách với Card phụ. */
#xito-calendar-app-wrapper .xito-popup .xito-panel__col-main, #xito-calendar-app-wrapper .xito-popup .xito-day__col-main {
  margin-bottom: 20px !important;
  background-color: #d3e7f0 !important;
  padding: 16px !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  /* viền theo màu phụng vụ (accent đan tu làm mặc định) */
  border: 1.5px solid var(--xa, #999) !important;
}

/* YC1: viền khối chính khớp đúng màu phụng vụ của ngày (nếu trình duyệt hỗ trợ :has) */
#xito-calendar-app-wrapper .xito-popup .xito-panel__col-main:has(.xito-card--red) { border-color: var(--cl-red, #b5251b) !important; }
#xito-calendar-app-wrapper .xito-popup .xito-panel__col-main:has(.xito-card--green) { border-color: var(--cl-green, #4a7c3f) !important; }
#xito-calendar-app-wrapper .xito-popup .xito-panel__col-main:has(.xito-card--purple) { border-color: var(--cl-purple, #5c3670) !important; }
#xito-calendar-app-wrapper .xito-popup .xito-panel__col-main:has(.xito-card--rose) { border-color: var(--cl-rose, #a03060) !important; }
#xito-calendar-app-wrapper .xito-popup .xito-panel__col-main:has(.xito-card--white) { border-color: var(--cl-white, #c8b89a) !important; }
#xito-calendar-app-wrapper .xito-popup .xito-panel__col-main:has(.xito-card--black) { border-color: var(--cl-black, #2a2620) !important; }

/* Card chính & card phụ full width trong popup */
#xito-calendar-app-wrapper .xito-popup .xito-card--liturgy, #xito-calendar-app-wrapper .xito-popup .xito-info-card {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}


@media (min-width: 1440px) {
  #xito-calendar-app-wrapper .xito-calendar__cell {
    height: 110px;
    min-height: 110px;
    max-height: 110px;

  }

  #xito-calendar-app-wrapper .xito-app .xito-cal-pane .xito-calendar__cell {
    height: 72px;
    min-height: 72px;
    max-height: 72px;
  }

  #xito-calendar-app-wrapper .xito-header {
    padding: var(--s4) var(--s8);
  }
}

/* Mobile <768px: 1 cột, panel dưới lịch */
@media (max-width: 767px) {

  #xito-calendar-app-wrapper .xito-calendar-layout, #xito-calendar-app-wrapper .xito-main-layout {
    flex-direction: column;
  }

  #xito-calendar-app-wrapper .xito-cal-pane, #xito-calendar-app-wrapper .xito-day-pane {
    flex: none;
    width: 100%;
    position: static;
    max-height: none;
    overflow: visible;
  }

  #xito-calendar-app-wrapper .xito-calendar__cell {
    height: 72px;
    min-height: 72px;
    max-height: 72px;
    padding: var(--s1) var(--s1);
  }

  #xito-calendar-app-wrapper .xito-calendar__name {
    font-size: 10px;
    line-height: 1.15;
    -webkit-line-clamp: 2;
  }

  #xito-calendar-app-wrapper .xito-info-card {
    padding: 16px 18px !important;
    margin-bottom: 20px !important;
    border-radius: 12px !important;
  }

  #xito-calendar-app-wrapper .xito-info-card header h3 {
    font-size: 1.125rem !important;
  }

  #xito-calendar-app-wrapper .xito-title {
    font-size: 1.375rem;
  }

  #xito-calendar-app-wrapper .xito-toolbar, #xito-calendar-app-wrapper .xito-nav {
    flex-wrap: wrap;
    justify-content: center;
  }

  #xito-calendar-app-wrapper .xito-tab-btn span {
    display: none;
  }

  #xito-calendar-app-wrapper .xito-tab-btn {
    padding: var(--s3);
  }

  #xito-calendar-app-wrapper .xito-jub-cards {
    grid-template-columns: 1fr;
  }

  #xito-calendar-app-wrapper .xito-day__cols {
    flex-direction: column;
  }
}

/* Tablet 768–1023px: 1 cột, lịch trên — chi tiết dưới */
@media (min-width: 768px) and (max-width: 1023px) {

  #xito-calendar-app-wrapper .xito-calendar-layout, #xito-calendar-app-wrapper .xito-main-layout {
    flex-direction: column;
  }

  #xito-calendar-app-wrapper .xito-cal-pane, #xito-calendar-app-wrapper .xito-day-pane {
    flex: none;
    width: 100%;
    position: static;
    max-height: none;
    overflow: visible;
  }
}

/* ── 19. Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

  #xito-calendar-app-wrapper .xito-app *, #xito-calendar-app-wrapper .xito-app *::before, #xito-calendar-app-wrapper .xito-app *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   XITÔ WEB-APP v3 — Header calligraphy · 4 Tabs · Nav theo Tab
   (Khối này đặt cuối file để thắng cascade các rule cũ.)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Header: căn giữa toàn bộ ─────────────────────────────────────── */
#xito-calendar-app-wrapper .xito-app .xito-header {
  align-items: center;
  text-align: center;
  gap: var(--s3);
}

#xito-calendar-app-wrapper .xito-header__brand {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Tiêu đề lớn — font calligraphy cổ kính, trang trọng */
#xito-calendar-app-wrapper .xito-app .xito-title {
  font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 4.2vw, 2.9rem);
  letter-spacing: .02em;
  line-height: 1.15;
  text-align: center;
  color: #3A2A16;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
  margin: 0 auto;
  padding: 2px 0 6px;
  position: relative;
}

#xito-calendar-app-wrapper :root[data-theme="dark"] .xito-app .xito-title, #xito-calendar-app-wrapper .xito-app .xito-title {}

/* YC2: Desktop — giảm thêm 1px (tổng cộng -3px so với gốc) */
@media (min-width: 768px) {
  #xito-calendar-app-wrapper .xito-app .xito-title {
    font-size: clamp(1.3125rem, 3.8vw, 2.6875rem); /* clamp(1.375, 3.9, 2.75) - 1px */
  }
}

/* Gạch trang trí dưới tiêu đề */
#xito-calendar-app-wrapper .xito-app .xito-title::after {
  content: "";
  display: block;
  width: min(240px, 60%);
  height: 2px;
  margin: 8px auto 0;
  background: linear-gradient(90deg, transparent, #B8912E 20%, #8A6D1E 50%, #B8912E 80%, transparent);
  border-radius: 2px;
}

/* Search — căn giữa, rộng full có giới hạn */
#xito-calendar-app-wrapper .xito-header__search {
  width: 100%;
  display: flex;
  justify-content: center;
}

#xito-calendar-app-wrapper .xito-header__search .xito-search {
  width: 100%;
  max-width: 720px;
}

/* ── Tabs Pill — căn giữa, cuộn ngang trên mobile ─────────────────── */
#xito-calendar-app-wrapper .xito-tabs-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 4px 0 var(--s4);
}

#xito-calendar-app-wrapper .xito-app .xito-tabs {
  display: inline-flex;
  gap: var(--s2);
  border-bottom: none;
  background: var(--xb2);
  padding: 5px;
  border-radius: var(--r-pill);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .05);
}

#xito-calendar-app-wrapper .xito-app .xito-tabs::-webkit-scrollbar {
  display: none;
}

#xito-calendar-app-wrapper .xito-app .xito-tab-btn {
  border: none;
  border-bottom: none;
  margin-bottom: 0;
  padding: 9px 22px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: .01em;
  color: var(--xtm);
  background: transparent;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

#xito-calendar-app-wrapper .xito-app .xito-tab-btn:hover {
  color: var(--xt);
  background: rgba(0, 0, 0, .04);
}

#xito-calendar-app-wrapper .xito-app .xito-tab-btn.is-active {
  color: #fff;
  background: var(--xa);
  box-shadow: 0 2px 8px rgba(45, 80, 22, .28);
}

#xito-calendar-app-wrapper .xito-app .xito-tab-btn:focus-visible {
  outline: 2px solid var(--xa);
  outline-offset: 2px;
}

/* ── Nav wrap: mỗi Tab một biến thể ───────────────────────────────── */
#xito-calendar-app-wrapper .xito-navwrap {
  width: 100%;
  margin-bottom: var(--s5);
}

#xito-calendar-app-wrapper .xito-nav {
  flex-wrap: wrap;
}

#xito-calendar-app-wrapper .xito-nav[hidden] {
  display: none !important;
}

/* A. Nav Lịch — 2 hàng dọc, căn giữa */
#xito-calendar-app-wrapper .xito-nav--calendar {
  flex-direction: column;
  gap: var(--s3);
}

#xito-calendar-app-wrapper .xito-nav__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  flex-wrap: wrap;
  width: 100%;
}

/* Nút Năm Phụng Vụ A/B/C — chữ nhật bo góc, nổi bật. YC1: đổi sang đỏ đô */
#xito-calendar-app-wrapper .xito-lityear {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 7px 20px;
  border-radius: var(--r-md);
  color: #fff;
  background: #8f1c16;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
  min-width: 116px;
  transition: all 0.3s ease;
}

#xito-calendar-app-wrapper .xito-lityear:hover {
  background: #a3221b;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

#xito-calendar-app-wrapper .xito-lityear__cap {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .12em;
  opacity: .9;
  margin-bottom: 2px;
}

#xito-calendar-app-wrapper .xito-lityear__val {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: .04em;
}

/* YC1: Season overrides — mùa đặc biệt vẫn giữ màu riêng */
#xito-calendar-app-wrapper .xito-lityear.xito-season-advent, #xito-calendar-app-wrapper .xito-lityear.xito-season-lent {
  background: var(--season-advent);
}

#xito-calendar-app-wrapper .xito-lityear.xito-season-christmas, #xito-calendar-app-wrapper .xito-lityear.xito-season-easter {
  background: var(--season-easter);
  color: #3D2800;
}

#xito-calendar-app-wrapper .xito-lityear.xito-season-ordinary {
  background: #8f1c16;
}

/* đỏ đô cho TN */
#xito-calendar-app-wrapper .xito-lityear.xito-season-holy_triduum, #xito-calendar-app-wrapper .xito-lityear.xito-season-triduum {
  background: var(--season-triduum);
}

/* YC1: Nút Hôm nay — đổi sang đỏ đô.
   Áp dụng cả trong App (.xito-app) và shortcode Lịch Tháng (.xito-page--month). */
#xito-calendar-app-wrapper .xito-app .xito-button--today, #xito-calendar-app-wrapper .xito-page--month .xito-button--today {
  background: #8f1c16;
  border-color: #8f1c16;
  color: #fff;
  height: 46px;
  padding: 0 20px;
  border-radius: var(--r-md);
  font-weight: 700;
  transition: all 0.3s ease;
}

#xito-calendar-app-wrapper .xito-app .xito-button--today:hover, #xito-calendar-app-wrapper .xito-page--month .xito-button--today:hover {
  background: #a3221b;
  border-color: #a3221b;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

/* Thanh điều hướng trong shortcode Lịch Tháng: căn giữa, giãn cách với danh
   sách bên dưới, lề 3% khớp với các hàng List View. Scope riêng .xito-page--month
   nên KHÔNG ảnh hưởng thanh điều hướng của App (Lịch Mini). */
#xito-calendar-app-wrapper .xito-page--month .xito-navwrap {
  margin-bottom: 20px;
  padding-left: 3%;
  padding-right: 3%;
  box-sizing: border-box;
}

/* Tháng trước / Tháng sau — text link */
#xito-calendar-app-wrapper .xito-monthlink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--xa);
  font-family: inherit;
  font-weight: 700;
  font-size: var(--fs-label);
  padding: 8px 6px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

#xito-calendar-app-wrapper .xito-monthlink:hover {
  background: var(--xal);
  color: var(--xah);
}

#xito-calendar-app-wrapper .xito-monthlink svg {
  width: 16px;
  height: 16px;
}

#xito-calendar-app-wrapper .xito-select--year {
  min-width: 104px;
  text-align: center;
}

#xito-calendar-app-wrapper .xito-select--wide {
  min-width: 200px;
}

/* B/C. Nav lọc (Hồng Ân / Tưởng Niệm) */
#xito-calendar-app-wrapper .xito-nav__row--filters {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--s4);
  flex-wrap: wrap;
}

#xito-calendar-app-wrapper .xito-field {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

#xito-calendar-app-wrapper .xito-field__lbl {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--xtf);
  padding-left: 2px;
}

/* ── Panels + hiển thị theo Tab ───────────────────────────────────── */
#xito-calendar-app-wrapper .xito-panels {
  width: 100%;
}

#xito-calendar-app-wrapper .xito-tab-panel {
  display: block;
}

#xito-calendar-app-wrapper .xito-tab-panel[hidden], #xito-calendar-app-wrapper .xito-tab-panel:not(.is-active) {
  display: none;
}

#xito-calendar-app-wrapper .xito-tab-panel.is-active {
  display: block;
}

#xito-calendar-app-wrapper .xito-panel-body {
  width: 100%;
}

/* ── Tab Quy Tắc ──────────────────────────────────────────────────── */
#xito-calendar-app-wrapper .xito-rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--card-gap);
  align-items: start;
}

#xito-calendar-app-wrapper .xito-rules .xito-tab-intro {
  grid-column: 1 / -1;
}

#xito-calendar-app-wrapper .xito-rule-card {
  background: var(--xs);
  border: 1px solid var(--xe);
  border-left: 4px solid var(--xa);
  border-radius: var(--r-md);
  padding: var(--s5);
  box-shadow: var(--sh-md);
}

#xito-calendar-app-wrapper .xito-rule-card__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #3A2A16;
  margin: 0 0 var(--s3);
}

#xito-calendar-app-wrapper .xito-rule-card__list {
  margin: 0;
  padding-left: 20px;
  color: #5D4037;
  font-size: .9375rem;
  line-height: 1.7;
}

#xito-calendar-app-wrapper .xito-rule-card__list li {
  margin-bottom: 6px;
}

#xito-calendar-app-wrapper .xito-rule-card__list strong {
  color: #4A2E12;
}

/* ── RESPONSIVE (đặt cuối cùng để thắng media query cũ) ────────────── */
@media (max-width: 767px) {
  #xito-calendar-app-wrapper .xito-app .xito-title {
    font-size: clamp(1.25rem, 6vw, 1.75rem);
  }

  #xito-calendar-app-wrapper .xito-header__search .xito-search {
    max-width: 100%;
  }

  #xito-calendar-app-wrapper .xito-tabs-wrap {
    justify-content: flex-start;
  }

  #xito-calendar-app-wrapper .xito-app .xito-tabs {
    width: 100%;
    justify-content: flex-start;
  }

  #xito-calendar-app-wrapper .xito-app .xito-tab-btn {
    padding: 9px 16px;
    font-size: .875rem;
  }

  #xito-calendar-app-wrapper .xito-nav__row {
    gap: var(--s2);
  }

  #xito-calendar-app-wrapper .xito-nav__row--filters {
    gap: var(--s3);
  }

  #xito-calendar-app-wrapper .xito-field {
    flex: 1 1 44%;
  }

  #xito-calendar-app-wrapper .xito-field .xito-select {
    width: 100%;
  }

  #xito-calendar-app-wrapper .xito-select--wide {
    min-width: 0;
  }

  #xito-calendar-app-wrapper .xito-lityear {
    min-width: 0;
    padding: 6px 16px;
  }

  #xito-calendar-app-wrapper .xito-main-layout {
    flex-direction: column;
  }

  #xito-calendar-app-wrapper .xito-app .xito-cal-pane {
    position: static;
    flex: 1 1 auto;
    width: 100%;
  }

  #xito-calendar-app-wrapper .xito-app .xito-day-pane {
    max-height: none;
  }
}

@media (min-width: 768px) {
  #xito-calendar-app-wrapper .xito-navwrap {
    display: flex;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   TAB QUY TẮC — Hybrid: thẻ tóm tắt + Toàn Văn (A4)
   ═══════════════════════════════════════════════════════════════════ */
#xito-calendar-app-wrapper .xito-rules-wrapper {
  width: 100%;
}

#xito-calendar-app-wrapper .xito-rules-header {
  text-align: center;
  margin-bottom: 20px;
}

#xito-calendar-app-wrapper .xito-rules-header h2 {
  font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  color: #2A4B35;
  margin: 0 0 6px;
}

#xito-calendar-app-wrapper .xito-rules-header p {
  color: var(--xtm);
  margin: 0;
}

#xito-calendar-app-wrapper .xito-rules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

/* Ghi đè hoàn toàn .xito-rule-card cũ */
#xito-calendar-app-wrapper .xito-rule-card {
  background: #ffffff;
  border: none;
  border-left: 5px solid #2A4B35;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

#xito-calendar-app-wrapper .xito-rule-card h3 {
  font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  color: #2A4B35;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 12px;
}

#xito-calendar-app-wrapper .xito-rule-card ul {
  margin: 0;
  padding-left: 18px;
  line-height: 1.6;
  color: #4A3B30;
}

#xito-calendar-app-wrapper .xito-rule-card ul li {
  margin-bottom: 6px;
}

/* Nút Toggle Toàn Văn */
#xito-calendar-app-wrapper .xito-toggle-btn {
  margin: 0 auto;
  display: block;
  padding: 10px 24px;
  border-radius: 99px;
  background-color: #2A4B35;
  color: #ffffff;
  border: none;
  cursor: pointer;
  font-weight: bold;
  font-family: inherit;
  font-size: .95rem;
  transition: all 0.3s;
}

#xito-calendar-app-wrapper .xito-toggle-btn:hover {
  background-color: #3B6249;
  box-shadow: 0 4px 12px rgba(42, 75, 53, .3);
}

#xito-calendar-app-wrapper .xito-toggle-btn:focus-visible {
  outline: 2px solid #2A4B35;
  outline-offset: 3px;
}

/* Toàn Văn — dàn trang như tờ A4 */
#xito-calendar-app-wrapper .xito-document-page {
  background: #ffffff;
  max-width: 900px;
  margin: 30px auto 0;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  line-height: 1.7;
  color: #333333;
}

#xito-calendar-app-wrapper .xito-document-page h2, #xito-calendar-app-wrapper .xito-document-page h3 {
  font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  color: #2A4B35;
}

#xito-calendar-app-wrapper .xito-document-page h2 {
  font-size: 1.5rem;
}

#xito-calendar-app-wrapper .xito-document-page h3 {
  font-size: 1.2rem;
  margin-top: 28px;
  margin-bottom: 10px;
}

#xito-calendar-app-wrapper .xito-document-page p {
  margin: 0 0 12px;
}

#xito-calendar-app-wrapper .xito-document-page ul, #xito-calendar-app-wrapper .xito-document-page ol {
  padding-left: 24px;
  margin: 0 0 14px;
}

#xito-calendar-app-wrapper .xito-document-page li {
  margin-bottom: 8px;
}

#xito-calendar-app-wrapper .xito-document-page ul ul {
  margin-top: 8px;
}

/* Đóng/mở */
#xito-calendar-app-wrapper .xito-hidden-content {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

#xito-calendar-app-wrapper .xito-hidden-content.is-expanded {
  display: block;
  opacity: 1;
}

@media (max-width: 767px) {
  #xito-calendar-app-wrapper .xito-document-page {
    padding: 22px;
  }

  #xito-calendar-app-wrapper .xito-rules-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   TAB HỒNG ÂN — Danh sách Đan sĩ: lưới tối đa 2 cột + avatar chân dung
   (Đặt cuối file để thắng các rule .xito-jub-* cũ.)
   ═══════════════════════════════════════════════════════════════════ */
#xito-calendar-app-wrapper .xito-jub-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

#xito-calendar-app-wrapper .xito-jub-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 14px 18px;
  height: 100%;
  background: var(--xs);
  border: 1px solid var(--xe);
  border-radius: var(--r-md);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
}

/* Avatar chân dung tròn (không dùng chữ cái đầu) */
#xito-calendar-app-wrapper img.xito-jub-card__avatar {
  width: 60px;
  height: 60px;
  min-width: 60px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 2px solid #7B1FA2;
  /* mặc định viền tím; ghi đè theo màu Đan viện qua inline style */
  background: #F0EFF5;
  flex-shrink: 0;
  padding: 0;
  display: block;
}

#xito-calendar-app-wrapper .xito-jub-card__body {
  min-width: 0;
  flex: 1;
}

#xito-calendar-app-wrapper .xito-jub-card__name {
  font-size: .95rem;
}

@media (max-width: 767px) {
  #xito-calendar-app-wrapper .xito-jub-cards {
    grid-template-columns: 1fr;
  }

  #xito-calendar-app-wrapper img.xito-jub-card__avatar {
    width: 56px;
    height: 56px;
    min-width: 56px;
  }
}

/* =========================================================================
   MONTH LIST VIEW — [xito_lich_thang] dạng danh sách dọc
   Xito_Month_View::list_view() — độc lập với lịch lưới & lịch mini của app.
   ========================================================================= */
#xito-calendar-app-wrapper .xito-month-list-wrapper {
  display: flex;
  flex-direction: column;
}

#xito-calendar-app-wrapper .xito-ml-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  border-bottom: 1px solid #ddd;
  /* YC2: căn lề trái/phải 3% */
  padding: 15px 3%;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

#xito-calendar-app-wrapper .xito-ml-row:hover, #xito-calendar-app-wrapper .xito-ml-row:focus-visible {
  background-color: var(--xal, #edf4e8);
  outline: none;
}

#xito-calendar-app-wrapper .xito-ml-row.is-today {
  background-color: var(--today-bg, #edf4e8);
}

/* --- Cột 1: Ngày (khung vuông) --- */
#xito-calendar-app-wrapper .xito-ml-col-date {
  flex: 0 0 auto;
  width: 50px;
  min-width: 50px;
  border: 1px solid #999;
  border-radius: 4px;
  padding: 6px 2px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}

#xito-calendar-app-wrapper .xito-ml-solar {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--xt, #1a1614);
}

#xito-calendar-app-wrapper .xito-ml-lunar {
  margin-top: 2px;
  font-size: 0.7rem;
  color: var(--xtm, #6b6460);
}

#xito-calendar-app-wrapper .xito-ml-row.is-today .xito-ml-col-date {
  border-color: var(--today-border, #4a7c3f);
}

/* --- Cột 2: Nội dung --- */
#xito-calendar-app-wrapper .xito-ml-col-content {
  flex: 1;
  min-width: 0;
}

#xito-calendar-app-wrapper .xito-ml-weekday {
  /* YC2: đậm + tăng 3px so với 0.8rem */
  font-size: calc(0.8rem + 3px);
  font-weight: bold;
  color: var(--xtm, #6b6460);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

#xito-calendar-app-wrapper .xito-ml-name {
  margin-top: 2px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--xa, #2d5016);
}

#xito-calendar-app-wrapper .xito-ml-rank {
  margin-top: 2px;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--xtm, #6b6460);
}

/* Thánh Tùy Chọn / Thánh bị át trong List View */
#xito-calendar-app-wrapper .xito-sub-saints--list {
  display: block !important;
  width: 100%;
  margin-top: 2px;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--xtm, #6b6460);
  opacity: 0.85;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
}

#xito-calendar-app-wrapper .xito-ml-festival {
  margin-top: 2px;
  font-size: 0.8rem;
  color: var(--cl-red, #b5251b);
}

#xito-calendar-app-wrapper .xito-ml-member {
  margin-top: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--xah, #3d6b20);
}

/* Tên lễ ăn theo màu phụng vụ của ngày */
#xito-calendar-app-wrapper .xito-ml-row.xito-day-red .xito-ml-name { color: var(--cl-red, #b5251b); }
#xito-calendar-app-wrapper .xito-ml-row.xito-day-green .xito-ml-name { color: var(--cl-green, #4a7c3f); }
#xito-calendar-app-wrapper .xito-ml-row.xito-day-purple .xito-ml-name { color: var(--cl-purple, #5c3670); }
#xito-calendar-app-wrapper .xito-ml-row.xito-day-rose .xito-ml-name { color: var(--cl-rose, #a03060); }
#xito-calendar-app-wrapper .xito-ml-row.xito-day-black .xito-ml-name { color: var(--cl-black, #2a2620); }
/* WHITE quá nhạt để làm màu chữ → giữ màu accent mặc định */

/* --- Cột 3: Bài đọc --- */
#xito-calendar-app-wrapper .xito-ml-col-readings {
  flex: 0 0 auto;
  width: 140px;
  text-align: right;
}

#xito-calendar-app-wrapper .xito-ml-ref--optional-centered {
  display: block;
  text-align: center;
}

#xito-calendar-app-wrapper .xito-ml-color {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--xt, #1a1614);
}

#xito-calendar-app-wrapper .xito-ml-refs {
  margin-top: 4px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--xtm, #6b6460);
}

/* YC3: màu chữ tên Màu phụng vụ (cột Bài đọc) theo từng màu */
#xito-calendar-app-wrapper .xito-ml-color-text { font-weight: 700; }
#xito-calendar-app-wrapper .xito-txt-color-red { color: #d32f2f; }
#xito-calendar-app-wrapper .xito-txt-color-green { color: #388e3c; }
#xito-calendar-app-wrapper .xito-txt-color-purple { color: #7b1fa2; }
#xito-calendar-app-wrapper .xito-txt-color-rose { color: #c2185b; }
/* Trắng: dùng vàng nhạt sang trọng để không chìm vào nền trắng */
#xito-calendar-app-wrapper .xito-txt-color-white { color: #fbc02d; }

/* YC2: Desktop — tăng 2px cỡ chữ trích dẫn Lời Chúa */
@media (min-width: 768px) {
  #xito-calendar-app-wrapper .xito-ml-refs {
    font-size: calc(0.8rem + 2px);
  }
}

/* --- Mobile --- */
@media (max-width: 767px) {
  #xito-calendar-app-wrapper .xito-ml-row {
    flex-wrap: wrap;
    gap: 12px;
  }

  #xito-calendar-app-wrapper .xito-ml-col-content {
    flex: 1 1 auto;
  }

  /* Cột Ngày giữ nguyên bên trái; Bài đọc rớt xuống full-width, căn trái */
  #xito-calendar-app-wrapper .xito-ml-col-readings {
    flex: 1 1 100%;
    width: 100%;
    text-align: left;
    margin-left: 62px;
    padding-top: 6px;
    border-top: 1px dashed #e0e0e0;
  }

  #xito-calendar-app-wrapper .xito-ml-refs {
    margin-top: 2px;
  }
}

/* =========================================================================
   TÍCH HỢP DỮ LIỆU ĐAN VIỆN (monastic_calendar.json)
   - Sự kiện Đan viện trong Popup Chi tiết ngày + List View Lịch Tháng
   - Gợi ý tìm kiếm Đan viện + Thẻ thông tin Đan viện (modal)
   ========================================================================= */

/* --- Popup Chi tiết ngày: card Sự Kiện Đan Viện --- */
#xito-calendar-app-wrapper .xito-info-card--monastery {
  border-left-color: #1565c0 !important;
}
#xito-calendar-app-wrapper .xito-monastery-events {
  list-style: none;
  margin: 0;
  padding: 0;
}
#xito-calendar-app-wrapper .xito-monastery-event {
  padding: 6px 0;
  line-height: 1.5;
}
#xito-calendar-app-wrapper .xito-monastery-event + .xito-monastery-event {
  border-top: 1px dashed #e5ddd0;
}
#xito-calendar-app-wrapper .xito-monastery-event__title {
  font-weight: 700;
  color: var(--xt, #1a1614);
}
#xito-calendar-app-wrapper .xito-monastery-event--election .xito-monastery-event__title {
  font-weight: 600;
  color: #1565c0;
}
#xito-calendar-app-wrapper .xito-monastery-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 10px;
  white-space: nowrap;
  vertical-align: middle;
}
#xito-calendar-app-wrapper .xito-monastery-tag--rest {
  background: #fbe3e1;
  color: #b5251b;
}
#xito-calendar-app-wrapper .xito-monastery-year {
  color: var(--xtm, #6b6460);
  font-size: 0.82rem;
}

/* --- List View Lịch Tháng: dòng Sự kiện Đan viện (cột Nội dung) --- */
#xito-calendar-app-wrapper .xito-ml-monastery {
  margin-top: 3px;
  font-size: 0.82rem;
  line-height: 1.4;
}
#xito-calendar-app-wrapper .xito-ml-monastery--event {
  color: #1565c0;
  font-weight: 600;
}
#xito-calendar-app-wrapper .xito-ml-monastery--election {
  color: #6b3fa0;
  font-style: italic;
}
#xito-calendar-app-wrapper .xito-ml-monastery-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0 6px;
  border-radius: 9px;
  background: #fbe3e1;
  color: #b5251b;
}

/* --- Gợi ý tìm kiếm Đan viện --- */
#xito-calendar-app-wrapper .xito-search__item-icon--monastery {
  background: #e3f0fb;
}

/* --- Thẻ thông tin Đan viện (modal, tái dùng overlay .xito-popup) --- */
#xito-calendar-app-wrapper .xito-mon-card {
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  border: 1px solid #ece4d6;
}
#xito-calendar-app-wrapper .xito-mon-card__header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  color: #fff;
}
#xito-calendar-app-wrapper .xito-mon-card__badge {
  flex: 0 0 auto;
  min-width: 48px;
  height: 48px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.22);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.02em;
}
#xito-calendar-app-wrapper .xito-mon-card__name {
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.3;
}
#xito-calendar-app-wrapper .xito-mon-card__code {
  margin-top: 2px;
  font-size: 0.8rem;
  opacity: 0.9;
}
#xito-calendar-app-wrapper .xito-mon-card__lines {
  list-style: none;
  margin: 0;
  padding: 16px 20px 20px;
}
#xito-calendar-app-wrapper .xito-mon-card__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  line-height: 1.5;
  color: var(--xt, #1a1614);
}
#xito-calendar-app-wrapper .xito-mon-card__row + .xito-mon-card__row {
  border-top: 1px solid #f0eadd;
}
#xito-calendar-app-wrapper .xito-mon-card__row-icon {
  flex: 0 0 auto;
  font-size: 1.05rem;
  line-height: 1.4;
}
#xito-calendar-app-wrapper .xito-mon-card__row-text {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}
#xito-calendar-app-wrapper .xito-mon-card__row-text strong {
  color: #1565c0;
}

/* --- Sự kiện Hội Dòng (order_events.json) --- */
/* Popup: card Kỷ Niệm Hội Dòng (tái dùng .xito-monastery-event*) */
#xito-calendar-app-wrapper .xito-info-card--order {
  border-left-color: #00695c !important;
}

/* List View Lịch Tháng: dòng sự kiện Hội Dòng (cột Nội dung) */
#xito-calendar-app-wrapper .xito-ml-order {
  margin-top: 3px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #00695c;
}
#xito-calendar-app-wrapper .xito-ml-order--solemn {
  font-weight: 700;
  color: #b5251b;
}
#xito-calendar-app-wrapper .xito-ml-order-year {
  color: var(--xtm, #6b6460);
  font-weight: 400;
  font-size: 0.78rem;
}

/* =========================================================================
   LỊCH LƯỚI / LỊCH MINI — grid() & day_cell() (KHÔNG áp dụng List View)
   ========================================================================= */

/* YC1: Header ngày trong tuần (CN, T2…) đậm + to hơn */
#xito-calendar-app-wrapper .xito-calendar__weekhead-cell {
  font-weight: bold !important;
  font-size: 0.8125rem !important;   /* mobile: ~+2px so với 11px */
}
@media (min-width: 768px) {
  #xito-calendar-app-wrapper .xito-calendar__weekhead-cell {
    font-size: 0.875rem !important;  /* desktop: ~+3px */
  }
}

/* YC2: Header điều hướng của lưới lịch — nền đỏ, chữ trắng, 3 phần space-between */
#xito-calendar-app-wrapper .xito-mini-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--cl-red, #b5251b);
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px 8px 0 0;
}
#xito-calendar-app-wrapper .xito-mini-calendar-title {
  flex: 1;
  text-align: center;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
#xito-calendar-app-wrapper .xito-mini-nav {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
#xito-calendar-app-wrapper .xito-mini-nav:hover, #xito-calendar-app-wrapper .xito-mini-nav:focus-visible {
  background: rgba(255, 255, 255, 0.4);
  outline: none;
  transform: scale(1.08);
}

/* YC3: Ngày âm lịch — tách sang lề phải, giữa ô theo chiều dọc */
#xito-calendar-app-wrapper .xito-calendar__lunar {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
}
/* Mùng 1 âm lịch → đỏ + đậm */
#xito-calendar-app-wrapper .xito-calendar__lunar.is-lunar-first-day {
  color: #d32f2f !important;
  font-weight: bold;
}

/* =========================================================================
   BỔ SUNG 1.1.4 — YC2 lề popup Desktop, YC3 ẩn tiêu đề, YC4 viền ô ngày List View
   ========================================================================= */

/* YC2: Desktop — nới lề trái/phải nội dung Popup (cách các Card ra khỏi mép) */
@media (min-width: 768px) {
  #xito-calendar-app-wrapper .xito-popup .xito-panel__cols, #xito-calendar-app-wrapper .xito-popup .xito-day__cols {
    padding-left: 2% !important;
    padding-right: 2% !important;
  }
}

/* YC3: Ẩn tiêu đề "LỊCH PHỤNG VỤ VẠN NIÊN XITÔ" — chỉ trên trang Lịch Tháng
   (giữ nguyên tiêu đề của App/các layout khác). */
#xito-calendar-app-wrapper .xito-page--month .xito-header__brand {
  display: none !important;
}

/* YC4: Viền ô số ngày (cột trái List View) theo màu phụng vụ — 2px */
#xito-calendar-app-wrapper .xito-ml-col-date {
  border-width: 2px !important;
}
#xito-calendar-app-wrapper .xito-ml-row.xito-day-red .xito-ml-col-date { border-color: var(--cl-red, #b5251b) !important; }
#xito-calendar-app-wrapper .xito-ml-row.xito-day-green .xito-ml-col-date { border-color: var(--cl-green, #4a7c3f) !important; }
#xito-calendar-app-wrapper .xito-ml-row.xito-day-purple .xito-ml-col-date { border-color: var(--cl-purple, #5c3670) !important; }
#xito-calendar-app-wrapper .xito-ml-row.xito-day-rose .xito-ml-col-date { border-color: var(--cl-rose, #a03060) !important; }
#xito-calendar-app-wrapper .xito-ml-row.xito-day-white .xito-ml-col-date { border-color: var(--cl-white, #c8b89a) !important; }
#xito-calendar-app-wrapper .xito-ml-row.xito-day-black .xito-ml-col-date { border-color: var(--cl-black, #2a2620) !important; }
/* Giữ ưu tiên viền xanh "hôm nay" đè lên màu phụng vụ */
#xito-calendar-app-wrapper .xito-ml-row.is-today .xito-ml-col-date {
  border-color: var(--today-border, #4a7c3f) !important;
}

/* =========================================================================
   1.1.5 — HEADER HỢP NHẤT CHO [xito_lich_thang] (List View)
   Chỉ áp dụng .xito-month-list-header — KHÔNG đụng header Lịch Mini (grid).
   ========================================================================= */
#xito-calendar-app-wrapper .xito-month-list-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 15px;
  background-color: #b71c1c;
  color: #fff;
  padding: 10px 15px;
  border-radius: 8px 8px 0 0;
  margin-bottom: 0;
}

/* 1. Năm phụng vụ */
#xito-calendar-app-wrapper .xito-ml-lit-year {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  white-space: nowrap;
}
#xito-calendar-app-wrapper .xito-month-list-header .xito-lityear {
  display: inline-block;
  background: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
  padding: 3px 10px;
  border-radius: 6px;
  font-weight: 800;
  box-shadow: none !important;
  min-width: 0;
}

/* 2. Nút Hôm nay */
#xito-calendar-app-wrapper .xito-btn-today {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: #b71c1c;
  border: none;
  border-radius: 20px;
  padding: 6px 14px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.15s ease;
}
#xito-calendar-app-wrapper .xito-btn-today:hover, #xito-calendar-app-wrapper .xito-btn-today:focus-visible {
  background: #ffe9e9;
  outline: none;
  transform: translateY(-1px);
}

/* 3. Nhóm điều hướng tháng */
#xito-calendar-app-wrapper .xito-ml-nav-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#xito-calendar-app-wrapper .xito-ml-arrow {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
#xito-calendar-app-wrapper .xito-ml-arrow:hover, #xito-calendar-app-wrapper .xito-ml-arrow:focus-visible {
  background: rgba(255, 255, 255, 0.42);
  outline: none;
  transform: scale(1.08);
}
#xito-calendar-app-wrapper .xito-ml-month {
  font-weight: 700;
  white-space: nowrap;
  font-size: 0.95rem;
}
#xito-calendar-app-wrapper .xito-ml-year-select {
  background: #fff;
  color: #1a1614;
  border: none;
  border-radius: 6px;
  padding: 5px 8px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}

/* 4. Ô tìm kiếm — đẩy sang phải */
#xito-calendar-app-wrapper .xito-ml-search {
  margin-left: auto;
}
#xito-calendar-app-wrapper .xito-ml-search .xito-search {
  position: relative;
  display: flex;
  align-items: center;
  height: 36px;
  min-width: 230px;
  background: #fff;
  border-radius: 20px;
}
#xito-calendar-app-wrapper .xito-ml-search .xito-search__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #b71c1c;
  display: flex;
  pointer-events: none;
}
#xito-calendar-app-wrapper .xito-ml-search .xito-search__input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  border-radius: 20px;
  padding: 0 34px 0 34px;
  font-size: 0.9rem;
  color: #1a1614;
}
#xito-calendar-app-wrapper .xito-ml-search .xito-search__clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: #6b6460;
  cursor: pointer;
  font-size: 0.9rem;
}
#xito-calendar-app-wrapper .xito-ml-search .xito-search__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
}

/* --- Mobile: rút gọn, ẩn chữ, chỉ icon/số --- */
@media (max-width: 767px) {
  #xito-calendar-app-wrapper .xito-month-list-header {
    gap: 8px;
    padding: 8px 10px;
  }
  #xito-calendar-app-wrapper .xito-month-list-header .xito-hide-mobile {
    display: none !important;
  }
  #xito-calendar-app-wrapper .xito-ml-nav-group {
    gap: 5px;
  }
  #xito-calendar-app-wrapper .xito-btn-today {
    padding: 6px 9px;
  }
  #xito-calendar-app-wrapper .xito-ml-year-select {
    padding: 4px 4px;
    font-size: 0.8rem;
  }
  /* Search co lại thành nút tròn; chạm/focus mới bung rộng */
  #xito-calendar-app-wrapper .xito-ml-search .xito-search {
    min-width: 0;
    width: 36px;
    overflow: hidden;
    transition: width 0.2s ease;
  }
  #xito-calendar-app-wrapper .xito-ml-search .xito-search:focus-within {
    width: 64vw;
  }
}

/* =================================================================
   SINGLETON GLOBALS — KHÔNG CÓ NAMESPACE (Intentional Exception)
   Các phần tử này được render vào wp_footer() / wp_body_open()
   BÊN NGOÀI #xito-calendar-app-wrapper, nên KHÔNG được thêm prefix.

   Danh sách:
   - .xito-popup-overlay  (ID: xito-popup-overlay) — dialog modal popup
   - .xito-avatar-lightbox — lightbox phóng to ảnh chân dung
   ================================================================= */

/* ═══════════════════════════════════════════════════════════════
   SINGLETON FIXED — Popup Overlay & Avatar Lightbox
   Position: fixed → inject thẳng vào <body>, KHÔNG nằm trong
   #xito-calendar-app-wrapper → hợp lệ không cần prefix.
   Tất cả dùng prefix .xito-* riêng để tránh xung đột theme.
   ═══════════════════════════════════════════════════════════════ */

/* Popup Overlay — singleton trong wp_footer() */
.xito-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 22, 20, .5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 200ms cubic-bezier(.4, 0, .2, 1);
}
.xito-popup-overlay.is-open { opacity: 1; }
.xito-popup-overlay[hidden] { display: none; }

.xito-popup {
  background: #fff4ec;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
  width: 95%;
  max-width: 1100px;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(8px);
  transition: transform 200ms cubic-bezier(.4, 0, .2, 1);
}
.xito-popup-overlay.is-open .xito-popup { transform: translateY(0); }

.xito-popup-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}

.xito-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid #E8E4DE;
  border-top-color: #2D5016;
  border-radius: 50%;
  animation: xito-spin .7s linear infinite;
}

/* Avatar Lightbox — singleton (position: fixed, z-index cao nhất) */
.xito-avatar-lightbox {
  position: fixed;
  z-index: 100000;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 16, 24, .78);
  cursor: zoom-out;
}
.xito-avatar-lightbox__dialog {
  position: relative;
  max-width: min(90vw, 900px);
  max-height: 90vh;
  cursor: default;
}
.xito-avatar-lightbox__dialog img {
  display: block;
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .42);
}
.xito-avatar-lightbox__close {
  position: absolute;
  z-index: 1;
  top: -12px;
  right: -12px;
  width: 32px;
  height: 32px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #24202a;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}