/* kfbeta16 — home (index) */

/* =====================================================================
   "today + N" — số tập cập nhật hôm nay
   ===================================================================== */
#daily-update-widget {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 0 14px;
}

#daily-update-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 120px;
    height: 34px;
    padding: 0 16px;
    background: var(--accent2-soft);
    border-radius: var(--r-pill);
    cursor: default;
    user-select: none;
    overflow: hidden;
}
#daily-update-btn::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 3px rgba(52, 211, 153, .2);
    flex-shrink: 0;
}

.wpuc-today {
    color: var(--accent2);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.wpuc-plus { color: var(--text2); font-size: 13px; }
.wpuc-num {
    min-width: 18px;
    color: var(--text1);
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

#daily-update-btn.is-loading { background: var(--bg3); }
#daily-update-btn.is-loading::before { background: var(--bg5); box-shadow: none; }
#daily-update-btn.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 25%, rgba(255, 255, 255, .06) 50%, transparent 75%);
    background-size: 200% 100%;
    animation: kf-shimmer 1.4s infinite linear;
}
#daily-update-btn.is-loading .wpuc-today,
#daily-update-btn.is-loading .wpuc-plus,
#daily-update-btn.is-loading .wpuc-num { opacity: 0; }

/* =====================================================================
   LỊCH PHÁT SÓNG (UP / MO … SU)
   ===================================================================== */
#broadcast-schedule-container {
    margin: 0 0 32px;
    padding: 12px;
    background: var(--bg2);
    border-radius: var(--radius-lg);
    color: var(--text1);
    font-family: var(--font);
}
@media (min-width: 768px) {
    #broadcast-schedule-container { padding: 16px; }
}

.schedule-nav {
    display: flex;
    gap: 4px;
    margin: 0 0 14px;
    padding: 4px;
    background: var(--bg);
    border: 0;
    border-radius: var(--radius);
    overflow-x: auto;
    scrollbar-width: none;
}
.schedule-nav::-webkit-scrollbar { display: none; }

.schedule-nav li {
    position: relative;
    flex: 1 0 auto;
    min-width: 42px;
    padding: 9px 6px;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text2);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--tr), color var(--tr);
}
.schedule-nav li:hover { background: var(--bg3); color: var(--text1); }
.schedule-nav li.active { background: var(--accent); color: var(--on-accent); }
.schedule-nav li[data-type="new"] { color: var(--accent2); }
.schedule-nav li[data-type="new"].active { background: var(--accent2); color: #06222b; }

/* Chấm "hôm nay" */
.schedule-nav li.today-dot::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: var(--green);
}
.schedule-nav li.today-dot.active::after { background: var(--on-accent); }

/* Card trong lịch: nền tối hơn để nổi trên khối */
#broadcast-schedule-container .schedule-grid-item { background: var(--bg3); }
#broadcast-schedule-container .schedule-grid-item:hover { background: var(--bg4); }
#schedule-content > p { color: var(--text3) !important; }

/* Skeleton */
.sk-grid-item {
    background: var(--bg3);
    border-radius: var(--radius);
    overflow: hidden;
}
.sk-grid-thumb,
.sk-grid-line {
    background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%);
    background-size: 200% 100%;
    animation: kf-shimmer 1.4s infinite linear;
}
.sk-grid-thumb { aspect-ratio: var(--thumb-ratio); }
.sk-grid-line { height: 10px; margin: 12px 10px 0; border-radius: 4px; }
.sk-grid-line.short { width: 55%; margin-bottom: 14px; }

/* =====================================================================
   CÁC KHỐI DANH SÁCH (ani16+, Bluray, Movie…)
   Bố cục: tiêu đề bên trái · nút "xem thêm" bên phải · lưới bên dưới
   ===================================================================== */
.ext-json-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px 12px;
    margin: 0 0 36px;
    padding: 0;
    background: none;
    border-radius: 0;
    font-family: var(--font);
}
.ext-json-section > h2 {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--text1);
    font-size: clamp(17px, 2.2vw, 21px);
    font-weight: 800;
    letter-spacing: -.01em;
}
.ext-json-section > h2::before {
    content: "";
    width: 4px;
    height: 1.1em;
    border-radius: 2px;
    background: var(--accent);
    flex-shrink: 0;
}
.ext-json-section > .ext-json-grid {
    grid-column: 1 / -1;
    grid-row: 2;
}
.ext-json-section > .ext-json-footer {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    text-align: right;
}
.ext-json-section > .ext-json-grid > .ext-json-error {
    grid-column: 1 / -1;
    padding: 24px 0;
    text-align: center;
}

.ext-json-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 14px;
    background: var(--bg3);
    border-radius: var(--r-pill);
    color: var(--text2);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -.05em;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--tr), color var(--tr);
}
.ext-json-button:hover { background: var(--accent); color: var(--on-accent); }

/* Nút "xem thêm" bên trong lịch phát sóng: căn giữa, rộng */
#broadcast-schedule-container .ext-json-section {
    display: block;
    margin: 14px 0 0;
}
#broadcast-schedule-container .ext-json-footer { text-align: center; }
#broadcast-schedule-container .ext-json-button {
    width: 100%;
    max-width: 320px;
    height: 38px;
    background: var(--bg3);
}
#broadcast-schedule-container .ext-json-button:hover { background: var(--accent); }

/* Skeleton của các khối */
.ext-json-skeleton {
    background: var(--bg2);
    border-radius: var(--radius);
    overflow: hidden;
}
.ext-json-skeleton-thumb,
.ext-json-skeleton-title {
    background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%);
    background-size: 200% 100%;
    animation: kf-shimmer 1.4s infinite linear;
}
.ext-json-skeleton-thumb { aspect-ratio: var(--thumb-ratio); }
.ext-json-skeleton-title { height: 12px; margin: 12px 10px 8px; border-radius: 4px; }
.ext-json-skeleton-title.short { width: 60%; margin-top: 0; margin-bottom: 14px; }