/* ==========================================================================
   KHUNG TÌM KIẾM & GỢI Ý DROP-DOWN
   ========================================================================== */
.search-dropdown-panel {
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   
   background-color: #ffffff;
   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
   border-top: 1px solid #e9ecef;
   
   opacity: 0;
   visibility: hidden;
   z-index: 1050;
   
   /* 1. Chỉ animate đúng những thứ cần thiết */
   transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease, visibility 0.3s;
   
   /* 2. Ép Android dùng Card đồ họa (GPU) để xử lý mượt mà */
   will-change: transform, opacity; 
   
   /* 3. Chống nháy/chớp viền trắng trên màn hình Samsung */
   backface-visibility: hidden; 
   -webkit-backface-visibility: hidden;
   transform: translateZ(0); /* Kích hoạt chế độ 3D ảo để tăng tốc GPU */
}

/* Kích hoạt hiện Search */
.search-dropdown-panel.active { 
   transform: translateY(0) !important;
   opacity: 1 !important; 
   visibility: visible !important; 
}

/* MÀN ĐEN PHỦ KHI MỞ TÌM KIẾM (BACKDROP) */
.search-backdrop {
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.6);
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s ease;
   cursor: pointer; 
   z-index: 1040; 
}

/* Kích hoạt màn đen */
.search-backdrop.active {
   opacity: 1;
   visibility: visible;
}

/* --- TRÊN MÁY TÍNH --- */
@media (min-width: 992px) {
   .search-dropdown-panel {
       padding: 30px 0;
       transform: translateY(15px);
   }
}

/* CỐ ĐỊNH KÍCH THƯỚC NÚT SEARCH (CHỐNG GIẬT LAYOUT KHI ĐỔI ICON) */
.search-trigger-btn {
   width: 40px !important; 
   height: 40px !important; 
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;

   /* Xóa độ trễ 300ms khi chạm ngón tay trên điện thoại*/
   touch-action: manipulation;
}

.search-trigger-btn i {
   transition: transform 0.3s ease, color 0.3s ease;
}

/* TĂNG KÍCH THƯỚC VÀ ÉP MÀU TRẮNG CHO NÚT DẤU X SEARCH */
.search-trigger-btn i.fa-xmark {
   color: #ffffff !important;      
   font-size: 1.5rem !important;  /* dấu X (mặc định là ~1.1rem) */
   font-weight: 700 !important; 
}

/* --- TRÊN ĐIỆN THOẠI --- */
@media (max-width: 991px) {
   .search-dropdown-panel {
       padding: 20px 0 30px 0;
       transform: translateY(15px); /* Hiệu ứng trượt nhẹ lên */
       max-height: calc(100vh - 65px); /* Trừ đi độ cao của Header */
       overflow-y: auto; 
       -webkit-overflow-scrolling: touch;
   }
}

/* --- Form Search Input --- */
#SearchForm {
   background-color: #f4f6f9; 
   border-radius: 50px; 
   padding: 4px; 
   border: 1px solid #e0e0e0;
}
#SearchInput {
   background-color: transparent !important; 
   border: none !important;
   font-size: 16px !important; 
   padding-left: 15px;
   box-shadow: none !important;
}
#SearchInput::placeholder { color: #888; }
#SearchForm .btn {
   color: var(--theme-color) !important; 
   border-radius: 50px !important; 
   padding: 0 20px !important;
}

/* --- CSS Lưới Gợi Ý Tìm Kiếm ĐỔ BÓNG NỔI 3D (SEARCH SUGGEST PILL) --- */
.search-suggest-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
   gap: 10px; 
}

.search-suggest-pill {
   display: flex;
   flex-direction: row; 
   align-items: baseline; 
   justify-content: center; 
   padding: 8px 12px; 
   
   background-color: #ffffff;
   border: 1px solid #eef0f2;
   border-radius: 50px;
   text-decoration: none;
   color: #444;
   
   /* Đổ bóng nhẹ  */
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
   
   /* Tạo hiệu ứng mượt mà khi di chuyển/đổi màu */
   transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);

   /* Xóa độ trễ 300ms khi chạm ngón tay trên điện thoại*/
   touch-action: manipulation;
}

/* --- HIỆU ỨNG KHI RÊ CHUỘT (HOVER) VÀ KHI ĐƯỢC CHỌN (ACTIVE) --- */
.search-suggest-pill:hover, 
.search-suggest-pill.active {
   border-color: var(--theme-color);
   background-color: #ffffff;
   color: var(--theme-color);
   
   /* Đẩy nhích lên 2.5px nổi lên */
   transform: translateY(-2.5px);
   
   /* Tăng độ tỏa bóng theo tông màu thương hiệu */
   box-shadow: 0 6px 16px rgba(var(--theme-color-rgb), 0.18);
}

.search-suggest-pill .pill-val { 
   font-weight: 700; 
   font-size: 14px; 
}

.search-suggest-pill .pill-unit { 
   font-size: 13px; 
   color: #888; 
   margin-left: 3px; 
}

.search-suggest-pill:hover .pill-unit, 
.search-suggest-pill.active .pill-unit { 
   color: var(--theme-color); 
}

/* =========================================================
   GIAO DIỆN LỌC DATA TÌM KIẾM
========================================================= */
/* Dùng CSS Grid để ép các cột bằng nhau tuyệt đối */
.data-filter-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr); /* Mặc định Desktop: 5 ô 1 hàng */
   gap: 15px; /* Khoảng cách giữa các ô */
}

/* Tự động thu nhỏ số cột trên màn hình nhỏ gọn */
@media (max-width: 992px) {
   .data-filter-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
   .data-filter-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}
@media (max-width: 480px) {
   .data-filter-grid { grid-template-columns: repeat(2, 1fr); }
}

.data-box {
   border: 1px solid #e5e5e5;
   border-radius: 8px;
   padding: 12px 5px;
   text-align: center;
   text-decoration: none;
   background: #fff;
   transition: all 0.2s ease;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   color: #333;
   height: 100%;
}

.data-box:hover {
   border-color: #ee002d;
   color: #ee002d;
}

.data-box .box-val {
   font-weight: 800;
   font-size: 1.15rem;
   line-height: 1.2;
}

.data-box .box-unit {
   font-size: 0.85rem;
   color: #888;
}

/* Trạng thái được chọn (Active) */
.data-box.active {
   border-color: #ee002d;
   color: #ee002d;
}
.data-box.active .box-unit {
   color: #ee002d;
}