/*
 * TaoVideo — Animated dark background
 * Áp lên body.tv-anim-bg trong layout dashboard.blade.php
 * Pure CSS, không JS, không tốn CPU đáng kể.
 * Tham khảo từ pattern grid 30x30 (geminigen.ai) + blob radial drift.
 */

body.tv-anim-bg {
    position: relative;
    background-color: #0a0e1a;
    overflow-x: hidden;
}

/* Lớp grid kẻ ô vuông 30x30 — drift chéo chậm */
body.tv-anim-bg::before {
    content: "";
    position: fixed;
    inset: -30px;
    z-index: -2;
    pointer-events: none;
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 0),
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 0);
    background-size: 30px 30px;
    animation: tvBgGridDrift 40s linear infinite;
    will-change: transform;
}

/* Lớp blob aurora — 3 vệt sáng tím / xanh lam / xanh ngọc trôi mượt */
body.tv-anim-bg::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(420px 320px at 15% 20%, rgba(124, 58, 237, 0.12), transparent 70%),
        radial-gradient(520px 380px at 85% 35%, rgba(34, 197, 235, 0.10), transparent 70%),
        radial-gradient(380px 300px at 50% 90%, rgba(16, 185, 129, 0.10), transparent 70%);
    filter: blur(40px);
    animation: tvBgBlobFloat 28s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

@keyframes tvBgGridDrift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(30px, 30px, 0); }
}

@keyframes tvBgBlobFloat {
    0%   { transform: translate3d(0, 0, 0) scale(1);     opacity: 1;   }
    50%  { transform: translate3d(-30px, 20px, 0) scale(1.08); opacity: 0.85; }
    100% { transform: translate3d(20px, -25px, 0) scale(0.96); opacity: 1; }
}

/* Mobile — grid nhỏ hơn, blob nhẹ hơn để tiết kiệm GPU */
@media (max-width: 768px) {
    body.tv-anim-bg::before {
        background-size: 20px 20px;
        animation-duration: 50s;
    }
    body.tv-anim-bg::after {
        filter: blur(28px);
        background:
            radial-gradient(260px 220px at 20% 25%, rgba(124, 58, 237, 0.10), transparent 70%),
            radial-gradient(320px 240px at 80% 70%, rgba(34, 197, 235, 0.08), transparent 70%);
    }
}

/* Tôn trọng user prefer-reduced-motion: tắt animation, giữ tĩnh */
@media (prefers-reduced-motion: reduce) {
    body.tv-anim-bg::before,
    body.tv-anim-bg::after {
        animation: none;
    }
}

/* ========================================================
 * FULL-PAGE OVERRIDE — Ép các container con TRANSPARENT
 * Để background grid + blob xuyên qua mọi tầng giao diện.
 * Không che bằng nền cứng. Card/sidebar dùng glass effect.
 * ======================================================== */

/* Layout admin */
body.tv-anim-bg .admin-main,
body.tv-anim-bg .admin-content {
    background: transparent !important;
}
body.tv-anim-bg .admin-sidebar {
    background: rgba(15, 18, 40, 0.55) !important;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}
