/* ================= MENU =============== */
.box-backgound-top-menu {
    width: 25%;
}

.accordion-menu {
    overflow: hidden;
    font-size: 14px;
}

.accordion-item + .accordion-item {
    border-top: 1px solid #eeeeee;
}

/* Header: text trái – icon phải */
.accordion-header {
    width: 100%;
    border: none;
    background: transparent;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-weight: 500;
    color: #222222;
}

/* Tiêu đề link */
.accordion-title {
    flex: 1;
    text-align: left;
    font-family: Inter;
    font-weight: 700;
    font-size: 14px;
    line-height: 160%;
    color: var(--Text-Neutral-Default, rgba(48, 48, 48, 1));
    text-decoration: none;
}

/* Button dấu cộng */
.accordion-toggle {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    padding: 0;
    margin-left: 12px;
    cursor: pointer;
    line-height: 0;
}

.accordion-toggle img {
    height: 20px;
    display: block;
    transition: transform .2s ease;
}

/* Nếu muốn xoay icon khi mở */
.accordion-item.open .accordion-toggle img {
    transform: rotate(45deg);   /* + thành x, tùy bạn thích xoay hay thôi */
}

/* ========= Submenu cấp 1 (có animation) ========= */
.accordion-submenu {
    list-style: none;
    margin: 0;
    padding: 0 0 0 16px;          /* padding-bottom sẽ thêm khi mở */
    display: flex;
    flex-direction: column;
    gap: 16px;

    max-height: 0;               /* đóng */
    overflow: hidden;
    opacity: 0;
    transition:
        max-height .25s ease,
        opacity .25s ease,
        padding-bottom .25s ease;
}

.accordion-item.open > .accordion-submenu {
    max-height: 500px;           /* đủ lớn cho số mục bên trong */
    opacity: 1;
    padding-bottom: 16px;
}

.accordion-submenu li a {
    display: block;
    font-family: Inter;
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
    color: var(--Text-Neutral-Secondary, rgba(90, 90, 90, 1));
    text-decoration: none;
}

.accordion-submenu li a:hover {
    color: #1a73e8;
}

