/* --- CÀI ĐẶT CHUNG --- */
    /* --- CÀI ĐẶT CHUNG --- */
       :root {
            /* THAY ĐỔI: Chuyển sang Light Mode */
            --header-bg: white;
            --header-text: #333; /* Chữ đen/xám đậm */
            --header-border: #e0e0e0; /* Viền xám nhạt */
            --footer-bg: #f8f8f8; /* Nền xám rất nhạt */
            --footer-text: #555; /* Chữ xám */
            
            --brand-color: #2c0054; /* Giữ màu tím cho điểm nhấn */
            
            --dropdown-bg: white;
            --dropdown-text: #333;
            --dropdown-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f4f4f4; 
        }
        a { text-decoration: none; color: inherit; }
        ul { list-style: none; margin: 0; padding: 0; }
        button { cursor: pointer; }

        /* --- 1. NỀN VÀ BỐ CỤC HEADER CHUNG --- */
        .main-header {
            background: var(--header-bg);
            color: var(--header-text);
            padding: 12px 16px; 
            position: relative; 
             border-bottom: 1px solid var(--header-border);
        }

        /* --- 2. PHẦN HEADER TRÊN (Logo, Search, Auth) --- */
        .header-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            /* THAY ĐỔI: Thêm gap cho desktop */
            gap: 10px;
        }

        /* Logo */
        .logo-container {
            display: flex;
            align-items: center;
            flex-shrink: 0; 
        }
        .logo-img {
            height: 50px;
            width: 50px;
            /* border-radius: 50%; */ 
            margin-right: 10px;
        }
        .logo-text h1 { 
            font-size: 20px; 
            font-weight: bold; 
            margin: 0; 
            color: #0b57d0; /* Màu xanh Google */
        
            
        }
        .logo-text p { 
            font-size: 14px; 
            margin: 0; 
            font-weight: 300; 
        }

        /* Thanh tìm kiếm */
        .search-container {
            flex-grow: 1; 
            display: flex;
            justify-content: center;
            /* THAY ĐỔI: Bỏ padding 2 bên, vì gap đã xử lý */
            padding: 0;
        }
        .search-container form {
            display: flex;
            background-color: white;
            border-radius: 5px;
            overflow: hidden;
            width: 100%;
            max-width: 450px;
        }
        .search-container input[type="text"] {
            
            border: 1px solid #ddd;
            border-radius: 20px;
            padding: 10px 15px;
            width: 100%;
            font-size: 14px;
        }
        .search-container input[type="text"]:focus { outline: none; }
        .search-container button {
            border: none;
            background-color: white;
            padding: 0 12px;
            cursor: pointer;
            color: #333;
        }

        /* Biểu tượng xã hội (Đã bị loại bỏ) */
        .social-icons {
            display: none; 
        }
        
        /* --- 3. MENU ĐIỀU HƯỚNG (Desktop) --- */
        .navigation-menu {
          
            border-top: 1px solid var(--header-border);
            margin-top: 10px;
            width: 100%; /* Đảm bảo menu chiếm toàn bộ chiều rộng */
        }
        .navigation-menu ul {
            display: flex;
            justify-content: center;
            padding: 10px 0;
        }
        .navigation-menu li { margin: 0 15px; }
        .navigation-menu a {
            color: var(--header-text);
            font-size: 14px;
            font-weight: bold;
            padding: 10px 5px;
            display: block;
            
        }
        .navigation-menu a:hover { color: #0b57d0; text-decoration: none; }
        .navigation-menu .fa-caret-down { font-size: 12px; margin-left: 5px; }
        
        /* --- 4. NÚT MENU MOBILE (Ẩn trên desktop) --- */
        .mobile-menu-toggle {
            display: none; /* Ẩn đi trên desktop */
            font-size: 24px;
            color: var(--header-text);
            background: none;
            border: none;
            padding: 10px;
        }

        /* --- 5. PHẦN ĐĂNG NHẬP / TÀI KHOẢN --- */
        .user-auth {
            display: flex;
            align-items: center;
            flex-shrink: 0;
        }
        
        /* Nút đăng nhập */
        .login-btn {
            display: flex;
            align-items: center;
            background-color: var(--dropdown-bg);
            color: #0b57d0; /* Màu xanh Google */
            border: 1px solid #ddd;
            border-radius: 20px;
            padding: 8px 12px;
            font-size: 14px;
            font-weight: bold;
        }
        .login-btn i {
            margin-right: 8px;
            font-size: 18px;
        }
        .login-btn:hover {
            background-color: #f8f8f8;
        }

        /* Phần avatar khi đã đăng nhập */
        .user-profile.dropdown {
            position: relative;
            /* THÊM MỚI: Đảm bảo nó là flex item */
            display: flex; 
        }
        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid transparent;
        }
        .user-profile.dropdown.show .avatar {
             border-color: rgba(255, 255, 255, 0.7); /* Viền khi active */
        }
        
        /* Menu xổ xuống */
        .dropdown-menu {
            display: none; 
            position: absolute;
            top: calc(100% + 10px) !important; 
            right: 0 !important;
            left: auto !important; 
            float: none !important; 
            width: 300px;
            background-color: var(--dropdown-bg);
            color: var(--dropdown-text);
            border-radius: 12px;
            box-shadow: var(--dropdown-shadow);
            z-index: 1001;
            overflow: hidden;
            border: none; 
            padding: 0; 
        }
        .dropdown-menu.show {
            display: block;
        }
        
        .dropdown-header {
            display: flex;
            align-items: center;
            padding: 16px;
            border-bottom: 1px solid #eee;
        }
        .avatar-large {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 12px;
        }
        .user-info {
            display: flex;
            flex-direction: column;
        }
        .user-info strong { font-size: 16px; }
        .user-info span { 
            font-size: 14px; 
            color: #555; 
            word-break: break-all;
        }
        
        .dropdown-list {
            padding: 8px 0;
        }
        .dropdown-list li a.dropdown-item {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            font-size: 14px;
            color: var(--dropdown-text);
        }
        .dropdown-list li a.dropdown-item:hover {
            background-color: #f5f5f5;
        }
        .dropdown-list li a.dropdown-item i {
            width: 24px;
            margin-right: 12px;
            font-size: 16px;
            text-align: center;
            color: #555;
        }
        
        /* Container cho social và auth (Đã bị loại bỏ) */
        .social-auth-container {
            display: none;
        }

        /* Mục đăng nhập bên trong menu mobile (Đã bị loại bỏ) */
        .nav-auth-mobile {
            display: none;
        }

        /* Wrapper cho search và auth (Đã bị loại bỏ) */
        .search-auth-wrapper {
            /* Không còn cần thiết */
            display: flex;
            flex-grow: 1; /* Cho phép nó co giãn trên desktop */
            justify-content: center; /* Giữ search ở giữa trên desktop */
        }
        
         /* --- CSS CHO FOOTER --- */
        .main-footer {
            background: var(--footer-bg);
            color: var(--header-text);
            padding: 30px 20px;
            margin-top: 40px; /* Khoảng cách với nội dung chính */
            font-family: Arial, sans-serif;
        }
        .footer-container {
            max-width: 1100px;
            margin: 0 auto;
        }
          .footer-content {
            display: flex;
            flex-wrap: wrap; 
            /* THAY ĐỔI: Luôn xếp cột và căn giữa */
            flex-direction: column;
            justify-content: center; 
            align-items: center; 
            gap: 20px; /* Khoảng cách giữa các mục */
            padding-bottom: 10px;
        }
        
        /* Phần social icons */
        .footer-social {
            display: flex;
            gap: 15px; /* Khoảng cách giữa các icon */
        }
        .footer-social a {
            color:var(--brand-color);
            font-size: 24px;
            transition: transform 0.2s;
        }
        .footer-social a:hover {
            transform: scale(1.1);
              color:#007bff;
        }
        
        /* Phần email */
        .footer-contact a {
            color:#007bff;
            font-size: 14px;
            font-weight: bold;
        }
        .footer-contact a i {
            margin-right: 8px;
        }
        .footer-contact a:hover {
            text-decoration: none;
        }
        
        /* Phần copyright */
        .footer-copyright {
          
            padding-top: 3px;
            margin-top: 20px;
            text-align: center;
            font-size: 14px;
            font-weight: bold;
              color:#000000;
        }

        /* ==============================================
        --- PHẦN RESPONSIVE CHO MOBILE (Media Query) ---
        ==============================================
        */
        
        @media (max-width: 768px) {
            
            .main-header {
                padding: 12px 10px; /* Giảm padding mobile */
            }

            .header-top {
                /* THAY ĐỔI: Chuyển sang 1 hàng ngang */
                flex-direction: row;
                flex-wrap: nowrap; /* Không cho xuống hàng */
                gap: 10px;
                position: static; 
            }
            
            .logo-container {
                /* THAY ĐỔI: Xếp sau nút menu */
                order: 2; 
                padding: 0; 
                width: auto;
                justify-content: flex-start;
            }
            
            /* THÊM MỚI: Ẩn chữ bên cạnh logo để tiết kiệm không gian */
            .logo-text {
                display: none;
            }
            
            /* THAY ĐỔI: Bỏ wrapper */
            .search-auth-wrapper {
                display: none; /* Ẩn wrapper trên mobile */
            }

            .search-container {
                /* THAY ĐỔI: Xếp giữa, co giãn */
                display: flex;
                order: 3;
                flex-grow: 1; 
                padding: 0;
                width: auto;
                justify-content: center;
            }
            
            .header-top .user-auth {
                /* THAY ĐỔI: Xếp cuối cùng (bên phải) */
                display: flex;
                order: 4;
                margin: 0;
            }
            
            /* --- Xử lý Menu Navigation --- */
            .navigation-menu {
                display: none; 
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                 background: white;
           
                
                z-index: 1000;
                border-top: 1px solid rgba(255, 255, 255, 0.2);
            }
            .navigation-menu.is-active { display: block; }
            .navigation-menu ul {
                flex-direction: column;
                align-items: center;
                padding: 0;
            }
            .navigation-menu li {
                width: 100%;
                text-align: center;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            }
            .navigation-menu li:last-child { border-bottom: none; }
            .navigation-menu a { padding: 15px 10px; }
            
            /* Mục auth trong mobile đã bị xóa */
            

            .mobile-menu-toggle {
                /* THAY ĐỔI: Hiển thị và xếp đầu tiên */
                display: block;
                position: static;
                order: 1;
                padding: 0 5px; /* Giảm padding */
                top: auto; /* Xóa vị trí absolute */
                right: auto;
                
            }

            /* --- Xử lý dropdown trên mobile --- */
            .dropdown-menu {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
               width: auto;
                max-width: 320px;
            }
             .footer-content {
                flex-direction: column; /* Xếp chồng lên nhau */
                align-items: center; /* Căn giữa */
            }
        }
        
        @media (max-width: 380px) {
            .logo-text h1 { font-size: 18px; }
            .logo-text p { font-size: 11px; }
            .logo-img { height: 40px; width: 40px; }
        }

    

    