body.tv-anim-bg .admin-topbar {
    background: rgba(15, 18, 40, 0.55) !important;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Layout dashboard (sticky header + footer) */
body.tv-anim-bg > header,
body.tv-anim-bg > footer {
    background: rgba(15, 18, 40, 0.55) !important;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
}

/* Header sticky đầu trang dashboard — TRONG VEO HOÀN TOÀN */
body.tv-anim-bg > header.tw-sticky,
body.tv-anim-bg > header.tw-sticky[style] {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Bootstrap navbar trong layout app.blade.php */
body.tv-anim-bg .navbar,
body.tv-anim-bg nav.navbar {
    background-color: rgba(15, 18, 40, 0.55) !important;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
}

/* Auth & landing nhỏ */
body.tv-anim-bg .landing-header,
body.tv-anim-bg .landing-footer,
body.tv-anim-bg .auth-container {
    background: transparent !important;
}

/* Content wrappers thường có nền — bỏ */
body.tv-anim-bg main,
body.tv-anim-bg #app,
body.tv-anim-bg .container,
body.tv-anim-bg .container-fluid {
    background: transparent !important;
}

/* ========================================================
 * EXTRA TRANSPARENT — Các container Tailwind tự custom
 * Filter bar, sort menu, nav cards, skeleton cards, card-img
 * Inline style="background:rgba(...)" cần override mạnh.
 * ======================================================== */

/* Filter bar — TRONG VEO HOÀN TOÀN, không blur, không viền */
body.tv-anim-bg .vai-filter-bar,
body.tv-anim-bg .vai-filter-bar[style] {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 0 !important;
    box-shadow: none !important;
}
/* Tailwind class tw-backdrop-blur-md trên cùng phần tử cũng huỷ luôn */
body.tv-anim-bg .vai-filter-bar.tw-backdrop-blur-md {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Sort button trong filter bar — bỏ nền xám trắng */
body.tv-anim-bg .vai-filter-bar #vaiSortBtn,
body.tv-anim-bg .vai-filter-bar #vaiSortBtn[style] {
    background: transparent !important;
}

/* Card / nav cards / skeleton — vẫn glass mờ để đọc được */
body.tv-anim-bg .vai-card,
body.tv-anim-bg .vai-card[style],
body.tv-anim-bg .vai-section,
body.tv-anim-bg .vai-grid,
body.tv-anim-bg .skel-card,
body.tv-anim-bg .skel-card[style],
body.tv-anim-bg .card-img,
body.tv-anim-bg .card-img[style] {
    background: transparent !important;
    backdrop-filter: blur(8px) saturate(130%);
    -webkit-backdrop-filter: blur(8px) saturate(130%);
}

/* Nav cards trên cùng (Tạo Video AI / Tạo Video AI theo mẫu) — TRONG VEO HOÀN TOÀN */
body.tv-anim-bg #navCardAI,
body.tv-anim-bg #navCardAI[style],
body.tv-anim-bg #navCardTemplate,
body.tv-anim-bg #navCardTemplate[style] {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.tv-anim-bg .vai-card,
body.tv-anim-bg .skel-card {
    background: rgba(15, 18, 40, 0.40) !important;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Sort dropdown menu vẫn đặc để đọc được */
body.tv-anim-bg #vaiSortMenu,
body.tv-anim-bg #vaiSortMenu[style] {
    background: rgba(20, 24, 40, 0.92) !important;
}

/* ========================================================
 * SECTION HEADING — "Model Mẫu AI Hot" 🔥
 * Gradient chữ + glow + lửa nháy nhẹ
 * ======================================================== */
.tv-section-heading { user-select: none; }

.tv-hot-title {
    /* Padding để gạch chân không sát chữ */
    padding-bottom: 6px;
}

.tv-hot-title__text {
    background: linear-gradient(95deg, #ffb86b 0%, #ff5f6d 35%, #c061ff 70%, #36e0ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    background-size: 200% 100%;
    animation: tvHotShine 6s ease-in-out infinite;
    filter: drop-shadow(0 0 12px rgba(255, 121, 0, 0.25));
    letter-spacing: -0.01em;
}

/* Gạch chân gradient mảnh, không chiếm chỗ */
.tv-hot-title::after {
    content: "";
    position: absolute;
    left: 14%;
    right: 14%;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, #ff5f6d 30%, #c061ff 70%, transparent);
    opacity: 0.7;
}

.tv-hot-title__flame {
    display: inline-block;
    margin-left: 6px;
    transform-origin: 50% 80%;
    animation: tvFlameFlicker 1.6s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(255, 110, 30, 0.65));
}

@keyframes tvHotShine {
    0%   { background-position: 0% 50%;  }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%;  }
}

@keyframes tvFlameFlicker {
    0%, 100% { transform: scale(1)    rotate(-2deg); opacity: 1;   }
    25%      { transform: scale(1.08) rotate(2deg);  opacity: 0.95; }
    50%      { transform: scale(0.96) rotate(-1deg); opacity: 1;   }
    75%      { transform: scale(1.05) rotate(3deg);  opacity: 0.92; }
}

@media (prefers-reduced-motion: reduce) {
    .tv-hot-title__text,
    .tv-hot-title__flame { animation: none; }
}

/* ========================================================
 * SEARCH BOX — Kính lúp trong veo, glow xanh khi focus
 * ======================================================== */
.tv-search-wrap { position: relative; }

.tv-search-glass {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 44px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: border-color .25s ease, box-shadow .25s ease;
}

/* Icon kính lúp ở góc trái trong */
.tv-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.55);
    font-size: 16px;
    pointer-events: none;
    transition: color .25s ease, transform .25s ease;
}

.tv-search-input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    padding: 0;
    line-height: 1.4;
    width: 100%;
}
.tv-search-input::placeholder {
    color: rgba(255, 255, 255, 0.40);
    font-weight: 400;
}

