@charset "UTF-8";
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Inter", sans-serif;
  color: #1e293b;
  line-height: 1.6;
  background: #fff;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.blog-content {
    a {
    color: #0056b3; /* Màu xanh dương đặc trưng của link */
    text-decoration: none; /* Gạch chân để dễ nhận biết */
    font-weight: 500;
    transition: all 0.2s ease-in-out;

    /* Hiệu ứng khi di chuột vào */
        &:hover {
          color: #ff4500; /* Đổi sang màu cam/đỏ cho nổi bật */
        }
    }
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.main-header {
  border-bottom: 1px solid #e2e8f0;
  padding: 15px 0;
}
.main-header .header-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.main-header .logo {
  font-size: 1.5rem;
  font-weight: 700;
}
.main-header .logo .text-primary {
  color: #2563eb;
}
.main-header .nav-list {
  display: flex;
  gap: 30px;
  align-items: center;
}
.main-header .nav-list .nav-item {
  position: relative;
  font-weight: 500;
  padding: 10px 0;
}
.main-header .nav-list .nav-item:hover .dropdown-menu {
  display: inline;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}
.main-header .nav-list .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 220px;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  padding: 10px 0;
  z-index: 100;
  display: none;
}
.main-header .nav-list .dropdown-menu li {
  display: block;
}
.main-header .nav-list .dropdown-menu li a {
  display: block;
  padding: 10px 20px;
  color: #334155;
  transition: 0.2s;
}
.main-header .nav-list .dropdown-menu li a:hover {
  background: #f1f5f9;
  color: #2563eb;
}
.main-header .header-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}
.main-header .header-actions .btn-outline-danger {
  border: 1px solid #ef4444;
  color: #ef4444;
}
/* --- ĐỒNG NHẤT GIAO DIỆN THANH MENU --- */
.main-nav-link {
    color: #495057 !important; /* Màu xám đen thanh lịch */
    transition: all 0.3s ease-in-out;
}

.main-nav-link:hover, 
.main-nav-link:focus, 
.main-nav-link.active {
    color: #0d6efd !important; /* Đổi sang màu Xanh Primary khi di chuột */
}

/* Hiệu ứng nảy nhẹ cho 2 cái nút Submit và Subscribe */
.hover-lift {
    transition: transform 0.2s ease-in-out;
}
.hover-lift:hover {
    transform: translateY(-2px);
}
/* Xóa bỏ hoàn toàn mọi mũi tên mặc định của Bootstrap trong menu đa cấp */
.dropdown-submenu > a::after {
    display: none !important;
    content: none !important;
}

/* Đảm bảo icon Bootstrap Icons không bị lệch */
.dropdown-submenu > a .bi-chevron-right {
    font-size: 0.8rem;
    pointer-events: none; /* Tránh cản trở việc click */
}

/* Màu sắc đồng nhất khi hover cho toàn bộ item */
.dropdown-item:hover {
    background-color: #f8f9fa;
    color: #0d6efd !important;
}

.hover-light {
  transition: all 0.3s ease; /* Tạo độ mượt khi đổi màu */
}

.hover-light:hover {
  color: #ffffff !important; /* Đổi sang màu trắng tinh */
  opacity: 1 !important; /* Xóa độ mờ */
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* (Tùy chọn) Thêm chút hào quang */
}
/* --- CSS CHO MỤC LỤC BÀI VIẾT (TOC) --- */
/* Hiệu ứng trượt mượt mà khi click vào link */
html {
    scroll-behavior: smooth;
}

/* Trừ hao khoảng cách của Menu cố định (Navbar) để chữ không bị lấp. 
   Nếu thanh menu của bạn to hơn hoặc nhỏ hơn, bạn có thể tăng giảm số 80px này nhé */
.blog-content h2, 
.blog-content h3 {
    scroll-margin-top: 80px; 
}

