/* ==============================================================
   ☁️ TÀNG KINH CÁC - THEME: THANH THIÊN BẠCH NHẬT (TRẮNG - XANH COBAN)
   --------------------------------------------------------------
   - Nền trắng sáng, điểm nhấn xanh coban (#0047AB) - sạch, hiện đại.
   - Toàn bộ chữ dùng font KHÔNG CHÂN (Calibri + Be Vietnam Pro dự phòng
     cho máy không có Calibri, hỗ trợ đầy đủ tiếng Việt).
   - Đã BỎ BỚT VIỀN: panel/thẻ/nav/footer dùng bóng đổ mềm thay viền.
     Viền chỉ giữ ở ô nhập liệu (để người dùng biết chỗ gõ chữ).

   ⚠️ Giữ nguyên tên class `theme-bong-lai` để KHÔNG phải sửa
   theme-manager.js, admin.html hay body của các trang khác.
   Muốn thêm theme mới: viết khối .theme-ten-moi + thêm vào
   DANH_SACH_THEME trong theme-manager.js + <option> trong admin.html.
   ============================================================== */

/* Phông chữ không chân hỗ trợ đầy đủ tiếng Việt (dự phòng cho Calibri) */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,400;0,600;0,800;1,400&display=swap');

/* ==============================================================
   BIẾN MẶC ĐỊNH = THANH THIÊN BẠCH NHẬT (tránh nháy màu khi tải trang)
   ============================================================== */
:root {
    /* Bảng màu Trắng - Coban */
    --coban:       #0047ab;                  /* xanh coban chuẩn          */
    --coban-tuoi:  #1d5fd1;                  /* coban tươi - hover/nút    */
    --coban-nhat:  #dde8f7;                  /* xanh phớt - nền phụ       */
    /* ⚡ GIẢM CHÓI: bỏ trắng tinh #fff, dùng trắng ngà ám xanh.
       Độ sáng hạ ~9%, mắt đỡ nhức khi đọc lâu mà chữ vẫn rõ. */
    --trang:       #eef2f8;                  /* panel - trắng ngà         */
    --trang-suong: #dfe6f0;                  /* nền web - xám xanh dịu    */
    --muc-xanh:    #16202f;                  /* chữ chính - đậm hơn chút  */
    --xam-chu:     #44546a;                  /* chữ phụ                   */


    /* Font không chân dùng chung toàn web */
    --font-khong-chan: Calibri, 'Be Vietnam Pro', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;

    /* Biến hệ thống cũ - GIỮ NGUYÊN TÊN để mọi trang dùng chung */
    --bg-color:   var(--trang-suong);
    --text-main:  var(--muc-xanh);
    --panel-bg:   var(--trang);
    --border-color: rgba(0, 71, 171, 0.14);
    --card-hover-shadow: rgba(0, 71, 171, 0.22);
    --text-heading: var(--coban);
    --btn-bg:     var(--coban-nhat);

    /* 🖼️ ẢNH NỀN TÙY CHỌN: đổi none thành url('/banner.jpg') nếu muốn. */
    --bg-anh: none;
}

.theme-bong-lai {
    --bg-color:   var(--trang-suong);
    --text-main:  var(--muc-xanh);
    --panel-bg:   var(--trang);
    --border-color: rgba(0, 71, 171, 0.14);
    --card-hover-shadow: rgba(0, 71, 171, 0.22);
    --text-heading: var(--coban);
    --btn-bg:     var(--coban-nhat);
}

body.theme-bong-lai {
    background-color: var(--bg-color) !important;
    color: var(--text-main) !important;
    font-family: var(--font-khong-chan) !important;
}

/* ⚡ TỐI ƯU CHỐNG LAG: bỏ selector `*` (ép style cho HÀNG NGÀN phần tử
   mỗi lần trang thay đổi -> giật lag). Font giờ KẾ THỪA tự nhiên từ body;
   chỉ ép riêng ô nhập liệu/nút vì trình duyệt không cho chúng kế thừa font. */
body.theme-bong-lai {
    font-family: var(--font-khong-chan) !important;
}
body.theme-bong-lai input,
body.theme-bong-lai select,
body.theme-bong-lai textarea,
body.theme-bong-lai button {
    font-family: var(--font-khong-chan);
}
body.theme-bong-lai #chapterContent {
    font-family: inherit !important;
}

