/* ===================================================================
   Ghi Chú App - Master Stylesheet v3.0
   Design by Gemini @ Google
   =================================================================== */

/* --- 1. CÀI ĐẶT CHUNG & TYPOGRAPHY --- */

/* 1a. Font Import: Chỉ dùng Inter cho UI và Lora cho nội dung đọc. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lora:ital,wght@0,400;0,600&display=swap');

/* 1b. Biến màu (Variables): Bảng màu mới, hiện đại và chuyên nghiệp. */
:root {
    --primary-color: #4f46e5; /* Indigo - một màu xanh tím rất hiện đại */
    --primary-color-dark: #4338ca;
    --background-app: #f3f4f6; /* Nền xám rất nhạt, dịu mắt */
    --background-content: #ffffff;
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --border-color: #e5e7eb;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* 1c. Base Styles: Thiết lập cơ bản cho toàn trang. */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--background-app);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

main {
    flex-grow: 1;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover {
    color: var(--primary-color-dark);
}

/* --- 2. BỐ CỤC CHÍNH (LAYOUT) --- */
.container {
    width: 100%;
    max-width: 1200px; /* Thêm max-width cho container */
    margin: 0 auto;
    padding: 0 1.5rem;
}

footer {
    background-color: var(--background-content);
    border-top: 1px solid var(--border-color);
    padding: 2rem 0;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-top: auto;
}

/* --- 3. CÁC THÀNH PHẦN UI (COMPONENTS) --- */

/* 3a. Buttons */
.btn {
    display: inline-block;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.65rem 1.25rem;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}
.btn-primary {
    background-color: var(--primary-color);
    color: #ffffff;
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
    background-color: var(--primary-color-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* 3b. Forms */
.form-group {
    margin-bottom: 1.5rem;
}
.form-group label {
    display: block;
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}
.form-control {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    color: var(--text-primary);
    background-color: var(--background-content);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgb(79 70 229 / 0.2);
}

/* --- 4. GIAO DIỆN CỤ THỂ (PAGE-SPECIFIC) --- */

/* 4a. Header & Navbar */
.navbar {
    background-color: var(--background-content) !important;
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    padding: 0.8rem 0;
}
.navbar-brand {
    font-weight: 700;
}
.navbar-brand i {
    color: var(--primary-color);
}
.nav-link {
    font-weight: 500;
}

/* 4b. Trang danh sách ghi chú (Note Grid) */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}
.page-header h1 {
    font-size: 1.8rem;
    font-weight: 700;
}
.note-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}
.note-card {
    background-color: var(--background-content);
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.note-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}
.note-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}
.note-card-excerpt {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
    flex-grow: 1; /* Đẩy phần footer của card xuống dưới */
}
.note-card-footer {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* 4c. Trang chi tiết ghi chú (Note Detail) */
.note-detail-container {
    max-width: 800px;
    margin: 2rem auto;
    background: var(--background-content);
    padding: 3rem;
    border-radius: 0.5rem;
    box-shadow: var(--shadow-md);
}
.note-detail-container h1 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}
.note-detail-meta {
    font-size: 0.9rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1.5rem;
    margin-bottom: 2.5rem;
}
.note-detail-content {
    font-family: 'Lora', 'Georgia', serif;
    font-size: 1.15rem;
    line-height: 1.8;
    color: #333;
}

/* --- 5. RESPONSIVE --- */
@media (max-width: 768px) {
    .note-grid {
        grid-template-columns: 1fr;
    }
    .note-detail-container {
        padding: 1.5rem;
    }
    .note-detail-container h1 {
        font-size: 2rem;
    }
}
/* Thêm vào cuối file style (1).css */

/* Bỏ gạch chân mặc định cho link thẻ ghi chú */
a.note-link {
    text-decoration: none;
}

/* Định dạng cho trình soạn thảo Pell */
.pell-content {
    min-height: 200px;
    padding: 1rem;
}

.pell-actionbar {
    background-color: #f3f4f6;
    border-bottom: 1px solid var(--border-color);
}
/* ===================================================================
   CSS NÂNG CẤP CHO TRÌNH SOẠN THẢO VĂN BẢN (PHIÊN BẢN 2.0)
   =================================================================== */

/* --- Container chính của editor --- */
.editor-container {
    border: 1px solid #d1d5db; /* Viền xám nhạt hơn */
    border-radius: 0.5rem;      /* Bo góc mềm mại */
    background-color: #ffffff;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* Đổ bóng rất nhẹ */
    transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

/* Hiệu ứng khi focus vào editor */
.editor-container:has(.editor-content:focus) {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgb(79 70 229 / 0.2);
}

/* --- Thanh công cụ (Toolbar) --- */
.editor-toolbar {
    padding: 0.5rem 0.75rem;
    background-color: #f9fafb; /* Nền xám cực nhạt, tách biệt khỏi nội dung */
    border-bottom: 1px solid #d1d5db;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem; /* Khoảng cách giữa các nút */
}

/* --- Các nút trên thanh công cụ --- */
.editor-toolbar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;  /* Đặt kích thước cố định */
    height: 36px;
    border: none; /* Bỏ viền đen mặc định */
    background-color: transparent;
    color: #4b5563; /* Màu icon trầm hơn */
    font-size: 1rem; /* Kích thước icon lớn hơn một chút */
    border-radius: 0.375rem; /* Bo tròn nút */
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

/* Hiệu ứng khi di chuột qua nút */
.editor-toolbar button:hover {
    background-color: #eef2ff; /* Màu nền xanh nhạt */
    color: #4f46e5; /* Icon chuyển sang màu tím */
}

/* Đường kẻ phân cách các nhóm nút */
.editor-toolbar .vr {
    height: 20px;
    border-left: 1px solid #d1d5db;
    margin: 0 0.5rem;
}

/* --- Vùng soạn thảo nội dung --- */
.editor-content {
    min-height: 300px;
    padding: 1.25rem 1.5rem;
    font-family: 'Lora', serif; /* Font chữ mềm mại, dễ đọc */
    font-size: 1.1rem;
    line-height: 1.8;
    color: #1f2937;
    outline: none;
    border: none !important; 
    border-radius: 0 !important;
}

/* Giao diện vùng xem HTML */
#html-content {
    height: 300px;
    color: #111827;
    background-color: #f9fafb;
}
/* NÂNG CẤP GIAO DIỆN NỘI DUNG TRÊN DI ĐỘNG */

/* 1. Thiết lập chung cho vùng nội dung */
.content-area {
    /* Chọn một font chữ sans-serif hiện đại, dễ đọc. Be Vietnam Pro là một lựa chọn tốt cho Tiếng Việt. */
    font-family: 'Be Vietnam Pro', sans-serif; 
    
    /* Cỡ chữ cơ bản, 17px là kích thước rất dễ đọc trên di động */
    font-size: 17px; 

    /* QUAN TRỌNG NHẤT: Tăng khoảng cách giữa các dòng để chữ không bị dính vào nhau */
    line-height: 1.7; 

    /* Màu chữ chính, màu xám đậm sẽ dịu mắt hơn màu đen tuyền */
    color: #333;

    /* Thêm khoảng đệm hai bên để nội dung không bị sát mép màn hình */
    padding: 0 15px;
}

/* 2. Phân cấp tiêu đề */
.content-area h1, .content-area h2, .content-area h3 {
    font-weight: 700; /* In đậm tiêu đề */
    line-height: 1.4;   /* Giảm khoảng cách dòng cho tiêu đề để trông gọn hơn */
    margin-top: 1.5em;  /* Tạo khoảng trống phía trên mỗi tiêu đề */
    margin-bottom: 0.8em; /* Tạo khoảng trống phía dưới mỗi tiêu đề */
}

.content-area h1 {
    font-size: 1.8em; /* Tiêu đề lớn nhất */
}
.content-area h2 {
    font-size: 1.5em; /* Tiêu đề cấp 2 */
}

/* 3. Tăng khoảng cách giữa các đoạn văn */
.content-area p {
    margin-bottom: 1.2em;
}

/* 4. Định dạng cho danh sách (quan trọng để có cấu trúc đẹp) */
.content-area ul, .content-area ol {
    /* Thụt lề cho danh sách */
    padding-left: 25px; 
    margin-bottom: 1.2em;
}

.content-area li {
    /* Tạo khoảng cách giữa các mục trong danh sách */
    margin-bottom: 0.5em; 
}
/* ===================================================================
   NÂNG CẤP GIAO DIỆN DANH SÁCH GHI CHÚ (Mobile)
   =================================================================== */

/* 1. Cải thiện phần đầu trang (Tiêu đề và nút) */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding: 0 0.5rem; /* Thêm padding cho cân đối trên mobile */
}

