/* ==========================================================
   PRODUCT_CARD 
   ========================================================== */

/* ==========================================================
   1. KHUNG THẺ CARD & CÁC THÀNH PHẦN VĂN BẢN/HÌNH ẢNH
   ========================================================== */
.group-card {
   background: #ffffff;
   transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), 
               box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
               border-color 0.4s ease !important;
   will-change: transform, box-shadow;
}

.group-card .card-package-title {
   transition: transform 0.3s ease !important;
}

.card-ribbon {
   z-index: 10;
   font-size: 8px;
   letter-spacing: 0.5px;
}

.custom-pink-header {
   margin-top: -1.5rem !important;   
   margin-left: -1.5rem !important; 
   margin-right: -1.5rem !important;
   margin-bottom: 3px !important;
   padding: 22px 24px 2px 24px !important;
   background-color: var(--bg-pink-lighter); 
   border-top-left-radius: calc(var(--bs-card-inner-border-radius, 0.375rem) - 1px);
   border-top-right-radius: calc(var(--bs-card-inner-border-radius, 0.375rem) - 1px);
}

.card-package-title {
   letter-spacing: 0.5px;
   font-weight: 800;
}

.produc_name_edit {
   font-weight: 800 !important;
   border-bottom: rgba(255, 255, 255, 0.8) 1px solid;
   padding-bottom: 5px; 
   font-size: 18px !important; 
}

.card-data-box {
   background-color: #fcfcfc;
   border-color: #dee2e6 !important;
}

.box-main-title { font-weight: 700; }
.box-sub-title { font-size: 12px; }

.icon-wrapper-zone {
   min-height: 42px;
   flex-wrap: wrap; 
}

.icon-bubble {
   width: 30px;
   height: 30px;
   transition: transform 0.2s ease, border-color 0.2s ease !important;
}

.icon-img-fit {
   width: 22px;
   height: 22px;
   object-fit: contain;
}

.txt_mienphi {
   flex-basis: 100%;
   text-align: center;
   font-size: 12px !important;
   padding-top: 6px !important;
   color: var(--theme-color) !important;
}