/* --------------------------------------------------------------
   NỀN TRỜI XANH NHẸ VÀ XỬ LÝ CHỐNG MÉO ẢNH NỀN
   -------------------------------------------------------------- */
body.theme-bong-lai::before {
    content: '';
    /* Dùng position fixed trải đều toàn màn hình thay vì dùng background-attachment để chống lỗi iOS */
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -3;
    background-image:
        var(--bg-anh),
        radial-gradient(120% 45% at 50% 108%, rgba(0, 71, 171, 0.08) 0%, rgba(0,71,171,0) 60%),
        radial-gradient(70% 50% at 88% 0%, rgba(29, 95, 209, 0.07) 0%, rgba(29,95,209,0) 55%),
        linear-gradient(180deg, #e8edf5 0%, var(--trang-suong) 55%, #d5dde9 100%);
    background-repeat: no-repeat !important;
    background-position: top center !important;
    background-size: cover !important;
}
body.theme-bong-lai::after { content: none !important; }

.may-tien {
    position: fixed;
    left: -40%;
    width: 90%;
    height: 130px;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(50% 60% at 50% 50%, rgba(0, 71, 171, 0.05) 0%, rgba(0,71,171,0) 70%);
    /* ⚡ TỐI ƯU: bỏ filter blur trên phần tử đang animation vô hạn
       (GPU vẽ lại mỗi khung hình -> nóng máy, giật). Gradient vốn đã mềm. */
    will-change: transform;
    animation: may-troi-ngang linear infinite;
}
@keyframes may-troi-ngang {
    from { transform: translateX(-10%); }
    to   { transform: translateX(160%); }
}

.canh-dao { display: none !important; }
@keyframes dao-roi {
    0%   { transform: translate3d(0, -5vh, 0) rotate(0deg); }
    100% { transform: translate3d(-2vw, 108vh, 0) rotate(420deg); }
}
@media (prefers-reduced-motion: reduce) {
    .canh-dao, .may-tien { animation: none !important; }
    .canh-dao { display: none; }
}

/* --------------------------------------------------------------
   PANEL / THẺ TRUYỆN - BỎ VIỀN, dùng bóng đổ mềm
   -------------------------------------------------------------- */
body.theme-bong-lai .dynamic-panel,
body.theme-bong-lai .dynamic-card {
    background: var(--panel-bg) !important;
    border: none !important;
    box-shadow: 0 2px 14px rgba(23, 38, 59, 0.08) !important;
    border-radius: 14px;
}
body.theme-bong-lai .dynamic-card {
    transition: transform .25s ease, box-shadow .25s ease;
}
body.theme-bong-lai .dynamic-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px var(--card-hover-shadow) !important;
}

body.theme-bong-lai h1,
body.theme-bong-lai h2,
body.theme-bong-lai h3,
body.theme-bong-lai .dynamic-heading {
    color: var(--text-heading) !important;
    font-family: var(--font-khong-chan) !important;
    letter-spacing: 0.01em;
    text-shadow: none !important; /* Đã triệt tiêu bóng đổ */
    font-weight: 800;
}

/* --------------------------------------------------------------
   ⭐ VÁ LỖI HIỂN THỊ: Xóa hiệu ứng mờ (blur) trên Ảnh Banner
   -------------------------------------------------------------- */
body.theme-bong-lai div[style*="blur"] {
    filter: brightness(0.9) !important; /* Xóa sạch blur, chỉ hạ độ sáng 10% để nổi chữ */
    transform: scale(1) !important;
}

body.theme-bong-lai nav,
body.theme-bong-lai header {
    background: rgba(238, 242, 248, 0.95) !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: 0 2px 12px rgba(23, 38, 59, 0.08) !important;
}
body.theme-bong-lai footer {
    background: var(--trang) !important;
    border: none !important;
    border-top: 1px solid var(--border-color) !important;
    color: var(--xam-chu) !important;
}

