/* ======================================================
   TECHTREE BLOG - FINAL COMPLETE FIX
   (Full Width, Correct Colors, High Contrast)
   ====================================================== */

/* 1. BẢNG MÀU (THEME CONFIGURATION) */
:root {
    /* --- LIGHT MODE --- */
    --bg-main: #ffffff;
    --text-color: #1a1a1a;
    --text-gray: #555555;
    --brand: #009933;            /* Xanh lá thương hiệu */
    --link-article: #9f224e;     /* Đỏ mận (Link bài viết) */
    --border: #e5e5e5;
    
    /* Màu nền khung bài viết (Giấy trắng) */
    --card-bg: #ffffff;          
    --quote-border: #9f224e;
    
    --font-read: 'Merriweather', serif;
    --font-ui: 'Inter', sans-serif;
}

/* --- DARK MODE (FIX MÀU XÁM SÁNG NỔI BẬT) --- */
[data-theme="dark"] {
    /* Nền body màu Đen sâu (để làm nổi bật khung bài viết) */
    --bg-main: var(--bg-body);          
    
    /* Màu chữ chính */
    --text-color: #e4e4e7;       
    --text-gray: #a1a1aa;
    --brand: #4ade80;
    --link-article: #fca5a5;     /* Hồng phấn */
    --border: #27272a;           /* Viền tối */
    
    /* QUAN TRỌNG: Màu nền khung bài viết là Xám Sáng (Zinc-800) 
       để tách biệt hẳn với nền đen */
    --card-bg: transparent;          
    --quote-border: #fca5a5;
}

/* 2. CẤU TRÚC BODY GLOBAL */
body {
    background-color: var(--bg-main) !important;
    color: var(--text-color);
    font-family: var(--font-ui);
    margin: 0;
    transition: background-color 0.3s, color 0.3s;
}

/* RESET LINK TOÀN TRANG */
a { text-decoration: none; color: inherit; transition: 0.3s; }
a:hover { color: var(--brand); }

/* ======================================================
   CẤU TRÚC LAYOUT CHÍNH (FIX CĂN LỀ & KHOẢNG CÁCH)
   ====================================================== */
.blog-container {
    display: grid;
    /* Chia cột: Nội dung chính 3 phần - Sidebar 1 phần */
    grid-template-columns: 3fr 1fr; 
    gap: 50px;
    /* 1. FIX CHIỀU RỘNG: 1200px để bằng đúng lề Logo và Nút Header */
    max-width: 1200px; 
    margin: 0 auto;
}
/* 2. Cấu hình RIÊNG cho trang Danh sách (blog.html) */
/* Vì trang này đã có tiêu đề "Tech News" to ở trên rồi, nên khoảng cách này nhỏ thôi */
.page-list {
    padding: 10px 20px 100px 20px !important;
}

/* 3. Cấu hình RIÊNG cho trang Chi tiết (post_detail.html) */
/* Trang này cần đẩy xuống sâu để né cái Menu Header */
.page-detail {
    padding: 90px 20px 100px 20px !important;
}

/* Header của trang Blog (Tiêu đề to) */
.blog-header {
    text-align: center; margin-bottom: 40px; grid-column: 1 / -1;
    border-bottom: 1px solid var(--border); padding-bottom: 20px;
}
.blog-header h1 { font-size: 2.8rem; font-weight: 800; margin-bottom: 15px; }

/* Bộ lọc (Filter) */
.blog-filter { display: flex; gap: 10px; justify-content: center; margin-bottom: 30px; }
.filter-btn {
    background: transparent; border: 1px solid var(--border);
    color: var(--text-gray); padding: 8px 24px; border-radius: 30px; 
    font-weight: 600; cursor: pointer; transition: 0.3s;
}
.filter-btn.active, .filter-btn:hover {
    background: var(--brand); color: #fff; border-color: var(--brand);
}

/* ======================================================
   PHẦN 1: GIAO DIỆN DANH SÁCH BÀI VIẾT (LISTING)
   ====================================================== */