/* Nút xoá khi đã có chữ */
.tv-search-clear {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 4px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 16px;
    line-height: 1;
    transition: color .15s ease;
}
.tv-search-clear:hover { color: #fff; }
.tv-search-clear[hidden] { display: none; }

/* Focus state — viền sáng + glow xanh ngọc */
.tv-search-glass:focus-within {
    border-color: rgba(34, 197, 235, 0.55);
    box-shadow:
        0 0 0 3px rgba(34, 197, 235, 0.10),
        0 0 22px rgba(34, 197, 235, 0.20);
}
.tv-search-glass:focus-within .tv-search-icon {
    color: #4dd9ff;
    transform: translateY(-50%) scale(1.05);
}

/* Hover nhẹ khi chưa focus */
.tv-search-glass:hover:not(:focus-within) {
    border-color: rgba(255, 255, 255, 0.22);
}

/* Animation pulse ring nhẹ quanh kính lúp khi không có chữ — gợi ý cho khách */
.tv-search-glass:not(:focus-within) .tv-search-icon::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1.5px solid rgba(34, 197, 235, 0.35);
    animation: tvSearchPulse 2.4s ease-out infinite;
    pointer-events: none;
}
@keyframes tvSearchPulse {
    0%   { transform: scale(0.85); opacity: 0;   }
    30%  { opacity: 1; }
    100% { transform: scale(1.6);  opacity: 0;   }
}

@media (prefers-reduced-motion: reduce) {
    .tv-search-glass:not(:focus-within) .tv-search-icon::after { animation: none; display: none; }
}

/* Mobile: gọn hơn */
@media (max-width: 640px) {
    .tv-search-glass { padding: 9px 12px 9px 40px; }
    .tv-search-icon  { left: 14px; font-size: 15px; }
    .tv-search-input { font-size: 13px; }
}

/* ========================================================
 * AUTO-FIT GRID — Mobile 1 cột to rộng, PC auto-fit gọn
 * ======================================================== */
.tv-cards-auto {
    display: grid;
    /* Mobile: 1 cột — mỗi card full width, ảnh to dễ nhìn */
    grid-template-columns: 1fr;
    gap: 14px;
}

/* Tablet trở lên: auto-fit, card ~220px */
@media (min-width: 640px) {
    .tv-cards-auto {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 18px;
    }
}

@media (min-width: 1024px) {
    .tv-cards-auto {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 22px;
    }
}


/* ========================================================
 * TV CARD — Card chuyên nghiệp: ảnh full + tên overlay + CTA
 * Fluid scale với clamp(), aspect 4/5, hover desktop only
 * ======================================================== */
.tv-card {
    background: rgba(15, 18, 40, 0.55);
    transition: transform .25s cubic-bezier(.2, .7, .3, 1.2),
                box-shadow .25s ease,
                border-color .25s ease;
    will-change: transform;
    position: relative;
}

/* ─── Subtle premium shine — quét nhẹ phải→trái mỗi 4s ─── */
.tv-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 3;
    background: linear-gradient(
        100deg,
        transparent 0%,
        transparent 42%,
        rgba(255, 255, 255, 0.04) 47%,
        rgba(255, 255, 255, 0.18) 50%,
        rgba(255, 255, 255, 0.04) 53%,
        transparent 58%,
        transparent 100%
    );
    background-size: 220% 100%;
    background-position: 220% 0;
    background-repeat: no-repeat;
    mix-blend-mode: screen;
    opacity: 0;
    animation: tvCardShine 4s cubic-bezier(.4, 0, .2, 1) infinite;
    animation-delay: var(--tv-shine-delay, 0s);
    will-change: background-position, opacity;
}

.tv-card:nth-child(3n+1)::before { --tv-shine-delay: 0s; }
.tv-card:nth-child(3n+2)::before { --tv-shine-delay: 1.3s; }
.tv-card:nth-child(3n)::before   { --tv-shine-delay: 2.6s; }

@keyframes tvCardShine {
    0%   { background-position: 220% 0; opacity: 0; }
    12%  { opacity: 1; }
    40%  { background-position: -120% 0; opacity: 1; }
    50%  { opacity: 0; }
    100% { background-position: -120% 0; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .tv-card::before { animation: none; opacity: 0; }
}

/* Ảnh chiếm 16/9 — hiện đủ khung video demo, không cắt */
.tv-card-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.30);
}

.tv-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

.tv-card-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.18);
    font-size: 2.4rem;
}

