/* Khối "Bạn cần trợ giúp?" trên trang chi tiết sản phẩm (frontend/views/product/_support.php) */
.ks-support {
    --ks-card: #dcdcdc;
    --ks-card-hover: #cfcfcf;
    --ks-card-active: #3a3a3a;
    --ks-ink: #111;
    --ks-muted: #555;
    --ks-pill: #f0f0f0;
    --ks-shadow: 2px 3px 6px rgba(0, 0, 0, .22);
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid #ddd;
    color: var(--ks-ink);
}
/* Ghi đè ".product-detail .product-single__spec h2" (căn giữa, 32px) của site để giữ căn trái như thiết kế */
.product-detail .ks-support .ks-support-heading {
    display: block; width: min(480px, 100%); text-align: left;
    font-size: 24px; line-height: 1.3; font-weight: 500; margin: 0 0 32px; padding: 0 0 12px;
    border-bottom: 1px solid #333;
}
.ks-support [hidden] { display: none !important; }

/* Ô chủ đề */
.ks-topic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.ks-topic-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 140px; padding: 16px 18px; border: 0; border-radius: 10px;
    background: var(--ks-card); box-shadow: var(--ks-shadow); color: var(--ks-ink);
    text-align: center; cursor: pointer; transition: background .15s, transform .15s;
}
.ks-topic-card:hover { background: var(--ks-card-hover); transform: translateY(-2px); }
.ks-topic-title { font-size: 17px; font-weight: 700; line-height: 1.35; }
.ks-topic-sub { font-size: 16px; font-style: italic; line-height: 1.35; color: #222; }

/* Chi tiết chủ đề */
.ks-back { border: 0; background: none; padding: 0; margin-bottom: 16px; font-size: 14px; font-weight: 600; color: var(--ks-muted); cursor: pointer; }
.ks-back:hover { color: var(--ks-ink); }
.ks-detail-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start; }
.ks-topic-nav { display: flex; flex-direction: column; gap: 12px; }
.ks-topic-card--nav { min-height: 0; padding: 14px 12px; }
.ks-topic-card--nav .ks-topic-title { font-size: 15px; }
.ks-topic-card--nav .ks-topic-sub { font-size: 14px; }
.ks-topic-card--nav:hover { transform: none; }
.ks-support .ks-topic-card--nav.is-active { background: var(--ks-card-active); color: #fff; }
.ks-support .ks-topic-card--nav.is-active .ks-topic-sub { color: #ddd; }

/* Câu hỏi */
.ks-panel { display: flex; flex-direction: column; gap: 16px; }
.ks-faq-q {
    width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 12px 18px 12px 20px; border: 0; border-radius: 22px;
    background: var(--ks-pill); box-shadow: var(--ks-shadow);
    font-size: 16px; line-height: 1.45; text-align: left; color: var(--ks-ink); cursor: pointer;
}
.ks-faq-q:hover { background: #e7e7e7; }
.ks-chevron { flex-shrink: 0; transition: transform .2s; }
.ks-faq-q[aria-expanded="true"] .ks-chevron { transform: rotate(90deg); }
.ks-faq-a { padding: 14px 20px 6px; font-size: 15px; line-height: 1.6; color: #222; }
.ks-faq-a p { margin: 0 0 12px; }
.ks-faq-a p:last-child { margin-bottom: 0; }
.ks-faq-a a { color: #1a5fb4; text-decoration: underline; }
.ks-faq-a img, .ks-faq-a iframe { max-width: 100%; }
.ks-faq-a iframe[src*="youtube"] { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }

@media (max-width: 991px) {
    .ks-topic-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .ks-detail-layout { grid-template-columns: 1fr; gap: 20px; }
    /* Danh sách chủ đề thành hàng cuộn ngang */
    .ks-topic-nav { flex-direction: row; overflow-x: auto; padding: 4px 4px 10px; margin: 0 -4px; }
    .ks-topic-card--nav { flex: 0 0 auto; min-width: 150px; }
}
@media (max-width: 575px) {
    .product-detail .ks-support .ks-support-heading { font-size: 20px; }
    .ks-topic-card { min-height: 110px; padding: 12px; }
    .ks-topic-title { font-size: 14px; }
    .ks-topic-sub { font-size: 13px; }
    .ks-faq-q { font-size: 14px; padding: 10px 14px; border-radius: 18px; }
    .ks-faq-a { font-size: 14px; padding: 12px 14px 4px; }
}