/*
 * Module Kế hoạch (ke-hoach) — phần CSS riêng của module; mọi thành phần chung dùng hệ thống mn-* của giao diện (mn.css).
 * Tệp này cũng được nạp ở trang của module khác khi block của module có mặt (mn75_block_css).
 */

/* ----- Trang tổng hợp: khối "Tuần này", "Tháng này" ----- */
.kh-now__kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 2px 12px;
    background: var(--mn-yellow-100, #FFF3B8);
    border-radius: var(--mn-radius-pill, 999px);
    color: var(--mn-blue-800, #063F86);
    font-size: var(--mn-text-xs, 0.875rem);
    font-weight: 700;
}

.kh-now .mn-empty {
    margin: 0;
}

/* ----- Trang tổng hợp: thẻ của từng loại kế hoạch ----- */
.kh-type__title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kh-type__title a {
    /* vùng chạm cao tối thiểu 44px mà chiều cao dòng tiêu đề không đổi */
    display: inline-block;
    padding: 11px 0;
    margin: -11px 0;
}

.kh-type__icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--mn-blue-50, #EEF5FE);
    border-radius: 12px;
    color: var(--mn-blue-700, #084C9E);
    font-size: 1.125rem;
}

.kh-type .mn-empty,
.kh-type .mn-updating {
    margin: 0;
}

/* ----- Trang danh sách: thanh chuyển nhanh giữa các loại ----- */
.kh-types {
    margin: 0 0 var(--mn-space-5, 24px);
}

.kh-legal {
    margin: 0;
    font-size: var(--mn-text-sm, 0.9375rem);
}

.kh-back {
    margin: var(--mn-space-5, 24px) 0 0;
}

/* ----- Trang chi tiết: kỳ trước / kỳ sau ----- */
.kh-neighbors {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mn-space-4, 16px);
    margin: var(--mn-space-5, 24px) 0 0;
}

.kh-neighbors__link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 44px;
    padding: 12px 16px;
    background: var(--mn-surface, #FFFFFF);
    border: 1px solid var(--mn-line, #E6DFD0);
    border-radius: var(--mn-radius, 14px);
    box-shadow: var(--mn-shadow-sm);
    color: var(--mn-ink-900, #1F2937);
    text-decoration: none;
}

.kh-neighbors__link:hover,
.kh-neighbors__link:focus {
    border-color: var(--mn-blue-200, #BBD6F7);
    color: var(--mn-ink-900, #1F2937);
    text-decoration: none;
}

.kh-neighbors__link:hover .kh-neighbors__title,
.kh-neighbors__link:focus .kh-neighbors__title {
    color: var(--mn-link-hover, #063F86);
    text-decoration: underline;
}

.kh-neighbors__link--next {
    grid-column: 2;
    align-items: flex-end;
    text-align: right;
}

.kh-neighbors__dir {
    color: var(--mn-ink-600, #4B5563);
    font-size: var(--mn-text-xs, 0.875rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.kh-neighbors__title {
    color: var(--mn-link, #0B63CE);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.kh-neighbors__period {
    color: var(--mn-ink-600, #4B5563);
    font-size: var(--mn-text-xs, 0.875rem);
}

@media (max-width: 575.98px) {
    .kh-neighbors {
        grid-template-columns: 1fr;
    }

    .kh-neighbors__link--next {
        grid-column: 1;
    }
}

/* ----- Block "Kế hoạch tuần này, tháng này" ----- */
.kh-current__period + .kh-current__period {
    margin-top: var(--mn-space-4, 16px);
}

.kh-current__title {
    margin: 0 0 4px;
}

.kh-current__label {
    color: var(--mn-ink-600, #4B5563);
    font-size: var(--mn-text-sm, 0.9375rem);
    font-weight: 600;
    white-space: nowrap;
}

.kh-current .mn-empty {
    margin: 0;
}

.kh-current__more {
    margin: var(--mn-space-4, 16px) 0 0;
}

/* ----- Dòng kế hoạch trong danh sách gọn (trang tổng hợp, block): huy hiệu cơ sở luôn nằm trên tiêu đề ----- */
.kh-item__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 10px;
    margin-bottom: -5px;
}

.kh-item__badges:empty {
    display: none;
}

/* ----- Trang chi tiết: liên kết "xem bản gốc" của dòng nguồn có vùng chạm cao 44px mà chiều cao dòng không đổi ----- */
.kh-source a {
    display: inline-block;
    padding: 11px 0;
    margin: -11px 0;
}

/* ----- Trang chi tiết: khoảng cách giữa bảng thông tin và phần nội dung ----- */
.kh-detail__meta {
    margin-bottom: var(--mn-space-5, 24px);
}