/* --- CSS NÚT BACK TO TOP --- */
#backToTopBtn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999; /* Đảm bảo luôn nằm trên cùng, không bị các khối khác che */
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

#backToTopBtn:hover {
    transform: translateY(-5px); /* Hiệu ứng nảy lên nhẹ khi di chuột vào */
    background-color: #0d6efd; /* Đổi màu xanh đậm hơn nếu thích */
}

/* Hiệu ứng khi rê chuột vào nút Visit Website */
.btn-primary {
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-2px); /* Nổi lên nhẹ */
  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3); /* Đổ bóng */
}

.btn-outline-secondary {
  transition: all 0.3s ease;
}

.card-footer a.text-primary {
    color: #0d6efd !important; /* Đảm bảo màu xanh mặc định */
    transition: all 0.3s ease !important; /* Hiệu ứng chuyển màu mượt mà */
}

.card-footer a.text-primary:hover {
    color: #fd7e14 !important; /* Chuyển sang màu cam khi trỏ chuột */
}
/* HIỆU ỨNG HOVER CHO TIÊU ĐỀ BÀI VIẾT & TOOL TOÀN TRANG */
.card-title a.text-dark,
.list-group-item a.text-dark,
.product-card .card-title a {
    transition: color 0.3s ease !important; /* Chuyển màu mượt mà */
}

.card-title a.text-dark:hover,
.list-group-item a.text-dark:hover,
.product-card .card-title a:hover {
    color: #0d6efd !important; /* Màu Xanh Primary của hệ thống */
}

.blog-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.blog-content h2 { margin-top: 1.5rem; font-weight: bold; }
.blog-content ul, .blog-content ol { margin-bottom: 1rem; }
.transition-hover:hover { transform: translateY(-5px); transition: 0.3s; }

.blog-content a {
    color: #0d6efd; 
    text-decoration: none; 
    transition: color 0.3s ease; 
}
.blog-content a:hover {
    color: #fd7e14; 
}

.tox .tox-menubar, 
.tox .tox-toolbar, 
.tox .tox-toolbar__group, 
.tox .tox-toolbar__primary {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
}

.tox .tox-mbtn, 
.tox .tox-tbtn {
    width: auto !important;
    height: auto !important;
    margin: 0 2px !important;
    display: inline-flex !important;
}

.tox .tox-promotion,
.tox .tox-statusbar__branding {
    display: none !important;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.tool-card-hover:hover {
    transform: translateY(-5px);
}
.product-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-color: transparent;
}
.product-card .card-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}
.product-card .card-header .card-thumb {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: cover;
  object-position: center;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}
