/* ics-fx-events: /su-kien/ archive (template 1368). Clean 4/3/2/1 grid, month headings in flow, filter row like ics (search left, selects right), cards never clipped. Scoped to #brxe-evsec1. */

/* Toolbar: search + Thang + Trang thai on one row (ics layout). */
html body #brxe-evsec1 #brxe-evtl01#brxe-evtl01 {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  width: 100%;
}
html body #brxe-evsec1 #brxe-evfs01#brxe-evfs01 { order: 1; flex: 1 1 240px; min-width: 0; width: auto; display: block; }
html body #brxe-evsec1 #brxe-evfs01#brxe-evfs01 label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html body #brxe-evsec1 #brxe-evfs01 input {
  box-sizing: border-box; width: 100%; height: 44px; margin: 0;
  padding: 8px 48px 8px 16px;
  border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 8px; background-color: #fff;
  font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 16px; line-height: 24px; color: #302f29;
}
html body #brxe-evsec1 select.ics-fsel#brxe-m2dv20,
html body #brxe-evsec1 select.ics-fsel#brxe-1o70dd {
  order: 2; flex: 0 0 auto; width: auto; min-width: 148px; height: 44px; margin: 0;
  padding: 8px 40px 8px 16px; box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 8px; background-color: #fff;
  font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 16px; line-height: 24px; color: #302f29;
}
html body #brxe-evsec1 #brxe-evrw01#brxe-evrw01 { order: 3; margin-left: 0; }
html body #brxe-evsec1 #brxe-evclr1 { min-height: 44px; }


/* Grid: 4 cols >=1200, 3 at 1024-1199, 2 at 640-1023 (834), 1 below 640 (390). */
html body #brxe-evsec1 #brxe-evgrid#brxe-evgrid.brx-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  column-gap: 32px !important;
  row-gap: 48px !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}




/* Month heading: left, in flow, own row. 64px between month blocks (48 row gap + 16 top margin). */
html body #brxe-evsec1 #brxe-evgrid > h2.ics-ev-month {
  grid-column: 1 / -1 !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  margin: 0 0 -24px 0 !important;
  padding: 0 !important;
  text-align: left !important;
  pointer-events: auto !important;
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 48px;
  line-height: 56px;
  color: #000;
}
html body #brxe-evsec1 #brxe-evgrid > h2.ics-ev-month:not(:first-child) { margin-top: 16px !important; }

/* Card: plain white rounded rectangle r=8, no torn edge, no halftone, height auto, equal height per row. */
html body #brxe-evsec1 #brxe-evgrid > a.ev-card,
html body #brxe-evsec1 #brxe-evgrid > .brxe-evcard.ev-card {
  display: flex !important;
  flex-direction: column;
  box-sizing: border-box;
  height: auto !important;
  min-height: 296px;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  background-color: #fff !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  clip-path: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  color: #302f29;
  text-decoration: none;
  position: relative;
}
html body #brxe-evsec1 #brxe-evgrid .ev-card::before,
html body #brxe-evsec1 #brxe-evgrid .ev-card::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
html body #brxe-evsec1 #brxe-evgrid .ev-card > .nw-cb,
html body #brxe-evsec1 #brxe-evgrid .ev-card > .brxe-evbody {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 16px;
  box-sizing: border-box;
  padding: 24px !important;
  height: auto !important;
  min-height: 0;
}
html body #brxe-evsec1 #brxe-evgrid .ev-card .ev-top { display: flex; }
html body #brxe-evsec1 #brxe-evgrid .ev-card .nw-chip {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 8px;
  border-radius: 4px;
  background: #ffb2db;
  color: #000;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}