.news-card {
    display: flex; gap: 30px; margin-bottom: 30px;
    
    /* Màu nền card lấy từ biến --card-bg */
    background: var(--card-bg) !important; 
    border: 1px solid var(--border) !important;
    border-radius: 12px;
    padding: 20px;
    overflow: hidden;
    
    /* Hiệu ứng nổi nhẹ */
    transition: transform 0.3s, box-shadow 0.3s;
}

.news-card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
    border-color: var(--brand) !important;
}

.news-thumb {
    width: 260px; height: 170px; flex-shrink: 0;
    border-radius: 8px; overflow: hidden;
}
.news-thumb img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.news-card:hover .news-thumb img { transform: scale(1.05); }

.news-content { flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* Tiêu đề trong thẻ bài viết */
.news-content h3 {
    font-family: var(--font-ui); font-size: 1.5rem; font-weight: 700;
    margin-bottom: 12px; line-height: 1.3;
    color: var(--text-color);
}
.news-content h3 a {
    color: var(--text-color) !important; 
    font-weight: 800; 
    text-decoration: none; 
    transition: color 0.2s;
}
.news-content h3 a:hover {
    color: var(--brand) !important;
}

.news-meta { font-size: 0.9rem; color: var(--text-gray); margin-bottom: 12px; }
.news-excerpt { 
    font-size: 1rem; color: var(--text-gray); line-height: 1.6; 
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; 
}

/* Sidebar (Cột bên phải) */
.sidebar-ad {
    /* Nền sidebar hơi trong suốt để không nặng nề */
    background: rgba(128,128,128,0.05); 
    border: 1px solid var(--border);
    border-radius: 8px; min-height: 250px; 
    display: flex; align-items: center; justify-content: center; 
    margin-bottom: 30px;
}
.sidebar-list li { list-style: none; padding: 12px 0; border-bottom: 1px solid var(--border); color: var(--text-color); }

/* ======================================================
   PHẦN 2: CHI TIẾT BÀI VIẾT (DETAIL PAGE)
   ====================================================== */

/* 3. FIX ĐỒNG BỘ MÀU: 
   Gộp class .article-wrapper và .article-detail lại để đảm bảo ăn màu nền 
*/
.article-wrapper, .article-detail {
    /* Lấy màu xám sáng (Dark Mode) hoặc Trắng (Light Mode) */
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    
    /* Padding rộng rãi để nội dung không dính sát lề */
    padding: 40px 20px !important;
    
    border-radius: 12px;
    border: 1px solid var(--border) !important;
    
    /* Bóng đổ nhẹ để nổi lên khỏi nền đen */
    box-shadow: 0 5px 25px rgba(0,0,0,0.1) !important;
}

/* Tiêu đề H1 lớn trong bài */
#art-title {
    font-family: var(--font-read); font-size: 2.8rem; font-weight: 700;
    line-height: 1.25; margin-bottom: 20px; color: var(--text-color) !important;
}

.breadcrumb {
    font-size: 0.9rem; color: var(--text-gray); margin-bottom: 15px; 
    text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px;
}

/* Định dạng nội dung bài viết (Typography) */
.article-body {
    font-family: var(--font-read); font-size: 1.25rem; /* ~20px cho dễ đọc */
    line-height: 1.8; color: var(--text-color); text-align: justify;
}

.article-body p:first-of-type {
    font-family: var(--font-ui); font-weight: 500; font-size: 1.35rem; 
    margin-bottom: 40px; line-height: 1.5; color: var(--text-color);
}

.article-body h2 {
    font-family: var(--font-ui); font-weight: 700; font-size: 1.8rem; 
    margin-top: 50px; margin-bottom: 15px; line-height: 1.3; text-align: left;
    color: var(--text-color);
}
.article-body p { margin-bottom: 24px; }