body.theme-bong-lai .dynamic-btn {
    background-color: var(--btn-bg) !important;
    color: var(--coban) !important;
    border: none !important;
}
body.theme-bong-lai .dynamic-btn:hover {
    background-color: var(--coban) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 71, 171, 0.35);
}
body.theme-bong-lai button { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
body.theme-bong-lai button:active { transform: scale(0.97); }

body.theme-bong-lai [class*="bg-gray-9"],
body.theme-bong-lai [class*="bg-gray-8"],
body.theme-bong-lai [class*="bg-gray-7"],
body.theme-bong-lai [class*="bg-black"] {
    background-color: var(--trang) !important;
    background-image: none !important;
    color: var(--text-main) !important;
}
body.theme-bong-lai .modal-container [class*="bg-black/"],
body.theme-bong-lai .modal-container [class*="bg-gray-8"] {
    background-color: var(--coban-nhat) !important;
}
body.theme-bong-lai .modal-container > div {
    background: var(--trang) !important;
    border: none !important;
    box-shadow: 0 18px 55px rgba(23, 38, 59, 0.30) !important;
}
body.theme-bong-lai .text-gray-200,
body.theme-bong-lai .text-gray-300,
body.theme-bong-lai .text-gray-400 { color: var(--xam-chu) !important; }
body.theme-bong-lai .text-white { color: var(--text-main); }
body.theme-bong-lai [class*="bg-indigo"] , body.theme-bong-lai [class*="bg-purple"],
body.theme-bong-lai [class*="bg-red"], body.theme-bong-lai [class*="bg-blue"],
body.theme-bong-lai [class*="bg-emerald"], body.theme-bong-lai [class*="bg-teal"],
body.theme-bong-lai [class*="bg-yellow-6"], body.theme-bong-lai [class*="bg-gradient"] { color: #ffffff; }

body.theme-bong-lai input,
body.theme-bong-lai textarea,
body.theme-bong-lai select {
    background-color: var(--trang) !important;
    color: var(--text-main) !important;
    border: 1px solid rgba(0, 71, 171, 0.30) !important;
    border-radius: 8px;
}
body.theme-bong-lai input:focus,
body.theme-bong-lai textarea:focus,
body.theme-bong-lai select:focus {
    border-color: var(--coban) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 71, 171, 0.12);
}
body.theme-bong-lai #searchInput {
    background-color: var(--trang) !important;
    color: var(--text-main) !important;
    border: 1px solid rgba(0, 71, 171, 0.30) !important;
}
body.theme-bong-lai ::placeholder { color: rgba(70, 88, 110, 0.55) !important; }

body.theme-bong-lai ::-webkit-scrollbar { width: 8px; }
body.theme-bong-lai ::-webkit-scrollbar-track { background: var(--trang-suong); }
body.theme-bong-lai ::-webkit-scrollbar-thumb { background: var(--coban); border-radius: 4px; }

body.theme-bong-lai #readerPanel {
    background: var(--trang) !important;
    border: none !important;
}
body.theme-bong-lai #chapterContent { color: var(--muc-xanh); }
body.theme-bong-lai #chapterContent b,
body.theme-bong-lai #chapterContent strong { color: var(--coban); }
body.theme-bong-lai #chapterContent i,
body.theme-bong-lai #chapterContent em { color: var(--xam-chu); }

body.theme-bong-lai #bangCauHinhDoc {
    background: var(--trang) !important;
    border: none !important;
    box-shadow: 0 14px 44px rgba(23, 38, 59, 0.18) !important;
    color: var(--text-main) !important;
}
body.theme-bong-lai #bangCauHinhDoc button { border-color: rgba(0, 71, 171, 0.25) !important; }

body.theme-bong-lai #commentsList > div {
    background: var(--coban-nhat) !important;
    border: none !important;
    color: var(--text-main) !important;
}
body.theme-bong-lai #commentsList .dynamic-text { color: var(--text-main) !important; }
body.theme-bong-lai #commentSection [class*="bg-black/"] {
    background: var(--coban-nhat) !important;
}
body.theme-bong-lai #commentContent { color: var(--text-main) !important; }