.page-header h1 {
    font-size: 1.75rem; /* Kích thước tiêu đề lớn hơn */
    font-weight: 700;
    color: #111827; /* Màu chữ đen đậm */
}

/* 2. Thiết kế lại Thẻ Ghi Chú (Note Card) */
.note-grid {
    display: grid;
    gap: 1.25rem; /* Khoảng cách giữa các thẻ */
}

/* Bỏ gạch chân cho link thẻ */
.note-link {
    text-decoration: none;
}

.note-card {
    background-color: #ffffff;
    border-radius: 0.75rem; /* Bo góc mềm mại hơn */
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05); /* Đổ bóng nhẹ nhàng */
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100%; /* Giúp các thẻ trong cùng hàng cao bằng nhau */
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Hiệu ứng khi di chuột qua thẻ */
.note-card:hover {
    transform: translateY(-5px); /* Nâng thẻ lên một chút */
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04); /* Đổ bóng đậm hơn */
    border-color: #4f46e5; /* Thêm viền màu chính */
}

.note-card-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.75rem;
}

/* CSS cho phần trích dẫn mới thêm */
.note-card-excerpt {
    font-size: 0.95rem;
    color: #6b7280; /* Màu xám cho chữ phụ */
    line-height: 1.6;
    flex-grow: 1; /* Đẩy phần footer xuống dưới cùng */
    margin-bottom: 1rem;
}