/* Ảnh trong bài viết */
.article-body img {
    width: 100%; height: auto; margin: 30px 0; border-radius: 4px; display: block;
    transition: filter 0.3s;
}
/* Giảm sáng ảnh 1 chút khi ở chế độ tối cho đỡ chói */
[data-theme="dark"] .article-body img { filter: brightness(0.9); border: 1px solid #333; }

/* Link trong bài (Màu riêng biệt nổi bật) */
.article-body a { 
    color: var(--link-article) !important; 
    text-decoration: underline; font-weight: 600; text-underline-offset: 3px; 
}
.article-body a:hover {
    color: var(--brand) !important;
    background: rgba(0,0,0,0.05);
}

.article-body blockquote {
    border-left: 4px solid var(--link-article); padding: 20px; margin: 30px 0;
    background: rgba(128,128,128,0.1); font-style: italic; font-size: 1.2rem;
    color: var(--text-color);
}

/* ======================================================
   PHẦN 3: MOBILE RESPONSIVE (GIỮ NGUYÊN FIX TRÀN VIỀN)
   ====================================================== */

@media (max-width: 900px) {
    
    .blog-container {
        grid-template-columns: 1fr; /* Về 1 cột */
        gap: 30px;
        width: 100%; max-width: 100%;
    }
    
    header { height: auto; min-height: 60px; }

    /* Fix List Mobile (Trong suốt, bỏ khung để gọn) */
    .news-card {
        flex-direction: column; gap: 15px; padding: 0 !important; margin-bottom: 30px;
        background: transparent !important; 
        border: none !important; border-bottom: 1px solid var(--border) !important;
        padding-bottom: 25px !important; border-radius: 0; box-shadow: none !important;
    }
    /* Mobile của trang Danh sách */
    .page-list {
        padding: 10px 10px 40px 10px !important;
    }

    /* Mobile của trang Chi tiết (Menu mobile nhỏ hơn nên chỉ cần 80px) */
    .page-detail {
        padding: 85px 10px 40px 10px !important;
    }
    .news-card:hover { transform: none; }
    
    .news-thumb { width: 100%; height: auto; aspect-ratio: 16/9; border-radius: 6px; }
    .news-content h3 { font-size: 1.35rem; }

    /* Fix Detail Mobile (Padding nhỏ lại) */
    .article-wrapper, .article-detail {
        padding: 25px 14px !important; /* Giảm padding */
        border: none !important; /* Bỏ viền trên mobile cho thoáng */
        background: transparent !important; /* Mobile có thể để nền đen cho liền mạch */
    }

    .article-body { font-size: 1.125rem; line-height: 1.6; text-align: justify; }
    #art-title { font-size: 1.8rem; line-height: 1.25; margin-bottom: 15px; }

    /* Tràn viền ảnh (Full Bleed) */
    .article-body img {
        width: 100vw; 
        margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%);
        max-width: 100vw; border-radius: 0; border: none;
    }
    
    .article-body blockquote {
        width: 100vw; margin-left: calc(-50vw + 50%);
        padding: 20px 15px; border-radius: 0;
    }

    aside { display: block; margin-top: 30px; }
    /* Thay thế dòng .breadcrumb { display: none; } bằng đoạn này */
    .breadcrumb { 
        display: block;          /* Cho hiện lên */
        font-size: 0.75rem;      /* Chữ nhỏ lại xíu cho gọn */
        margin-bottom: 10px;
        white-space: nowrap;     /* Giữ trên 1 dòng */
        overflow: hidden;        /* Nếu dài quá thì ẩn bớt */
        text-overflow: ellipsis; /* Hiện dấu ... nếu dài quá */
    }
    .header-btn { display: none; }
}

/* --- THÊM VÀO CUỐI FILE css/blog.css --- */
/* CHỈ ÁP DỤNG KHI KHÔNG PHẢI DARK MODE */

:root:not([data-theme="dark"]) .article-wrapper,
:root:not([data-theme="dark"]) .article-detail,
:root:not([data-theme="dark"]) .news-card {
    background: transparent !important; /* Nền trong suốt */
    border: none !important;            /* Bỏ viền */
    box-shadow: none !important;        /* Bỏ bóng đổ */
    padding-left: 0 !important;         /* Bỏ lề trái để chữ tràn ra */
    padding-right: 0 !important;        /* Bỏ lề phải */
}