.product-card .card-header .header-info {
  flex: 1;
}
.product-card .card-header .header-info h3.card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
  line-height: 1.4;
}
.product-card .badge {
  display: inline-block;
  background: #eff6ff;
  color: #2563eb;
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.product-card .card-body {
  flex: 1;
  margin-bottom: 24px;
}
.product-card .card-body .card-desc {
  color: #64748b;
  font-size: 0.95rem;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card .btn-flex {
  display: flex;
  justify-content: space-between;
  gap: 30px;
}
.product-card .btn-radius {
  border-radius: 6px !important;
}

.search-box {
  display: flex;
  gap: 10px;
}
.search-box input {
  flex: 1;
  padding: 12px;
  width: 300px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.search-box input:focus {
  outline: none;
  border-color: #2563eb;
}

.hero-section {
  text-align: center;
  padding: 60px 0;
  background: #f8fafc;
}
.hero-section .hero-title {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 20px;
  color: #1e293b;
}
.hero-section .hero-subtitle {
  font-size: 1.2rem;
  color: #64748b;
  margin-bottom: 40px;
}

.product-header {
  background: #fff;
  padding: 60px 0;
  border-bottom: 1px solid #e2e8f0;
}
.product-header .ph-wrapper {
  display: flex;
  gap: 40px;
  align-items: center;
}
@media (max-width: 768px) {
  .product-header .ph-wrapper {
    flex-direction: column;
    text-align: center;
  }
}
.product-header .ph-media {
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .product-header .ph-media {
    margin: 0 auto;
  }
}
.product-header .ph-thumb {
  width: 120px;
  height: 120px;
  border-radius: 20px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  object-fit: cover;
  background: #f1f5f9;
  display: block;
}
.product-header .ph-title {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 10px;
}
.product-header .ph-short-desc {
  font-size: 1.1rem;
  color: #64748b;
  margin: 15px 0 25px 0;
  max-width: 600px;
}

.product-content {
  padding: 50px 0;
}
.product-content .review-body {
  max-width: 800px;
  margin: 0 auto;
  background: #fff;
  padding: 40px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}
.product-content .review-body h2,
.product-content .review-body h3 {
  margin-top: 30px;
  margin-bottom: 15px;
  color: #1e293b;
}
.product-content .review-body p,
.product-content .review-body li {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #334155;
  margin-bottom: 15px;
}
.product-content .review-body ul {
  list-style: disc;
  padding-left: 20px;
}

.submit-section {
  padding: 60px 0;
  max-width: 600px;
  margin: 0 auto;
}
.submit-section .text-center {
  margin-bottom: 30px;
}
.submit-section .alert {
  background: #d1fae5;
  color: #065f46;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}
.submit-section .submit-form {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}
.submit-section .submit-form .form-group {
  margin-bottom: 20px;
}
.submit-section .submit-form .form-group:nth-last-child {
  margin-bottom: 30px;
}
.submit-section .submit-form .form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}
.submit-section .submit-form .form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}
.submit-section .submit-form .form-group select {
  width: 100%;
  padding: 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}
.submit-section .submit-form .form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}
.submit-section .submit-form .form-group button {
  width: 100%;
  padding: 12px;
}

.login-section {
  padding: 100px 0;
  background: #f1f5f9;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-section .login-box {
  background: #fff;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
}
.login-section .login-box .text-center {
  margin-bottom: 20px;
  color: #1e293b;
}
.login-section .login-box .alert-error {
  background: #fee2e2;
  color: #991b1b;
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 20px;
  font-size: 0.9rem;
}
.login-section .login-box .form-group {
  margin-bottom: 15px;
}
.login-section .login-box .form-group:nth-last-child {
  margin-bottom: 25px;
}
.login-section .login-box .form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
}
.login-section .login-box .form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}
.login-section .login-box button {
  width: 100%;
  padding: 12px;
  font-weight: bold;
}

