/* ==========================================================================
   Style cho thanh lọc nhanh PRODUCT
   ========================================================================== */
.btn-outline-secondary {
   border: 1px solid #dee2e6;
   color: #6c757d;
}
.btn-outline-secondary:hover {
   background-color: var(--theme-color);
   border-color: var(--theme-color);
   color: #fff;
}
.btn-outline-danger.active {
   background-color: var(--theme-color) !important;
   border-color: var(--theme-color) !important;
   color: #fff !important;
}

/* ==========================================================================
   PRODUCT_CARD - PREMIUM LIGHT UI (BẢN CHUẨN TỐI ƯU GIAO DIỆN & CẢM ỨNG)
   ========================================================================== */

/* =========================================================
   1. KHUNG THẺ CARD & BỐ CỤC CHUNG
   ========================================================= */
.unified-white-card {
   background: #ffffff !important;
   border-radius: 14px;
   border: 1px solid #e2e8f0 !important; 
   overflow: hidden;
   display: flex;
   flex-direction: column;
   
   /* ĐỔ BÓNG NỔI KHỐI MẶC ĐỊNH */
   box-shadow: 0 12px 25px -5px rgba(0, 0, 0, 0.08), 
               0 8px 12px -6px rgba(0, 0, 0, 0.04),
               0 0 1px 0 rgba(0, 0, 0, 0.15) !important;
               
   transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), 
               box-shadow 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), 
               border-color 0.3s ease;
}

.unified-white-card .card-body {
   padding: 12px 14px 18px 14px !important;
   flex: 1 1 auto;
   display: flex;
   flex-direction: column; 
}

.unified-white-card .block-card-link { 
   cursor: pointer; 
}


/* =========================================================
   2. VĂN BẢN (TÊN GÓI, DUNG LƯỢNG DATA, GIÁ TIỀN)
   ========================================================= */
/* Tên gói */
.unified-white-card h3.package-code-box { 
   margin: 0 !important; 
   padding: 0 !important;
   line-height: 0 !important;
   text-align: center;
}

.unified-white-card .badge-code-top {
   display: inline-block;
   padding: 6px 26px;
   font-size: 16px; 
   color: #ffffff !important;
   font-weight: 700 !important; 
   background-color: var(--theme-color) !important; 
   border: none !important; 
   border-bottom-left-radius: 12px;
   border-bottom-right-radius: 12px;
   letter-spacing: 0.5px;
   margin-top: -1px !important;
   vertical-align: top;
   line-height: 1.2 !important;
   box-shadow: 0 3px 8px rgba(var(--theme-color-rgb), 0.3);
}