/* --- MỤC LỤC TỰ ĐỘNG (TOC) - PHIÊN BẢN COMPACT --- */
.toc-container {
    background: rgba(255, 255, 255, 0.05); /* Nền mờ */
    border: 1px solid var(--glass-border);
    border-left: 3px solid var(--primary-green);
    border-radius: 8px;
    padding: 15px; /* Thu nhỏ padding tổng */
    margin: 20px 0 30px 0;
    
    /* Mới: Bỏ float để nó đứng 1 mình 1 dòng */
    width: 80%; /* Hoặc để 60-70% nếu muốn nó gọn hơn */
    max-width: 500px; /* Giới hạn chiều rộng tối đa cho đẹp */
    float: none !important; /* QUAN TRỌNG: Hủy chế độ trôi */
    display: block; /* Đảm bảo nó là khối riêng biệt */
    clear: both; /* Ngăn không cho cái gì dính vào 2 bên */
}

/* Tiêu đề mục lục */
.toc-title {
    font-family: var(--font-heading);
    font-weight: bold;
    font-size: 1rem; /* Chữ tiêu đề nhỏ lại (cũ là 1.1rem) */
    color: var(--primary-green);
    margin-bottom: 10px; /* Khoảng cách với list bên dưới nhỏ lại */
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Danh sách link */
.toc-list {
    display: flex;
    flex-direction: column;
    gap: 0; /* Xóa khoảng cách thừa giữa các thẻ */
}

/* Từng dòng link */
.toc-list a {
    text-decoration: none;
    color: var(--text-color);
    
    font-size: 0.9rem; /* Cỡ chữ nhỏ (Cũ là 0.95rem) */
    line-height: 1.3;  /* Kéo các dòng sát nhau hơn */
    
    padding: 6px 0; /* Khoảng cách trên dưới cực nhỏ */
    display: block;
    border-bottom: 1px dashed rgba(128, 128, 128, 0.15); /* Gạch chân mờ hơn */
    transition: 0.2s;
}

.toc-list a:hover {
    color: var(--primary-green);
    padding-left: 5px;
    background: rgba(0,255,0,0.02);
}

/* --- CẤU HÌNH CHO ĐIỆN THOẠI (MOBILE) --- */
@media (max-width: 768px) {
    .toc-container {
        /* Chiếm 1/2 (50%) màn hình điện thoại theo yêu cầu */
        width: 80%; /* Tôi để 60% cho dễ đọc hơn chút (50% hơi bé chữ sẽ bị xuống dòng nhiều) */
        /* Nếu bạn vẫn muốn cứng 50% thì sửa số trên thành 50% nhé */
        
        float: none; /* Mobile thì không cần float, để nó nằm riêng 1 dòng */
        margin-right: 0;
        padding: 12px;
    }
    
    .toc-title {
        font-size: 0.9rem;
    }
    
    .toc-list a {
        font-size: 0.85rem; /* Chữ mobile nhỏ hơn chút nữa */
        padding: 5px 0;
    }
}

/* --- CHUẨN HÓA FONT CHỮ BÀI VIẾT (XÓA FORMAT RÁC) --- */

/* 1. Ép tất cả đoạn văn trong bài viết phải giống nhau y đúc */
#art-content p {
    font-family: var(--font-read), 'Segoe UI', sans-serif !important; /* Ưu tiên font của web */
    font-size: 1.1rem !important; /* Kích thước chuẩn (khoảng 18px) */
    line-height: 1.8 !important;  /* Khoảng cách dòng thoáng */
    color: var(--text-color) !important; /* Màu chữ theo giao diện Sáng/Tối */
    font-weight: 400 !important;  /* Độ đậm vừa phải */
    text-align: justify;          /* Căn đều 2 bên cho đẹp mắt */
    
    margin-bottom: 20px !important; /* Khoảng cách giữa các đoạn */
    background-color: transparent !important; /* Xóa màu nền trắng/đen nếu lỡ copy phải */
}

/* 2. Xử lý trường hợp "Format rác" ẩn trong thẻ span/b/i */
/* (Nhiều khi copy từ Word nó nhét font vào thẻ span nằm trong thẻ p) */
#art-content p span {
    font-family: inherit !important;
    font-size: inherit !important;
    color: inherit !important;
    background-color: transparent !important;
}

/* 3. Riêng thẻ H2, H3 (Tiêu đề nhỏ) thì cho đậm và to hơn */
#art-content h2, 
#art-content h3 {
    color: var(--text-color) !important;
    margin-top: 40px !important;
    margin-bottom: 20px !important;
    line-height: 1.4 !important;
}