.admin-dashboard {
  padding: 60px 0;
  background: #f8fafc;
  min-height: 80vh;
}
.admin-dashboard .d-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}
.admin-dashboard .d-flex span {
  margin-right: 15px;
}
.admin-dashboard .stats-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
.admin-dashboard .stats-cards .card {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}
.admin-dashboard .stats-cards .card p {
  font-size: 2rem;
  font-weight: bold;
  color: #2563eb;
}
.admin-dashboard .table-responsive {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.admin-dashboard .table-responsive table {
  width: 100%;
  border-collapse: collapse;
}
.admin-dashboard .table-responsive table thead {
  background: #f1f5f9;
  text-align: left;
}
.admin-dashboard .table-responsive table thead th {
  padding: 15px;
  border-bottom: 2px solid #e2e8f0;
}
.admin-dashboard .table-responsive table tbody tr {
  border-bottom: 1px solid #e2e8f0;
}
.admin-dashboard .table-responsive table tbody tr td {
  padding: 15px;
}
.admin-dashboard .table-responsive table tbody tr td img {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
}
.admin-dashboard .table-responsive table tbody tr td small {
  color: #64748b;
}
.admin-dashboard .table-responsive table tbody tr td .badge {
  padding: 4px 8px;
  font-size: 0.8rem;
}
.admin-dashboard .table-responsive table tbody tr td .badge-category {
  background: #e0f2fe;
  color: #0284c7;
  border-radius: 4px;
}
.admin-dashboard .table-responsive table tbody tr td .badge-status {
  border-radius: 99px;
}
.admin-dashboard .table-responsive table tbody tr td .badge-status-active {
  background: #dcfce7;
  color: #166534;
}
.admin-dashboard .table-responsive table tbody tr td .badge-status-pending {
  background: #fef9c3;
  color: #854d0e;
}
.admin-dashboard .table-responsive table tbody tr td .table-actions {
  display: flex;
  gap: 10px;
}
.admin-dashboard .table-responsive table tbody tr td .table-actions .btn-icon-approve {
  color: #16a34a;
}
.admin-dashboard .table-responsive table tbody tr td .table-actions .btn-icon-hide {
  color: #ca8a04;
}
.admin-dashboard .table-responsive table tbody tr td .table-actions .btn-icon-edit {
  color: #2563eb;
}
.admin-dashboard .table-responsive table tbody tr td .table-actions .btn-icon-del {
  color: #ef4444;
}

.edit-section {
  padding: 60px 0;
  max-width: 600px;
  margin: 0 auto;
}
.edit-section .text-center {
  margin-bottom: 30px;
}
.edit-section .edit-form {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}
.edit-section .edit-form .form-group {
  margin-bottom: 20px;
}
.edit-section .edit-form .form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}
.edit-section .edit-form .form-actions {
  display: flex;
  gap: 10px;
}
.hover-lift-list {
    transition: all 0.25s ease;
    border: 1px solid transparent;
}
.hover-lift-list:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1) !important;
    border-color: #e9ecef;
    background-color: #fcfdfd !important;
}
.carousel-container {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    gap: 20px;
    padding: 10px 5px 20px 5px;
    scrollbar-width: none; /* Ẩn thanh cuộn trên Firefox */
}

/* Ẩn thanh cuộn trên Chrome/Safari */
.carousel-container::-webkit-scrollbar {
    display: none;
}

/* Định dạng từng Card */
.carousel-item-card {
    flex: 0 0 calc(33.333% - 14px); /* Hiển thị 3 card mỗi màn hình */
    scroll-snap-align: start;
    transition: transform 0.3s ease;
}

.transition-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1) !important;
}

/* Nút bấm điều hướng */
.carousel-controls .btn {
    width: 35px;
    height: 35px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
}
/* Thu nhỏ nút và icon trên mobile để tiết kiệm diện tích */
@media (max-width: 575.98px) {
    .mobile-hide-icon { display: none; }
    .mobile-small-text { font-size: 0.75rem !important; }
    .mobile-img { width: 45px !important; height: 45px !important; }
}
/*# sourceMappingURL=main.css.map */
@media (min-width: 992px) {
    .dropdown-submenu { position: relative; }
    .dropdown-submenu .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -1px;
        display: none;
    }
    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }
    /* Thêm icon mũi tên nhỏ bên cạnh tên cha để gợi ý có menu con */
    .dropdown-submenu > a::after {
        content: " \203A"; /* Ký tự › */
        float: right;
        margin-left: 10px;
    }
    
    /* Hiệu ứng khi di chuột vào tên cha */
    .dropdown-submenu:hover > a {
        background-color: #f8f9fa;
        color: #0d6efd !important;
    }
}
.category-scroll-wrapper {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding: 10px 5px 25px 5px;
    scrollbar-width: thin; /* Cho Firefox */
    scrollbar-color: #0d6efd #f1f1f1;
}

/* Tùy chỉnh thanh cuộn cho Chrome/Safari */
.category-scroll-wrapper::-webkit-scrollbar {
    height: 6px;
}
.category-scroll-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
.category-scroll-wrapper::-webkit-scrollbar-thumb {
    background: #0d6efd;
    border-radius: 10px;
}

