/* ============================================================================
   TRANG /blog/ — THIẾT KẾ 2026 ("Insights Hub")

   Dựng theo bản export Figma Synctrack Blogs. Khác các trang app: markup KHÔNG
   lấy từ export (bài viết là dữ liệu thật của WordPress, export chỉ có bài giả)
   mà viết tay ở archive-blog.php + inc/blog-helpers.php. File này vì thế là CSS
   thường, không phải lớp phủ đè inline style — gần như không cần !important.

   File RIÊNG, không gộp vào styles/ent-blog.css: file đó còn lo trang chuyên
   mục (taxonomy-blogs.php) và trang bài viết (single-blog.php), thay nó bằng
   bộ mới là hỏng luôn hai chỗ kia. Phần luật của DANH SÁCH trong file cũ
   (.enttt, .entttnb, .he_box, .news_box_3…) từ nay không còn markup nào khớp —
   để đó chứ không xoá, phòng khi cần lật lại bản cũ.

   Class tiền tố .bi- (blog insights).

   MỤC LỤC
     1. Khung chung
     2. Hero: chữ, ô tìm kiếm, chip lọc
     3. Tiêu đề dải
     4. Thẻ bài viết — phần dùng chung
     5. Bốn kiểu thẻ: feature / grid / row / mini
     6. Bố cục dải: lưới và kiểu chia đôi
     7. Mobile
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. KHUNG CHUNG
   --------------------------------------------------------------------------- */
.bi-page {
    font-family: var(--sr-font);
    color: var(--sr-neutral-700);
    overflow-x: clip;
}

.bi-page *,
.bi-page *::before,
.bi-page *::after {
    box-sizing: border-box;
}

.bi-section {
    width: 100%;
    max-width: var(--sr-container);
    margin: 0 auto;
    padding: clamp(48px, 6vw, 80px) var(--sr-gutter) 0;
}

.bi-section:last-of-type {
    padding-bottom: clamp(56px, 7vw, 104px);
}

.bi-page a {
    text-decoration: none;
}

/* ---------------------------------------------------------------------------
   2. HERO
   --------------------------------------------------------------------------- */
/* KHÔNG đặt overflow: hidden ở đây — nó cắt luôn danh sách gợi ý xổ xuống dưới
   ô tìm kiếm. Việc cắt hoạ tiết do .bi-hero__deco tự lo. */
.bi-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: clamp(48px, 6vw, 100px) max(var(--sr-gutter), calc((100vw - var(--sr-container)) / 2));
    background: rgb(244, 241, 255);
    text-align: center;
}

/* --- bốn dải gradient trang trí ---
   Toạ độ, phép xoay và độ mờ 25% chép nguyên từ export. Chúng vẽ trên khung
   930x930; ở màn hẹp phần thừa bị overflow của .bi-hero cắt, đúng như thiết kế.

   translateX(-720px) từ mốc 50%: bản export vẽ trên khổ 1440 và phép matrix
   dưới đây đặt hoạ tiết đúng giữa khổ đó (x 255→1185, tâm 720). Nếu để left:0
   thì tâm hoạ tiết ghim chết ở 720px tính từ mép trái màn hình — chỉ trùng tâm
   trang đúng ở khổ 1440, còn 1920 thì lệch trái 240px, 1024 lệch phải 208px.
   Neo vào giữa hero rồi lùi lại nửa khổ 1440 thì mọi bề ngang đều cân. */
/* Lớp cắt: phủ đúng bằng hero, phần hoạ tiết thò ra ngoài bị cắt ở đây thay vì
   ở .bi-hero (xem chú thích trên). */
.bi-hero__deco {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0.25;
    pointer-events: none;
}

.bi-hero__deco-inner {
    position: absolute;
    left: 50%;
    top: 0;
    width: 930px;
    height: 930px;
    transform: translateX(-720px) matrix(-1, 0, 0, 1, 1185, -144);
    transform-origin: 0 0;
}

.bi-deco {
    position: absolute;
    display: block;
}

.bi-deco--1 {
    left: 413.344px;
    top: 0;
    width: 110.222px;
    height: 930px;
    background: linear-gradient(180deg, rgb(212, 190, 255) 0%, rgba(212, 190, 255, 0) 100%);
}

.bi-deco--2 {
    left: 0;
    top: 0;
    width: 110.222px;
    height: 930px;
    transform: matrix(0, 1, -1, 0, 930, 413.33);
    transform-origin: 0 0;
    background: linear-gradient(-90deg, rgba(212, 190, 255, 0) 0%, rgb(212, 190, 255) 100%);
}