.icon-empty-text { font-size: 12px; font-style: italic; }
.feature-list-lines { border-color: #f1f1f1 !important; }
.sms-guide-text { font-size: 14px; }
.txt_data_co_ban { font-size: 13px !important; }
.price_edit { font-size: 16px !important; }
.price_cycle { font-size: 12px; text-transform: uppercase; }
.day_cycle { font-size: 12px; text-transform: uppercase; }
.data_edit { font-size: 22px !important; } 
.card_edit { padding: 1.5rem !important; }
.txt_soan_tin_edit { font-size: 13px !important; margin-bottom: 6px !important; }


/* ==========================================================
   2. QUẢN LÝ NÚT BẤM (BUTTONS)
   ========================================================== */

/* --- A. DÙNG CHUNG CHO TẤT CẢ CÁC NÚT --- */
.btn_chitiet_edit, 
.btn_edit,
.btn-sms-action,
.btn-detail-action {
   width: 100% !important;
   font-size: 13px !important; 
   text-align: center;
   margin-top: 2px;
   padding: 6px 0 !important; 
   letter-spacing: 0.5px;
   
   /* Tối ưu cảm ứng (Touch Tweaks - Nhạy như App) */
   touch-action: manipulation !important;
   -webkit-tap-highlight-color: transparent !important;
   -webkit-user-select: none !important;
   -moz-user-select: none !important;
   -ms-user-select: none !important;
   user-select: none !important;
   cursor: pointer !important;
}

/* --- B. RIÊNG NÚT ĐĂNG KÝ / SMS --- */
.group-card .btn_edit,
.group-card .btn-sms-action {
   background-color: var(--theme-color-alt) !important;
   border-color: var(--theme-color-alt) !important;
   transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}
/* Hiệu ứng khi ngón tay chạm vào Nút Đăng ký (Mobile) */
.group-card .btn_edit:active,
.group-card .btn-sms-action:active {
   transform: scale(0.95) !important; 
   filter: brightness(0.85) !important; 
   transition: all 0.1s ease !important; 
}

/* --- C. RIÊNG NÚT XEM CHI TIẾT --- */
.group-card .btn-detail-action {
   transition: all 0.3s ease !important;
   transform: translateZ(0) !important; /* Ép phần cứng GPU tải nhanh */
   position: relative;
   z-index: 10;
}
.btn-detail-action,
.btn-detail-action:visited,
.btn-detail-action:focus {
   color: var(--theme-color) !important;
   background-color: transparent !important; 
   border: 1px solid var(--theme-color) !important;
   box-shadow: none !important; 
   outline: none !important;
}

/* Hiệu ứng khi ngón tay chạm vào Nút Xem Chi tiết (Mobile) */
.group-card .btn-detail-action:active {
   transform: scale(0.95) translateZ(0) !important;
   background-color: rgba(230, 29, 67, 0.1) !important;
   color: var(--theme-color) !important;
   border-color: var(--theme-color) !important;
   opacity: 1 !important;
   
   /* Ép tốc độ phản hồi cực nhanh, lún ngay lập tức trước khi chuyển trang */
   transition: all 0.05s ease !important; 
}

/* ==========================================================
   3. HIỆU ỨNG HOVER (CHỈ KÍCH HOẠT TRÊN MÁY TÍNH CÓ CHUỘT)
   ========================================================== */
@media (hover: hover) {
   .group-card:hover {
       transform: translateY(-8px);
       box-shadow: 0 16px 36px rgba(0, 0, 0, 0.15) !important;
       border-color: rgba(230, 29, 67, 0.7) !important; 
   }

   .group-card:hover .card-package-title {
       transform: scale(1.03); 
   }

   .icon-bubble:hover {
       transform: scale(1.15);
       border-color: var(--theme-color-alt) !important;
   }

   /* Hover Nút Đăng Ký (PC) */
   .group-card:hover .btn_edit,
   .btn-sms-action:hover {
       background-color: var(--theme-color-hover) !important;
       border-color: var(--theme-color-hover) !important;
       transform: scale(1.02);
       filter: brightness(1.12);
   }

   /* Hover Nút Xem Chi Tiết (PC) */
   .group-card:hover .btn-detail-action,
   .btn-detail-action:hover {
       background-color: rgba(230, 29, 67, 0.1) !important;
       color: var(--theme-color) !important;
       border-color: var(--theme-color) !important;
   }
}


/* ======================================================
   4. TỐI ƯU GIAO DIỆN DI ĐỘNG (MOBILE SLIDER & GRID)
   ====================================================== */

/* Mobile Slider Vuốt Ngang (82vw) */
@media (max-width: 767px) {   
   .scroll-snap-item { 
       flex: 0 0 82vw !important; 
       width: 82vw !important; 
       max-width: 82vw !important; 
   }    
}   

/* Giao diện thu gọn trên Tablet & Điện thoại */
@media (max-width: 991px) {
   .icon-img-fit {
       width: 22px !important; 
       height: 22px !important;
   }

   .card_ribbon_edit { 
       font-size: 11px !important; 
       padding: 4px 12px !important; 
   }   
       
   .produc_name_edit {
       font-weight: 800 !important;
       border-bottom: rgba(255, 255, 255, 0.8) 1px solid;
       padding-bottom: 8px;
       padding-top: 5px;
       font-size: 18px !important; 
   }

   .txt_mienphi {
       font-size: 14px !important;
   }
   
   /* Thu phóng Nút bấm trên Mobile */
   .btn_chitiet_edit, .btn_edit, .btn-sms-action, .btn-detail-action {
       font-size: 13px !important; 
       margin-top: 2px;
       padding: 8px 0 !important; 
   }

   .txt_data_co_ban,
   .txt_soan_tin_edit { font-size: 14px !important; } 
   .data_edit { font-size: 22px !important; } 
   .price_edit { font-size: 16px !important; }
   .tong_chu_ky_cuoc_edit { font-size: 13px !important; } 
}

/* Giao diện Card trang Danh mục (List), Tìm kiếm (Search) */
@media (max-width: 767.98px) {
   #product-grid .col-12 {
       padding-left: 15px !important;
       padding-right: 15px !important;
   }
   
   #product-grid .group-card {
       max-width: 92% !important; /* Thu hẹp card còn 92% màn hình */
       margin-left: auto !important;
       margin-right: auto !important; /* Căn giữa card */
   }
}

/* ===============================
   ICON GÓI HOT PREMIUM 
   =============================== */
.badge-hot-icon {
   position: absolute;
   top: 0;
   right: 0; 
   
   background: linear-gradient(135deg, #FF9900 0%, #FF4500 45%, var(--theme-color, #EE0033) 100%); 
   
   color: #ffffff !important;
   font-size: 11px;
   font-weight: 800;
   padding: 5px 12px;
   
   border-radius: 0 16px 0 10px; 
   
   box-shadow: -2px 2px 12px rgba(255, 69, 0, 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 nhịp đập ngọn lửa */
@keyframes pulse-hot-premium {
   0% { transform: scale(1); box-shadow: -2px 2px 12px rgba(255, 69, 0, 0.4), inset 0 0 8px rgba(255, 255, 255, 0.3); }
   50% { transform: scale(1.08); box-shadow: -2px 2px 20px rgba(255, 69, 0, 0.6), inset 0 0 12px rgba(255, 255, 255, 0.5); } 
   100% { transform: scale(1); box-shadow: -2px 2px 12px rgba(255, 69, 0, 0.4), inset 0 0 8px rgba(255, 255, 255, 0.3); }
}

/* Tối ưu kích thước trên màn hình Điện thoại */
@media (max-width: 991px) {
   .badge-hot-icon {
       font-size: 10px;
       padding: 4px 10px;
       border-radius: 0 16px 0 8px;
   }
}

/* ==========================================================================
   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;
}