/* 3. Độ rộng của mỗi Card */
.category-card-item {
    flex: 0 0 320px; /* Mỗi card rộng 320px và không bị co lại */
    transition: transform 0.3s ease;
}

.transition-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}
  /* Đảm bảo menu cấp 2 hiển thị khi di chuột */
@media (min-width: 992px) {
    /* Cấu trúc: Menu Gốc -> Li (Dropdown) -> Ul (Menu cấp 1) -> Li (Submenu) -> Ul (Menu cấp 2) */
    .dropdown-menu .dropdown-submenu {
        position: relative;
    }

    .dropdown-menu .dropdown-submenu .dropdown-menu {
        top: 0;
        left: 100%; /* Đẩy sang phải */
        margin-left: -2px !important;
        margin-top: -5px;
        display: none; /* Ẩn mặc định */
        min-width: 220px;
        padding-left: 0;
        border-left: 2px solid  transparent;
        border-radius: 0.5rem;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }

    /* Hiển thị menu cấp 2 khi hover vào mục cha cấp 1 */
    .dropdown-menu .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }
    
    /* Đổi màu nền khi hover để người dùng dễ nhìn */
    .dropdown-item:hover {
        background-color: #f8f9fa;
        color: #0d6efd;
    }
    /* Thêm icon mũi tên nhỏ bên cạnh tên cha để gợi ý có menu con */
    .dropdown-submenu > a::after {
        content: " \203A"; /* Ký tự › */
        float: right;
        margin-left: 10px;
    }
    
    /* Hiệu ứng khi di chuột vào tên cha */
    .dropdown-submenu:hover > a {
        background-color: #f8f9fa;
        color: #0d6efd !important;
    }
}
@media (max-width: 991px) {
    /* Mặc định ẩn menu cấp 2 đi */
    .dropdown-menu .dropdown-submenu .dropdown-menu {
        display: none; 
        border: none;
        padding-left: 1.5rem; /* Thụt lề lùi vào trong cho dễ nhìn */
        background-color: transparent; /* Nền trong suốt để đỡ rối */
        margin-top: 0;
    }
    
    /* Khi được JavaScript thêm class 'show' vào thì sẽ hiển thị dạng dọc */
    .dropdown-menu .dropdown-submenu .dropdown-menu.show {
        display: block;
    }
    
    /* Chỉnh lại icon mũi tên cho cân đối trên mobile */
    .dropdown-submenu > a > i {
        float: right;
        margin-top: 4px;
    }
}
/* --- CSS cho Logo Hình ảnh --- */

/* Kích thước mặc định (cho Desktop/Tablet) */
.logo-img {
    /* Đặt chiều cao tối đa hợp lý cho header */
    max-height: 50px; 
    /* Chiều rộng tự động tính theo tỷ lệ ảnh để không bị méo */
    width: auto;
    /* Hiệu ứng chuyển đổi mượt mà khi thay đổi kích thước màn hình */
    transition: all 0.3s ease-in-out;
}
.scrollable-tags::-webkit-scrollbar { display: none; }
.scrollable-tags { 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
    overflow-x: auto; 
    white-space: nowrap; 
    -webkit-overflow-scrolling: touch; 
}

/* Điều chỉnh cho màn hình nhỏ (Mobile dưới 768px) */
@media (max-width: 767.98px) {
    .logo-img {
        /* Giảm chiều cao đi một chút để phù hợp màn hình nhỏ */
        max-height: 40px;
    }
    
    /* Tùy chọn: Nếu trên mobile logo sát lề quá có thể thêm chút margin */
    /* .navbar-brand { margin-left: 10px; } */
}

/* Tùy chọn: Điều chỉnh cho màn hình rất nhỏ (dưới 400px) nếu cần */
@media (max-width: 399.98px) {
     .logo-img {
        max-height: 35px;
    }
}
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Đổi số 2 thành 3 nếu bạn muốn 3 dòng */
    -webkit-box-orient: vertical;
    overflow: hidden;
}