.bi-deco--3 {
    left: 206.668px;
    top: 316.886px;
    width: 512.074px;
    height: 296.222px;
    background: linear-gradient(180deg, rgb(212, 190, 255) 0%, rgba(212, 190, 255, 0) 100%);
}

.bi-deco--4 {
    left: 0;
    top: 0;
    width: 512.074px;
    height: 296.222px;
    transform: matrix(0, 1, -1, 0, 610.82, 208.958);
    transform-origin: 0 0;
    background: linear-gradient(90deg, rgb(212, 190, 255) 0%, rgba(212, 190, 255, 0) 100%);
}

/* Chữ và ô tìm kiếm nằm trên lớp trang trí. */
.bi-hero > *:not(.bi-hero__deco) {
    position: relative;
    z-index: 1;
}

.bi-hero__eyebrow {
    font-family: var(--sr-font-menu);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sr-purple-700);
}

.bi-hero__title {
    margin: 0;
    max-width: 900px;
    font-family: 'Phudu', var(--sr-font);
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--sr-neutral-900);
}

.bi-hero__sub {
    margin: 0;
    max-width: 720px;
    font-size: 18px;
    line-height: 1.6;
    color: var(--sr-neutral-700);
}

/* --- ô tìm kiếm --- */
.bi-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 720px;
    margin-top: 16px;
    padding: 8px 8px 8px 24px;
    /* Bo 12 theo thiết kế, KHÔNG phải viên thuốc. */
    border-radius: 12px;
    background: var(--sr-neutral-0);
    box-shadow: 0 8px 40px 0 rgba(0, 0, 0, 0.08);
}

.bi-search__icon {
    flex-shrink: 0;
    color: var(--sr-neutral-500);
}

/* Nhãn chỉ dành cho trình đọc màn hình. Theme không khai .screen-reader-text
   nên phải tự ẩn, không thì chữ "Search articles" hiện ngay cạnh ô nhập. */
.bi-search .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.bi-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    border: 0;
    background: none;
    font-family: var(--sr-font);
    font-size: 15px;
    color: var(--sr-navy-900);
}

.bi-search__input::placeholder {
    color: var(--sr-neutral-500);
}

.bi-search__input:focus {
    outline: none;
}

.bi-search:focus-within {
    box-shadow: 0 8px 40px 0 rgba(0, 0, 0, 0.08), 0 0 0 2px var(--sr-purple-300);
}

/* Kích thước, màu và bo góc do styles/ent-buttons.css lo — nút trong ô tìm kiếm
   dùng đúng bo 4 như mọi nút khác của site. */
.bi-search__btn {
    flex-shrink: 0;
}

/* --- danh sách gợi ý khi gõ tìm kiếm --- */
.bi-search {
    position: relative;
}

/* Ô tìm kiếm phải nằm trên hàng chip: hai khối là anh em cùng z-index 1, mà
   chip đứng sau trong DOM nên mặc định nó vẽ đè lên danh sách gợi ý.
   Phải viết .bi-hero > .bi-search: luật đặt z-index:1 ở trên là
   `.bi-hero > *:not(.bi-hero__deco)` — hai class, nặng hơn .bi-search một mình. */
.bi-hero > .bi-search {
    z-index: 5;
}

.bi-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 20;
    display: none;
    max-height: 380px;
    overflow-y: auto;
    padding: 8px;
    border-radius: 12px;
    background: var(--sr-neutral-0);
    box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.22);
    text-align: left;
}

.bi-suggest.is-open {
    display: block;
}

.bi-suggest__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 8px;
    transition: background-color 0.12s ease;
}

.bi-suggest__item:hover,
.bi-suggest__item:focus-visible {
    background: rgb(248, 244, 255);
}

.bi-suggest__thumb {
    flex-shrink: 0;
    width: 56px;
    height: 42px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--sr-neutral-50);
}

.bi-suggest__text {
    min-width: 0;
}

.bi-suggest__title {
    display: block;
    font-family: var(--sr-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--sr-navy-900);
}

.bi-suggest__cat {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--sr-neutral-500);
}

.bi-suggest__empty {
    padding: 14px 10px;
    font-size: 14px;
    color: var(--sr-neutral-500);
}

/* --- chip lọc chuyên mục --- */
.bi-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 8px;
}

.bi-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--sr-purple-100);
    font-family: var(--sr-font-menu);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sr-purple-700);
    white-space: nowrap;
}