body.theme-bong-lai .bg-cover,
body.theme-bong-lai [style*="background-image"] {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
body.theme-bong-lai img.banner-anh,
body.theme-bong-lai .dynamic-panel img[src*="banner"] {
    width: 100%; height: auto; object-fit: cover; border-radius: 12px;
}

body.theme-bong-lai .nut-tinh-nang {
    background: var(--trang) !important;
    color: var(--coban) !important;
    border: none !important;
    border-radius: 9999px;
    padding: 0.6rem 1.3rem !important;
    font-size: 0.95rem !important;
    font-weight: 700;
    line-height: 1.1;
    min-height: 42px;
    letter-spacing: 0.01em;
    white-space: nowrap;
    box-shadow: 0 1px 6px rgba(23, 38, 59, 0.12) !important;
}
body.theme-bong-lai .nut-tinh-nang:hover {
    background: var(--coban) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 71, 171, 0.35) !important;
}
body.theme-bong-lai .nut-chinh { background: var(--coban) !important; color: #ffffff !important; }
body.theme-bong-lai .nut-chinh:hover { background: var(--coban-tuoi) !important; }
body.theme-bong-lai .nut-nguy-hiem { color: #b42318 !important; }
body.theme-bong-lai .nut-nguy-hiem:hover { background: #b42318 !important; color: #ffffff !important; }
body.theme-bong-lai .nut-tat { opacity: 0.55; }
body.theme-bong-lai .nut-nho { padding: 0.35rem 0.85rem !important; font-size: 0.8rem !important; min-height: 32px; }

body.theme-bong-lai .the-thong-tin,
body.theme-bong-lai #detailStatus,
body.theme-bong-lai #detailAge,
body.theme-bong-lai #detailFormat,
body.theme-bong-lai #detailGenre {
    background: var(--coban-nhat) !important;
    color: var(--coban) !important;
    border: none !important;
    padding: 0.3rem 0.65rem;
    border-radius: 0.4rem;
    font-weight: 800;
    box-shadow: none !important;
}

body.theme-bong-lai span:has(> #tukimDisplay),
body.theme-bong-lai span:has(> #ltDisplay),
body.theme-bong-lai span:has(> #expDisplay) {
    background: var(--coban-nhat) !important;
    color: var(--coban) !important;
    border: none !important;
    box-shadow: none !important;
    font-weight: 800;
}
body.theme-bong-lai #tukimDisplay,
body.theme-bong-lai #ltDisplay,
body.theme-bong-lai #expDisplay,
body.theme-bong-lai #knbDisplay,
body.theme-bong-lai span:has(> #knbDisplay) { color: var(--coban) !important; background: none !important; box-shadow: none !important; }
body.theme-bong-lai #novelsGrid .dynamic-card [class*="bg-black"] {
    background: var(--coban-nhat) !important;
    color: var(--coban) !important;
}

body.theme-bong-lai .menu-btn { border: none !important; }
body.theme-bong-lai .menu-btn:hover {
    background: var(--coban) !important;
    color: #ffffff !important;
}
body.theme-bong-lai .menu-dang-chon {
    background: var(--coban) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(0, 71, 171, 0.35) !important;
}

/* --------------------------------------------------------------
   ☀️ ĐỒNG BỘ: MODAL GIỚI THIỆU TRUYỆN SANG NỀN SÁNG
   -------------------------------------------------------------- */
body.theme-bong-lai #novelDetailsModal > div {
    background: var(--trang) !important;
    color: var(--text-main) !important;
    border: none !important;
    box-shadow: 0 18px 55px rgba(23, 38, 59, 0.30) !important;
}
body.theme-bong-lai #novelDetailsModal [class*="bg-black"],
body.theme-bong-lai #novelDetailsModal [class*="bg-gray-9"],
body.theme-bong-lai #novelDetailsModal [class*="bg-gray-8"],
body.theme-bong-lai #novelDetailsModal [class*="bg-gray-7"] {
    background-color: var(--trang) !important;
    border-color: var(--border-color) !important;
}
body.theme-bong-lai #novelDetailsModal .bg-gray-800\/60 {
    background-color: var(--coban-nhat) !important;
    border-color: var(--border-color) !important;
}

body.theme-bong-lai #novelDetailsModal h2,
body.theme-bong-lai #novelDetailsModal h3 {
    color: var(--coban) !important;
}

/* CHỈ chuyển các chữ xám thành xám đậm, BỎ .text-white ra để không làm hỏng nút bấm */
body.theme-bong-lai #novelDetailsModal .text-gray-300,
body.theme-bong-lai #novelDetailsModal .text-gray-400,
body.theme-bong-lai #novelDetailsModal .text-gray-500 {
    color: var(--xam-chu) !important;
}