/* Dung lượng Data */
.unified-white-card .theme-text-color { color: #000000; }

.unified-white-card .data-main-val {
   font-size: 24px;
   font-weight: 700 !important;
   line-height: 1.2;
}

/* Chữ màu đen dính sát liền kề */
.unified-white-card .data-slash-text {
   font-size: 14px;
   color: #000000 !important;
   font-weight: 700 !important;
   margin-left: 0 !important;
}

/* Giá tiền gói cước */
.unified-white-card .price-zone { color: #000000 !important; }
.unified-white-card .price-amount { font-size: 20px; }
.unified-white-card .price-cycle { font-size: 14px; }


/* =========================================================
   3. KHU VỰC ICON KHUYẾN MẠI (BONG BÓNG)
   ========================================================= */
.unified-white-card .icon-zone-wrapper {
   min-height: 60px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   margin-bottom: 12px;
}

.unified-white-card .txt-mienphi-label { 
   font-size: 11px; 
   color: #555555; 
   letter-spacing: 0.5px; 
}

.unified-white-card .icon-zone { 
   min-height: 34px; 
}

/* Bong bóng Icon Cao cấp */
.unified-white-card .icon-bubble { 
   width: 32px; 
   height: 32px; 
   border-radius: 50% !important; 
   background-color: #ffffff !important; 
   border: 1px solid #e2e8f0 !important; 
   padding: 3px !important; 
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05) !important;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.unified-white-card .icon-bubble img { 
   width: 100%; 
   height: 100%; 
   object-fit: contain; 
}

.unified-white-card .data-circle-badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0 16px;
   height: 32px;
   border-radius: 30px; 
   background-color: rgba(var(--theme-color-rgb), 0.08); 
   color: var(--theme-color); 
   font-size: 13px;
   font-weight: 800;
   border: 1px solid rgba(var(--theme-color-rgb), 0.2);
   letter-spacing: 0.5px;
}


/* =========================================================
   4. HỆ THỐNG NÚT BẤM (BUTTONS) - TỐI ƯU CẢM ỨNG MOBILE
   ========================================================= */
/* Tối ưu chống chớp đen & phản hồi cảm ứng nhạy như Native App */
.unified-white-card .btn-register-modern,
.unified-white-card .btn-detail-modern {
   touch-action: manipulation !important;
   -webkit-tap-highlight-color: transparent !important;
   -webkit-user-select: none !important;
   user-select: none !important;
}

/* Nút Đăng ký (Màu nguyên khối) */
.unified-white-card .btn-register-modern {
   background-color: var(--theme-color) !important;
   border: none !important;
   font-size: 14px;
   letter-spacing: 0.5px;
   box-shadow: 0 4px 12px rgba(var(--theme-color-rgb), 0.22) !important;
   transition: all 0.2s ease;
}

/* Nút Xem chi tiết (Viền mảnh) */
.unified-white-card .btn-detail-modern {
   background: transparent !important;
   color: #4a5568 !important;
   border: 1px solid #cbd5e1 !important;
   font-size: 13px;
   letter-spacing: 0.5px;
   transition: all 0.2s ease;
   
   /* Ép GPU tải riêng nút để trượt vuốt nhạy không bị lag */
   transform: translateZ(0) !important; 
   position: relative;
   z-index: 10;
}

/* Hiệu ứng Phản hồi chạm trên Điện thoại (Lún nút xuống) */
.unified-white-card .btn-register-modern:active,
.unified-white-card .btn-detail-modern:active {
   transform: scale(0.95) !important;
   filter: brightness(0.9) !important;
   transition: transform 0.1s, filter 0.1s !important;
}


/* =========================================================
   5. HIỆU ỨNG HOVER (CHỈ CHẠY TRÊN MÁY TÍNH CÓ CHUỘT)
   ========================================================= */
@media (hover: hover) {
   
   /* Nâng khối toàn bộ Thẻ Card */
   .unified-white-card:hover {
       transform: translateY(-6px);
       border-color: rgba(var(--theme-color-rgb), 0.35) !important;
       box-shadow: 0 22px 35px -5px rgba(0, 0, 0, 0.12), 
                   0 12px 15px -5px rgba(0, 0, 0, 0.06) !important;
   }

   /* Bong bóng icon phóng to lên */
   .unified-white-card .icon-bubble:hover {
       transform: scale(1.1) translateY(-2px);
       box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08) !important;
   }

   /* Đổi màu Nút Đăng ký sáng lên */
   .unified-white-card .btn-register-modern:hover {
       background-color: var(--theme-color-hover) !important;
       transform: scale(1.02);
       color: #ffffff !important;
   }

   /* Đổi màu Nút Chi tiết nổi bật lên */
   .unified-white-card .btn-detail-modern:hover {
       border-color: var(--theme-color) !important;
       color: var(--theme-color) !important;
       background-color: rgba(var(--theme-color-rgb), 0.03) !important;
   }
}


/* ==========================================================================
   6. TỐI ƯU GIAO DIỆN DI ĐỘNG (MOBILE VUỐT NGANG 43vw)
   ========================================================================== */