/* ========= Subgroup (cấp 2) ========= */
.accordion-subgroup {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.accordion-subgroup ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* UL con bên trong */
.accordion-subgroup > .accordion-submenu-child {
    list-style: none;
    margin: 4px 0 0;
    padding-left: 16px;

    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        max-height .25s ease,
        opacity .25s ease;
}

/* Khi mở subgroup */
.accordion-subgroup.sub-open > .accordion-submenu-child {
    max-height: 400px;           /* chỉnh tùy lượng menu con */
    opacity: 1;
}

/* Mobile: menu full width, nằm dưới */
@media (max-width: 767px) {
    .block-backgound-top {
        flex-direction: column;
    }

    .box-backgound-top-menu {
        width: 100%;
        margin-top: 16px;
    }

    .accordion-header {
        padding: 10px 12px;
    }

    .accordion-submenu {
        padding-left: 24px;
    }
}


/*----------------------------------------*/
.block-backgound-top {
    gap: 23px;
    display: flex;
}


.backgound-top {
    padding: 24px 0;
}

.box-backgound-top {
    gap: 23px;
    display: flex;
    margin-bottom: 23px;
    width: 75%;
}

.box-backgound-left-top {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.box-img-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.img-text {
    height: 185px;
}

.text-box-img-content {
    font-family: Noto Serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 160%;
    letter-spacing: 0px;
    color: var(--Text-Neutral-Default, rgba(48, 48, 48, 1));
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-khoi-thong-tin {
    width: 100%;
    height: 1px;
    background-color: rgba(48, 48, 48, 0.15);
}

.box-backgound-center-top {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.box-backgound-center-top img {
	width: 100%;
}

.box-content-background-center-top {
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
}

.title-box-content-background-center-top {
    font-family: Noto Serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 160%;
    letter-spacing: 0px;
    color: var(--Text-Neutral-Default, rgba(48, 48, 48, 1));
}

.text-box-content-background-center-top {
    font-family: Inter;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    letter-spacing: 0px;
    color: var(--Text-Neutral-Secondary, rgba(90, 90, 90, 1));
}

.thong-tin {
    width: 100%;
    margin-bottom: 64px;
}

.box-thong-tin {
    display: flex;
    gap: 28px;
    width: 100%;
}

.in-box-thong-tin {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-right: 28px;
    border-right: 1px solid rgba(0, 0, 0, .12);
    width: 75%;
}

.box-thong-tin-left {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.in-box-thong-tin-left {
    display: flex;
    gap: 24px;
    justify-content: center;
    align-items: center;
}

.in-box-thong-tin-left img {
    width: 300px;
    height: auto;
}

.content-in-box-thong-tin-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.title-content-in-box-thong-tin-left {
    font-family: Noto Serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 160%;
    letter-spacing: 0px;
    color: var(--Text-Neutral-Default, rgba(48, 48, 48, 1));
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-content-in-box-thong-tin-left {
    font-family: Inter;
    font-weight: 400;
    font-size: 14px;
    line-height: 160%;
    letter-spacing: 0px;
    color: var(--Text-Neutral-Secondary, rgba(90, 90, 90, 1));
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.box-thong-tin-right {
    width: 25%;
    border-radius: 4px;
    border-width: 1px;
    padding: 24px;
    background: rgba(250, 246, 240, 1);
    background: rgba(250, 246, 240, 1);
    height: 100%;
}

.in-box-thong-tin-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.line-ttsk {
    width: 2px;
    height: 20px;
    background: #A90024;
    border: 0;
    transform: none;
    flex: 0 0 auto;
}

.title-noi-dung {
    display: flex;
    gap: 8px;
}

.text-noi-dung {
    font-family: Noto Serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0px;
    text-align: center;
    text-transform: uppercase;
    color: var(--Text-Neutral-Default, rgba(48, 48, 48, 1));
}

.content-in-box-thong-tin-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.top-content-in-box-thong-tin-right {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ext-top-content-in-box-thong-tin-right {
    font-family: Noto Serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 160%;
    letter-spacing: 0px;
    color: var(--Text-Neutral-Default, rgba(48, 48, 48, 1));
}

.tin-bai-lien-quan {
    width: 100%;
    height: 60px;
    padding-top: 16px;
    border-top-width: 1px;
    border-top: 1px solid #1111110F
}

.in-tin-bai-lien-quan {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
}

.in-tin-bai-lien-quan img {
    padding-top: 8px;
}

.noi-dung-tin-bai-lien-quan {
    font-family: Noto Serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 160%;
    letter-spacing: 0px;
    font-variant-numeric: lining-nums proportional-nums;
    color: var(--Text-Neutral-Default, #303030);
}

.text-top-content-in-box-thong-tin-right {
    font-family: Noto Serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 160%;
    letter-spacing: 0px;
    color: var(--Text-Neutral-Default, rgba(48, 48, 48, 1));
}

.page {
    display: flex;
    align-items: end;
}

#pager {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
    margin-top: 16px;
}

#pager .paginationjs {
    display: flex;
    justify-content: center;
}

#pager .paginationjs-pages {
    display: flex;
    align-items: center;
}

#pager .paginationjs-pages ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 8px;
    align-items: center;
}

#pager .paginationjs-pages li>a {
    display: inline-flex;
    min-width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid #E4E2DE;
    border-radius: 6px;
    padding: 0 12px;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
    cursor: pointer;
}

#pager .paginationjs-pages li>a:hover {
    border-color: #154FA3;
    color: #154FA3;
    background: rgba(21, 79, 163, 0.06);
}

#pager .paginationjs-pages li.active>a {
    background: #154FA3;
    color: #fff;
    border-color: #154FA3;
}

#pager .paginationjs-prev a,
#pager .paginationjs-next a,
#pager .paginationjs-first a,
#pager .paginationjs-last a {
    min-width: 40px;
    height: 40px;
}

#pager .paginationjs-prev.disabled a,
#pager .paginationjs-next.disabled a,
#pager .paginationjs-first.disabled a,
#pager .paginationjs-last.disabled a {
    color: #94A3B8;
    opacity: .45;
    pointer-events: none;
}

@media screen and (max-width: 575.98px) { 
    .box-backgound-top {
        width: 100%;
        flex-direction: column;
    }

    .box-img-content {
        flex-direction: unset;
    }

    .img-text {
        width: 135px;
        height: auto;
    }

    .text-box-img-content {
        -webkit-line-clamp: 3;
    }

    .box-thong-tin-right {
        display: none;
    }

    .in-box-thong-tin {
        width: 100%;
        border-right: unset;
        padding-right: 0px;
    }

    .in-box-thong-tin-left {
        flex-direction: column;
    }

    .in-box-thong-tin-left img {
        width: 100%;
    }

    .box-backgound-top {
        order: 2;
    }

    .box-backgound-top-menu {
        order: 1;
    }
}