body.theme-bong-lai #novelDetailsModal .text-yellow-500,
body.theme-bong-lai #novelDetailsModal #detailAuthor {
    color: var(--coban) !important;
    font-weight: 800;
}

/* ⭐ VÁ LỖI NÚT BẤM BỊ CHỮ ĐEN: Ép cứng chữ trắng cho Nút Đọc Tiếp và Chia Sẻ */
body.theme-bong-lai #novelDetailsModal #btnDocTiep,
body.theme-bong-lai #novelDetailsModal #nutChiaSeTruyen {
    color: #ffffff !important;
    background-color: var(--coban) !important;
}
body.theme-bong-lai #novelDetailsModal #btnDocTiep:hover,
body.theme-bong-lai #novelDetailsModal #nutChiaSeTruyen:hover {
    background-color: var(--coban-tuoi) !important;
}

body.theme-bong-lai #novelDetailsModal button.text-gray-400.bg-black\/50 {
    background-color: var(--trang-suong) !important;
    color: var(--xam-chu) !important;
    border: 1px solid var(--border-color) !important;
}
body.theme-bong-lai #novelDetailsModal button.text-gray-400.bg-black\/50:hover {
    color: #b42318 !important;
}

body.theme-bong-lai #detailChapterList button {
    background-color: var(--trang) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
}
body.theme-bong-lai #detailChapterList button span.text-gray-300 {
    color: var(--text-main) !important;
}
body.theme-bong-lai #detailChapterList button:hover {
    background-color: var(--coban-nhat) !important;
    border-color: var(--coban) !important;
}
body.theme-bong-lai #detailChapterList button:hover span.text-gray-300 {
    color: var(--coban) !important;
}


/* --------------------------------------------------------------
   ĐIỆN THOẠI: Chống méo nền, căn chỉnh mượt
   -------------------------------------------------------------- */
@media (max-width: 768px) {
    body.theme-bong-lai .dynamic-panel { border-radius: 12px; }
    body.theme-bong-lai nav { padding: 0.5rem 0.75rem !important; }
    body.theme-bong-lai button, body.theme-bong-lai .dynamic-btn { min-height: 38px; }
    body.theme-bong-lai #readerPanel { margin-top: 0.5rem !important; padding: 0.9rem !important; }
    body.theme-bong-lai #commentSection { margin-bottom: 6.5rem !important; }
    .canh-dao:nth-of-type(n+7) { display: none; }
    body.theme-bong-lai .mobile-horror-bg { background: none !important; }
    body.theme-bong-lai .flicker-effect { animation: none !important; }
}
/* ==============================================================
   🌟 THANH TẨY BÓNG ĐỔ (SHADOW LAYER) PHẦN ĐẦU TRANG
   ============================================================== */

/* 1. Tiêu đề Vô Thần Các: Vàng kim, không bóng đổ (hoặc bóng cực mỏng 10% như ngài dặn) */
body.theme-bong-lai .chu-vang-gradient {
    color: transparent !important;
    -webkit-background-clip: text;
    background-clip: text;
    /* Giảm shadow xuống mức tối thiểu (10%) để chữ sắc nét như khắc lên nền */
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.1)) !important;
    text-shadow: none !important;
    font-weight: 900 !important;
}

/* 2. Loại bỏ hoàn toàn bóng đổ trên thanh Nav, Header và thanh Khuyến cáo đầu trang */
/* ✅ KHÔI PHỤC NHƯ CŨ: thanh khuyến cáo giữ nguyên Ô NỀN TRẮNG như thiết kế gốc */
body.theme-bong-lai nav,
body.theme-bong-lai header,
body.theme-bong-lai .header-container + div, /* Thanh khuyến cáo nằm ngay dưới header */
body.theme-bong-lai [class*="khuyen-cao"],
body.theme-bong-lai .nut-tinh-nang {
    background: rgba(238, 242, 248, 0.95) !important;
    border: none !important;
    box-shadow: none !important; /* Xóa sạch bóng đổ hướng lên layer ảnh nền */
}

/* 3. Xử lý phần Banner (nếu có chứa tiêu đề) */
body.theme-bong-lai .banner-trang, 
body.theme-bong-lai .header-container {
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
}

