body { background-color: #0f172a; color: #e2e8f0; font-family: sans-serif; }
.glass-panel { background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); }
.hidden-view { display: none !important; }
input, select { background-color: #1e293b !important; color: white !important; border: 1px solid #334155 !important; }
input:focus, select:focus { border-color: #3b82f6 !important; outline: none; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

#calendarView { width: 100%; }
.calendar-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.calendar-nav-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; background: rgba(30, 41, 59, 0.5); padding: 10px 20px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.05); }
.calendar-month-title { font-size: 18px; font-weight: bold; color: #3b82f6; text-transform: uppercase; letter-spacing: 1px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(60px, 1fr)); gap: 1px; background-color: #334155; border: 1px solid #334155; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3); min-width: 560px; }
.calendar-header-cell { background-color: #1e293b; padding: 12px; text-align: center; font-size: 12px; font-weight: bold; color: #94a3b8; text-transform: uppercase; }
.calendar-day-cell { background-color: #0f172a; min-height: 110px; padding: 8px; transition: 0.2s; position: relative; border-bottom: 1px solid #1e293b; border-right: 1px solid #1e293b; }
.calendar-day-cell:hover { background-color: #1e293b; }
.calendar-day-cell.other-month { opacity: 0.1; pointer-events: none; }
.calendar-date-num { font-size: 14px; font-weight: 600; margin-bottom: 8px; color: #64748b; }

@media (max-width: 640px) {
    .calendar-nav-header { padding: 8px 12px; margin-bottom: 10px; }
    .calendar-month-title { font-size: 14px; letter-spacing: 0.5px; }
    .calendar-header-cell { padding: 8px 4px; font-size: 10px; }
    .calendar-day-cell { min-height: 90px; padding: 5px; }
    .calendar-date-num { font-size: 12px; margin-bottom: 4px; }
    .event-chip { font-size: 9px; padding: 2px 4px; }
    .chip-time { font-size: 7px; }
}

/* CSS: Vòng tròn đỏ cho ngày hôm nay (Chuẩn giao diện XUONGART) */
.calendar-day-cell.today .calendar-date-num { 
    background-color: #ef4444; 
    color: white; 
    width: 28px; 
    height: 28px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 50%; 
    font-size: 14px; 
    text-decoration: none; 
    margin-top: -4px; 
    margin-left: -4px; 
    box-shadow: 0 2px 8px rgba(239,68,68,0.4);
}

.event-chip { font-size: 10px; padding: 4px 6px; border-radius: 6px; margin-bottom: 4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: bold; border-left: 3px solid transparent; display: flex; flex-direction: column; transition: transform 0.1s; }
.event-chip:hover { transform: scale(1.02); filter: brightness(1.2); }
.chip-time { font-size: 8px; opacity: 0.8; font-weight: normal; margin-top: 1px; }

/* Màu sắc các kênh */
.bg-chan-do { background-color: rgba(239, 68, 68, 0.2); color: #f87171; border-left-color: #ef4444; }
.bg-chan-xanh-la { background-color: rgba(34, 197, 94, 0.2); color: #4ade80; border-left-color: #22c55e; }
.bg-chan-xanh-duong { background-color: rgba(59, 130, 246, 0.2); color: #60a5fa; border-left-color: #3b82f6; }
.bg-chan-vang { background-color: rgba(234, 179, 8, 0.2); color: #facc15; border-left-color: #eab308; }
.bg-chan-hong { background-color: rgba(236, 72, 153, 0.2); color: #f472b6; border-left-color: #ec4899; }
.bg-chan-trang { background-color: rgba(255, 255, 255, 0.1); color: #ffffff; border-left-color: #ffffff; }

@keyframes glowPulseAll { 0%, 100% { box-shadow: 0 0 5px #94a3b8, 0 0 15px #94a3b8; border-color: #94a3b8; } 50% { box-shadow: 0 0 2px #94a3b8, 0 0 8px #94a3b8; border-color: #64748b; } }
@keyframes glowPulseDo { 0%, 100% { box-shadow: 0 0 5px #ef4444, 0 0 15px #ef4444; border-color: #ef4444; } 50% { box-shadow: 0 0 2px #ef4444, 0 0 8px #ef4444; border-color: rgba(239,68,68,0.5); } }
@keyframes glowPulseXanhLa { 0%, 100% { box-shadow: 0 0 5px #22c55e, 0 0 15px #22c55e; border-color: #22c55e; } 50% { box-shadow: 0 0 2px #22c55e, 0 0 8px #22c55e; border-color: rgba(34,197,94,0.5); } }
@keyframes glowPulseXanhDuong { 0%, 100% { box-shadow: 0 0 5px #3b82f6, 0 0 15px #3b82f6; border-color: #3b82f6; } 50% { box-shadow: 0 0 2px #3b82f6, 0 0 8px #3b82f6; border-color: rgba(59,130,246,0.5); } }
@keyframes glowPulseVang { 0%, 100% { box-shadow: 0 0 5px #eab308, 0 0 15px #eab308; border-color: #eab308; } 50% { box-shadow: 0 0 2px #eab308, 0 0 8px #eab308; border-color: rgba(234,179,8,0.5); } }
@keyframes glowPulseHong { 0%, 100% { box-shadow: 0 0 5px #ec4899, 0 0 15px #ec4899; border-color: #ec4899; } 50% { box-shadow: 0 0 2px #ec4899, 0 0 8px #ec4899; border-color: rgba(236,72,153,0.5); } }
@keyframes glowPulseTrang { 0%, 100% { box-shadow: 0 0 5px #ffffff, 0 0 15px #ffffff; border-color: #ffffff; } 50% { box-shadow: 0 0 2px #ffffff, 0 0 8px #ffffff; border-color: rgba(255,255,255,0.5); } }

.glow-active-all { animation: glowPulseAll 2s infinite; border: 1px solid #94a3b8 !important; }
.glow-active-do { animation: glowPulseDo 2s infinite; border: 1px solid #ef4444 !important; }
.glow-active-xanh-la { animation: glowPulseXanhLa 2s infinite; border: 1px solid #22c55e !important; }
.glow-active-xanh-duong { animation: glowPulseXanhDuong 2s infinite; border: 1px solid #3b82f6 !important; }
.glow-active-vang { animation: glowPulseVang 2s infinite; border: 1px solid #eab308 !important; }
.glow-active-hong { animation: glowPulseHong 2s infinite; border: 1px solid #ec4899 !important; }
.glow-active-trang { animation: glowPulseTrang 2s infinite; border: 1px solid #ffffff !important; }