/* ==========================================================================
   KHÍ NÉN Á CHÂU - CHUẨN HÓA CSS PHÂN VÙNG ID (ZONE-BASED SCOPED CSS)
   - Khắc phục triệt để 1.444 quy tắc !important xung đột trên theme cũ
   - Quy tụ 100% về phông Inter (Hỗ trợ tiếng Việt & tabular-nums số đo)
   - Kiến trúc phân vùng theo ID độc lập (Specificity: 1-0-0)
   - Hệ thống Bảng thông số, Breakpoints Headings, Checkpoints kỹ thuật
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ĐỒNG BỘ PHÔNG CHỮ INTER THEO PHÂN VÙNG ID (GLOBAL ZONE TYPOGRAPHY)
   -------------------------------------------------------------------------- */
#knac-product-zone,
#knac-collection-zone,
#knac-article-zone,
#knac-specs-zone,
#knac-sticky-zone,
#knac-brand-hub,
.knac-scope {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
}

#knac-product-zone *:not(.fa):not([class*="fa-"]),
#knac-collection-zone *:not(.fa):not([class*="fa-"]),
#knac-article-zone *:not(.fa):not([class*="fa-"]),
#knac-specs-zone *:not(.fa):not([class*="fa-"]),
#knac-sticky-zone *:not(.fa):not([class*="fa-"]),
.knac-scope *:not(.fa):not([class*="fa-"]) {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Kích hoạt Tabular Nums cho toàn bộ số đo kỹ thuật, mã phụ tùng, giá bán */
#knac-product-zone .knac-badge-sku,
#knac-product-zone .knac-badge-partnumber,
#knac-product-zone .special-price,
#knac-specs-zone td,
.knac-specs-table td,
.knac-tabular-nums {
    font-variant-numeric: tabular-nums !important;
}

/* --------------------------------------------------------------------------
   2. HỆ THỐNG HEADING THEO 4 BREAKPOINTS (FLUID BREAKPOINT TYPOGRAPHY)
   -------------------------------------------------------------------------- */
/* Desktop (>= 992px) */
#knac-product-zone h1,
#knac-collection-zone h1,
#knac-article-zone h1 {
    font-size: 24px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin-bottom: 12px !important;
    text-transform: none !important;
}

#knac-product-zone h2,
#knac-collection-zone h2,
#knac-article-zone h2,
.knac-specs-title {
    font-size: 19px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    color: #004680 !important;
    border-left: 4px solid #dd0115;
    padding-left: 10px;
    margin-bottom: 14px !important;
    text-transform: none !important;
}

#knac-product-zone h3,
#knac-collection-zone h3,
#knac-article-zone h3 {
    font-size: 16px !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    margin-bottom: 10px !important;
}

#knac-product-zone h4,
#knac-collection-zone h4,
#knac-article-zone h4 {
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-bottom: 8px !important;
}

/* Tablet (768px - 991px) */
@media (max-width: 991px) {
    #knac-product-zone h1, #knac-collection-zone h1, #knac-article-zone h1 { font-size: 21px !important; }
    #knac-product-zone h2, #knac-collection-zone h2, #knac-article-zone h2, .knac-specs-title { font-size: 18px !important; }
    #knac-product-zone h3, #knac-collection-zone h3, #knac-article-zone h3 { font-size: 15.5px !important; }
    #knac-product-zone h4, #knac-collection-zone h4, #knac-article-zone h4 { font-size: 14px !important; }
}

/* Mobile (480px - 767px) */
@media (max-width: 767px) {
    #knac-product-zone h1, #knac-collection-zone h1, #knac-article-zone h1 { font-size: 19px !important; line-height: 1.3 !important; }
    #knac-product-zone h2, #knac-collection-zone h2, #knac-article-zone h2, .knac-specs-title { font-size: 16.5px !important; }
    #knac-product-zone h3, #knac-collection-zone h3, #knac-article-zone h3 { font-size: 14.5px !important; }
    #knac-product-zone h4, #knac-collection-zone h4, #knac-article-zone h4 { font-size: 13.5px !important; }
}