@media (max-width: 767px) {
   .scroll-snap-item { 
       flex: 0 0 43vw !important; 
       width: 43vw !important; 
       max-width: 43vw !important; 
   }
   
   .unified-white-card {
       box-shadow: 0 6px 16px rgba(0, 0, 0, 0.07) !important;
   }
   
   .unified-white-card .card-body { 
       padding: 10px 8px 14px 8px !important; 
   }
   
   /* Tên gói trên mobile */
   .unified-white-card .badge-code-top { 
       padding: 4px 16px; 
       font-size: 14px; 
       border: none !important;
   }
   
   /* Kích thước chữ Data trên mobile */
   .unified-white-card .data-main-val { font-size: 22px; }
   .unified-white-card .data-slash-text { font-size: 12px !important; } 
   
   /* Kích thước chữ Giá trên mobile */
   .unified-white-card .price-amount { font-size: 15px; }
   .unified-white-card .price-cycle { font-size: 11px; }
   
   .unified-white-card .icon-zone-wrapper { min-height: 48px; } 
   
   /* Icon Bong Bóng thu nhỏ trên Mobile */
   .unified-white-card .icon-bubble { 
       width: 26px; 
       height: 26px; 
       padding: 2px !important;
   } 

   .unified-white-card .data-circle-badge {
       height: 26px;
       padding: 0 12px;
       font-size: 11px;
   }
   
   /* Thu hẹp Nút Đăng ký trên Mobile */
   .unified-white-card .btn-register-modern { 
       font-size: 12px; 
       padding: 6px 0 !important; 
       width: 82% !important; 
       margin: 0 auto;
   }
}

/* ===================================================
   ICON GÓI HOT FLAG PREMIUM
   =================================================== */
.badge-hot-icon {
   position: absolute;
   top: 0;
   right: 0; 
   
   background: linear-gradient(135deg, #FF9900 0%, #FF4500 45%, var(--theme-color) 100%); 
   
   color: #ffffff !important;
   font-size: 11px;
   font-weight: 800;
   padding: 5px 12px;
   border-radius: 0 14px 0 10px; 
   
   box-shadow: -2px 2px 12px rgba(var(--theme-color-rgb), 0.4), 
               inset 0 0 8px rgba(255, 255, 255, 0.3) !important; 
               
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15); 
   text-transform: uppercase;
   z-index: 20; 
   display: inline-flex;
   align-items: center;
   justify-content: center;
   animation: pulse-hot-premium 1.5s infinite; 
}

/* Hiệu ứng đập nhịp tim */
@keyframes pulse-hot-premium {
   0% { 
       transform: scale(1); 
       box-shadow: -2px 2px 12px rgba(var(--theme-color-rgb), 0.4), inset 0 0 8px rgba(255, 255, 255, 0.3); 
   }
   
   50% { 
       transform: scale(1.08); 
       box-shadow: -2px 2px 20px rgba(var(--theme-color-rgb), 0.6), inset 0 0 12px rgba(255, 255, 255, 0.5); 
   } 
   
   100% { 
       transform: scale(1); 
       box-shadow: -2px 2px 12px rgba(var(--theme-color-rgb), 0.4), inset 0 0 8px rgba(255, 255, 255, 0.3); 
   }
}

@media (max-width: 767px) {
   .badge-hot-icon {
       width: 22px; 
       height: 22px;
       padding: 0 !important;
       border-radius: 0 10px 0 6px;
       
       /* Ẩn chữ và căn giữa icon */
       font-size: 0 !important; 
       display: flex !important;
       align-items: center;
       justify-content: center;
       
       box-shadow: -1px 1px 6px rgba(var(--theme-color-rgb), 0.3) !important;
   }

   /* Ép ngọn lửa vào trung tâm tuyệt đối */
   .badge-hot-icon i {
       font-size: 10px !important; 
       margin: 0 !important;
       display: block;
       line-height: 1;
   }
}