/* Badge HOT/MỚI — góc trên-trái */
.tv-card-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    padding: 3px 9px;
    border-radius: 6px;
    color: #fff;
    font-size: clamp(9px, 0.66vw, 11px);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* Overlay gradient + tên + meta — góc dưới ảnh, contrast cao */
.tv-card-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 36px 12px 12px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(0, 0, 0, 0.45) 35%,
        rgba(0, 0, 0, 0.85) 75%,
        rgba(0, 0, 0, 0.95) 100%
    );
    pointer-events: none;
}

.tv-card-title {
    margin: 0 0 6px 0;
    color: #ffffff;
    font-weight: 800;
    line-height: 1.25;
    font-size: clamp(13px, 1.1vw, 15.5px);
    letter-spacing: -0.005em;
    /* 2 dòng max, ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Stack 3 lớp shadow để nét chữ luôn đọc rõ trên ảnh sáng/tối */
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.85),
        0 2px 8px rgba(0, 0, 0, 0.75),
        0 0 18px rgba(0, 0, 0, 0.55);
    -webkit-font-smoothing: antialiased;
}

.tv-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.tv-card-price {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: clamp(10px, 0.78vw, 11.5px);
    font-weight: 700;
    color: #34d399;
    background: rgba(16, 185, 129, 0.16);
    border: 1px solid rgba(16, 185, 129, 0.25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.tv-card-price small {
    font-size: 0.78em;
    opacity: 0.7;
    margin-left: 1px;
}

.tv-card-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: clamp(9px, 0.7vw, 10.5px);
    font-weight: 600;
    color: #fcd34d;
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.22);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* CTA — full width, gradient xanh, gắn liền dưới ảnh */
.tv-card-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: clamp(8px, 0.85vw, 11px) 10px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: clamp(11px, 0.85vw, 13px);
    letter-spacing: 0.01em;
    transition: filter .2s ease, transform .2s ease;
}
.tv-card-cta i {
    font-size: 1.05em;
}
.tv-card-cta:hover {
    color: #fff;
    filter: brightness(1.12);
}

/* HOVER — chỉ trên thiết bị có chuột thật */
@media (hover: hover) and (pointer: fine) {
    .tv-card:hover {
        transform: translateY(-4px);
        border-color: rgba(16, 185, 129, 0.35);
        box-shadow:
            0 12px 36px rgba(0, 0, 0, 0.40),
            0 0 0 1px rgba(16, 185, 129, 0.15);
    }
    .tv-card:hover .tv-card-img {
        transform: scale(1.06);
    }
    .tv-card:hover .tv-card-cta {
        transform: translateY(-1px);
    }
}

/* Touch device — active state thay vì hover (chống stuck-hover) */
@media (hover: none) {
    .tv-card:active {
        transform: scale(0.98);
        transition: transform .12s ease;
    }
}

