/* ==========================================================================
   KHUNG THÔNG BÁO NGƯỜI ĐĂNG KÝ (SOCIAL PROOF / FOMO)
   ========================================================================== */
.fomo-box { border-color: var(--green-color) !important; }
.fomo-text { font-size: 0.95rem; color: #0f5132; }
.fomo-text strong { color: #0a3622; }
.fomo-text strong.text-danger { color: var(--danger-color) !important; }

@keyframes pulseLive {
   0%   { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.4); }
   70%  { box-shadow: 0 0 0 8px rgba(40, 167, 69, 0); }
   100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}

.live-dot {
   width: 12px;
   height: 12px;
   background-color: #79df9c; 
   border-radius: 50%;
   display: inline-block;
   animation: pulseLive 2s infinite;
}

/* ==========================================================================
    TRƯỢT NGANG TRÊN ĐIỆN THOẠI (Dùng chung cho TẤT CẢ các mục)
   ========================================================================== */
@media (max-width: 991px) {
   .mobile-horizontal-scroll {
       display: flex !important;
       flex-wrap: nowrap !important;
       overflow-x: auto !important;
       overflow-y: hidden !important;
       -webkit-overflow-scrolling: touch !important; 
       scroll-behavior: smooth !important;
       scrollbar-width: none !important;  
       -ms-overflow-style: none !important;  
   }
   .mobile-horizontal-scroll::-webkit-scrollbar {
       display: none !important; 
   }
}

/* ==========================================================================
    ẨN THANH CUỘN CHO TẤT CẢ MÀN HÌNH (Mobile + PC)
   ========================================================================== */
.pc-horizontal-scroll {
    scrollbar-width: none !important;  
    -ms-overflow-style: none !important; 
}
.pc-horizontal-scroll::-webkit-scrollbar {
    display: none !important; 
}

/* ==========================================================================
    TRƯỢT NGANG TRÊN MÁY TÍNH (Chỉ áp dụng cho mục nào CÓ MŨI TÊN)
   ========================================================================== */
@media (min-width: 992px) {
   .pc-horizontal-scroll {
       display: flex !important;
       flex-wrap: nowrap !important; /* Lệnh này ép không cho rớt hàng trên PC */
       overflow-x: auto !important;
       overflow-y: hidden !important;
       scroll-behavior: smooth !important;
       cursor: grab; 
   }
   .pc-horizontal-scroll:active,
   .active-dragging {
       cursor: grabbing !important;
       user-select: none;
   }
}

/* ==========================================================================
   ÉP TỶ LỆ LỘ THẺ (VẪN GIỮ NGUYÊN PADDING GỐC CỦA BOOTSTRAP)
   ========================================================================== */

/* Trên Điện thoại (Mobile): Rộng 45% (Hiện 2 thẻ to đẹp + lộ thẻ 3) */
@media (max-width: 767px) {
   .custom-slider-col {
       flex: 0 0 45% !important; 
       width: 45% !important;
       max-width: 45% !important;
   }
}

/* Trên Tablet (iPad): Rộng 31% (Hiện 3 thẻ + lộ thẻ 4) */
@media (min-width: 768px) and (max-width: 991px) {
   .custom-slider-col {
       flex: 0 0 31% !important; 
       width: 31% !important;
       max-width: 31% !important;
   }
}

/* ==========================================================================
   KÉO THẢ CHUỘT TRÊN MÁY TÍNH (DRAG TO SCROLL)
   ========================================================================== */
.pc-horizontal-scroll {
   cursor: grab;
   /*scroll-snap-type: x mandatory;*/
}
.pc-horizontal-scroll:active,
.active-dragging {
   cursor: grabbing !important;
   user-select: none;
}

/* ==========================================================================
   TẮT HIỆU ỨNG TRỄ CỦA LAZYLOAD TRONG KHUNG TRƯỢT
   ========================================================================== */
.mobile-horizontal-scroll .lazy-card,
.mobile-horizontal-scroll .lazyload,
.mobile-horizontal-scroll img,
.pc-horizontal-scroll .lazy-card,
.pc-horizontal-scroll .lazyload,
.pc-horizontal-scroll img {
   opacity: 1 !important;
   transform: none !important;
   visibility: visible !important;
   transition: none !important;
}

/* ==========================================================================
   DẤU CHẤM, MŨI TÊN, TAB PILLS
   ========================================================================== */
.custom-slider-dots { gap: 8px; }
.slider-dot { width: 8px; height: 8px; background-color: #e2e8f0; border-radius: 50%; transition: all 0.2s ease; }
.slider-dot.active { background-color: var(--theme-color); transform: scale(1.3); }

/* Nút mũi tên */
.nav-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.9); border: 1px solid #ddd; width: 40px; height: 40px; border-radius: 50%; z-index: 10; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; transition: all 0.3s; }
.nav-arrow:hover { background: var(--theme-color); color: #fff; border-color: var(--theme-color); }
.prev-arrow { left: -20px; }
.next-arrow { right: -20px; }

/* XỬ LÝ TRẠNG THÁI MỜ/KHÓA */
.nav-arrow.disabled {
   opacity: 0.3;
   pointer-events: none; /* Khóa hoàn toàn click và hover */
   cursor: default;
}

/* Nút Tab (Pills) tự động rớt dòng */
.nav-pills-custom { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.nav-pills-custom .nav-item { margin: 0; flex: 0 0 auto; }
.nav-pills-custom .nav-link { width: 100%; color: #495057; background-color: #f8f9fa; border-radius: 50rem; padding: 8px 16px; font-weight: 600; font-size: 0.85rem; border: 1px solid #dee2e6; transition: all 0.3s ease; white-space: nowrap; display: flex; justify-content: center; align-items: center; }
.nav-pills-custom .nav-link:hover { background-color: #e2e6ea; color: var(--theme-color); }
.nav-pills-custom .nav-link.active { color: #ffffff !important; background-color: var(--theme-color) !important; border-color: var(--theme-color) !important; box-shadow: 0 4px 10px rgba(var(--theme-color-rgb), 0.3); }

@media (min-width: 768px) {
   .nav-pills-custom { gap: 12px; }
   .nav-pills-custom .nav-link { padding: 10px 24px; font-size: 0.95rem; }
}

/* Cuộn ngang các nút Tab (Pills) trên mobile */
.tab-scroll-mobile { display: flex; flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; justify-content: flex-start !important; padding-bottom: 10px; }
.tab-scroll-mobile .nav-item { white-space: nowrap; }

@media (min-width: 768px) {
   .tab-scroll-mobile { justify-content: center !important; overflow-x: visible; padding-bottom: 0; }
}

/* ==========================================================================
   THANH DANH MỤC & NỘI DUNG GIỚI THIỆU BREADCRUMB
   ========================================================================== */
.breadcrumb {
   background: transparent;
   padding: 0.5rem 0;
   font-size: 1rem; 
}

/* 1. Mũi tên ngăn cách */
.breadcrumb-item + .breadcrumb-item::before {
   content: "\f054"; 
   font-family: "Font Awesome 6 Free";
   font-weight: 900;
   color: #adb5bd;
   font-size: 0.75rem;
   padding: 0 0.6rem;
   vertical-align: middle; 
}

/* 2. Link Trang chủ */
.breadcrumb-item a {
   color: #6c757d;
   text-decoration: none;
   transition: all 0.25s ease-in-out;
}

.breadcrumb-item a i {
   transition: transform 0.2s ease;
}

/* 3. Hiệu ứng Hover */
.breadcrumb-item a:hover {
   color: var(--theme-color);
   text-decoration: none !important;
}

/* Hiệu ứng phóng to icon nhe nhẹ */
.breadcrumb-item a:hover i {
   transform: scale(1.15); 
}

/* Gạch chân phần chữ*/
.breadcrumb-item a:hover span {
   text-decoration: underline;
   text-underline-offset: 4px;
   text-decoration-thickness: 2px;
}

/* 4. Mục đang chọn (Trang hiện tại) */
.breadcrumb-item.active span {
   color: var(--theme-color) !important; 
   font-weight: 700; 
}

.content-detail-web img {
   max-width: 100% !important; 
   height: auto !important;    
   display: block !important;  
   margin: 1.5rem auto !important; 
   border-radius: 8px;          
   box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
}
.content-detail-web iframe {
   max-width: 100% !important;
   margin: 1rem auto !important;
   display: block !important;
}

/* =========================================
    NÚT BACK TO TOP HIỆN ĐẠI
========================================= */
.btn-backtotop {
   position: fixed;
   bottom: 30px;
   right: 30px;
   width: 48px;
   height: 48px;
   background: linear-gradient(135deg, #ff1a48 0%, var(--theme-color) 100%);
   color: #ffffff;
   border: none;
   border-radius: 50%;
   box-shadow: 0 4px 12px rgba(var(--theme-color-rgb), 0.4);
   z-index: 1030;
   cursor: pointer;
   text-align: center;
   line-height: 48px;
   font-size: 1.15rem;
   opacity: 0;
   visibility: hidden;
   transform: translateY(20px); 
   transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.btn-backtotop.show-btn {
   opacity: 1;
   visibility: visible;
   transform: translateY(0); 
}
.btn-backtotop:hover {
   transform: translateY(-5px); 
   box-shadow: 0 8px 22px rgba(var(--theme-color-rgb), 0.6);
   background: linear-gradient(135deg, #ff335c 0%, #e6002f 100%);
   color: #ffffff;
}
.btn-backtotop:hover i { animation: bounceUp 0.8s infinite alternate; }
@keyframes bounceUp {
   0% { transform: translateY(2px); }
   100% { transform: translateY(-2px); }
}

/* =========================================
    GIAO DIỆN TRANG LỖI 404
========================================= */
.icon-404 { font-size: 6rem; opacity: 0.9; }
.text-404-title { color: var(--theme-color); letter-spacing: 5px; }
.text-404-desc { font-size: 1.05rem; }
.btn-404-home {
   background: linear-gradient(135deg, #ff1a48 0%, var(--theme-color) 100%);
   border: none;
   font-size: 1.05rem;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-404-home:hover {
   transform: translateY(-3px);
   box-shadow: 0 8px 20px rgba(var(--theme-color-rgb), 0.4) !important;
   color: #ffffff;
}

/* =========================================
    HIỆU ỨNG LAZY LOAD THẺ GÓI CƯỚC
========================================= */
.lazy-card {
   opacity: 0;
   transform: translateY(30px);
   transition: opacity 0.6s ease-out, transform 0.6s ease-out;
   will-change: opacity, transform; 
}

.lazy-card.is-visible {
   opacity: 1;
   transform: translateY(0);
}

/* Vô hiệu hóa hiệu ứng ẩn thẻ nếu nó nằm trong slider SWIPER */
.swiper .lazy-card,
.swiper-wrapper .lazy-card {
   opacity: 1 !important;
   transform: translateY(0) !important;
   transition: none !important;
}

/* Thẻ ở trang hỗ trợ nằm trong Row ngang, cần đảm bảo nó hiện đúng */
.lazy-card.card {
   display: flex !important;
}

/* ==========================================================
    TẮT HIỆU ỨNG LAZY LOAD TRÊN MOBILE
   ========================================================== */
@media (max-width: 991px) {
   .lazy-card {
       opacity: 1 !important;
       transform: none !important;
       visibility: visible !important;
       transition: opacity 0.3s ease-out !important;
   }
}