/* ======================================================
   CỐ ĐỊNH GIAO DIỆN BÀI VIẾT (FIX FONT & DANH SÁCH)
   ====================================================== */

/* 1. Ép tất cả các thẻ trong bài viết về đúng 1 chuẩn */
/* Bao gồm: đoạn văn (p), danh sách (li), bảng (td), và các thẻ con (span, strong) */
#art-content p, 
#art-content li, 
#art-content span,
#art-content div {
    font-family: var(--font-read), 'Segoe UI', sans-serif !important;
    font-size: 1.1rem !important; /* Cỡ chữ chuẩn */
    line-height: 1.8 !important;   /* Dãn dòng thoáng */
    color: var(--text-color) !important;
    text-align: justify !important; /* Căn đều 2 bên */
    background-color: transparent !important; /* Xóa nền rác */
    font-weight: 400 !important; /* Độ đậm đồng nhất */
}

/* 2. Xử lý khoảng cách đoạn văn */
#art-content p {
    margin-bottom: 20px !important;
}

/* 3. XỬ LÝ DANH SÁCH (UL/OL - Dấu chấm tròn/số) */
/* Cái này sẽ trị bệnh "rìa rìa" của bạn */
#art-content ul, 
#art-content ol {
    margin-left: 10px !important;   /* Chỉ thụt lề trái 1 chút thôi */
    margin-bottom: 25px !important; /* Cách đoạn dưới ra */
    padding-left: 20px !important;  /* Khoảng trống cho dấu chấm */
    list-style-position: outside !important; /* QUAN TRỌNG: Đẩy dấu chấm ra ngoài lề văn bản -> Chữ sẽ thẳng hàng tắp */
}

/* 4. Từng dòng trong danh sách */
#art-content li {
    margin-bottom: 10px !important; /* Khoảng cách giữa các gạch đầu dòng */
    padding-left: 5px !important;   /* Khoảng cách từ dấu chấm đến chữ */
}

/* 5. Ép thẻ tiêu đề (H2, H3) đậm và to rõ */
#art-content h2, 
#art-content h3 {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    color: var(--text-color) !important;
    margin-top: 40px !important;
    margin-bottom: 15px !important;
    line-height: 1.4 !important;
}

/* 6. Fix lỗi ảnh bị tràn màn hình (nếu có) */
#art-content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px;
    margin: 20px 0;
    display: block;
}

/* ======================================================
   CTA MINIMALIST (NÚT BẤM ĐƠN GIẢN & TINH TẾ)
   ====================================================== */

/* Container để căn chỉnh vị trí nút */
.cta-container-minimal {
    width: 40%; /* Chiếm 40% chiều ngang */
    float: right; /* Nằm bên phải */
    margin-left: 30px;
    margin-bottom: 30px;
    margin-top: 10px;
    clear: both;
    display: flex;
    justify-content: flex-end; /* Căn nút sang phải */
}

/* Style của nút bấm */
.btn-cta-minimal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Khoảng cách giữa icon và chữ */
    
    padding: 14px 24px;
    border-radius: 50px; /* Bo tròn hình viên thuốc (Pill shape) sang trọng */
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    
    /* MÀU MẶC ĐỊNH (LIGHT MODE): Nền xám tối - Chữ trắng */
    background-color: #374151; 
    color: #ffffff !important;
    
    /* Hiệu ứng chuyển động mượt mà */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Hiệu ứng nảy (bouncy) */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* HIỆU ỨNG HOVER (DI CHUỘT VÀO) */