/*----------------------------------------*/

.owl-carousel .item{
 /* border: 1px solid black; */
 font-size: 24px;
 text-align: center;
 margin-top: 20px;
 transition: transform .5s ease;
}

 .owl-carousel .item:hover{
    /* border: 1px solid black; */
    transform : scale(1.1);
}

/* .owl-carousel img{
    transition: transform .5s ease;
  }
 .owl-carousel img:hover{
    
    transform : scale(1.25);
} */

.owl-next{
 float:right;
}
.owl-prev{
 float:left;
}
.owl-prev span{
 font-size: 24px;
 font-weight: bold;
}
.owl-next span{
 font-size: 24px;
 font-weight: bold;
}




.buttermilk{
    background-color:#fff;background-image:linear-gradient(#fff7ef, #fff);
    background-image:-webkit-linear-gradient(#fff7ef, #fff);
    background-image:-moz-linear-gradient(#fff7ef, #fff);
    background-image:-ms-linear-gradient(#fff7ef, #fff);
    background-image:-o-linear-gradient(#fff7ef, #fff);
    padding:50px 40px;
    border:1px solid #efe8e1;
    padding-bottom:20px;
}

.smbg{
    background-color:#fff;
    background-image:linear-gradient(rgba(110, 69, 143, 0.1), #fff);
    background-image:-webkit-linear-gradient(rgba(110, 69, 143, 0.1), #fff);
    background-image:-moz-linear-gradient(rgba(110, 69, 143, 0.1), #fff);
    background-image:-ms-linear-gradient(rgba(110, 69, 143, 0.1), #fff);
    background-image:-o-linear-gradient(rgba(110, 69, 143, 0.1), #fff);
}

.curdbgpro{
    background-color:#fff;
    background-image:linear-gradient(rgba(10, 77, 123, 0.1), #fff);
    background-image:-webkit-linear-gradient(rgba(10, 77, 123, 0.1), #fff);
    background-image:-moz-linear-gradient(rgba(10, 77, 123, 0.1), #fff);
    background-image:-ms-linear-gradient(rgba(10, 77, 123, 0.1), #fff);
    background-image:-o-linear-gradient(rgba(10, 77, 123, 0.1), #fff);
}

.goodnessseccont img{
    width:100%;
}

.mlkpro{
    color:#636362;
    font-size:22px;
    line-height:22px;
    margin-bottom:15px;
    width:43%;
    margin:0 auto;
    text-align:center;
    
}

.goodnesssec a{
    text-decoration: none;
}



/* CSS mới để đảm bảo loại bỏ gạch chân và đặt màu đen */

/* Áp dụng cho TẤT CẢ liên kết A bên trong khối Mục lục */
#toc-container a {
    /* !!! QUAN TRỌNG: Loại bỏ gạch chân */
    text-decoration: none; 
    /* !!! QUAN TRỌNG: Đặt màu đen */
    color: #000000; 
}

/* Đảm bảo ngay cả H2 links cũng bị loại bỏ gạch chân */
#toc-container .toc-h2-link {
    text-decoration: none; 
    color: #000000;
}


/* Xử lý trạng thái Hover */
#toc-container a:hover {
    /* Đặt lại gạch chân chỉ khi rê chuột */
    text-decoration: underline; 
    color: #007bff; /* Ví dụ: đổi sang màu xanh khi hover */
}

/* Xử lý các liên kết đã truy cập (visited) */
#toc-container a:visited {
    color: #000000; /* Đảm bảo màu vẫn là đen sau khi click */
}
/* Quy tắc chung cho tất cả các liên kết (<a>) trong khối nội dung chính */
/* Bạn có thể đã có quy tắc này, nhưng thêm nó để đảm bảo tính ưu tiên */
.col-md-8 a {
   text-decoration: none !important; /* Loại bỏ đường gạch chân */
}


/* 1. TÊN BÀI VIẾT (Link trong thẻ <h4>) */
/* Nhắm mục tiêu link <a> bên trong thẻ <h4> có class 'title' */
.col-md-8 .title a {
    color: #343a40; /* Màu đen xám */
   text-decoration: none !important; /* Đảm bảo không có gạch chân */
    font-weight: bold; /* Tùy chọn: làm chữ đậm hơn */
}

/* Hiệu ứng khi rê chuột vào tên bài viết */
.col-md-8 .title a:hover {
    color: #8e9296; /* Đổi màu khi hover (ví dụ: xanh dương) */
    text-decoration: underline; /* Tùy chọn: thêm gạch chân khi hover */
}


/* 2. TÊN DANH MỤC (Link trong thẻ <small>) */
/* Nhắm mục tiêu link <a> trong metadata */
.col-md-8 .text-muted a {
    color: #77808a; /* Màu đen xám */
    text-decoration: none !important; /* Loại bỏ đường gạch chân */
    font-weight: bold; /* Tùy chọn: giữ đậm như đã thiết kế */
}

/* Hiệu ứng khi rê chuột vào tên danh mục */
.col-md-8 .text-muted a:hover {
    color: #a6d4c3; /* Đổi màu khi hover */
    text-decoration: underline; /* Tùy chọn: thêm gạch chân khi hover */
}

  /* --- THÊM MỚI: CSS CHO CARD TIN TỨC & KHÓA HỌC --- */
        .card {
            border-radius: 8px !important; /* Bo góc cho card */
            border: 1px solid var(--header-border) !important;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        .card-img-top {
            border-radius: 8px 8px 0 0 !important; /* Bo góc cho ảnh */
        }
        
        .card-body {
            background-color: white;
            border-radius: 0 0 8px 8px;
        }

        /* Ghi đè .btn-primary bên trong .card để giống mẫu */
        .card .btn-primary {
            background-color: #f8f8f8 !important; /* Nền xám nhạt */
            color: #0b57d0; /* Màu xanh Google */
            border: 1px solid #ddd;
           
            border-radius: 20px !important; /* Bo tròn */
            font-weight: 500 !important;
            padding: 6px 16px !important;
            transition: background-color 0.2s !important;
        }
        .card .btn-primary:hover {
            background-color: #eee !important; /* Hover tối hơn */
        }
        .card .card-header {
              background-color: #f8f8f8 !important; /* Nền xám nhạt */
        }
        .card .card-header h6{
            background-color: #f8f8f8 !important; /* Nền xám nhạt */
            color: #0b57d0; /* Màu xanh Google */
            font-weight: bold;
            padding-top: 3px;
           
            font-size: 15px;
            
        }