/* Mobile: padding overlay nhỏ hơn cho gọn — card 1 cột to rộng nên text scale lên */
@media (max-width: 640px) {
    .tv-card-overlay { padding: 60px 16px 16px; }
    .tv-card-badge   { top: 10px; left: 10px; padding: 4px 10px; font-size: 11px; }
    .tv-card-title   { font-size: 17px; -webkit-line-clamp: 2; }
    .tv-card-price   { font-size: 13px; padding: 5px 11px; }
    .tv-card-tag     { font-size: 12px; padding: 5px 11px; }
    .tv-card-cta     { padding: 13px 12px; font-size: 14.5px; gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
    .tv-card,
    .tv-card-img,
    .tv-card-cta { transition: none; }
}







/* ========================================================
 * STARRY SKY — Sao nhấp nháy + sao băng bay chéo
 * 1 div = nhiều dot nhờ box-shadow multi-stop trick
 * ======================================================== */

/* ── Stars: 3 layer (xa / vừa / gần) ── */
.tv-stars {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
.tv-stars::before,
.tv-stars::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 2px; height: 2px;
    border-radius: 50%;
    background: transparent;
    /* Nhiều chấm sáng từ 1 element nhờ box-shadow nhiều điểm */
    box-shadow:
        120px 80px #fff, 380px 220px #cfd8ff, 700px 60px #fff,
        950px 340px #b9c4ff, 1320px 180px #fff, 1680px 420px #fff,
        220px 540px #cfd8ff, 540px 720px #fff, 880px 880px #b9c4ff,
        1180px 600px #fff, 1500px 760px #fff, 1820px 920px #cfd8ff,
        80px 980px #fff, 460px 1100px #b9c4ff, 760px 1240px #fff,
        1080px 1080px #fff, 1400px 1180px #cfd8ff, 1720px 1280px #fff,
        300px 320px #fff, 620px 480px #b9c4ff, 1020px 220px #fff,
        1240px 940px #fff, 1580px 540px #cfd8ff, 1900px 660px #fff;
    animation: tvStarTwinkle 4s ease-in-out infinite alternate;
}
.tv-stars::after {
    /* Layer thứ 2: lệch toạ độ + opacity khác để tạo chiều sâu */
    transform: translate(40px, 60px);
    opacity: 0.6;
    animation: tvStarTwinkle 6s ease-in-out -2s infinite alternate;
}

@keyframes tvStarTwinkle {
    0%   { opacity: 0.35; }
    50%  { opacity: 0.95; }
    100% { opacity: 0.55; }
}

/* ── Meteors / Sao băng — 5 streak đa hướng (chéo trái, chéo phải, ngang) ── */
.tv-meteors {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
.tv-meteors span {
    position: absolute;
    width: 2px;
    height: 90px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 60%, #aee0ff 100%);
    border-radius: 999px;
    filter: drop-shadow(0 0 6px rgba(174, 224, 255, 0.85));
    opacity: 0;
    will-change: transform, opacity;
}

/* m1 — chéo phải→trái-dưới (góc 215°) — kinh điển */
.tv-meteors .m1 {
    top: -10vh; left: 85%;
    transform: rotate(215deg);
    animation: tvMeteorDiag1 9s linear infinite;
    animation-delay: 1s;
}
/* m2 — chéo trái→phải-dưới (góc 145°) — đối xứng */
.tv-meteors .m2 {
    top: -10vh; left: 15%;
    transform: rotate(145deg);
    animation: tvMeteorDiag2 11s linear infinite;
    animation-delay: 5s;
}
/* m3 — chéo phải→trái-dưới, góc rất ngang (góc 195°) */
.tv-meteors .m3 {
    top: 25%; left: 100%;
    transform: rotate(195deg);
    height: 70px;
    animation: tvMeteorHorizR 13s linear infinite;
    animation-delay: 3s;
}
/* m4 — chéo trái→phải-dưới, góc rất ngang (góc 165°) */
.tv-meteors .m4 {
    top: 60%; left: -10%;
    transform: rotate(165deg);
    height: 70px;
    animation: tvMeteorHorizL 15s linear infinite;
    animation-delay: 8s;
}
/* m5 — gần thẳng đứng từ trên xuống (góc 195°), nhanh */
.tv-meteors .m5 {
    top: -10vh; left: 50%;
    transform: rotate(195deg);
    animation: tvMeteorDiag1 7s linear infinite;
    animation-delay: 12s;
}

@keyframes tvMeteorDiag1 {  /* Chéo từ trên-phải xuống dưới-trái */
    0%   { transform: translate3d(0, 0, 0) rotate(215deg);          opacity: 0; }
    8%   { opacity: 1; }
    35%  { opacity: 1; }
    45%  { transform: translate3d(-700px, 700px, 0) rotate(215deg); opacity: 0; }
    100% { transform: translate3d(-700px, 700px, 0) rotate(215deg); opacity: 0; }
}
@keyframes tvMeteorDiag2 {  /* Chéo từ trên-trái xuống dưới-phải */
    0%   { transform: translate3d(0, 0, 0) rotate(145deg);          opacity: 0; }
    8%   { opacity: 1; }
    35%  { opacity: 1; }
    45%  { transform: translate3d(700px, 700px, 0) rotate(145deg);  opacity: 0; }
    100% { transform: translate3d(700px, 700px, 0) rotate(145deg);  opacity: 0; }
}
@keyframes tvMeteorHorizR { /* Gần ngang, từ phải sang trái */
    0%   { transform: translate3d(0, 0, 0) rotate(195deg);           opacity: 0; }
    10%  { opacity: 1; }
    40%  { opacity: 1; }
    50%  { transform: translate3d(-900px, 240px, 0) rotate(195deg);  opacity: 0; }
    100% { transform: translate3d(-900px, 240px, 0) rotate(195deg);  opacity: 0; }
}
@keyframes tvMeteorHorizL { /* Gần ngang, từ trái sang phải */
    0%   { transform: translate3d(0, 0, 0) rotate(165deg);           opacity: 0; }
    10%  { opacity: 1; }
    40%  { opacity: 1; }
    50%  { transform: translate3d(900px, 240px, 0) rotate(165deg);   opacity: 0; }
    100% { transform: translate3d(900px, 240px, 0) rotate(165deg);   opacity: 0; }
}

/* ── Fireflies / Đom đóm — 12 chấm sáng vàng-xanh trôi lơ lửng ── */
.tv-fireflies {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
.tv-fireflies span {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #c8ff8c;
    box-shadow:
        0 0 8px 2px rgba(200, 255, 140, 0.8),
        0 0 18px 4px rgba(200, 255, 140, 0.35);
    opacity: 0;
    will-change: transform, opacity;
}
/* 12 con — toạ độ + delay + duration ngẫu nhiên thủ công */
.tv-fireflies span:nth-child(1)  { top: 12%; left: 8%;  animation: tvFireflyA 14s ease-in-out  0s infinite; }
.tv-fireflies span:nth-child(2)  { top: 30%; left: 22%; animation: tvFireflyB 18s ease-in-out -3s infinite; }
.tv-fireflies span:nth-child(3)  { top: 65%; left: 12%; animation: tvFireflyA 16s ease-in-out -7s infinite; }
.tv-fireflies span:nth-child(4)  { top: 85%; left: 28%; animation: tvFireflyB 20s ease-in-out -1s infinite; }
.tv-fireflies span:nth-child(5)  { top: 18%; left: 45%; animation: tvFireflyA 17s ease-in-out -5s infinite; }
.tv-fireflies span:nth-child(6)  { top: 52%; left: 38%; animation: tvFireflyB 15s ease-in-out -9s infinite; }
.tv-fireflies span:nth-child(7)  { top: 78%; left: 55%; animation: tvFireflyA 19s ease-in-out -2s infinite; }
.tv-fireflies span:nth-child(8)  { top: 22%; left: 68%; animation: tvFireflyB 13s ease-in-out -6s infinite; }
.tv-fireflies span:nth-child(9)  { top: 48%; left: 75%; animation: tvFireflyA 21s ease-in-out -4s infinite; }
.tv-fireflies span:nth-child(10) { top: 70%; left: 82%; animation: tvFireflyB 16s ease-in-out -8s infinite; }
.tv-fireflies span:nth-child(11) { top: 35%; left: 90%; animation: tvFireflyA 18s ease-in-out -10s infinite; }
.tv-fireflies span:nth-child(12) { top: 88%; left: 70%; animation: tvFireflyB 14s ease-in-out -12s infinite; }

/* Đom đóm trôi vòng tự nhiên (lên-xuống-trái-phải) + nháy sáng dần */
@keyframes tvFireflyA {
    0%   { transform: translate3d(0, 0, 0)            scale(0.9); opacity: 0;    }
    10%  {                                                         opacity: 0.9; }
    25%  { transform: translate3d(60px, -40px, 0)     scale(1);   opacity: 1;   }
    50%  { transform: translate3d(120px, 30px, 0)     scale(0.85);opacity: 0.6; }
    75%  { transform: translate3d(40px, 70px, 0)      scale(1);   opacity: 1;   }
    90%  {                                                         opacity: 0.7; }
    100% { transform: translate3d(0, 0, 0)            scale(0.9); opacity: 0;   }
}
@keyframes tvFireflyB {
    0%   { transform: translate3d(0, 0, 0)            scale(0.85); opacity: 0;   }
    10%  {                                                          opacity: 0.85; }
    30%  { transform: translate3d(-50px, 30px, 0)     scale(1);    opacity: 1;   }
    55%  { transform: translate3d(-90px, -20px, 0)    scale(0.9);  opacity: 0.5; }
    80%  { transform: translate3d(-30px, -60px, 0)    scale(1);    opacity: 1;   }
    100% { transform: translate3d(0, 0, 0)            scale(0.85); opacity: 0;   }
}

/* Mobile: stars ít hơn (chỉ giữ layer chính), meteor ngắn hơn, đom đóm bớt */
@media (max-width: 768px) {
    .tv-stars::after { display: none; }
    .tv-meteors span { height: 60px; }
    /* Tắt 2 streak ngang để đỡ rối + giảm GPU */
    .tv-meteors .m3,
    .tv-meteors .m4 { display: none; }
    /* Đom đóm: ẩn 1 nửa */
    .tv-fireflies span:nth-child(n+7) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tv-stars::before,
    .tv-stars::after,
    .tv-meteors span,
    .tv-fireflies span {
        animation: none;
    }
    .tv-meteors span,
    .tv-fireflies span { display: none; }
}