/*
 * CSS của riêng trang chủ (resources/views/pages/home.blade.php). Chỉnh lại theo
 * cỡ màn hình thì viết ở home-responsive.css.
 *
 * File này nạp sau styles.css: luật cùng độ ưu tiên ở đây đè luật ở styles.css.
 *
 * Slider là thành phần dùng lại được ở trang khác, nên kiểu dáng của nó nằm ở
 * styles.css.
 */

/* Khối tin tức: lời dẫn bên trái, thẻ bài bên phải, trên nền xám. */
.home-news {
    padding: 56px 0;
    background: var(--site-soft);
}

/* Màn hình rộng: lời dẫn đứng yên bên trái trong lúc cuộn qua các thẻ bài. */
@media (min-width: 992px) {
    .home-news__intro {
        position: sticky;
        top: calc(var(--site-nav-height) + 24px);
        align-self: flex-start;
    }
}

.home-news__title {
    margin: 0 0 8px;
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}

.home-news__lead {
    margin: 0 0 4px;
    color: var(--site-ink);
    font-size: 1.375rem;
    font-weight: 700;
}

.home-news__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    --bs-btn-border-radius: 10px;
}