/* Reset nhỏ */
a {
  text-decoration: none;
  color: inherit;
}

/* Card tin tức */
.news-card {
  transition: box-shadow 0.3s ease, transform 0.2s ease;
  border-radius: 8px;
  overflow: hidden;
  position: relative; /* Đảm bảo các phần tử con (như badge) được định vị đúng */
}

.news-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-4px);
  background-color: #f9f9f9;
}

/* Ảnh bài viết */
.news-card img {
  object-fit: cover; /* Đảm bảo hình ảnh lấp đầy container, không bị hở */
  height: 180px; /* Chiều cao cố nh */
  width: 100%; /* Chiu rộng full container */
  border-bottom: 1px solid #eee; /* Gi vin dưới */
  display: block; /* Loại bỏ khoảng trống dưới ảnh */
}

/* Đm bảo container của nh khng có padding/margin gây lệch */
.news-card .card-img-top {
  margin: 0; /* Loại bỏ margin nếu có */
  padding: 0; /* Loại b padding nu có */
}

/* Thêm font Playfair Display cho tiêu đề */
.news-card .card-title,
.sponsored-item .s-title,
.list-group-item .fw-semibold,
.mostViewedSwiper .card-title,
.news-card h6 { /* Thêm selector cho h6 trong news-card */
  font-family: 'Playfair Display', serif !important;
}

/* Tiêu đề */
.news-card .card-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #212529;
  transition: color 0.2s ease;
}

.news-card:hover .card-title {
  color: #714dff;
}

/* Nguồn + ngày ăng */
.news-card .card-text small {
  font-size: 0.85rem;
  color: #777;
}

/* Sidebar link mặc định */
.sidebar a {
  display: block;
  color: #212529;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 4px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover hiệu ng */
.sidebar a:hover {
  color: #714dff;
  text-decoration: none;
}

/* Link danh mục active (nếu muốn sau này highlight) */
.sidebar a.active {
  font-weight: bold;
}

/* Sponsored news card */
.sidebar .sponsored-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.sidebar .sponsored-item img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.sidebar .sponsored-item .s-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: #212529;
  line-height: 1.3;
}

.sidebar .sponsored-item .s-sponsor {
  font-size: 0.75rem;
  color: #888;
}

.btn-read-later {
  color: #6c757d; /* muted color */
  text-decoration: none;
  font-size: 0.9rem;
}

.btn-read-later:hover {
  color: #714dff;
  text-decoration: none;
}

/* Card shadow đẹp khi hover */
.card.news-card {
  transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
  border-radius: 24px 10px;
  background: #fff;
  
}

.card.news-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  transform: translateY(-4px);
  background: #f8f9fa;

}

/* Bọc padding cho shadow khng bị ct */
.card-wrapper {
  padding: 4px;
}

/* Swiper setup */
.swiper-slide {
  overflow: visible !important;
  z-index: 1;
  height: auto;
}

.share-btn {
  margin-right: 5px;
}

.share-tooltip {
  position: absolute;
  top: 130px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.95);
  padding: 8px 12px;
  border-radius: 30px;
  display: none;
  gap: 10px;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.news-card:hover .share-tooltip {
  display: flex;
}

.share-tooltip a {
  text-decoration: none;
  color: #222;
  font-size: 16px;
  transition: color 0.2s ease;
}

.share-tooltip a:hover {
  color: #007bff;
}

/* Responsive adjustments for Most Viewed Section */
@media (max-width: 576px) {
  /* Giảm chiu cao hình ảnh trên mobile */
  .mostViewedSwiper .news-card img {
    height: 120px; /* Chiu cao ph hp cho mobile */
    width: 100%; /* Full chiều rng */
    object-fit: cover; /* m bảo không h */
  }

  /* Gim font chữ tiu đ và ni dung */
  .mostViewedSwiper .card-title {
    font-size: 0.9rem;
  }

  .mostViewedSwiper .text-muted {
    font-size: 0.75rem;
  }

  /* Tăng kích thưc nt iu hưng trn mobile */
  #custom-prev,
  #custom-next {
    width: 40px !important;
    height: 40px !important;
    font-size: 1rem;
  }

  /* iu chnh khong cách */
  .mostViewedSwiper .card-body {
    padding: 0.75rem;
  }
}

@media (min-width: 576px) and (max-width: 768px) {
  /* Điều chnh chiu cao hình nh cho tablet */
  .mostViewedSwiper .news-card img {
    height: 140px; /* Chiu cao phù hợp cho tablet */
    width: 100%; /* Full chiu rng */
    object-fit: cover; /* Đảm bo khng hở */
  }

  .mostViewedSwiper .card-title {
    font-size: 0.95rem;
  }

  .mostViewedSwiper .text-muted {
    font-size: 0.8rem;
  }
}

/* Style cho dòng thông tin đng */
.text-muted small {
  font-size: 0.85rem;
  color: #6c757d;
}

.text-muted small span {
  margin: 0 5px;
}

header nav a.active {
  color: #714dff!important;
  font-weight: bold;
}

/* Hover & active hiu ng cho menu header */
header nav a.text-decoration-none {
  transition: color 0.2s ease;
}

header nav a.text-decoration-none:hover {
  color: #714dff!important;
}

@media (max-width: 768px) {
  #time-weather-box {
    display: none !important;
  }
}

@media (max-width: 768px) { /* Hoc max-width: 767.98px đ khp vi breakpoint 'md' ca Bootstrap 5 */
  #time-weather-box {
    display: none !important;
  }
}

.saved-label {
  height: 24px;
  vertical-align: middle;
  line-height: 1;
}

.free-account-signup {
  border: 1px solid #e0e7ff !important;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  background-color: #fff;
  transition: transform 0.2s ease-in-out;
}

.free-account-signup:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.card-body {
  padding: 20px;
}

.card-title {
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Playfair Display', serif !important;
}

.emoji-gift {
  font-size: 1.5rem;
  line-height: 1;
}

.card-text {
  color: #6b7280;
  font-size: 0.9rem;
}

.benefits-list {
  list-style: none;
  padding-left: 0;
}

.benefits-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 0.9rem;
  color: #4b5563;
  line-height: 1.4;
}

.emoji-check {
  color: #10b981;
  font-size: 1.1rem;
}

.emoji-moon {
  font-size: 1.1rem;
}

