/* =================================================================== */
/* FILE: public/style.css                                              */
/* MỤC ĐÍCH: Chứa toàn bộ CSS tùy chỉnh cho ứng dụng Ghichu App.         */
/* =================================================================== */

body {
    font-family: 'Inter', sans-serif;
    padding-bottom: 80px; /* 5rem - Chỗ trống cho thanh nav mobile */
}
@media (min-width: 640px) {
    /* Tắt padding bottom trên desktop */
    body {
        padding-bottom: 0; 
    }
}

/* ----- SPINNER (Biểu tượng tải) ----- */
.spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top: 4px solid #fff; /* Màu mặc định, sẽ bị ghi đè bởi Tailwind */
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ----- HEADER & TABS ----- */
.refresh-button {
     color: #D1D5DB; padding: 8px;
     border-radius: 8px; transition: all 0.2s;
}
.refresh-button:hover { background-color: #374151; }
.refresh-button svg { width: 20px; height: 20px; }

.sm\:flex .refresh-button {
    margin-left: 8px;
}

#settings-btn svg, #settings-btn-mobile svg {
    width: 24px; /* w-6 */
    height: 24px; /* h-6 */
}

/* Nút Tab (Desktop) */
.tab-button {
    color: #D1D5DB; font-weight: 500; white-space: nowrap; flex-shrink: 0;
    padding: 8px 16px; border-radius: 8px;
    transition: all 0.2s;
    border: 1px solid transparent;
    margin-left: 12px;
}
.tab-button:hover { background-color: #374151; }
.tab-button.active { 
    background-color: white; 
    color: #111827; 
    font-weight: 600;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

/* Nút RSS (Desktop) */
.feed-button { 
    color: #D1D5DB; font-weight: 500; white-space: nowrap; flex-shrink: 0; 
}
.feed-button:hover { background-color: #374151; }

/* Menu RSS (Mobile) */
#rss-mobile-menu .feed-button { 
    display: block; width: 100%; text-align: left; padding: 10px 16px; 
    border: none; margin-left: 0; color: #E5E7EB; font-weight: 600; 
    background-color: #4B5563; 
}
#rss-mobile-menu .feed-button:hover { background-color: #5b6676; }
#rss-mobile-menu .feed-button.active {
    background-color: #E5E7EB; 
    color: #1F2937; 
}

/* Menu Mobile (Không dùng nữa nhưng để dự phòng) */
#mobile-menu .feed-button { 
    display: block; width: 100%; text-align: left; padding: 10px 16px; 
    border-radius: 6px; font-weight: 500; color: #D1D5DB; 
}
#mobile-menu .feed-button:hover { background-color: #4B5563; }
#mobile-menu .feed-button.active { background-color: #6B7280; color: white; }


/* ----- ĐÃ XÓA CSS CHAT Ở ĐÂY ----- */


/* ----- NEWS (TIN TỨC) ----- */
.line-clamp-3 { 
    overflow: hidden; display: -webkit-box; 
    -webkit-box-orient: vertical; -webkit-line-clamp: 3; 
}
.line-clamp-2 { 
    overflow: hidden; display: -webkit-box; 
    -webkit-box-orient: vertical; -webkit-line-clamp: 2; 
}

/* Toast Tóm tắt */
#summary-toast {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    background-color: #2563EB; /* bg-blue-600 */
    color: white;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 60;
    cursor: pointer;
    transition: all 0.3s ease-in-out; 
    opacity: 0;
    transform: translateY(20px);
    max-width: 320px;
}
#summary-toast.toast-loading {
    background-color: #374151; 
    color: #E5E7EB; 
    cursor: default;
}
 #summary-toast.show {
     opacity: 1;
     transform: translateY(0);
 }
 #toast-close-button {
     position: absolute;
     top: 0.5rem;
     right: 0.5rem;
     color: #D1D5DB; 
     background: transparent;
     border: none;
     font-size: 1.25rem;
     cursor: pointer;
 }
  #toast-close-button:hover {
      color: white;
  }

/* ----- CALENDAR (LỊCH) ----- */

/* (MỚI) Cỡ chữ Lịch Âm - Mobile */
.day-lunar-date {
    /* (SỬA) Tăng cỡ chữ Lịch Âm (gốc là 0.75rem) */
    font-size: 0.5em; /* ~13px */
    line-height: 1;
}

