/**
 * Trang chủ, HNL Deals.
 * Category box và Daily Deals row.
 *
 * Chỉ dùng token :root của theme cha (rule H2), không style inline (rule H1).
 * Card bên trong là component post-card của theme cha, không viết lại (rule H3).
 */

/* ==========================================================================
   Khối vertical
   ========================================================================== */

.hnl-cat-boxes {
    padding: var(--space-4) 0 var(--space-8);
}

.hnl-cat-box {
    padding: var(--space-8) 0;
}

.hnl-cat-box + .hnl-cat-box {
    border-top: 1px solid var(--color-border-subtle);
}

.hnl-cat-box .section-header-v2__title a {
    color: inherit;
    text-decoration: none;
}

.hnl-cat-box .section-header-v2__title a:hover,
.hnl-cat-box .section-header-v2__title a:focus-visible {
    color: var(--color-primary);
}

/* ==========================================================================
   Dải danh mục con
   ========================================================================== */

.hnl-cat-box__subs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
}

.hnl-cat-box__sub {
    display: inline-block;
    padding: var(--space-1-5) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: .8125rem;
    line-height: 1.3;
    text-decoration: none;
    transition: border-color .12s ease, color .12s ease, background-color .12s ease;
}

.hnl-cat-box__sub:hover,
.hnl-cat-box__sub:focus-visible {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
    color: var(--color-primary);
}

/* ==========================================================================
   Lưới bài
   ========================================================================== */

.hnl-cat-box__posts {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(4, 1fr);
}

/* Biến thể lớn: bài đầu chiếm 2 cột và 2 hàng */
.hnl-cat-box--featured .hnl-cat-box__posts {
    grid-template-columns: repeat(4, 1fr);
}

.hnl-cat-box--featured .hnl-cat-box__posts > *:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

.hnl-cat-box__empty {
    margin: 0;
    padding: var(--space-5) var(--space-6);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    font-size: .9375rem;
    text-align: center;
}

/* ==========================================================================
   Daily Deals
   ========================================================================== */

.hnl-deals-row {
    background: var(--color-bg-alt);
}

.hnl-deals-row__grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(4, 1fr);
}

/* ==========================================================================
   Mobile, kiểm ở 1080 / 760 / 480 theo rule H4
   ========================================================================== */

@media (max-width: 1080px) {
    .hnl-cat-box__posts,
    .hnl-deals-row__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .hnl-cat-box--featured .hnl-cat-box__posts > *:first-child {
        grid-column: span 2;
        grid-row: span 1;
    }
}

@media (max-width: 760px) {
    .hnl-cat-box {
        padding: var(--space-6) 0;
    }

    .hnl-cat-box__posts,
    .hnl-deals-row__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Bỏ ô lớn trên tablet, 2 cột đều nhau đọc dễ hơn */
    .hnl-cat-box--featured .hnl-cat-box__posts > *:first-child {
        grid-column: span 2;
    }
}

@media (max-width: 480px) {
    .hnl-cat-box__posts,
    .hnl-deals-row__grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .hnl-cat-box--featured .hnl-cat-box__posts > *:first-child {
        grid-column: auto;
    }

    /* Dải danh mục con cuộn ngang thay vì xuống dòng thành 4 hàng */
    .hnl-cat-box__subs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: var(--space-2);
        scrollbar-width: thin;
    }

    .hnl-cat-box__sub {
        white-space: nowrap;
    }
}

/* ==========================================================================
   Bảng danh mục gọn, dùng cho vertical chưa có bài
   ========================================================================== */

/* Section riêng ở cuối trang chủ, nằm sau Latest. */
.hnl-cat-dir-section {
    padding: 0 0 var(--space-8);
}

.hnl-cat-dir {
    padding: var(--space-8) 0 var(--space-4);
    border-top: 1px solid var(--color-border-subtle);
}

.hnl-cat-dir__grid {
    display: grid;
    gap: var(--space-6) var(--space-8);
    grid-template-columns: repeat(4, 1fr);
}

.hnl-cat-dir__title {
    display: block;
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border-subtle);
    color: var(--color-text);
    font-weight: var(--font-semibold);
    font-size: .9375rem;
    text-decoration: none;
}

.hnl-cat-dir__title:hover,
.hnl-cat-dir__title:focus-visible {
    color: var(--color-primary);
}

.hnl-cat-dir__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hnl-cat-dir__list a {
    display: block;
    padding: var(--space-1) 0;
    color: var(--color-text-muted);
    font-size: .8125rem;
    line-height: 1.4;
    text-decoration: none;
}

.hnl-cat-dir__list a:hover,
.hnl-cat-dir__list a:focus-visible {
    color: var(--color-primary);
}

@media (max-width: 1080px) {
    .hnl-cat-dir__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
    .hnl-cat-dir__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .hnl-cat-dir__grid { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* ---------- Bang danh muc cuoi trang chu ---------- */

.hnl-cat-dir__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 1.5rem 2rem;
}

.hnl-cat-dir__head {
    margin: 0 0 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9375rem;
    font-weight: 700;
}

.hnl-cat-dir__head a {
    color: inherit;
    text-decoration: none;
}

.hnl-cat-dir__head a:hover,
.hnl-cat-dir__head a:focus-visible {
    color: var(--color-primary);
}

.hnl-cat-dir__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hnl-cat-dir__list li {
    margin: 0 0 0.15rem;
}

.hnl-cat-dir__list a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.15rem 0;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    text-decoration: none;
}

.hnl-cat-dir__list a:hover,
.hnl-cat-dir__list a:focus-visible {
    color: var(--color-primary);
}

/* --color-text-subtle chi dat 4.0:1 tren nen toi, duoi nguong 4.5:1 cua WCAG
   AA cho chu nho. Dung --color-text-secondary nhu cac cho khac da sua. */
.hnl-cat-dir__dem {
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- Dien thoai: the xep hai cot ---------- */
/* Mot cot thi bon khoi danh muc chiem 5849px, gan mot nua chieu dai trang chu.
   Hai cot la cach cac trang mua sam khac deu lam, va cat doi doan do. */

@media (max-width: 767px) {
    .hnl-cat-box__posts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .hnl-cat-box__posts .post-card__content {
        padding: 0.6rem 0.7rem 0.8rem;
    }

    .hnl-cat-box__posts .post-card__title {
        font-size: 0.875rem;
        line-height: 1.35;
    }

    /* Cot hep khong con cho cho doan trich, chi giu tieu de va anh. */
    .hnl-cat-box__posts .post-card__excerpt,
    .hnl-cat-box__posts .post-card__footer {
        display: none;
    }
}

@media (max-width: 767px) {
    /* minmax(14rem) tren man 390px chi vua mot cot, bang danh muc dai ra
       1015px. Ha nguong xuong de vua hai cot. */
    .hnl-cat-dir__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem 1rem;
    }
}