/* 4. Đảm bảo hiệu ứng nhấp nháy vàng cũng không có bóng đổ nặng */
@keyframes nhap-nhay-vang {
    0%, 100% { 
        opacity: 1; 
        filter: drop-shadow(0 1px 1px rgba(0,0,0,0.1)) !important; 
    }
    50%      { 
        opacity: 0.9; 
        filter: drop-shadow(0 1px 1px rgba(0,0,0,0.05)) !important; 
    }
}

/* ==============================================================
   🌟 UPDATE: THANH TẨY BÓNG ĐỔ TĂNG CƯỜNG (danh-sach & toàn trang)
   - Tên web + thanh khuyến cáo đang bị shadow QUÁ TO -> ép về 10% hoặc 0%.
   - Nguyên nhân: bóng to đến từ class Tailwind drop-shadow-* / text-shadow
     gắn thẳng trong HTML nên các rule cũ chưa với tới.
   - Toàn bộ selector dưới đây đều là loại RẺ (class/attribute/kề nhau),
     KHÔNG dùng :has() hay * toàn cục -> không gây lag trở lại.
   ============================================================== */

/* 1. Mọi class drop-shadow-* của Tailwind (drop-shadow-md/lg/xl/2xl...) 
      -> ghìm về bóng mỏng 10% để chữ vẫn hơi nổi nhưng không lem nhem */
body.theme-bong-lai [class*="drop-shadow"] {
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1)) !important;
}

/* 2. Vùng header/nav (tên web nằm đây): xóa sạch text-shadow, 
      bóng filter đưa về 0% - phạm vi chỉ vài chục phần tử nên cực nhẹ */
body.theme-bong-lai header *,
body.theme-bong-lai nav * {
    text-shadow: none !important;
}
body.theme-bong-lai header h1,
body.theme-bong-lai header h1 span,
body.theme-bong-lai nav h1,
body.theme-bong-lai nav h1 span,
body.theme-bong-lai header a[href="/"] span {
    filter: none !important;          /* 0% - tên web sắc nét như khắc lên nền */
    text-shadow: none !important;
}
/* Riêng chữ vàng gradient giữ đúng bóng mỏng 10% cho có chiều sâu nhẹ
   (rule này specificity cao hơn nên thắng dòng filter:none phía trên) */
body.theme-bong-lai header .chu-vang-gradient,
body.theme-bong-lai nav .chu-vang-gradient,
body.theme-bong-lai .chu-vang-gradient {
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1)) !important;
    text-shadow: none !important;
}

/* 3. THANH KHUYẾN CÁO: GIỮ NGUYÊN Ô TRẮNG, CHỈ TẨY BÓNG ĐỔ VỀ 0%
      - Ô trắng nằm đè lên ranh giới ảnh bìa / vùng nội dung, box-shadow của nó
        đổ ngược LÊN TRÊN thành 1 quầng xám mờ lem vào đuôi ảnh bìa.
      - Xóa sạch box-shadow (0%) trên chính ô + mọi phần tử con bên trong,
        kèm cả filter drop-shadow phòng khi bóng vẽ bằng filter.
      - .tay-bong-khuyen-cao là class do theme-manager.js TỰ GẮN vào đúng
        phần tử chứa chữ "KHUYẾN CÁO" lúc tải trang (bắn trúng 100% dù
        bản live đặt tên class gì đi nữa). */
body.theme-bong-lai .the-thong-tin,
body.theme-bong-lai .the-thong-tin *,
body.theme-bong-lai .tay-bong-khuyen-cao,
body.theme-bong-lai .tay-bong-khuyen-cao *,
body.theme-bong-lai [class*="khuyen-cao"],
body.theme-bong-lai [class*="canh-bao"],
body.theme-bong-lai [class*="thong-bao-dau-trang"] {
    box-shadow: none !important;       /* bóng đổ = 0% */
    text-shadow: none !important;
    filter: none !important;           /* diệt cả drop-shadow nếu bóng vẽ bằng filter */
}

/* ==============================================================
   👁️ NÚT "KHAI MỞ MẮT ÂM DƯƠNG": CHỮ TRƠN XANH CÔ BAN
   (Theo yêu cầu: bỏ viền nền vàng, cho giống hệt các chữ nút bên cạnh.
    Vẫn ép -webkit-text-fill-color để chống kiểu chữ gradient trong suốt
    từng khiến nút tàng hình trên nền trắng.) */