.signup-btn {
  background: linear-gradient(90deg, #000, #000);
  border: none;
  border-radius: 8px;
  padding: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  transition: background 0.3s ease, transform 0.2s ease;
}

.signup-btn:hover {
  background: linear-gradient(90deg, #000, #000);
  transform: scale(1.02);
}

.signup-btn:active {
  transform: scale(0.98);
}

.emoji-rocket {
  font-size: 1.2rem;
}

.newsletter-subscribe {
  background-color: #f8fafc;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease-in-out;
}

.newsletter-subscribe:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.newsletter-subscribe .p-3 {
  padding: 20px;
}

.newsletter-subscribe h5 {
  font-size: 1.25rem;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 8px;
}

.emoji-newsletter {
  font-size: 1.5rem;
  line-height: 1;
}

.newsletter-subscribe p {
  color: #6b7280;
  font-size: 0.9rem;
  line-height: 1.5;
}

.subscribe-btn {
  background: linear-gradient(90deg, #000, #000);
  border: none;
  border-radius: 8px;
  padding: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  transition: background 0.3s ease, transform 0.2s ease;
}

.subscribe-btn:hover {
  background: linear-gradient(90deg, #333, #333);
  transform: scale(1.02);
}

.subscribe-btn:active {
  transform: scale(0.98);
}

.emoji-check {
  font-size: 1.2rem;
}

/* Popup Subscribe */
.subscribe-modal .modal-dialog {
  max-width: 800px; /* Kch thưc phù hợp cho modal */
}

.subscribe-modal .modal-content {
  border-radius: 12px; /* Bo gc đng bộ với các thnh phn khác */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Hiu ứng bóng */
  border: none; /* Loi bỏ vin mc định ca modal */
}

.subscribe-modal .modal-header {
  border-bottom: 1px solid #e0e7ff; /* Viền nh di header */
  padding: 20px;
  background: #fff; /* Nn trng */
}

.subscribe-modal .modal-title {
  font-size: 1.5rem;
  color: #1f2937; /* Màu chữ đng b vi các tiêu  khác */
  display: flex;
  align-items: center;
  gap: 8px;
}

.subscribe-modal .modal-title::before {
  content: ""; /* Thm emoji trưc tiu ề */
  font-size: 1.5rem;
}

.subscribe-modal .modal-body {
  min-height: 400px; /* m bo chiu cao ti thiu */
  padding: 0; /* Loi b padding mc đnh  cc cột tự điu chnh */
  display: flex;
  flex-wrap: wrap; /* m bảo responsive */
}

.subscribe-modal .image-column {
  flex: 1;
  padding: 20px;
  background-color: #f8fafc; /* Nền sng nh, ồng b vi newsletter-subscribe */
}

.subscribe-modal .image-column img {
  width: 100%;
  height: 100%; /* Đm bảo hình ảnh lấp y */
  object-fit: cover;
  border-radius: 8px; /* Bo gc hnh nh */
  border: 1px solid #e0e7ff; /* Vin nh */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); /* Hiu ng bng nhẹ */
}

.subscribe-modal .form-column {
  flex: 1;
  padding: 20px;
  background: #fff; /* Nn trắng cho form */
}

.subscribe-modal .form-label {
  font-size: 0.9rem;
  color: #4b5563; /* Màu chữ nhạt, đng b vi các form khác */
  margin-bottom: 6px;
}

.subscribe-modal .form-control {
  border-radius: 8px; /* Bo góc đng b */
  border: 1px solid #e0e7ff; /* Vin nh */
  font-size: 0.9rem;
  padding: 10px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); /* Hiu ng bng nh */
}

.subscribe-modal .form-control:focus {
  border-color: #10b981; /* Màu vin khi focus, đng b với register */
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
  outline: none;
}

.subscribe-modal .category-checklist {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 ct cho checklist */
  gap: 10px;
  max-height: 200px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid #e0e7ff; /* Viền nhẹ */
  border-radius: 8px; /* Bo góc */
  background-color: #f9f9f9; /* Nn sng nh */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); /* Hiu ứng bóng */
}

.subscribe-modal .form-check-label {
  font-size: 0.95rem; /* Kch thưc chữ ng bộ */
  color: #4b5563; /* Mu chữ nhạt */
}

.subscribe-modal .form-check-input {
  cursor: pointer;
  border-color: #e0e7ff; /* Vin checkbox */
}

.subscribe-modal .form-check-input:checked {
  background-color: #10b981; /* Màu khi checked, ồng b với register */
  border-color: #10b981;
}

.subscribe-modal #categoryError {
  font-size: 0.85rem; /* Kích thớc ch nhỏ cho thng bo li */
  color: #dc3545; /* Mu đ cho lỗi */
}

.subscribe-modal .btn-success {
  background: linear-gradient(90deg, #10b981, #34d399); /* Gradient đng b với subscribe-btn */
  border: none;
  border-radius: 8px; /* Bo gc */
  padding: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  transition: background 0.3s ease, transform 0.2s ease;
}

.subscribe-modal .btn-success:hover {
  background: linear-gradient(90deg, #059669, #10b981);
  transform: scale(1.02);
}

.subscribe-modal .btn-success:active {
  transform: scale(0.98);
}

@media (max-width: 768px) {
  .subscribe-modal .modal-body {
    flex-direction: column; /* Xp dc trên mobile */
  }
  .subscribe-modal .image-column,
  .subscribe-modal .form-column {
    flex: 100%;
  }
  .subscribe-modal .category-checklist {
    grid-template-columns: 1fr; /* 1 ct trên mobile */
  }
}

.custom-btn {
  /*background-color: #714dff;*/
  background: linear-gradient(75deg,#714DFF 0%,#9C83FF 23%,#E151FF 81%,#FFF759 100%) padding-box;
  border: none;
  border-radius: 8px;
  padding: 6px 15px;
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  transition: background 0.3s ease, transform 0.2s ease;
  text-decoration: none;
  color: #fff;
}

.custom-btn:hover {
  background-color: #714dff;
  color: #FFF;
  transform: scale(1.02);
}

.custom-btn:active {
  transform: scale(0.98);
}

.custom-btn-outline {
  background: transparent;
  border: 2px solid #714dff;
  color: #714dff;
}

.custom-btn-outline:hover {
  background-color: #714dff;
  color: #fff;
}

.login-form {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  background-color: #fff;
  transition: transform 0.2s ease-in-out;
}

.login-form:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.emoji-lock {
  font-size: 1.5rem;
  margin-right: 8px;
}

h3 {
  font-size: 1.5rem;
  color: #1f2937;
  display: flex;
  justify-content: center;
  align-items: center;
}

.form-label {
  font-size: 0.9rem;
  color: #4b5563;
  margin-bottom: 6px;
}

.form-control {
  border-radius: 8px;
  border: 1px solid #e0e7ff;
  font-size: 0.9rem;
  padding: 10px;
  transition: border-color 0.3s ease;
}

.form-control:focus {
  border-color: #714dff;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.login-btn {
  background: linear-gradient(90deg, #714dff, #60a5fa);
  border: none;
  border-radius: 8px;
  padding: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  transition: background 0.3s ease, transform 0.2s ease;
}

.login-btn:hover {
  background: linear-gradient(90deg, #2563eb, #714dff);
  transform: scale(1.02);
}

.login-btn:active {
  transform: scale(0.98);
}

.emoji-sign-in {
  font-size: 1.2rem;
}

.text-muted {
  font-size: 0.8rem;
  color: #6b7280;
}

.text-primary {
  color: #714dff !important;
}

.text-primary:hover {
  color: #2563eb !important;
  text-decoration: underline;
}

.register-form {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  background-color: #fff;
  transition: transform 0.2s ease-in-out;
}

.register-form:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.emoji-register {
  font-size: 1.5rem;
  margin-right: 8px;
}

h3 {
  font-size: 1.5rem;
  color: #1f2937;
  display: flex;
  justify-content: center;
  align-items: center;
}

.form-label {
  font-size: 0.9rem;
  color: #4b5563;
  margin-bottom: 6px;
}

.form-control {
  border-radius: 8px;
  border: 1px solid #e0e7ff;
  font-size: 0.9rem;
  padding: 10px;
  transition: border-color 0.3s ease;
}

.form-control:focus {
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.register-btn {
  background: linear-gradient(90deg, #10b981, #34d399);
  border: none;
  border-radius: 8px;
  padding: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  transition: background 0.3s ease, transform 0.2s ease;
}

.register-btn:hover {
  background: linear-gradient(90deg, #059669, #10b981);
  transform: scale(1.02);
}

.register-btn:active {
  transform: scale(0.98);
}

.emoji-sign-up {
  font-size: 1.2rem;
}

.text-muted {
  font-size: 0.8rem;
  color: #6b7280;
}

.text-primary {
  color: #000 !important;
}

.text-primary:hover {
  /*color: #059669 !important;
  text-decoration: underline;*/
}
/* Form search */

    .search-input {
        border-radius: 8px;
        border: 1px solid #dee2e6;
        font-size: 1rem;
        padding: 10px 40px 10px 40px; /* Tăng padding bn tri v phi đ cha icon */
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
        background-color: #fff;
        /*box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);*/
        height: 48px; /* ảm bo chiu cao c đnh  cn chnh icon */
    }

    .search-input:focus {
        border-color: #714dff;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        outline: none;
    }

    .search-icon {
        position: absolute;
        left: 0px; /* Gim left ể icon nm gn trong input */
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.1rem;
        color: #6b7280;
        z-index: 1;
        line-height: 1; /* m bo emoji khng b lch */
    }

    .clear-search {
        position: absolute;
        right: 24px; /* Gim right  icon nm gn trong input */
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        color: #dc3545;
        font-size: 0.8rem;
        font-weight: bold;
        display: none;
        z-index: 1;
        transition: color 0.3s ease;
        line-height: 1; /* m bảo emoji không b lch */
    }

    .clear-search:hover {
        color: #b02a37;
    }

    .source-select {
        border-radius: 8px;
        border: 1px solid #dee2e6;
        font-size: 1rem;
        padding: 10px;
        background-color: #fff;
        /*box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);*/
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
        height: 48px; /* ng b chiều cao vi input */
    }

    .source-select:focus {
        border-color: #714dff;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        outline: none;
    }

    .source-select option {
        font-size: 0.9rem;
    }

    .position-relative {
        display: flex;
        
    }



/* Profile Card */
.profile-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  background-color: #fff;
  padding: 20px;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.profile-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.profile-card .form-label {
  font-size: 0.9rem;
  color: #4b5563;
  margin-bottom: 6px;
}

.profile-card .form-control {
  border-radius: 8px;
  border: 1px solid #e0e7ff;
  font-size: 0.9rem;
  padding: 10px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  background-color: #fff;
}

.profile-card .form-control:focus {
  border-color: #714dff;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  outline: none;
}

/* Avatar Section */
.profile-card .avatar-section .avatar-preview {
  margin-bottom: 10px;
  position: relative;
  display: inline-block;
}

.profile-card .avatar-section .text-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile-card .avatar-image {
  border-radius: 50%;
  object-fit: cover;
  width: 150px;
  height: 150px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  display: block;
}



.profile-card .avatar-preview:hover .avatar-image,
.profile-card .avatar-preview:hover .avatar-placeholder {
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
  opacity: 0.6;
}

.profile-card .avatar-placeholder {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #e0e7ff;
  color: #4b5563;
}

.profile-card .avatar-preview:hover .avatar-overlay {
  opacity: 1;
}

.profile-card .avatar-placeholder:hover {
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}

.profile-card .btn-primary {
  background: linear-gradient(90deg, #714dff, #60a5fa);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 0.9rem;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  transition: background 0.3s ease, transform 0.2s ease;
}

.profile-card .btn-primary:hover {
  background: linear-gradient(90deg, #2563eb, #714dff);
  transform: scale(1.02);
}

.profile-card .btn-primary:active {
  transform: scale(0.98);
}

/* Form Layout Adjustment */
.profile-card .row {
  align-items: flex-end; /* Cn chnh cc cột xung dới cng */
}

.profile-card .form-group {
  margin-bottom: 1rem;
}

.profile-card .col-md-8 {
  display: flex;
  flex-direction: column;
}

.profile-card .col-12 {
  display: flex;
  justify-content: flex-end; /* Đẩy nt Save Changes sang bên phải */
  margin-top: 1rem; /* Khong cch trn nt */
}

@media (max-width: 768px) {
  .profile-card .row {
    flex-direction: column;
  }
  .profile-card .col-md-8,
  .profile-card .col-md-4 {
    flex: 100%;
  }
  .profile-card .avatar-image,
  .profile-card .avatar-placeholder {
    width: 120px;
    height: 120px;
  }
}
    
.profile-card .avatar-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .profile-card .avatar-image,
  .profile-card .avatar-placeholder {
    width: 120px;
    height: 120px;
  }
  .profile-card .row {
    flex-direction: column;
    align-items: stretch; /* m bo ct dc trên mobile */
  }
  .profile-card .col-12 {
    justify-content: center; /* Cn gia nút trn mobile */
    margin-top: 1rem;
  }
}

/* Sidebar - Update Your Feed Button */
.sidebar .btn-primary {
  background: linear-gradient(90deg, #714dff, #60a5fa);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 0.9rem;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  transition: background 0.3s ease, transform 0.2s ease;
  height: 42px;
}

.sidebar .btn-primary:hover {
  background: linear-gradient(90deg, #2563eb, #714dff);
  transform: scale(1.02);
}

.sidebar .btn-primary:active {
  transform: scale(0.98);
}

.rounded {
  border-radius: 24px 8px !important;
}

/* Most Viewed Section */
.mostViewedSwiper .news-card {
  display: flex;
  flex-direction: column;
  min-height: 350px; /* Chiu cao c đnh cho card */
  overflow: hidden; /* n ni dung trn */
  border-radius: 24px 10px;
  background: #fff;
  transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.mostViewedSwiper .news-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
}

.mostViewedSwiper .card-img-top {
  height: 160px; /* Chiu cao c ịnh cho hnh nh */
  width: 100%;
  object-fit: cover;
  border-bottom: 1px solid #eee;
  display: block;
}

.mostViewedSwiper .card-body {
  flex-grow: 1; /* Đm bo phn body chim hết khng gian cn li */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Căn u ni dung */
  padding: 0.75rem;
}

.mostViewedSwiper .card-title {
  font-size: 0.95rem; /* Gim kích thc tiu  ể tránh tràn */
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #212529;
  transition: color 0.2s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Gii hn tiu  ti a 2 dng */
  -webkit-box-orient: vertical;
}

.mostViewedSwiper .card-title:hover {
  color: #714dff;
}

.domain-name {
  font-size: 14px;
}


.mostViewedSwiper .text-muted {
  /*font-size: 0.8rem;*/
  color: #6c757d;
}

/* Responsive Adjustments */
@media (max-width: 576px) {
  .mostViewedSwiper .news-card {
    min-height: 320px; /* Gim chiu cao trn mobile */
  }

  .mostViewedSwiper .card-img-top {
    height: 120px;
  }

  .mostViewedSwiper .card-title {
    font-size: 0.9rem;
  }

  .mostViewedSwiper .text-muted {
    font-size: 0.75rem;
  }
}

@media (min-width: 576px) and (max-width: 768px) {
  .mostViewedSwiper .news-card {
    min-height: 340px;
  }

  .mostViewedSwiper .card-img-top {
    height: 140px;
  }

  .mostViewedSwiper .card-title {
    font-size: 0.95rem;
  }

  .mostViewedSwiper .text-muted {
    font-size: 0.8rem;
  }
}


/* === Weather Sidebar Widget === */
.weather-widget {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  font-size: 0.9rem;
}

.weather-widget h3 {
  font-size: 2rem;
  font-weight: 600;
  margin: 0;
}

.weather-widget .weather-icon {
  height: 40px;
}

.weather-widget .text-muted {
  font-size: 0.85rem;
}

.weather-widget .weather-summary {
  line-height: 1.4;
}

.weather-widget #weatherLocation {
  font-weight: 600;
  margin: 4px 0 10px;
}

.weather-widget .forecast-row {
  border-top: 1px solid #333;
  margin-top: 10px;
  padding-top: 10px;
}

.weather-widget .col.forecast-day {
  padding: 6px 4px;
  border-right: 1px solid #f3f4f6;
}

.weather-widget .col.forecast-day:last-child {
  border-right: none;
}

.weather-widget .forecast-day img {
  height: 36px;
  margin: 2px auto;
}

.weather-widget .forecast-day div {
  font-size: 0.8rem;
}

body.dark-mode .weather-widget {
  background-color: #1f1f1f;
  border-color: #333;
  color: #e5e7eb;
}

body.dark-mode .weather-widget .text-muted {
  color: #a0aec0;
}

body.dark-mode .weather-widget .col.forecast-day {
  border-color: #2a2a2a;
}

.weather-widget .forecast-day {
  font-size: 0.8rem;
  padding: 6px 4px;
  border-right: 1px solid #f3f4f6;
}

.weather-widget .forecast-day:last-child {
  border-right: none;
}

.weather-widget .forecast-day .temp-range {
  font-size: 10px !important;
  color: #6b7280;
  margin-top: 2px;
}

.weather-widget .forecast-day .weather-desc {
  font-size: 10px !important;
  color: #4b5563;
  margin-top: 2px;
  line-height: 1.3;
}


/* Styling for Listen Later box */
#listen-later-list {
  /*max-height: 300px; /* Limit height and allow scrolling */
  /*overflow-y: auto; /* Enable vertical scrolling */
  padding: 0; /* Remove default padding */
}

/* Styling for each list item */
.listen-later-item {
  display: flex;
  align-items: top;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #dee2e6; /* Light border */
  border-radius: 8px; /* Rounded corners */
  background-color: #fff; /* White background */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  transition: box-shadow 0.2s; /* Smooth shadow transition on hover */
}

/* Hover effect for list items */
.listen-later-item:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Slightly stronger shadow on hover */
}

/* Styling for the thumbnail */
.listen-later-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 10px;
}

/* Styling for the content */
.listen-later-content {
  flex-grow: 1;
}

/* Styling for podcast name */
.listen-later-podcast {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
  display: block;
}

/* Styling for the date */
.listen-later-date {
  font-size: 0.8rem;
  color: #6c757d;
  margin-bottom: 6px;
  display: block;
}

/* Styling for buttons container */
.listen-later-buttons {
  display: flex;
  gap: 6px;
}

/* Styling for Play and Delete buttons */
.listen-later-buttons .btn {
  padding: 2px 8px;
  font-size: 0.8rem;
  line-height: 1.2;
  border-radius: 4px;
}

/* Play button styling */
.listen-later-buttons .btn-play {
  background-color: #007bff;
  color: #fff;
  border: none;
}

.listen-later-buttons .btn-play:hover {
  background-color: #0056b3;
  color: #fff;
}

/* Delete button styling */
.listen-later-buttons .btn-delete {
  background-color: #dc3545;
  color: #fff;
  border: none;
}

.listen-later-buttons .btn-delete:hover {
  background-color: #c82333;
  color: #fff;
}

/* Styling for empty state */
#listen-later-list .text-muted {
  font-size: 0.85rem;
  /*padding: 2px 15px;*/
}


.hover-shadow:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.transition-all {
  transition: all 0.3s ease;
}

.small-article-item:hover {
  background-color: #fafafa;
}

.hover-shadow {
  transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.hover-shadow:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.active-category {
  font-weight: bold;
  color: #ffffff;
  background-color: #714dff;
}

.list-group-item.active-category {
  background-color: #714dff;
  font-weight: bold;
}

.list-group-item.active-category a {
  color: #ffffff;
}

.navbar-nav.d-md-none .nav-item {
  text-align: left;
  padding-left: 1rem;
}

@media (max-width: 767.98px) {
  .d-md-none.d-flex.align-items-center.ms-auto {
    display: flex !important;
    align-items: center;
    gap: 10px;
  }
  .btn-sm.btn-outline-secondary {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
  }
}

.navbar-nav .nav-link:hover {
  color: #714dff!important;
}

.pe-md-1{
  padding-right: 1.2rem!important
}


/* ==== DARK MODE FULL SUPPORT ==== */

.dark-mode {
  background-color: #222;
  color: #fff;
}

.dark-mode a {
  color: #ddd;
}

.dark-mode .top-bar {
  background-color: #333;
  border-bottom: 1px solid #555;
}

/* Thêm các style khác nu cn */



body.dark-mode {
  background-color: #121212;
  color: #e5e7eb;
}

/* Card, box */
body.dark-mode .card,
body.dark-mode .news-card,
body.dark-mode .mostViewedSwiper .card,
body.dark-mode .sidebar .list-group-item,
body.dark-mode .modal-content,
body.dark-mode .newsletter-subscribe,
body.dark-mode .profile-card,
body.dark-mode .login-form,
body.dark-mode .register-form {
  background-color: #1e1e1e !important;
  color: #f1f5f9;
  border-color: #2c2c2c !important;
}

/* Text */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode .card-title,
body.dark-mode .text-dark {
  color: #f1f5f9 !important;
}

body.dark-mode .text-muted {
  color: #94a3b8 !important;
}

/* Sidebar link */
body.dark-mode .sidebar a,
body.dark-mode .sidebar .form-check-label {
  color: #cbd5e1 !important;
}

body.dark-mode .sidebar a:hover {
  color: #714dff !important;
  /*background-color: rgba(255, 255, 255, 0.05);*/
}

/* Button styles */
body.dark-mode .btn-outline-secondary,
body.dark-mode .btn-outline-danger,
body.dark-mode .btn {
  border-color: #444 !important;
  color: #e2e8f0 !important;
  background-color: #373737 !important;
}

body.dark-mode .btn:hover {
  background-color: #2c2c2c;
  color: #10b981;
}

/* Form inputs */
body.dark-mode .form-control,
body.dark-mode .form-select {
  background-color: #2c2c2c !important;
  color: #e5e7eb !important;
  border-color: #3b3b3b !important;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

/* Border fix */
body.dark-mode .border,
body.dark-mode .list-group-item {
  border-color: #2a2a2a !important;
}

/* Share tooltip */
body.dark-mode .share-tooltip {
  background: rgba(30, 30, 30, 0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Dropdown, modal */
body.dark-mode .dropdown-menu {
  background-color: #2c2c2c;
  color: #f1f1f1;
}

body.dark-mode .dropdown-item:hover {
  background-color: #3b3b3b;
}

/* Scrollbar */
body.dark-mode ::-webkit-scrollbar-thumb {
  background-color: #3b3b3b;
}

/* Dark Mode cho box Trending v Sponsored */
body.dark-mode .list-group-item {
  background-color: #1f1f1f !important;
  border-color: #2a2a2a !important;
  color: #e5e7eb !important;
}

body.dark-mode .list-group-item:hover {
  background-color: #2a2a2a !important;
  color: #714dff !important;
}

body.dark-mode .list-group-item img {
  border: 1px solid #333;
}

body.dark-mode .list-group-item .fw-semibold {
  color: #e2e8f0 !important;
}

body.dark-mode .list-group-item .text-muted {
  color: #94a3b8 !important;
}

/* === DARK MODE for Free Account Signup Box === */
body.dark-mode .free-account-signup {
  background-color: #1e1e1e !important;
  border-color: #2c2c2c !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.dark-mode .free-account-signup .card-body {
  color: #f1f5f9;
}

body.dark-mode .free-account-signup .card-title {
  color: #10b981 !important;
}

body.dark-mode .free-account-signup .text-muted,
body.dark-mode .free-account-signup .card-text,
body.dark-mode .free-account-signup .benefits-list li {
  color: #cbd5e1 !important;
}

body.dark-mode .free-account-signup .signup-btn {
  background: linear-gradient(90deg, #000, #000);
  color: #fff;
}

body.dark-mode .free-account-signup .signup-btn:hover {
  background: linear-gradient(90deg, #333333, #333333);
}


/* === DARK MODE for Newsletter Box === */
body.dark-mode .newsletter-subscribe {
  background-color: #1e1e1e !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border: 1px solid #2c2c2c;
}

body.dark-mode .newsletter-subscribe h5 {
  color: #10b981 !important;
}

body.dark-mode .newsletter-subscribe p,
body.dark-mode .newsletter-subscribe .text-muted {
  color: #cbd5e1 !important;
}

body.dark-mode .subscribe-btn {
  background: linear-gradient(90deg, #000, #000);
  color: #fff;
}

body.dark-mode .subscribe-btn:hover {
  background: linear-gradient(90deg, #333333, #333333);
}

/* === DARK MODE cho .news-card === */
body.dark-mode .news-card {
  background-color: #1e1e1e !important;
  color: #e2e8f0 !important;
  border: 1px solid #2a2a2a;
}

body.dark-mode .news-card:hover {
  background-color: #252525 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

body.dark-mode .news-card .card-title {
  color: #f1f5f9 !important;
}

body.dark-mode .news-card:hover .card-title {
  color: #10b981 !important;
}

body.dark-mode .news-card .card-text small,
body.dark-mode .news-card .text-muted {
  color: #94a3b8 !important;
}

body.dark-mode .news-card img {
  border-bottom: 1px solid #333;
}

/* === DARK MODE cho share-tooltip === */
body.dark-mode .share-tooltip {
  background-color: rgba(30, 30, 30, 0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

body.dark-mode .share-tooltip a {
  color: #e2e8f0 !important;
}

body.dark-mode .share-tooltip a:hover {
  color: #10b981 !important;
}

/* === DARK MODE cho border-bottom === */
body.dark-mode .border-bottom {
  border-bottom: 1px solid #2a2a2a !important;
}

/* === DARK MODE: Top Bar (Time + Weather) === */
body.dark-mode .top-bar {
  background-color: #1a1a1a !important;
  border-bottom: 1px solid #333 !important;
}

body.dark-mode .top-bar .text-muted {
  color: #cbd5e1 !important;
}

body.dark-mode #weather-info img {
  filter: brightness(0.9) contrast(1.2);
}

/* === DARK MODE: Dropdown === */
body.dark-mode .dropdown-menu {
  background-color: #1e1e1e;
  border: 1px solid #2c2c2c;
}

body.dark-mode .dropdown-item {
  color: #e2e8f0;
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
  background-color: #2c2c2c;
  color: #10b981;
}

/* === DARK MODE: Navbar Toggler Icon === */
body.dark-mode .navbar-toggler {
  border-color: #444;
}

body.dark-mode .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(226, 232, 240, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* === Dark Mode Toggle Icon Animation === */
#darkModeIcon {
  transition: transform 0.5s ease, opacity 0.3s ease;
}

#darkModeIcon.spin-out {
  transform: rotate(360deg);
  opacity: 0;
}

#darkModeIcon.spin-in {
  transform: rotate(0deg);
  opacity: 1;
}

/* === DARK MODE: Search Form === */
body.dark-mode .search-input,
body.dark-mode .source-select {
  background-color: #1e1e1e;
  border: 1px solid #333;
  color: #e2e8f0;
}

body.dark-mode .search-input:focus,
body.dark-mode .source-select:focus {
  border-color: #714dff;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
  background-color: #1e1e1e;
  color: #f8fafc;
}

body.dark-mode .source-select option {
  background-color: #1e1e1e;
  color: #e2e8f0;
}

body.dark-mode .search-icon {
  color: #9ca3af; /* xm nht hn */
}

body.dark-mode .clear-search {
  color: #f87171; /*  nht */
}

body.dark-mode .clear-search:hover {
  color: #ef4444;
}

/* === DARK MODE: Placeholder text in search input === */
body.dark-mode .search-input::placeholder,
body.dark-mode .source-select::placeholder {
  color: #9ca3af; /* xám nht */
  opacity: 1;     /* m bo khng b m */
}

/* Dark Mode Styles */
@media (prefers-color-scheme: dark) {
  .subscribe-modal .modal-content {
    background: #2a2a2a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  .subscribe-modal .modal-header {
    border-bottom: 1px solid #444;
    background: #2a2a2a;
  }

  .subscribe-modal .modal-title {
    color: #e0e0e0;
  }

  .subscribe-modal .modal-title::before {
    filter: brightness(1.2);
  }

  .subscribe-modal .btn-close {
    filter: invert(1);
  }

  .subscribe-modal .image-column {
    background-color: #333;
  }

  .subscribe-modal .image-column img {
    border: 1px solid #444;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  }

  .subscribe-modal .form-column {
    background: #2a2a2a;
  }

  .subscribe-modal .form-label {
    color: #a0a0a0;
  }

  .subscribe-modal .form-control {
    background: #3a3a3a;
    border: 1px solid #444;
    color: #e0e0e0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  }

  .subscribe-modal .form-control:focus {
    border-color: #34c759;
    box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.2);
  }

  .subscribe-modal .form-control::placeholder {
    color: #a0a0a0;
  }

  .subscribe-modal .category-checklist {
    background-color: #333;
    border: 1px solid #444;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  }

  .subscribe-modal .form-check-label {
    color: #a0a0a0;
  }

  .subscribe-modal .form-check-input {
    background-color: #3a3a3a;
    border-color: #444;
  }

  .subscribe-modal .form-check-input:checked {
    background-color: #34c759;
    border-color: #34c759;
  }

  .subscribe-modal #categoryError {
    color: #ff6b6b;
  }

  .subscribe-modal .btn-success {
    background: linear-gradient(90deg, #34c759, #4ade80);
  }

  .subscribe-modal .btn-success:hover {
    background: linear-gradient(90deg, #2ea44f, #34c759);
  }
}

/* Cc style khc gi nguyn */
@media (max-width: 768px) {
  .subscribe-modal .modal-body {
    flex-direction: column;
  }
  .subscribe-modal .image-column,
  .subscribe-modal .form-column {
    flex: 100%;
  }
  .subscribe-modal .category-checklist {
    grid-template-columns: 1fr;
  }
}

.custom-btn {
  background-color: #714dff;
  border: none;
  border-radius: 100px;
  padding: 6px 15px;
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  transition: background 0.3s ease, transform 0.2s ease;
  text-decoration: none;
  color: #fff;
}

.custom-btn:hover {
  background-color: #714dff;
  transform: scale(1.02);
}

.custom-btn:active {
  transform: scale(0.98);
}

.custom-btn-outline {
  background: transparent;
  border: 2px solid #714dff;
  color: #714dff;
}

.custom-btn-outline:hover {
  background-color: #714dff;
  color: #fff;
}

/* === DARK MODE: Logout Modal === */
body.dark-mode #logoutModal .modal-content {
  background-color: #1e1e1e;
  color: #e2e8f0;
  border: 1px solid #2c2c2c;
}

body.dark-mode #logoutModal .modal-header,
body.dark-mode #logoutModal .modal-footer {
  border-color: #333;
}

body.dark-mode #logoutModal .modal-title {
  color: #f87171;
}

body.dark-mode #logoutModal .btn-close {
  filter: invert(1);
}

body.dark-mode #logoutModal .modal-body {
  color: #d1d5db;
}

body.dark-mode #logoutModal .btn-secondary {
  background-color: #374151;
  border-color: #4b5563;
  color: #e5e7eb;
}

body.dark-mode #logoutModal .btn-secondary:hover {
  background-color: #4b5563;
}

body.dark-mode #logoutModal .btn-danger {
  background-color: #dc2626;
  border-color: #dc2626;
}

body.dark-mode #logoutModal .btn-danger:hover {
  background-color: #b91c1c;
  border-color: #b91c1c;
}

/* QUICK FILTERS - DARK MODE SUPPORT */
@media (prefers-color-scheme: dark) {
  .quick-filters-container {
    background-color: #1e1e1e !important;
    border: 1px solid #444 !important;
    color: #f1f1f1 !important;
  }

  .quick-filters-container label,
  .quick-filters-container .form-label,
  .quick-filters-container .form-check-label {
    color: #ddd !important;
  }

  .quick-filters-container .form-check-input[type="checkbox"] {
    background-color: #2a2a2a;
    border-color: #555;
  }

  .quick-filters-container .form-check-input:checked {
    background-color: #714dff;
    border-color: #714dff;
  }

  .quick-filters-container .form-select {
    background-color: #2a2a2a;
    color: #f1f1f1;
    border-color: #555;
  }

  .quick-filters-container .btn-primary {
    background-color: #714dff!important;
    border-color: #714dff!important;
    color: #fff !important;
  }

  .quick-filters-container .btn-secondary {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff !important;
  }

  .quick-filters-container .btn-primary:disabled,
  .quick-filters-container .btn-secondary:disabled {
    background-color: #555 !important;
    border-color: #555 !important;
    color: #aaa !important;
  }
}

.sidebar-podcast-box {
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
}

.sidebar-podcast-box {
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

/* DARK MODE */
body.dark-mode .sidebar-podcast-box {
  background-color: #1e1e1e !important;
  border-color: #444 !important;
}

body.dark-mode .sidebar-podcast-box h6,
body.dark-mode .sidebar-podcast-box small {
  color: #f1f1f1 !important;
}

body.dark-mode .sidebar-podcast-box .btn-outline-primary {
  color: #714dff;
  border-color: #714dff;
  background-color: transparent;
}

body.dark-mode .sidebar-podcast-box .btn-outline-primary:hover {
  background-color: #714dff;
  color: #fff;
}

body.dark-mode .sidebar-podcast-box .btn-outline-secondary {
  color: #ccc;
  border-color: #666;
  background-color: transparent;
}

body.dark-mode .sidebar-podcast-box .btn-outline-secondary:hover {
  background-color: #666;
  color: #fff;
}

body.dark-mode .sidebar-podcast-box .border-bottom {
  border-color: #333 !important;
}

/* Dark Mode - Navbar Links */
body.dark-mode .navbar-nav .nav-link {
  color: #e2e8f0 !important; /* vn bn sáng */
}

body.dark-mode .navbar-nav .nav-link:hover {
  color: #10b981 !important; /* xanh nhn */
  background-color: rgba(255, 255, 255, 0.05); /* nh nhng */
}

/* Active link trong Dark Mode */
body.dark-mode .navbar-nav .nav-link.active {
  font-weight: bold;
  color: #714dff !important;
  background-color: #1e1e1e;
}


body.dark-mode .navbar-nav .nav-link:hover {
  color: #714dff!important;
}

body.dark-mode header.bg-white {
  background-color: #1e1e1e !important;
}



/* Light mode */
.price-widget {
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #ddd;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.price-widget .table-sm {
  font-size: 14px;
  margin-bottom: 10px;
}
.price-widget .table-sm th, .price-widget .table-sm td {
  padding: 5px;
  border: 1px solid #ddd;
  color: #333;
}
.price-widget .text-success {
  color: #28a745;
}
.price-widget .text-danger {
  color: #dc3545;
}
.price-widget .text-muted {
  color: #6c757d;
}


/* Dark mode */
body.dark-mode .price-widget {
  background: #1f1f1f !important;
  border: 1px solid #2a2a2a !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
}
body.dark-mode .price-widget .table-sm {
  background: #2c2f33 !important; /* Nn bng tối */
}
body.dark-mode .price-widget .table-sm th,
body.dark-mode .price-widget .table-sm td {
  background: #2c2f33 !important; /* Nn  ti */
  border: 1px solid #444 !important;
  color: #e9ecef !important;
}
body.dark-mode .price-widget .text-success {
  color: #00ff00 !important;
}
body.dark-mode .price-widget .text-danger {
  color: #ff5555 !important;
}
body.dark-mode .price-widget .text-muted {
  color: #adb5bd !important;
}





/* CSS cho phn API data trong sidebar */
.price-widget .api-data-content {
  /* Bn có th gi li padding này nu mun có khong cch chung cho c khi,
     hoặc b đi nếu ch mun padding bn trong table cells.
     V dụ: padding: 5px 0; /* Ch padding trên di cho khi, không trái phi */
  */
}

/* Quan trng: Thm padding cho cc  th và td bên trong table ca widget API */
.price-widget .api-data-content table th,
.price-widget .api-data-content table td {
  padding-left: 10px !important;  /* Thêm padding tri */
  padding-right: 10px !important; /* Thm padding phi */
  /* Bn cng c thể thm padding-top, padding-bottom nu mun */
  /* padding-top: 5px; */
  /* padding-bottom: 5px; */
}

/* iu chnh c th hn nu cn */

/* Cho ct u tiên (Coin/Metal), khng cn padding trái qu nhiều nu n  st l tri ca widget */
.price-widget .api-data-content table th:first-child,
.price-widget .api-data-content table td:first-child {
  /* padding-left: 0; */ /* Hoc mt gi trị nh hn nu widget  c padding */
}

/* Cho ct cui cùng (24h Change), khng cn padding phi qu nhiu nu n đã sát l phi của widget */
.price-widget .api-data-content table th:last-child,
.price-widget .api-data-content table td:last-child {
  /* padding-right: 0; */ /* Hoc mt gi tr nh hn */
}

/* m bo table chim  không gian v khng c margin khng mong mun */
.price-widget .api-data-content table.table {
  margin-bottom: 0; /* Bootstrap table c th c margin-bottom */
  width: 100%;     /* m bo table chim ht chiu rng ca container */
}








/* style.css */

/* --- Light Mode Styles (Mc định) --- */
#searchInput,
#source_filter_main {
    height: calc(2.5rem + 2px); /* Bootstrap 5 default height */
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #212529; /* Bootstrap default text color for inputs */
    background-color: #fff; /* Bootstrap default background for inputs */
    background-clip: padding-box;
    border: 1px solid #ced4da; /* Bootstrap default border */
    appearance: none; /* Remove default system appearance */
    border-radius: 0.4rem; /* Bootstrap default border-radius */
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* Focus styles for light mode */
#searchInput:focus,
#source_filter_main:focus {
    border-color: #86b7fe; /* Bootstrap focus border color */
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Bootstrap focus box-shadow */
}

/* Placeholder color for search input in light mode */
#searchInput::placeholder {
    color: #6c757d;
    opacity: 1;
}

/* Styles for the select dropdown arrow (Bootstrap 5 default) - Light mode */
#source_filter_main {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}


/* --- Dark Mode Styles --- */
.dark-mode #searchInput,
.dark-mode #source_filter_main {
    color: #adb5bd; /* Lighter text for dark background */
    background-color: #212529; /* Dark background for inputs */
    border-color: #495057;    /* Darker border for dark mode */
}

/* Focus styles for dark mode */
.dark-mode #searchInput:focus,
.dark-mode #source_filter_main:focus {
    border-color: #5897fb; /* Adjusted focus border color for dark mode */
    /* box-shadow: 0 0 0 0.25rem rgba(88, 151, 251, 0.35); Lighter box shadow */
    /* Hoc bn c th dùng bin CSS ca Bootstrap nu đ ty chnh dark mode cho Bootstrap */
     box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.35);
}

/* Placeholder color for search input in dark mode */
.dark-mode #searchInput::placeholder {
    color: #6c757d; /* Can be same or slightly lighter */
    opacity: 1;
}

/* Styles for the select dropdown arrow - Dark mode */
.dark-mode #source_filter_main {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    /* Change stroke color in SVG to be visible on dark background */
}


/* --- Button Styles (p dng cho c light v dark mode, Bootstrap x lý) --- */
/* Nút Search */
#searchForm .btn-primary {
    /* Bootstrap s t x l mu cho nt primary trong light/dark mode nu bn ã cu hnh dark mode cho Bootstrap.
       Nếu khng, bn cn đnh ngha mu riêng cho nút trong dark mode.
    */
    line-height: 1.5; /* Giữ nguyn  cn chnh */
    height: calc(2.5rem + 2px); /* ng b chiu cao vi input/select */
}

/* Nu bn cn ty chnh nút Search cho Dark Mode m Bootstrap không tự x lý: */
/*
.dark-mode #searchForm .btn-primary {
    background-color: #0d6efd; // Or your dark mode primary color
    border-color: #0d6efd;   // Or your dark mode primary border color
    color: #fff;
}
.dark-mode #searchForm .btn-primary:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}
*/


.autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 300px;
  overflow-y: auto;
  margin-top: 2px;
}

.autocomplete-item {
  padding: 10px 15px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.autocomplete-item:hover, .autocomplete-item.selected {
  background-color: #f0f0f0;
}

.autocomplete-dropdown:empty {
  display: none;
}

.search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
}

.clear-search {
  position: absolute;
  
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #666;
  display: none;
}

.podcast-card {
  border-radius: 24px 8px !important;
  overflow: hidden;
}


.custom-container {
    width: 1296px;
    margin: 0 auto;
    padding: 0; /* Remove default padding */
}

.top-bar .menu-links {
    font-size: 15px !important; /* Set to a size above the browser minimum */
    transform: scale(0.8); /* Scale down to ~8px visually */
    transform-origin: left; /* Ensure alignment stays correct */
}

.top-bar .menu-links a:hover {
    color: #007bff; /* Change to blue on hover */
    text-decoration: underline; /* Add underline on hover */
}





/* Trong :root hoc body (cho light mode) */
:root {
    /* ... cc bin khác ca bn ... */
    --flex-gray-40: #cccccc; /* Hoặc mt mu xm bn mun, v d: #dee2e6 ca Bootstrap */
    --nav-color-10: #e9ecef; /* Nu bn dùng .navbar-outer */
    /* Cc bin mà CSS toggle s dng */
    --dm-size: 24px; /* Kích thc mc ịnh, có th ghi  bng style inline */
    --flex-gray-15: #f0f0f0;
    --solid-white: #ffffff;
    --shadow-12: rgba(0,0,0,0.12);
    --body-fcolor: #212529; /* Màu ch body mc đnh */
    --g-color: #343a40; /* Màu cho icon dark mode button background */
}

/* Cho dark mode */
body.dark-mode {
    /* ... các biến khác cho dark mode ... */
    --flex-gray-40: #555555; /* Màu xám m hn cho dark mode */
    --nav-color-10: #343a40;

    --flex-gray-15: #333333;
    --solid-white: #2b2b2b; /* Nn nút trưt trong dark mode có th là mu ti hn */
    --shadow-12: rgba(255,255,255,0.1);
    --body-fcolor: #f8f9fa; /* Màu ch body trong dark mode */
    --g-color: #f8f9fa; /* Màu cho icon dark mode button background trong dark mode (thng là màu ca icon) */
}



        /* Dark Mode Toggle Styles - BEGIN */
.dark-mode-toggle-wrap {
    height: auto;
}

.dark-mode-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
    /* Đ m bo n không b thu nh qu trong flex container */
    flex-shrink: 0; 
}

.dark-mode-toggle-wrap:not(:first-child) .dark-mode-toggle {
    position: relative;
    margin-left: 5px;
    padding-left: 10px;
    border-left: 1px solid var(--flex-gray-40) !important;
}

.navbar-outer .dark-mode-toggle-wrap:not(:first-child) .dark-mode-toggle {
    /* Nu bn c .navbar-outer, nu không thì c th bỏ qua */
    border-color: var(--nav-color-10);
}

.dark-mode-slide {
    position: relative;
    width: calc(var(--dm-size, 24px) * 1.666);
    height: calc(var(--dm-size, 24px) - 10px); /* Gi nguyên hoc điu chnh cho phù hp */
    border-radius: calc(var(--dm-size, 24px) - 2px); /* Gi nguyên hoc iu chnh */
    background-color: var(--flex-gray-15); /* Nên nh ngha --flex-gray-15 */
    /* Fallback color nếu --flex-gray-15 không được đnh ngha */
    background-color: #e0e0e0; 
}

body.dark-mode .dark-mode-slide {
    /* Màu nền slide khi  dark mode, ví dụ */
    background-color: #424242; 
}


.dark-mode-slide-btn {
    position: absolute;
    top: -5px; /* iu chnh dựa trn --dm-size và height của .dark-mode-slide */
    left: 0;
    display: flex;
    visibility: hidden;
    align-items: center;
    justify-content: center;
    width: var(--dm-size, 24px);
    height: var(--dm-size, 24px);
    -webkit-transition: opacity .1s;
    transition: opacity .1s;
    opacity: 0;
    border-radius: 50%;
    background-color: var(--solid-white); /* Nên ịnh ngha --solid-white */
    box-shadow: 0 1px 4px var(--shadow-12) !important; /* Nn đnh nghĩa --shadow-12 */
    /* Fallback colors/shadows */
    background-color: #ffffff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12) !important;
}

body.dark-mode .dark-mode-slide-btn {
    /* Có th bn mun thay đi mu nền nt hoc shadow trong dark mode */
     background-color: #333333; /* V d */
     box-shadow: 0 1px 4px rgba(255,255,255,0.1) !important; /* Ví d */
}


.triggered .dark-mode-slide-btn {
    -webkit-transition: opacity .2s, transform .5s;
    transition: opacity .2s, transform .5s;
    will-change: transform;
}

.svg-mode-light {
    color: var(--body-fcolor); /* Nn đnh nghĩa --body-fcolor */
    /* Fallback color */
    color: #212529;
}
body.dark-mode .svg-mode-light {
    /* Màu icon light khi  dark mode (nu cn) */
    color: #f8f9fa;
}


.mode-icon-dark {
    color: #fff; /* Màu icon mt trng */
    background-color: var(--g-color); /* Nn đnh ngha --g-color */
    /* Fallback color */
    background-color: #333; /* Mu nn cho icon mt trăng */
}
body.dark-mode .mode-icon-dark {
    /* Style cho icon mt trng khi  dark mode (thưng là khi n active) */
    /* Đã có .activated x l v trí, đy là cho màu sc nu cần */
}


.dark-mode-slide-btn svg {
    width: calc(var(--dm-size, 24px) - 10px); /* Gi nguyn hoc iu chỉnh */
    height: calc(var(--dm-size, 24px) - 10px); /* Gi nguyên hoc điu chnh */
}

.dark-mode-slide-btn.activated {
    visibility: visible;
    opacity: 1;
}

/* Light mode active (mt tri hin) hoc Dark mode inactive */
.mode-icon-default.activated, 
.mode-icon-dark:not(.activated) {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
}

/* Dark mode active (mt trng hin) hoặc Light mode inactive */
.mode-icon-dark.activated,
.mode-icon-default:not(.activated) {
    -webkit-transform: translateX(calc(var(--dm-size, 24px) * 0.666));
    transform: translateX(calc(var(--dm-size, 24px) * 0.666));
}






/* =================================================================== */
/*                      BIN MU (VARIABLES)                           */
/* =================================================================== */
:root {
    --bg-card: #ffffff;
    --text-primary: #333333;
    --text-muted-custom: #6c757d;
    --accent-color: #714dff;
    --bg-accent: rgba(228, 18, 26, 0.1);
    --bg-hover: rgba(0, 0, 0, 0.05);
    --skeleton-light: #f0f0f0;
    --skeleton-dark: #e0e0e0;
    --border-color: #dee2e6;
}

body.dark-mode {
    --bg-card: #1a1a1a;
    --text-primary: #ffffff;
    --text-muted-custom: #adb5bd;
    --accent-color: #ff4d4d;
    --bg-accent: rgba(255, 77, 77, 0.1);
    --bg-hover: rgba(255, 255, 255, 0.1);
    --skeleton-light: #2d2d2d;
    --skeleton-dark: #3d3d3d;
    --border-color: #495057;
}

/* =================================================================== */
/*                        VIDEO CARD & SKELETON                        */
/* =================================================================== */
.video-card {
    position: relative;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    background-color: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.video-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.video-card .card-img-top {
    height: 180px; /* Chiu cao mc định cho desktop */
    object-fit: cover;
    width: 100%;
    border-bottom: 1px solid var(--border-color);
}

.video-card .card-body {
    padding: 0.8rem;
}

.video-card .card-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    height: 4.2em; /* Giới hạn 3 dòng */
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.video-card .card-title a {
    color: var(--text-primary);
    text-decoration: none;
}
.video-card .card-title a:hover {
    color: var(--accent-color);
}

.video-card .text-muted {
    color: var(--text-muted-custom) !important;
}

.play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* Quan trng để click vẫn xuyn qua c */
}

.video-card a.video-play:hover .play-overlay {
    opacity: 1;
}

a.video-play {
    position: relative;
    display: block;
}

/* Skeleton styles */
.skeleton .skeleton-image {
    height: 180px;
    background: linear-gradient(90deg, var(--skeleton-light) 25%, var(--skeleton-dark) 50%, var(--skeleton-light) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.skeleton .skeleton-text {
    height: 16px;
    margin-bottom: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--skeleton-light) 25%, var(--skeleton-dark) 50%, var(--skeleton-light) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
.skeleton .skeleton-title { width: 80%; height: 20px; }
.skeleton .skeleton-line { width: 100%; }
.skeleton .short { width: 60%; }

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* =================================================================== */
/*                      CATEGORIES TAB (THANH DANH MỤC)                */
/* =================================================================== */
.VdPg_tab {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch; /* Cun mượt trên iOS */
    scrollbar-width: none; /* Ẩn scrollbar trên Firefox */
}
.VdPg_tab::-webkit-scrollbar {
    display: none; /* Ẩn scrollbar trn Chrome, Safari, Opera */
}
.VdPg_tab-ul {
    display: inline-flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 10px;
}
.VdPg_tab-li a {
    color: var(--text-primary);
    text-decoration: none;
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 500;
    display: inline-block;
    border-radius: 20px;
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--bg-hover);
    border: 1px solid transparent;
}
.VdPg_tab-li.VdPg_tab-act a {
    color: #fff;
    font-weight: 700;
    /*background-color: var(--accent-color);*/
    background: linear-gradient(74deg,#714DFF 0%,#9C83FF 23%,#E151FF 81%,#FFF759 100%) padding-box;
    /*border-color: var(--accent-color);*/
}
.VdPg_tab-li a:hover {
    background-color: var(--accent-color);
    color: #fff;
}


/* =================================================================== */
/*                        RESPONSIVE STYLES                            */
/* =================================================================== */

/* ----- Màn hình nhỏ hơn Tablet (dưới 768px) ----- */
@media (max-width: 767.98px) {
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    h5.fs-3 {
        font-size: 1.5rem !important; /* Gim kích thước tiêu  section */
    }

    .video-card .card-img-top,
    .skeleton .skeleton-image {
        height: 140px; /* Giảm chiều cao ảnh  tiết kiệm khng gian */
    }

    .video-card .card-title {
        font-size: 0.9rem;
        height: 3.8em; /* Giới hn 3 dòng cho font nh hơn */
    }

    .video-card .card-body {
        padding: 0.75rem;
    }

    .d-flex small {
        font-size: 0.75rem;
    }
}

/* ----- Mn hnh điện thoại (dưới 576px) ----- */
@media (max-width: 575.98px) {
    h5.fs-3 {
        font-size: 1.3rem !important;
    }

    .video-card .card-img-top,
    .skeleton .skeleton-image {
        /* Tính toán chiu cao theo tỉ l 16:9 da trên chiu rộng ca 1 ct (50vw) */
        /* (50vw - padding) * 9/16 */
        height: calc((50vw - 1.5rem) * 0.5625);
        min-height: 120px;
    }

    .share-tooltip {
        display: none; /* Ẩn tooltip share trên mobile để tránh ri */
    }
}




/* =================================================================== */
/*                     VIDEO MODAL (DARK MODE FIX)                     */
/* =================================================================== */

/* Đnh dạng nền và viền cho toàn bộ modal */
.modal-content {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
}

/* Đnh dạng màu chữ cho tiêu đề và ường vin cho header */
.modal-header {
    border-bottom-color: var(--border-color);
}
.modal-title {
    color: var(--text-primary);
}

/* 
  SỬA LI QUAN TRỌNG: Nút "X" (btn-close) trong dark mode.
  Bootstrap 5 dng thuộc tính `filter` để đổi màu của icon SVG từ đen sang trắng.
  Chng ta s áp dụng lại k thuật ny trong bối cnh dark mode của bạn.
*/
body.dark-mode .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}






/* CSS cho category scroll - Cập nhật đầy đ cho LIGHT & DARK MODE */

/* --- CÁC STYLE CHUNG --- */
.category-scroll-container {
    position: relative;
}

.hr-scroll {
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.hr-scroll::-webkit-scrollbar {
    display: none;
}
.hr-scroll__content {
    display: flex;
    flex-wrap: nowrap;
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}
.VdPg_tab-li {
    white-space: nowrap;
    flex-shrink: 0;
}

/* --- MŨI TÊN (BUTTONS) --- */
.category-scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s, opacity 0.2s, border-color 0.2s, color 0.2s;
}
.category-scroll-arrow.left-arrow {
    left: 8px;
}
.category-scroll-arrow.right-arrow {
    right: 8px;
}
.category-scroll-arrow.d-none {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* --- HIỆU ỨNG GRADIENT MỜ --- */
.category-scroll-container::before,
.category-scroll-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px; /* Tăng độ rng gradient mt cht */
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}
.category-scroll-container::before {
    left: 0;
}
.category-scroll-container::after {
    right: 0;
}
.category-scroll-container.show-gradient-left::before,
.category-scroll-container.show-gradient-right::after {
    opacity: 1;
}

/* ============================================================== */
/*                     STYLE CHO CH ĐỘ SÁNG (LIGHT MODE)          */
/* ============================================================== */

/* Mũi tên ở chế độ sáng */
.category-scroll-arrow {
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid #ddd;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    color: #333; /* Màu icon */
}
.category-scroll-arrow:hover {
    background-color: #f0f0f0;
}

/* Gradient  ch độ sáng */
.category-scroll-container::before {
    background: linear-gradient(to right, white 30%, rgba(255, 255, 255, 0) 100%);
}
.category-scroll-container::after {
    background: linear-gradient(to left, white 30%, rgba(255, 255, 255, 0) 100%);
}


/* ============================================================== */
/*                      STYLE CHO CHẾ ĐỘ TỐI (DARK MODE)           */
/* ============================================================== */
/* Giả sử bn dùng class "dark-mode" trên thẻ <body> hoặc <html> */

/* Thay đổi màu nền của bạn tại đy */
:root {
    --dark-bg-color: #1a1a1a; /* <-- THAY ĐỔI MÀU NỀN TỐI CA BẠN VÀO ÂY */
}

body.dark-mode .category-scroll-arrow {
    /* Màu nền của nút trong dark mode, hơi sáng hơn nền chính */
    background-color: rgba(50, 50, 50, 0.9); 
    border: 1px solid #555;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    color: #e0e0e0; /* Mu icon */
}

body.dark-mode .category-scroll-arrow:hover {
    background-color: #444;
}

/* Gradient ở chế độ ti */
body.dark-mode .category-scroll-container::before {
    background: linear-gradient(to right, var(--dark-bg-color) 30%, transparent 100%);
}
body.dark-mode .category-scroll-container::after {
    background: linear-gradient(to left, var(--dark-bg-color) 30%, transparent 100%);
}