/* Ghi chú trong ô lịch (đã co nhỏ) */
.day-note-list {
    margin-top: 2px;
    padding-left: 8px; /* (Co lại) */
    overflow: hidden;
    max-height: 60px; 
}
.day-note {
    overflow: hidden; display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; 
    
    /* (SỬA) Tăng cỡ chữ Ghi chú - Mobile (gốc là 0.6em) */
    font-size: 0.5em; 
    
    font-weight: 500;
    color: #C0392B; 
    list-style-type: disc; 
    margin-left: -2px; /* (Kéo vào) */
}

/* Kích cỡ cho Desktop/Tablet */
@media (min-width: 640px) { /* sm: */
    
    /* (MỚI) Cỡ chữ Lịch Âm - Desktop */
    .day-lunar-date {
        /* (SỬA) Tăng cỡ chữ Lịch Âm (gốc là 0.75rem) */
        font-size: 0.85rem; /* ~13.6px */
    }

    .day-note-list {
        margin-top: 4px;
        padding-left: 16px;
    }
    .day-note {
        /* (SỬA) Tăng cỡ chữ Ghi chú - Desktop (gốc là 0.8em) */
        font-size: 0.9em;
        margin-left: 0;
    }
}

/* Tổng kết ghi chú hàng tháng (Giữ nguyên) */
.day-note-grid-group {
    grid-template-columns: auto 1fr;
}
.note-content-indented {
    grid-column-start: 2;
}

/* (MỚI) Nút chuyển đổi chế độ xem Tổng kết */
.summary-toggle-btn {
    background-color: #374151; /* bg-gray-700 */
    color: #93C5FD; /* text-blue-300 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 500;
    padding: 0.5rem 1rem; /* py-2 px-4 */
    border-radius: 0.5rem; /* rounded-lg */
    transition: background-color 0.2s;
}
.summary-toggle-btn:hover {
    background-color: #4B5563; /* bg-gray-600 */
}
/* ----- SETTINGS (CÀI ĐẶT) ----- */
.time-setting-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem; 
}
.time-setting-label span {
    color: #D1D5DB; 
}
.time-setting-label input[type="time"] {
    background-color: #4B5563; 
    color: #FFFFFF;
    border: 1px solid #6B7280; 
    border-radius: 0.375rem; 
    padding: 0.25rem 0.5rem; 
}

/* Nút bật/tắt thông báo */
#notify-button.subscribed {
    background-color: #D9534F; /* Màu đỏ */
    hover:bg-red-700;
}


/* ----- BOTTOM NAVIGATION (NAV DƯỚI) ----- */
#bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 5rem; /* 80px */
    background-color: #1F2937; /* bg-gray-800 */
    border-top: 1px solid #374151; /* border-gray-700 */
    display: flex;
    align-items: center;
    z-index: 40;
}
.bottom-nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #9CA3AF; /* text-gray-400 */
    font-size: 0.75rem; /* 12px */
    font-weight: 500;
    transition: color 0.2s;
}
.bottom-nav-btn svg {
    width: 1.75rem; /* 28px */
    height: 1.75rem; /* 28px */
    margin-bottom: 4px;
}
.bottom-nav-btn.active {
    color: #FFFFFF; /* text-white */
}

/* Điều chỉnh vị trí Toast khi có Nav dưới */
@media (max-width: 639px) { /* sm: breakpoint */
    #summary-toast {
        bottom: 6rem; /* 5rem nav + 1rem padding */
        left: 1rem;
        right: auto; 
    }
}
/* ... (Các code cũ giữ nguyên) ... */

/* ----- SWIPE TO DELETE (VUỐT ĐỂ XÓA) ----- */
.swipe-item-container {
    position: relative;
    overflow: hidden; 
    border-radius: 0.5rem;
    /* XÓA dòng background-color: #EF4444; ở đây để hết bị lộ viền đỏ */
    background-color: transparent; 
}

.swipe-background {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0; /* Thêm left: 0 để nó phủ kín */
    background-color: #EF4444; /* Chuyển màu đỏ vào đây */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 1.5rem;
    color: white;
    font-weight: bold;
    font-size: 0.9rem;
    z-index: 0; 
    border-radius: 0.5rem; /* Bo góc cho đẹp */
}

.swipe-content {
    position: relative;
    z-index: 10; 
    background-color: #1F2937; 
    transition: transform 0.1s linear; 
    touch-action: pan-y; 
    height: 100%; /* Đảm bảo che kín lớp dưới */
}