html body #brxe-evsec1 #brxe-evgrid .ev-card .ev-day {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 56px;
  line-height: 64px;
  color: #302f29;
}
html body #brxe-evsec1 #brxe-evgrid .ev-card .ev-date {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: #302f29;
}
html body #brxe-evsec1 #brxe-evgrid .ev-card .nw-tit {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 32px;
  line-height: 36px;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: #302f29;
  margin: 0;
  white-space: normal;
  overflow: visible;
  height: auto;
}
html body #brxe-evsec1 #brxe-evgrid .ev-card #brxe-evven1,
html body #brxe-evsec1 #brxe-evgrid .ev-card .nw-meta {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #302f29;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
html body #brxe-evsec1 #brxe-evgrid .ev-card .ev-meta { display: flex; flex-direction: column; gap: 4px; margin-top: auto; }
html body #brxe-evsec1 #brxe-evgrid .ev-card .ev-meta:empty { display: none; }
@media (max-width: 1023px) and (min-width: 640px) {
  html body #brxe-evsec1 #brxe-evgrid .ev-card #brxe-evven1 { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
}
/* Beats ics-exact-fb Run 3 rule (first heading shifted onto the filter row, top -88px). */
html body #brxe-evsec1 #brxe-evgrid > h2.ics-ev-month.ics-ev-month:first-child {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  pointer-events: auto !important;
  text-align: left !important;
}
/* Card height: a global class fixes height at 296px; content must grow the card, never clip. */
html body #brxe-evsec1 #brxe-evgrid#brxe-evgrid > .brxe-evcard.brxe-evcard.ev-card.ev-card.ev-card {
  height: auto !important;
  min-height: 296px !important;
  max-height: none !important;
  overflow: visible !important;
}
html body #brxe-evsec1 #brxe-evgrid#brxe-evgrid > .brxe-evcard.ev-card > .brxe-evbody.brxe-evbody {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
html body #brxe-evsec1 #brxe-evgrid#brxe-evgrid#brxe-evgrid.brx-grid {
  grid-auto-rows: auto !important;
  grid-template-rows: none !important;
}
html body #brxe-evsec1 #brxe-evgrid#brxe-evgrid > .brxe-evcard.brxe-evcard.ev-card.ev-card {
  contain: none !important;
  aspect-ratio: auto !important;
  block-size: auto !important;
}
html body #brxe-evsec1 #brxe-evgrid#brxe-evgrid > .brxe-evcard.ev-card > .brxe-evbody.brxe-evbody { flex: 1 0 auto !important; }
/* Grid rows were sized by a 296px min-height on the card (ics-torn-card): content now sets the row height; equal height per row comes from stretch. */
html body #brxe-evsec1 #brxe-evgrid#brxe-evgrid#brxe-evgrid > .brxe-evcard.brxe-evcard.ev-card.ev-card.ev-card.ev-card {
  min-height: 0 !important;
  height: auto !important;
}
html body #brxe-evsec1 #brxe-evgrid#brxe-evgrid#brxe-evgrid.brx-grid { grid-template-rows: none !important; grid-auto-rows: auto !important; }
/* Plain block flow inside the card: height comes from content, nothing is clipped. */
html body #brxe-evsec1 #brxe-evgrid#brxe-evgrid#brxe-evgrid > .brxe-evcard.brxe-evcard.ev-card.ev-card.ev-card.ev-card {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
html body #brxe-evsec1 #brxe-evgrid#brxe-evgrid#brxe-evgrid > .brxe-evcard.ev-card > .brxe-evbody.brxe-evbody.brxe-evbody {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 24px !important;
  overflow: visible !important;
}
html body #brxe-evsec1 #brxe-evgrid .ev-card .ev-top,
html body #brxe-evsec1 #brxe-evgrid .ev-card .ev-day,
html body #brxe-evsec1 #brxe-evgrid .ev-card .ev-date,
html body #brxe-evsec1 #brxe-evgrid .ev-card .nw-tit { margin-top: 0; margin-bottom: 16px; }
html body #brxe-evsec1 #brxe-evgrid .ev-card .nw-tit,
html body #brxe-evsec1 #brxe-evgrid .ev-card #brxe-evven1 { display: block; }
html body #brxe-evsec1 #brxe-evgrid .ev-card #brxe-evven1 { margin: 0; }
html body #brxe-evsec1 #brxe-evgrid .ev-card .ev-day { display: block; }
html body #brxe-evsec1 #brxe-evgrid .ev-card .ev-date { display: block; }
/* Lazy-render placeholders (bricks-lazy-hidden) must not fix the card size. */
html body #brxe-evsec1 #brxe-evgrid .brxe-evcard,
html body #brxe-evsec1 #brxe-evgrid .brxe-evcard * {
  content-visibility: visible !important;
  contain-intrinsic-size: none !important;
  contain: none !important;
}
html body #brxe-evsec1 #brxe-evgrid .brxe-evcard .brxe-evchip { position: static !important; }
/* Card grid as flex-wrap (content-sized lines, equal height per line via stretch). Replaces the grid where row tracks were capped at 228px. Column counts: 4 >=1200, 3 at 1024-1199, 2 at 640-1023, 1 below 640. */
html body #brxe-evsec1 #brxe-evgrid#brxe-evgrid#brxe-evgrid.brx-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  column-gap: 32px !important;
  row-gap: 48px !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
}
html body #brxe-evsec1 #brxe-evgrid > h2.ics-ev-month.ics-ev-month {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}
html body #brxe-evsec1 #brxe-evgrid > .brxe-evcard.ev-card.ev-card.ev-card.ev-card {
  flex: 0 0 calc((100% - 96px) / 4) !important;
  width: calc((100% - 96px) / 4) !important;
  max-width: calc((100% - 96px) / 4) !important;
  margin: 0 !important;
  align-self: stretch !important;
}