/* Small Mobile (< 480px) */
@media (max-width: 479px) {
    #knac-product-zone h1, #knac-collection-zone h1, #knac-article-zone h1 { font-size: 17.5px !important; }
    #knac-product-zone h2, #knac-collection-zone h2, #knac-article-zone h2, .knac-specs-title { font-size: 15.5px !important; }
    #knac-product-zone h3, #knac-collection-zone h3, #knac-article-zone h3 { font-size: 14px !important; }
}

/* --------------------------------------------------------------------------
   3. HỆ THỐNG ĐỊNH DẠNG BẢNG THÔNG SỐ (SPECS & CONTENT TABLES)
   -------------------------------------------------------------------------- */
#knac-specs-zone,
.knac-specs-container {
    margin: 25px 0;
    width: 100%;
}

.knac-table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    margin-bottom: 20px;
}

/* Bảng thông số kỹ thuật 2 cột chuẩn công nghiệp */
.knac-specs-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
    font-size: 14px !important;
}

.knac-specs-table td {
    padding: 10px 14px !important;
    border-bottom: 1px solid #edf2f7 !important;
    vertical-align: middle !important;
    line-height: 1.5 !important;
}

/* Cột Nhãn thông số (Label Column) */
.knac-specs-table td.label,
.knac-specs-table td:first-child {
    width: 38% !important;
    background-color: #f8fafc !important;
    font-weight: 600 !important;
    color: #334155 !important;
    border-right: 1px solid #e2e8f0 !important;
}

/* Cột Giá trị thông số (Value Column) */
.knac-specs-table td:last-child {
    color: #0f172a !important;
}

/* Kẻ sọc Zebra striping */
.knac-specs-table tr:nth-child(even) td:last-child {
    background-color: #fcfcfd;
}

.knac-specs-table tr:hover td {
    background-color: #f1f5f9 !important;
}

/* Bảng dữ liệu nhiều cột trong Bài viết / Mô tả (Content Table) */
#knac-article-zone table,
.knac-content-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 16px 0 !important;
    font-size: 13.5px !important;
}

#knac-article-zone table th,
.knac-content-table th {
    background-color: #004680 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 9px 12px !important;
    border: 1px solid #003663 !important;
    text-align: left !important;
}

#knac-article-zone table td,
.knac-content-table td {
    padding: 9px 12px !important;
    border: 1px solid #e2e8f0 !important;
    vertical-align: middle !important;
}

#knac-article-zone table tr:nth-child(even) td,
.knac-content-table tr:nth-child(even) td {
    background-color: #f8fafc !important;
}

/* --------------------------------------------------------------------------
   4. HỆ THỐNG CHECKPOINTS & KHỐI CAM KẾT B2B (ALIGNED BULLET POINTS)
   -------------------------------------------------------------------------- */
.knac-checkpoints,
.knac-commitment-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px 16px;
    margin: 18px 0;
}

.knac-checkpoint-item,
.knac-commitment-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
    font-size: 13.5px !important;
    color: #334155 !important;
    line-height: 1.45 !important;
}

.knac-checkpoint-item:last-child,
.knac-commitment-item:last-child {
    margin-bottom: 0 !important;
}

.knac-checkpoint-item i,
.knac-commitment-item i {
    color: #16a34a !important; /* Xanh lá kỹ thuật */
    font-size: 15px !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
}

.knac-checkpoint-item strong,
.knac-commitment-item strong {
    color: #0f172a !important;
}

/* --------------------------------------------------------------------------
   5. HUY HIỆU ĐỊNH DANH (BADGES), MÃ SKU, PART NUMBER & CẢNH BÁO
   -------------------------------------------------------------------------- */
.knac-badge-sku {
    background: #e0f2fe !important;
    color: #0369a1 !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    border: 1px solid #bae6fd !important;
    font-size: 14.5px !important;
    letter-spacing: 0.3px !important;
    display: inline-block !important;
}

.knac-badge-partnumber {
    font-weight: 700 !important;
    color: #004680 !important;
    background: #f1f5f9 !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    border: 1px solid #cbd5e1 !important;
    display: inline-block !important;
}