.btn-cta-minimal:hover {
    transform: translateY(-4px) scale(1.02); /* Nhảy lên và to ra chút xíu */
    
    /* Nền sáng lên (Xanh Neon thương hiệu) */
    background-color: var(--primary-green, #00ff41); 
    
    /* Chữ chuyển thành màu tối để dễ đọc trên nền xanh sáng */
    color: #000000 !important;
    
    box-shadow: 0 10px 20px rgba(0, 255, 65, 0.3); /* Bóng đổ màu xanh phát sáng */
}

/* --- CHẾ ĐỘ DARK MODE --- */
:root[data-theme="dark"] .btn-cta-minimal {
    /* MÀU MẶC ĐỊNH (DARK MODE): Nền trắng - Chữ đen (Nổi bật trên nền tối) */
    background-color: #ffffff;
    color: #000000 !important;
}

:root[data-theme="dark"] .btn-cta-minimal:hover {
    /* Hover ở dark mode cũng chuyển sang xanh neon cho đồng bộ */
    background-color: var(--primary-green, #00ff41);
    color: #000000 !important;
    box-shadow: 0 10px 20px rgba(0, 255, 65, 0.4);
}

/* --- MOBILE --- */
@media (max-width: 768px) {
    .cta-container-minimal {
        width: 100%;
        float: none;
        margin-left: 0;
        justify-content: center; /* Ra giữa màn hình */
        margin-top: 30px;
    }
    
    .btn-cta-minimal {
        width: 100%; /* Nút dài full màn hình cho dễ bấm */
    }
}
/* ======================================================
   FIX MỤC LỤC (TOC) CHO NỀN TRẮNG (LIGHT MODE)
   ====================================================== */

/* Khi ở chế độ Sáng (Light Mode), thêm viền và bóng đổ */
:root:not([data-theme="dark"]) .toc-container {
    /* Viền màu xanh thương hiệu (hoặc màu xám đậm nếu muốn nhẹ nhàng hơn) */
    border: 2px solid var(--primary-green) !important; 
    
    /* Màu nền hơi xám nhẹ để tách biệt khỏi nền trắng của bài viết */
    background-color: #f8f9fa !important;
    
    /* Đổ bóng nhẹ để tạo khối */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
}

/* Chỉnh lại màu chữ tiêu đề mục lục trong nền trắng cho rõ */
:root:not([data-theme="dark"]) .toc-title {
    color: var(--primary-green);
    border-bottom: 1px solid #ddd; /* Gạch chân mờ dưới tiêu đề */
    padding-bottom: 8px;
    margin-bottom: 12px;
}

/* Chỉnh đường kẻ đứt đoạn giữa các link trong nền trắng */
:root:not([data-theme="dark"]) .toc-list a {
    border-bottom: 1px dashed #ccc;
    color: #333; /* Màu chữ đen cho dễ đọc */
}

:root:not([data-theme="dark"]) .toc-list a:hover {
    color: var(--primary-green);
    background-color: rgba(0, 255, 65, 0.1); /* Hover màu xanh nhạt */
}
/* ======================================================
   NÚT BACK TO TOP (MÀU XÁM - TRONG SUỐT)
   ====================================================== */

#back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    
    /* Màu xám trong suốt (Alpha = 0.3) */
    background-color: rgba(100, 100, 100, 0.3);
    color: #ffffff; /* Mũi tên màu trắng */
    
    border: none;
    border-radius: 50%; /* Hình tròn */
    cursor: pointer;
    z-index: 9999; /* Luôn nằm trên cùng */
    
    /* Ẩn đi mặc định */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px); /* Đẩy xuống dưới 1 chút để khi hiện lên có hiệu ứng trồi lên */
    
    /* Hiệu ứng mượt mà */
    transition: all 0.4s ease;
    backdrop-filter: blur(4px); /* Làm mờ hậu cảnh đằng sau nút */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    
    /* Căn giữa mũi tên */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

/* Khi nút hiện ra (được JS kích hoạt) */
#back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Khi di chuột vào: Nút đậm lên */
#back-to-top:hover {
    background-color: rgba(80, 80, 80, 0.9); /* Xám đậm gần như đặc */
    transform: translateY(-5px); /* Bay lên nhẹ */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
/* --- TỐI ƯU NÚT BACK TO TOP CHO ĐIỆN THOẠI (MOBILE) --- */
@media (max-width: 768px) {
    #back-to-top {
        /* Cho nút nhỏ lại một chút */
        width: 40px; 
        height: 40px;
        
        /* Đưa sát vào góc hơn để đỡ che chữ */
        bottom: 20px; 
        right: 15px; 
        
        /* Chữ mũi tên nhỏ lại chút */
        font-size: 1rem;
        
        /* Mobile ra ngoài trời nắng hay bị lóa, nên cho nền đậm hơn chút xíu để dễ nhìn */
        background-color: rgba(80, 80, 80, 0.5); 
    }
}