/* Styles scoped to cau-hoi-thuong-gap.html. */

/* FAQ Specific Styling */
        .faq-section {
            background-color: var(--white);
            padding: 60px 0;
        }

        .faq-container {
            max-width: 800px;
            margin: 0 auto;
        }

        .faq-item {
            background-color: var(--white);
            border-radius: 12px;
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-sm);
            margin-bottom: 15px;
            overflow: hidden;
            transition: var(--transition-normal);
        }

        .faq-item-header {
            padding: 20px 25px;
            font-family: var(--font-title);
            font-weight: 600;
            font-size: 15px;
            color: var(--text-dark);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: var(--transition-fast);
            user-select: none;
        }

        .faq-item-header:hover {
            background-color: var(--primary-light);
            color: var(--primary-color);
        }

        .faq-item-header i {
            font-size: 14px;
            color: var(--text-muted);
            transition: var(--transition-normal);
        }

        .faq-item-body {
            max-height: 0;
            overflow: hidden;
            transition: var(--transition-normal);
            padding: 0 25px;
            background-color: var(--bg-gray);
            font-size: 13px;
            color: var(--text-muted);
            line-height: 1.8;
        }

        /* Active State FAQ Accordion */
        .faq-item.active {
            border-color: var(--primary-color);
        }

        .faq-item.active .faq-item-header {
            background-color: var(--primary-light);
            color: var(--primary-color);
        }

        .faq-item.active .faq-item-header i {
            transform: rotate(180deg);
            color: var(--primary-color);
        }

        .faq-item.active .faq-item-body {
            max-height: 250px;
            padding: 20px 25px;
            border-top: 1px solid var(--border-color);
        }

        /* Support blocks */
        .support-block-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-top: 50px;
        }

        .support-card {
            background-color: var(--white);
            border-radius: 16px;
            padding: 25px 15px;
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-sm);
            text-align: center;
        }

        .support-card i {
            font-size: 24px;
            color: var(--primary-color);
            margin-bottom: 12px;
        }

        .support-card h4 {
            font-size: 14px;
            margin-bottom: 6px;
        }

        .support-card p {
            font-size: 11px;
            color: var(--text-muted);
        }

        @media (max-width: 1024px) {
            .support-block-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .support-block-grid {
                grid-template-columns: 1fr;
            }
        }