/* ==========================================================================
   Trang thong ke Shipping & Delivery (view: themes/.../stats-post.blade.php)
   ========================================================================== */

/* --- Chống tràn ngang & flex child blowout trên Mobile/iOS --- */
.stats-page {
   overflow-x: hidden;
   width: 100%;
   max-width: 100vw;
}

.stats-page .blog-detail-content {
   min-width: 0;
   max-width: 100%;
   width: 100%;
   box-sizing: border-box;
}

.stats-page .article-container-article,
.stats-page #article-content,
.stats-page .content-wraper {
   min-width: 0;
   max-width: 100%;
   width: 100%;
   box-sizing: border-box;
}

/* --- Nội dung bài --- */
.stats-page .post-heading {
   margin-bottom: 16px;
}

.stats-page #article-content h2 {
   font-size: 22px;
   margin: 28px 0 12px;
}

.stats-page #article-content h3 {
   font-size: 18px;
   margin: 20px 0 10px;
}

.stats-page #article-content p {
   margin: 0 0 12px;
   line-height: 1.6;
}

.stats-page #article-content ul {
   margin: 0 0 16px 20px;
   list-style: disc;
}

.stats-page #article-content ul li {
   margin-bottom: 6px;
}

/* --- Bảng số liệu --- */
.stats-table-wrap {
   width: 100%;
   max-width: 100%;
   overflow-x: auto;
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
   overscroll-behavior-x: contain;
   overscroll-behavior-y: auto;
   touch-action: pan-x pan-y;
   margin: 0 0 20px;
   box-sizing: border-box;
   position: relative;
   isolation: isolate;
}

.stats-table {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
   min-width: 640px;
   border-top: 1px solid #e0e0e0;
   border-left: 1px solid #e0e0e0;
   -webkit-user-select: auto;
   user-select: auto;
}

.stats-table th,
.stats-table td {
   border-right: 1px solid #e0e0e0;
   border-bottom: 1px solid #e0e0e0;
   padding: 10px 12px;
   text-align: center;
   vertical-align: middle;
   background-color: #fff;
}

.stats-table thead th {
   background: #f5f5f5;
   font-weight: 700;
   -webkit-user-select: none;
   user-select: none;
}

.stats-table td.col-label {
   text-align: left;
   font-weight: 600;
}

/* --- Bảng dài: giới hạn chiều cao, cuộn dọc trong bảng thay vì kéo trang dài --- */
.stats-table-wrap.is-scroll {
   max-height: 520px;
   overflow-y: auto;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   overscroll-behavior: contain;
   touch-action: pan-x pan-y;
}

/* Header dính khi cuộn.
   Sử dụng border-collapse: separate và border-spacing: 0 để sửa triệt để lỗi hở viền (khe nứt trong suốt) trên Chrome/Safari.
   translateZ(0) kích hoạt GPU compositing trên iOS Safari, chống giật/lệch sticky header khi vuốt cảm ứng. */
.stats-table-wrap.is-scroll thead th {
   position: sticky;
   z-index: 2;
   background: #f5f5f5;
   border-top: 1px solid #e0e0e0;
   border-bottom: 1px solid #e0e0e0;
   -webkit-transform: translateZ(0);
   transform: translateZ(0);
   will-change: transform;
}


.stats-table-wrap.is-scroll thead tr:first-child th {
   top: 0;
}

.stats-table-wrap.is-scroll thead tr:nth-child(2) th {
   top: 56px;
}

/* fallback; JS set lại đúng chiều cao hàng 1 */

/* --- Ô tìm kiếm cho từng bảng --- */
.stats-search-wrap {
   margin: 0 0 16px;
}

.stats-search-inner {
   position: relative;
   display: inline-block;
   width: 100%;
   max-width: 360px;
}

.stats-search-icon {
   position: absolute;
   left: 12px;
   top: 50%;
   transform: translateY(-50%);
   color: #888;
   pointer-events: none;
   transition: color 0.2s ease;
}

.stats-search {
   width: 100%;
   padding: 10px 36px 10px 36px;
   border: 1px solid #dcdcdc;
   border-radius: 8px;
   font-size: 14px;
   outline: none;
   background-color: #fafafa;
   transition: all 0.25s ease-in-out;
   color: #333;
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.stats-search::placeholder {
   color: #999;
}

.stats-search:focus {
   border-color: var(--secondary, #ff6600);
   background-color: #fff;
   box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.15);
}

.stats-search:focus + .stats-search-icon {
   color: var(--secondary, #ff6600);
}

.stats-search-clear {
   position: absolute;
   right: 10px;
   top: 50%;
   transform: translateY(-50%);
   background: none;
   border: none;
   padding: 4px;
   color: #aaa;
   cursor: pointer;
   display: none;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   transition: all 0.2s ease;
}

.stats-search-clear:hover {
   background-color: #eee;
   color: #555;
}

.stats-search-empty td {
   text-align: center;
   color: #888;
   padding: 24px;
   font-style: italic;
   font-size: 14px;
   background-color: #fafafa;
}

/* --- Nhúng thanh tìm kiếm vào thẻ th của bảng --- */
.table-th-search-wrap {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   padding: 4px 0;
}

.stats-table th .stats-search-inner {
   width: 100%;
   max-width: 160px;
}

.stats-table th .stats-search {
   padding: 6px 28px 6px 28px;
   font-size: 13px;
   font-weight: normal;
   background-color: #fff;
   border-color: #ccc;
   border-radius: 6px;
}

.stats-table th .stats-search-icon {
   left: 8px;
   width: 14px;
   height: 14px;
}

.stats-table th .stats-search-clear {
   right: 6px;
}

/* --- Thanh cuộn gọn gàng cho bảng trên WebKit/iOS --- */
.stats-table-wrap::-webkit-scrollbar {
   height: 6px;
   width: 6px;
}

.stats-table-wrap::-webkit-scrollbar-thumb {
   background-color: rgba(0, 0, 0, 0.2);
   border-radius: 4px;
}

.stats-table-wrap::-webkit-scrollbar-track {
   background: transparent;
}

/* --- Tối ưu hiển thị & chống kéo trang / auto-zoom trên Mobile & iOS Safari --- */
@media (max-width: 768px) {
   /* Giới hạn chiều cao bảng hợp lý theo viewport mobile, tránh choán kín màn hình gây kẹt cuộn trang */
   .stats-table-wrap.is-scroll {
      max-height: min(460px, 65vh);
   }

   /* Chống iOS Safari tự động phóng to (zoom in) toàn màn hình khi focus vào ô input (< 16px) */
   .stats-search,
   .stats-table th .stats-search {
      font-size: 16px;
   }

   /* Đảm bảo ô tìm kiếm trong header th co dãn vừa vặn trên màn hình nhỏ */
   .stats-table th .stats-search-inner {
      max-width: 140px;
   }
}