.bi-chip--nav {
    background: rgba(86, 41, 114, 0.08);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.bi-chip--nav:hover {
    background: var(--sr-purple-100);
    color: var(--sr-purple-700);
}

.bi-chip--active {
    background: var(--sr-purple-700);
    color: var(--sr-neutral-0);
}

/* ---------------------------------------------------------------------------
   3. TIÊU ĐỀ DẢI — vạch màu bên trái + link "View all"
   --------------------------------------------------------------------------- */
.bi-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: clamp(24px, 3vw, 40px);
}

.bi-head__title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    font-family: 'Phudu', var(--sr-font);
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--sr-purple-700);
}

.bi-head__title::before {
    content: '';
    width: 4px;
    align-self: stretch;
    border-radius: 2px;
    background: var(--sr-sky-200);
}

.bi-head__all {
    flex-shrink: 0;
    font-family: var(--sr-font-menu);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sr-purple-700);
    white-space: nowrap;
}

.bi-head__all:hover {
    color: var(--sr-purple-500);
}

/* ---------------------------------------------------------------------------
   4. THẺ BÀI VIẾT — phần dùng chung
   --------------------------------------------------------------------------- */
.bi-card {
    display: flex;
    border-radius: 16px;
    background: var(--sr-neutral-0);
    box-shadow: inset 0 0 0 1px rgb(219, 221, 225);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
    .bi-card:hover {
        transform: translateY(-6px);
        box-shadow: inset 0 0 0 1px rgb(219, 221, 225),
                    0 40px 40px -24px rgba(0, 0, 0, 0.12);
    }

    .bi-card:hover .bi-card__title {
        color: var(--sr-purple-500);
    }
}

/* Ảnh bìa bài viết là banner có chữ: cover sẽ cắt mất phần tiêu đề trong ảnh,
   còn fill thì bóp méo. Dùng contain — ảnh luôn hiện trọn, đúng tỉ lệ gốc, phần
   thừa của khung là nền xám nhạt.
   Khung 16/9 vì ảnh trong thư viện chỉ có hai tỉ lệ: 1672x941 (1.78 = 16/9,
   khít khung) và 1640x800 (2.05, viền mỏng trên dưới). */
.bi-card__media {
    flex-shrink: 0;
    overflow: hidden;
    /* Canh ảnh vào giữa khung. Ở thẻ lớn, khung ảnh cao theo cột chữ (453px)
       trong khi ảnh chỉ cao 332px — không canh thì ảnh dính mép trên và bỏ lại
       một mảng nền 121px ở dưới, nhìn như lỗi. */
    display: flex;
    align-items: center;
    justify-content: center;
}

.bi-card__media img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
}

.bi-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 20px;
    min-width: 0;
}

.bi-card__title {
    margin: 0;
    font-family: 'Phudu', var(--sr-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--sr-navy-900);
    transition: color 0.2s ease;
}

.bi-card__excerpt {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--sr-neutral-700);
}

.bi-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: auto;
    padding-top: 4px;
    font-size: 13px;
    color: var(--sr-neutral-500);
}

/* --- thẻ đầu dải "Featured News" ---
   Bản thiết kế: nhãn chuyên mục là huy hiệu xanh ngọc đè lên góc dưới trái của
   ảnh, còn chỗ nhãn trong phần chữ thay bằng dòng "Must Read". */
.bi-card__media-inner {
    position: relative;
    display: block;
    width: 100%;
}

.bi-card__media-chip {
    position: absolute;
    left: 20px;
    bottom: 20px;
    padding: 4px 12px;
    border-radius: 6px;
    background: rgb(151, 249, 238);
    font-family: var(--sr-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sr-navy-900);
    white-space: nowrap;
}

.bi-card__kicker {
    font-family: var(--sr-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sr-purple-700);
}

/* --- dòng tác giả, chỉ có ở thẻ lớn --- */
/* Dòng tác giả bám ngay dưới mô tả. Chỗ dôi ra của thẻ do nút "Read article"
   hứng (margin-top: auto ở dưới) — để dòng tác giả hứng thì nó rơi xuống tận
   đáy, cách mô tả cả trăm pixel. */
.bi-card__author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 6px;
}

.bi-card__avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--sr-neutral-100);
}

.bi-card__author-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.bi-card__author-name {
    font-family: var(--sr-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--sr-navy-900);
}

.bi-card__author-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    line-height: 1.3;
    color: var(--sr-neutral-500);
}

/* ---------------------------------------------------------------------------
   5. BỐN KIỂU THẺ
   --------------------------------------------------------------------------- */

/* --- feature: hai cột, ảnh trái --- */
.bi-card--feature {
    flex-direction: row;
    align-items: stretch;
}

