:root{--vcci-blue:#004a8e;--vcci-light-blue:#e7eff6;--vcci-green:#27ae60;--vcci-red:#eb5757;--text-main:#333;--border-color:#eee}
.event-container{margin:40px auto;padding:0 15px}
.event-item{display:flex;background:#fff;margin-bottom:18px;border-radius:8px;overflow:hidden;box-shadow:0 4px 12px #0000000d;transition:transform .2s;border:1px solid transparent}
.event-item:hover{transform:translateY(-2px);border-color:#d1d9e6}
.event-left{width:210px;flex-shrink:0;display:flex;flex-direction:column}
.date-head{background:var(--vcci-blue);color:#fff;padding:8px 12px;display:flex;justify-content:space-between;align-items:center;font-size:18px;line-height: 27px;}
.date-body{background:#f7f7f7;flex-grow:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:15px 0;border-right:1px solid var(--border-color)}
.date-body .num{font-size:2.8rem;font-weight:800;color:#222;line-height:1}
.date-body .mon{font-size:.85rem;color:#888;text-transform:uppercase;letter-spacing:1px;margin-top:5px}
.event-right{flex-grow:1;padding:20px;display:flex;flex-direction:column;justify-content:center}
.badge-vcci{align-self:flex-start;font-size:.7rem;padding:3px 10px;border-radius:4px;color:#fff;margin-bottom:12px;font-weight:600;}
.bg-vcci-green{background:var(--vcci-green)}
.bg-vcci-red{background:var(--vcci-red)}
.bg-vcci-grey{background:#828282}
.event-title{font-size:1.15rem;font-weight:700;margin-bottom:10px;line-height:1.4}
.event-info{font-size:.9rem;color:#555;margin-bottom:5px;display:flex;align-items:flex-start}
.event-info i{width:22px;color:#aaa;margin-top:3px}
.page-controls{display:flex;justify-content:space-between;align-items:center;margin-top:35px;flex-wrap:wrap;gap:20px}
.pagination .page-link{color:#555;border-radius:4px;margin:0 3px;border:1px solid #ddd}
.pagination .page-item.active .page-link{background:var(--vcci-blue);border-color:var(--vcci-blue);color:#fff}
.btn-datepicker{background:#fff;border:1px solid #c3cad1;padding:10px 18px;border-radius:6px;font-size:.9rem;font-weight:600;color:#444;cursor:pointer;box-shadow:0 2px 4px #00000005;transition:all .3s}
.btn-datepicker:hover{border-color:var(--vcci-blue);color:var(--vcci-blue);background:var(--vcci-light-blue)}
.daterangepicker{border-radius:8px;border:none;box-shadow:0 10px 40px #00000026;padding:10px}
.daterangepicker td.active,.daterangepicker td.active:hover{background-color:var(--vcci-blue)!important;border-radius:4px}
.daterangepicker .drp-buttons .btn-primary{background-color:var(--vcci-blue);border:none;padding:6px 15px}
.event-title a{color: var(--vcci-blue);}
.event-title a:hover{color: var(--vcci-blue);}
.lgTitleEvent{font-size: 20px;line-height: 30px;text-transform: uppercase;font-family: Open Sans Bold;margin-bottom: 25px;}
.lgTitleEvent a{color: #276695;}
.lgTitleEvent a:hover{color: #276695;}
@media (max-width: 768px) {
.event-item{flex-direction:column}
.event-left{width:100%}
.date-body{border-right:none;border-bottom:1px solid #eee}
.page-controls{justify-content:center}
}