/* Intrinsic height for card and body (auto computed to a stale 228px). */
html body #brxe-evsec1 #brxe-evgrid#brxe-evgrid#brxe-evgrid#brxe-evgrid > .brxe-evcard.ev-card.ev-card.ev-card.ev-card.ev-card {
  height: max-content !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}
html body #brxe-evsec1 #brxe-evgrid#brxe-evgrid#brxe-evgrid#brxe-evgrid > .brxe-evcard.ev-card > .brxe-evbody.brxe-evbody.brxe-evbody.brxe-evbody {
  height: max-content !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}
html body #brxe-evsec1 #brxe-evgrid .ev-card .nw-tit { display: block !important; -webkit-line-clamp: unset !important; -webkit-box-orient: horizontal !important; overflow: visible !important; }
/* ROOT CAUSE of the 228px cap: tear-guard.css:47 gives every first child of .nw-card aspect-ratio 4/3; the card body is that first child, so the body (and the card) became 4:3. Reset it. */
html body #brxe-evsec1 #brxe-evgrid#brxe-evgrid#brxe-evgrid > .brxe-evcard.ev-card > .brxe-evbody.brxe-evbody.brxe-evbody.brxe-evbody.brxe-evbody {
  aspect-ratio: auto !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}
html body #brxe-evsec1 #brxe-evgrid#brxe-evgrid#brxe-evgrid > .brxe-evcard.ev-card:first-child > :first-child { flex: 1 1 auto !important; }
html body #brxe-evsec1 #brxe-evtl01 #brxe-m2dv20#brxe-m2dv20 { margin-left: auto; }


/* Fluid layout (owner rule: no per-width @media lists). auto-fill 260px min: 4 cols at 1440, 3 at 1024, 2 at 834, 1 at 390. */
html body #brxe-evsec1 #brxe-evgrid#brxe-evgrid#brxe-evgrid.brx-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)) !important;
  column-gap: 32px !important;
  row-gap: 48px !important;
}
html body #brxe-evsec1 #brxe-evgrid#brxe-evgrid#brxe-evgrid > .brxe-evcard.ev-card.ev-card.ev-card.ev-card.ev-card {
  flex: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}
html body #brxe-evsec1 #brxe-evgrid#brxe-evgrid#brxe-evgrid > h2.ics-ev-month.ics-ev-month.ics-ev-month {
  grid-column: 1 / -1 !important;
}