body.theme-bong-lai #btnNapVip,
body.theme-bong-lai .nut-vip-vang,
body.theme-bong-lai #btnNapVip *,
body.theme-bong-lai .nut-vip-vang * {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--coban) !important;
    -webkit-text-fill-color: var(--coban) !important;
    text-shadow: none !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    visibility: visible !important;
}
/* ⭐ HOVER GIỐNG HỆT CÁC NÚT TÍNH NĂNG KHÁC (Âm Thanh, Đài Chấp Pháp...):
   chỉ vào -> KHUNG NỀN XANH CÔ BAN + CHỮ TRẮNG.
   (Trước đây chữ bị ép cô ban cả lúc hover -> cô ban trên nền cô ban = mất chữ;
    riêng Khai Mở Mắt Âm Dương còn bị ép nền trong suốt nên không có cả khung.)
   Các rule hover đặt SAU với !important nên thắng rule gốc phía trên. */
body.theme-bong-lai #btnNapVip:hover,
body.theme-bong-lai .nut-vip-vang:hover {
    background: var(--coban) !important;
    border-radius: 9999px !important;
    padding: 0.45rem 1.1rem !important;
    box-shadow: 0 4px 14px rgba(0, 71, 171, 0.35) !important;
}
body.theme-bong-lai #btnNapVip:hover,
body.theme-bong-lai .nut-vip-vang:hover,
body.theme-bong-lai #btnNapVip:hover *,
body.theme-bong-lai .nut-vip-vang:hover * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: transparent;
}
body.theme-bong-lai #btnNapVip:hover { background: var(--coban) !important; }
body.theme-bong-lai .nut-vip-vang:hover { background: var(--coban) !important; }

/* Trân Các + Túi Càn Khôn: chữ cô ban lúc thường, hover -> chữ TRẮNG trên khung xanh
   (trước bị ép cô ban !important cả lúc hover nên chìm mất vào nền hover) */