.knac-copy-btn {
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    border-radius: 4px !important;
    font-size: 11.5px !important;
    padding: 2px 8px !important;
    cursor: pointer !important;
    color: #475569 !important;
    margin-left: 8px !important;
    transition: all 0.2s ease !important;
}

.knac-copy-btn:hover {
    background: #e2e8f0 !important;
    color: #004680 !important;
}

.knac-stock-badge {
    color: #16a34a !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.knac-stock-badge.is-order {
    color: #b45309 !important;
    background-color: #fffbeb !important;
    border: 1px solid #fde68a !important;
    padding: 3px 10px !important;
    border-radius: 4px !important;
    font-size: 13.5px !important;
}

.knac-stock-badge.is-out {
    color: #dc2626 !important;
    font-weight: 600 !important;
}

.knac-btn-preorder {
    background: #d97706 !important;
    border-color: #d97706 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.knac-btn-preorder:hover {
    background: #b45309 !important;
    color: #ffffff !important;
}

.knac-badge-origin {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
}

.knac-badge-origin.accom {
    background: #f0fdf4 !important;
    color: #15803d !important;
    border: 1px solid #bbf7d0 !important;
}

.knac-badge-origin.oem {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe !important;
}

.knac-oil-alert {
    background: #fffbeb !important;
    border-left: 4px solid #f59e0b !important;
    padding: 12px 16px !important;
    border-radius: 4px !important;
    margin: 18px 0 !important;
    color: #78350f !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
}

.knac-oil-alert strong {
    color: #b45309 !important;
}

.knac-btn-download-pdf {
    display: inline-flex !important;
    align-items: center !important;
    background: #eef2ff !important;
    color: #3730a3 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 6px 14px !important;
    border-radius: 4px !important;
    border: 1px solid #c7d2fe !important;
    text-decoration: none !important;
}

.knac-btn-download-pdf:hover {
    background: #e0e7ff !important;
    color: #312e81 !important;
}

/* --------------------------------------------------------------------------
   6. THANH ĐIỀU HƯỚNG CỐ ĐỊNH CHÂN TRANG DI ĐỘNG (#knac-sticky-zone)
   -------------------------------------------------------------------------- */
#knac-sticky-zone,
.knac-sticky-mobile-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 56px !important;
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    display: flex !important;
    z-index: 999999 !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.08) !important;
}

#knac-sticky-zone .knac-bottom-bar-item,
.knac-sticky-mobile-bar .knac-bottom-bar-item {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    color: #475569 !important;
}

#knac-sticky-zone .knac-bottom-bar-item i,
.knac-sticky-mobile-bar .knac-bottom-bar-item i {
    font-size: 17px !important;
    margin-bottom: 2px !important;
}

#knac-sticky-zone .knac-bottom-bar-item.call,
.knac-sticky-mobile-bar .knac-bottom-bar-item.call {
    color: #dd0115 !important;
}

#knac-sticky-zone .knac-bottom-bar-item.zalo,
.knac-sticky-mobile-bar .knac-bottom-bar-item.zalo {
    color: #0068ff !important;
}

/* --------------------------------------------------------------------------
   7. BỘ LỌC DANH MỤC (#knac-collection-zone) & SIDEBAR FILTER
   -------------------------------------------------------------------------- */
#knac-collection-zone .sidebar-filter {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.knac-filter-group-title {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #004680 !important;
    margin-bottom: 10px !important;
    padding-bottom: 6px !important;
    border-bottom: 2px solid #e2e8f0 !important;
}

.knac-sidebar-zalo-cta {
    background: linear-gradient(135deg, #004680 0%, #002b50 100%) !important;
    color: #ffffff !important;
    padding: 16px !important;
    border-radius: 8px !important;
    margin-top: 20px !important;
    text-align: center !important;
}

.knac-sidebar-zalo-cta h4 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #fbd947 !important;
    margin: 0 0 8px 0 !important;
}

.knac-sidebar-zalo-cta p {
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #e2e8f0 !important;
    margin-bottom: 12px !important;
}

.knac-btn-zalo-quick {
    display: inline-block !important;
    background: #dd0115 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    text-decoration: none !important;
}