/* CSS cho phần chân thẻ mới thêm */
.note-card-footer {
    font-size: 0.85rem;
    color: #9ca3af; /* Màu xám nhạt hơn */
    border-top: 1px solid #f3f4f6; /* Thêm đường kẻ ngang mờ */
    padding-top: 1rem;
    margin-top: auto; /* Luôn đảm bảo nó ở dưới cùng */
    display: flex;
    align-items: center;
}
/* ===================================================================
   CSS NÂNG CẤP CHO FOOTER
   =================================================================== */

.site-footer {
    background-color: #1a202c; /* Màu nền đen xám hiện đại */
    color: #a0aec0;            /* Màu chữ xám nhạt, dịu mắt */
    padding: 4rem 0 2rem 0;     /* Tăng khoảng cách trên dưới */
    font-size: 0.95rem;
    margin-top: 4rem;           /* Tạo khoảng cách với nội dung phía trên */
}

.footer-heading {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff; /* Màu trắng cho tiêu đề */
    margin-bottom: 1.5rem;
    text-transform: uppercase; /* In hoa tiêu đề */
    letter-spacing: 0.5px;
}

.footer-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.footer-list li {
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
}

.footer-list i {
    color: #4f46e5; /* Màu icon theo màu chính của bạn */
    margin-right: 12px;
    font-size: 1.1em;
    width: 20px; /* Căn chỉnh các icon thẳng hàng */
    text-align: center;
}

.site-footer a {
    color: #a0aec0;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.site-footer a:hover {
    color: #ffffff; /* Đổi màu trắng khi di chuột */
    text-decoration: underline;
}

.footer-separator {
    border-top: 1px solid #2d3748; /* Đường kẻ ngang mờ */
    margin: 2.5rem 0;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Tự động xuống hàng trên mobile */
    gap: 1rem;
    font-size: 0.875rem;
    color: #718096; /* Màu chữ nhạt hơn cho phần bản quyền */
}

.footer-bottom a {
    color: #a0aec0; /* Màu link sáng hơn một chút */
    font-weight: 500;
}
/* Bỏ các dấu chấm đầu dòng của danh sách trong footer */
::marker {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    text-indent: 0px !important;
    text-align: start !important;
    text-align-last: auto !important;
    list-style: none; /* Bỏ dấu chấm */
    padding-left: 0;  /* Bỏ khoảng cách thụt lề mặc định */
}
dl, ol, ul {
    margin-top: 0;
    margin-bottom: 1rem;
    list-style: none!important;
    padding-left: 0;
}
.page-header-actions {
    display: flex;
    gap: 0.75rem;
}
/* --- FOOTER --- */
.site-footer {
    background-color: #03204c; /* Màu nền xanh đậm như trong hình */
    color: #a0aec0; /* Màu chữ xám nhạt */
    padding: 2rem 0;
    text-align: center;
    font-size: 0.9rem;
    width: 100%;
    margin-top: auto; /* Đảm bảo footer luôn ở dưới cùng */
}
.site-footer p {
    margin-bottom: 0.5rem;
}
.site-footer a {
    color: #ffffff;
    font-weight: 500;
    text-decoration: underline;
}
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    --bs-gutter-x: 0.5rem !important;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-right: auto;
    margin-left: auto;
}