body.theme-bong-lai #btnTranCac,
body.theme-bong-lai #btnTuiDo,
body.theme-bong-lai #btnTranCac *,
body.theme-bong-lai #btnTuiDo * {
    color: var(--coban) !important;
    text-shadow: none !important;
}
body.theme-bong-lai #btnTranCac:hover,
body.theme-bong-lai #btnTuiDo:hover {
    background: var(--coban) !important;
    border-radius: 9999px !important;
    box-shadow: 0 4px 14px rgba(0, 71, 171, 0.35) !important;
}
body.theme-bong-lai #btnTranCac:hover,
body.theme-bong-lai #btnTuiDo:hover,
body.theme-bong-lai #btnTranCac:hover *,
body.theme-bong-lai #btnTuiDo:hover * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ==============================================================
   🏷️ LÀM RÕ HASHTAG TRÊN THẺ TRUYỆN (theme trắng)
   - Hashtag đang là chữ xanh ngọc nhạt (emerald-700) cỡ 9px trên nền
     mờ 20% -> chìm, khó đọc trên nền trắng.
   - Fix: chữ xanh ngọc ĐẬM hơn hẳn (#065f46), đậm nét, tăng nhẹ cỡ chữ
     lên 10.5px, nền ngọc nhạt đặc hơn + viền rõ để thành "viên kẹo" gọn.
   - Selector bắt theo tổ hợp class Tailwind của chính thẻ tag
     (span có "emerald" + "rounded-full") -> rẻ, trúng đích, không lag,
     và bắt được cả tag ở các trang khác dùng cùng kiểu. */
body.theme-bong-lai span[class*="emerald"][class*="rounded-full"],
body.theme-bong-lai span.text-emerald-700 {
    color: #065f46 !important;                      /* xanh ngọc đậm - đọc rõ */
    -webkit-text-fill-color: #065f46 !important;
    background: rgba(16, 185, 129, 0.14) !important; /* nền ngọc nhạt đặc hơn */
    border: 1px solid rgba(5, 150, 105, 0.55) !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em;
    text-shadow: none !important;
}

/* ==============================================================
   ✨ TÊN MIỀN "VOTHANCAC.ID.VN" TRÊN BANNER: VÀNG KIM NHÁY SÁNG
   - Class .ten-mien-vang do FE-CORE.JS tự gắn vào đúng đoạn chữ tên miền.
   - Vàng kim đậm + quầng sáng vàng thở nhịp 1.6s để tôn nổi bật tên miền.
   - Chỉ animate text-shadow/filter trên 1 đoạn chữ nhỏ xíu -> không tốn máy.
   - Tôn trọng người dùng tắt chuyển động (prefers-reduced-motion). */
.ten-mien-vang {
    color: #f59e0b !important;                       /* vàng kim đậm */
    -webkit-text-fill-color: #f59e0b !important;     /* chống chữ gradient trong suốt */
    font-weight: 900 !important;
    letter-spacing: 0.06em;
    opacity: 1 !important;
    animation: vtc-nhay-vang 2.2s ease-in-out infinite;
}
/* ⭐ Đã giảm độ lóa theo yêu cầu: quầng sáng nhỏ + dịu, nhịp chậm rãi hơn */
@keyframes vtc-nhay-vang {
    0%, 100% {
        text-shadow: 0 0 2px rgba(245, 158, 11, 0.2);
        filter: brightness(1);
    }
    50% {
        text-shadow: 0 0 6px rgba(250, 204, 21, 0.45);
        filter: brightness(1.12);
    }
}

/* ✨ Nháy nhẹ luân phiên cho các chữ còn lại của dòng phụ đề:
   chỉ animate opacity (chạy trên compositor - siêu nhẹ, không gây lag).
   Mỗi chữ được FE-CORE gán animation-delay khác nhau -> nháy THAY NHAU
   như sóng chạy qua dòng chữ. */
.chu-nhay-nhe {
    display: inline-block;
    animation: vtc-nhay-nhe 2.6s ease-in-out infinite;
}
@keyframes vtc-nhay-nhe {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
    .chu-nhay-nhe { animation: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .ten-mien-vang { animation: none; text-shadow: 0 0 6px rgba(250, 204, 21, 0.6); }
}

/* ==============================================================
   💬 FIX SỐ BÌNH LUẬN / LƯỢT XEM TRÊN ẢNH BÌA (Bí Tịch Đỉnh Cấp...)
   - Nguyên nhân: theme có rule đổi .text-white thành chữ ĐEN (để đọc được
     trên nền trắng), nhưng con số 💬/👁️ này nằm trên DẢI GRADIENT ĐEN
     ở chân ảnh bìa -> thành chữ đen trên nền đen, gần như vô hình.
   - Fix: NGOẠI LỆ - mọi chữ nằm bên trong lớp phủ gradient đen
     (class chứa "from-black") giữ nguyên MÀU TRẮNG + bóng mỏng cho nét.
   - Selector attribute đơn giản, rẻ, không ảnh hưởng chống lag; tự ăn
     cho mọi khu vực dùng cùng kiểu overlay (đề cử, xem nhiều, bìa truyện...). */
body.theme-bong-lai [class*="from-black"],
body.theme-bong-lai [class*="from-black"] span,
body.theme-bong-lai [class*="from-black"] .text-white,
body.theme-bong-lai [class*="from-black"] * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important; /* bóng mỏng cho số nét hẳn */
}
/* ==============================================================
   🐉 LINH THÚ TRANG TRÍ BAY LƯỢN (admin tự tải file lên)
   ============================================================== */
.linh-thu-bay {
    left: -22%;
    animation-name: linh-thu-bay-ngang;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    filter: drop-shadow(0 10px 22px rgba(0, 40, 90, .18));
}
.linh-thu-bay.bay-nguoc {
    left: auto; right: -22%;
    animation-name: linh-thu-bay-nguoc;
}
@keyframes linh-thu-bay-ngang {
    0%   { transform: translate3d(0, 0, 0); }
    25%  { transform: translate3d(35vw, -3.5vh, 0); }
    50%  { transform: translate3d(68vw, 2.5vh, 0); }
    75%  { transform: translate3d(102vw, -2vh, 0); }
    100% { transform: translate3d(140vw, 0, 0); }
}
@keyframes linh-thu-bay-nguoc {
    0%   { transform: translate3d(0, 0, 0); }
    25%  { transform: translate3d(-35vw, -3.5vh, 0); }
    50%  { transform: translate3d(-68vw, 2.5vh, 0); }
    75%  { transform: translate3d(-102vw, -2vh, 0); }
    100% { transform: translate3d(-140vw, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    #linhThuTrangTri { display: none !important; }
}