/*
 * Nạp Bootstrap 5 cho frontend trong cascade layer "bootstrap".
 *
 * CSS không nằm trong layer (base.css, site.css, layout.css, <style> trong trang)
 * luôn thắng Bootstrap, bất kể độ đặc hiệu của selector. Riêng các utility có
 * !important của Bootstrap (d-flex, mt-3, text-center...) vẫn có hiệu lực.
 *
 * Phần @layer bên dưới gỡ style của Bootstrap trên các class trùng tên với
 * component riêng của site. Phải giữ trong cùng layer "bootstrap" để so theo độ đặc hiệu.
 */
@import url("../vendor/bootstrap/bootstrap.min.css") layer(bootstrap);

@layer bootstrap {
    /* ---- Class trùng tên giữa theme cũ và Bootstrap: giữ nghĩa của theme cũ ---- */
    .nav,
    .card,
    .badge,
    .badge:empty,
    .tooltip,
    .tooltip.show,
    .small,
    .accordion-item,
    .accordion-item:first-of-type,
    .accordion-item:not(:first-of-type),
    .accordion-item:last-of-type,
    .pagination,
    .page-item,
    .page-link,
    .page-link:hover,
    .page-link:focus,
    .page-item:not(:first-child) .page-link,
    .page-item:first-child .page-link,
    .page-item:last-child .page-link,
    .page-item.active .page-link,
    .page-item.disabled .page-link {
        all: revert;
    }

    /* Tiêu đề của site kế thừa line-height từ khối cha. */
    h1, h2, h3, h4, h5, h6 {
        line-height: inherit;
    }

    svg {
        vertical-align: baseline;
    }

    /* Gutter của site nằm trên .grid-col, phần tử khác trong .row không nhận gutter. */
    .row > :not(.grid-col) {
        padding-right: revert;
        padding-left: revert;
    }

    .row > :not(.grid-col):not([class^="col-"]):not([class*=" col-"]) {
        flex-shrink: revert;
        width: revert;
        max-width: revert;
        margin-top: revert;
    }

    /* Độ đặc hiệu 0 để .col-md-6 của Bootstrap vẫn thắng. */
    :where(.grid-col) {
        width: 100%;
    }
}