/* Cột ảnh kéo cao bằng cột chữ. Trước đây phải chặn lại vì object-fit là cover
   (khung cao + hẹp thì ảnh ngang bị cắt còn một vệt); nay là contain nên kéo
   cao chỉ làm khung nền rộng ra, ảnh vẫn nguyên tỉ lệ. Đổi lại thì hết mảng
   trắng trên dưới ảnh — khung ảnh 332px nằm giữa thẻ cao 453px. */
.bi-card--feature .bi-card__media {
    flex: 1 1 55%;
    align-self: stretch;
}

/* Thẻ lớn trong dải chia đôi: xếp DỌC, ảnh trên chữ dưới.
   Để hai cột như dải Featured News thì cột ảnh chỉ rộng bằng nửa thẻ (~300px),
   cao theo 16/9 là ~170px, trong khi cột chữ cao ~560px — thừa ra một mảng
   trắng gần 400px. */
.bi-split .bi-card--feature {
    flex-direction: column;
}

.bi-split .bi-card--feature .bi-card__media {
    flex: 0 0 auto;
    align-self: stretch;
}

.bi-split .bi-card--feature .bi-card__body {
    flex: 1 1 auto;
}

.bi-card--feature .bi-card__body {
    flex: 1 1 45%;
    gap: 14px;
    padding: clamp(24px, 3vw, 40px);
    justify-content: center;
}

.bi-card--feature .bi-card__title {
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--sr-purple-700);
}

.bi-card--feature .bi-card__excerpt {
    font-size: 16px;
}

.bi-card--feature .bi-card__cta {
    margin-top: 35px;
}

/* --- grid: ảnh trên, chữ dưới --- */
.bi-card--grid {
    flex-direction: column;
}

.bi-card--grid .bi-card__media {
    aspect-ratio: 16 / 9;
}

.bi-card--grid .bi-card__body {
    flex: 1 1 auto;
}

/* --- row: ảnh trên cùng, chữ dưới (giống grid nhưng thẻ rộng hơn) --- */
.bi-card--row {
    flex-direction: column;
}

.bi-card--row .bi-card__body {
    flex: 1 1 auto;
}

.bi-card--row .bi-card__title {
    font-size: 19px;
}

/* --- mini: gọn, không mô tả --- */
.bi-card--mini {
    flex-direction: column;
}

.bi-card--mini .bi-card__media {
    aspect-ratio: 16 / 9;
}

.bi-card--mini .bi-card__body {
    gap: 8px;
    padding: 16px 20px 20px;
}

.bi-card--mini .bi-card__title {
    font-size: 16px;
}

/* ---------------------------------------------------------------------------
   6. BỐ CỤC DẢI
   --------------------------------------------------------------------------- */
.bi-grid {
    display: grid;
    gap: 24px;
}

.bi-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 24px;
}

.bi-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Một thẻ lớn bên trái, hai thẻ gọn xếp dọc bên phải. */
/* Hai cột kéo bằng nhau. Lúc còn dùng object-fit: cover thì phải để `start`,
   không thì thẻ trái phình theo cột phải và ảnh bị phóng to đến mức chỉ còn
   thấy một góc. Nay ảnh có khung 16/9 cố định và phần dôi ra do thân thẻ hứng,
   nên kéo bằng được — bỏ hẳn khoảng trống 73px dưới thẻ trái. */
.bi-split {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
}

.bi-split__side {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 24px;
    min-width: 0;
}

/* ---------------------------------------------------------------------------
   7. MOBILE
   --------------------------------------------------------------------------- */
@media (max-width: 1000px) {
    .bi-split {
        grid-template-columns: 1fr;
    }

    .bi-split__side {
        grid-template-rows: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bi-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .bi-hero {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .bi-search {
        flex-wrap: wrap;
        gap: 12px;
        padding: 12px;
    }

    /* Khung 930x930 neo theo khung 1440; ở màn hẹp nó phủ kín và làm chữ khó
       đọc. */
    .bi-hero__deco {
        display: none;
    }

    .bi-search__input {
        width: 100%;
        height: 40px;
        padding: 0 4px;
    }

    .bi-search__btn {
        width: 100%;
    }

    .bi-grid--2,
    .bi-grid--3,
    .bi-split__side {
        grid-template-columns: 1fr;
    }

    /* Thẻ lớn: hai cột thành một, ảnh lên trên. */
    .bi-card--feature {
        flex-direction: column;
    }

    .bi-card--feature .bi-card__media {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }

    .bi-card__body {
        padding: 16px;
    }

    .bi-head {
        flex-wrap: wrap;
    }
}