/**
 * TSV - HOME SEO LAYOUT
 * File: modules/home-seo/assets/css/tsv-home-seo.css
 *
 * Chỉ quản lý:
 * - Bố cục khối SEO trang chủ.
 * - Đường phân cách phía trên.
 * - FAQ đóng / mở.
 *
 * Typography, ảnh, Xem thêm và Lightbox được quản lý tại:
 * inc/seo-content/assets/css/tsv-seo-content.css
 */


/* =====================================================
   01. BỐ CỤC KHỐI SEO TRANG CHỦ
===================================================== */

.tsv-seo-box-home {
    width: 100% !important;
    max-width: 1180px !important;

    margin: 42px auto 48px !important;
    padding: 0 15px !important;
}


/* Khối nội dung bên trong */
.tsv-seo-box-home .tsv-seo-box-inner {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}


/* Ẩn nhãn cũ nếu còn tồn tại */
.tsv-seo-box-home .tsv-seo-label {
    display: none !important;
}


/* Đường phân cách nhẹ phía trên nội dung */
.tsv-seo-box-home::before {
    content: "" !important;

    display: block !important;

    width: 88% !important;
    max-width: 980px !important;
    height: 1px !important;

    margin: 0 auto 30px !important;

    background: #edf0f5 !important;
    border: 0 !important;
}


/* =====================================================
   02. FAQ ĐÓNG / MỞ
===================================================== */

.tsv-seo-box-home .tsv-seo-faq {
    width: 100% !important;
    max-width: 920px !important;

    margin: 16px auto 0 !important;

    overflow: hidden !important;

    background: #ffffff !important;
    border: 1px solid #f0f2f5 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}


/* Từng mục FAQ */
.tsv-seo-box-home .tsv-seo-faq details {
    margin: 0 !important;
    padding: 0 !important;

    background: #ffffff !important;
    border: 0 !important;
    border-bottom: 1px solid #e1e6ee !important;
}

.tsv-seo-box-home .tsv-seo-faq details:last-child {
    border-bottom: 0 !important;
}


/* =====================================================
   03. CÂU HỎI FAQ
===================================================== */

.tsv-seo-box-home .tsv-seo-faq summary {
    position: relative !important;

    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    min-height: 52px !important;

    margin: 0 !important;
    padding: 15px 48px 15px 18px !important;

    color: #082b63 !important;
    background: #ffffff !important;
    border: 0 !important;

    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    text-align: left !important;
    text-transform: none !important;

    list-style: none !important;
    cursor: pointer !important;

    transition:
        color 0.2s ease,
        background-color 0.2s ease !important;
}


/* Ẩn marker mặc định */
.tsv-seo-box-home .tsv-seo-faq summary::-webkit-details-marker {
    display: none !important;
}

.tsv-seo-box-home .tsv-seo-faq summary::marker {
    content: "" !important;
    display: none !important;
}


/* Dấu cộng / trừ bên trái */
.tsv-seo-box-home .tsv-seo-faq summary::before {
    content: "+" !important;

    display: inline-flex !important;
    flex: 0 0 18px !important;
    align-items: center !important;
    justify-content: center !important;

    width: 18px !important;
    height: 18px !important;

    margin: 0 10px 0 0 !important;

    color: #082b63 !important;
    background: transparent !important;
    border: 0 !important;

    font-size: 19px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

.tsv-seo-box-home .tsv-seo-faq details[open] summary::before {
    content: "−" !important;
}


/* Mũi tên bên phải */
.tsv-seo-box-home .tsv-seo-faq summary::after {
    content: "" !important;

    position: absolute !important;
    top: 50% !important;
    right: 18px !important;

    width: 8px !important;
    height: 8px !important;

    border: 0 !important;
    border-right: 2px solid #082b63 !important;
    border-bottom: 2px solid #082b63 !important;

    transform: translateY(-60%) rotate(45deg) !important;
    transition: transform 0.2s ease !important;
}

.tsv-seo-box-home .tsv-seo-faq details[open] summary::after {
    transform: translateY(-35%) rotate(-135deg) !important;
}


/* Hover câu hỏi */
.tsv-seo-box-home .tsv-seo-faq summary:hover,
.tsv-seo-box-home .tsv-seo-faq summary:focus-visible {
    color: #082b63 !important;
    background: #f7fbff !important;
}


/* =====================================================
   04. CÂU TRẢ LỜI FAQ
===================================================== */

.tsv-seo-box-home .tsv-faq-answer {
    margin: 0 !important;
    padding: 0 18px 16px 46px !important;

    color: #333333 !important;
    background: #fbfdff !important;
    border: 0 !important;
}

.tsv-seo-box-home .tsv-faq-answer > :first-child {
    margin-top: 0 !important;
}

.tsv-seo-box-home .tsv-faq-answer > :last-child {
    margin-bottom: 0 !important;
}

.tsv-seo-box-home .tsv-faq-answer p {
    margin: 0 0 10px !important;

    color: #333333 !important;
    font-size: 15.5px !important;
    font-weight: 400 !important;
    line-height: 1.72 !important;
}


/* =====================================================
   05. MOBILE
===================================================== */

@media only screen and (max-width: 768px) {

    .tsv-seo-box-home {
        margin: 32px auto 34px !important;
        padding: 0 14px !important;
    }

    .tsv-seo-box-home::before {
        width: 100% !important;
        max-width: none !important;

        margin-bottom: 22px !important;
    }

    .tsv-seo-box-home .tsv-seo-faq {
        max-width: 100% !important;

        margin-top: 14px !important;
        border-radius: 8px !important;
    }

    .tsv-seo-box-home .tsv-seo-faq summary {
        min-height: 50px !important;
        padding: 14px 42px 14px 14px !important;

        font-size: 15px !important;
        line-height: 1.45 !important;
    }

    .tsv-seo-box-home .tsv-seo-faq summary::before {
        flex-basis: 17px !important;

        width: 17px !important;
        height: 17px !important;

        margin-right: 8px !important;

        font-size: 18px !important;
    }

    .tsv-seo-box-home .tsv-seo-faq summary::after {
        right: 15px !important;

        width: 7px !important;
        height: 7px !important;
    }

    .tsv-seo-box-home .tsv-faq-answer {
        padding: 0 14px 15px 39px !important;
    }

    .tsv-seo-box-home .tsv-faq-answer p {
        font-size: 14.5px !important;
        line-height: 1.68 !important;
    }
}


/* =====================================================
   06. GIẢM CHUYỂN ĐỘNG
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .tsv-seo-box-home .tsv-seo-faq summary,
    .tsv-seo-box-home .tsv-seo-faq summary::after {
        transition: none !important;
    }
}