/* ===== BASE TABLE ===== */
.knq-compare table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
}

.knq-compare th,
.knq-compare td {
    border: 1px solid #e0e0e0;
    padding: 14px 12px;
    text-align: center;
    font-size: 14px;
}

/* ===== HEADER ROW (TOP) ===== */
.knq-compare thead th {
    background: linear-gradient(135deg, #1e3c72, #2a5298);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== FEATURE COLUMN (LEFT) ===== */
.knq-compare tbody td:first-child,
.knq-compare thead th:first-child {
    background: #2f3640;
    color: #fff;
	padding: 10px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

/* ===== ROW COLOR PLACEHOLDER (JS will override) ===== */
.knq-compare tbody tr td:not(:first-child) {
    transition: background 0.3s ease;
}

/* ===== HOVER EFFECT ===== */
.knq-compare tbody tr:hover td:not(:first-child) {
    filter: brightness(0.95);
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
    .knq-compare th,
    .knq-compare td {
        font-size: 13px;
        padding: 10px 8px;
    }
}
/* =========================
   MOBILE TABLE FIX
========================= */
@media (max-width: 768px) {

    .knq-table-mobile-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 14px;
        padding-bottom: 10px;
    }

    .knq-compare table {
        min-width: 720px; /* QUAN TRỌNG */
    }

    /* Sticky Feature column */
    .knq-compare th:first-child,
    .knq-compare td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background: #2f3640;
        color: #fff;
    }

    /* Sticky header */
    .knq-compare thead th {
        position: sticky;
        top: 0;
        z-index: 3;
    }

    /* Bo góc không bị cắt */
    .knq-compare table {
        border-radius: 14px;
        overflow: hidden;
    }
}
.knq-compare,
.knq-table-mobile-wrap {
    overflow: visible;
}
/* =========================
   FORCE HORIZONTAL SCROLL MOBILE
========================= */
@media (max-width: 768px) {

    /* Wrapper của bảng */
    .knq-table-mobile-wrap {
        overflow-x: auto !important;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        position: relative;
    }

    /* Override các container cha hay bị hidden */
    .knq-compare,
    .knq-compare * {
        overflow: visible !important;
    }

    /* Table bắt buộc rộng hơn viewport */
    .knq-compare table {
        min-width: 900px;
    }
}
/* Hiện scrollbar rõ ràng */
.knq-table-mobile-wrap::-webkit-scrollbar {
    height: 8px;
}

.knq-table-mobile-wrap::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
}

.knq-table-mobile-wrap::-webkit-scrollbar-track {
    background: transparent;
}
.knq-swipe-hint {
    position: sticky;
    top: 0;
    z-index: 9;
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 13px;
    padding: 8px 12px;
    display: flex;
    justify-content: center;
    gap: 8px;
    align-items: center;
    border-radius: 0 0 10px 10px;
}

.knq-swipe-hint .arrows {
    font-size: 18px;
}
@media (max-width: 768px) {

    /* Sticky header */
    .knq-compare thead th {
        position: sticky;
        top: 0;
        z-index: 5;
    }

    /* Sticky feature column */
    .knq-compare th:first-child,
    .knq-compare td:first-child {
        position: sticky;
        left: 0;
        z-index: 6;
        background: #2f3640;
        color: #fff;
        min-width: 140px;
    }
}