/* Put your theme custom styles here */ .uk-modal-container .uk-modal-dialog { width: 900px; } .uk-modal.uk-open { opacity: 1; z-index: 2000; overflow: visible; } span#gd-bank-code { text-transform: uppercase !important; } .tb-avatar-wrap img { width: 120px; height: 120px; } .uk-text-truncate { max-width: 60%; } nav.uk-navbar.uk-navbar-justify, .horizontal-left, .stacked-center-split-a, .stacked-center-c { padding: 10px 0; } .uk-navbar-nav { gap: 15px !important; } .stacked-center-split-a .tb-member-name, .horizontal-justify .tb-member-name { display: none; } /* Đảm bảo header luôn ở lớp trên cùng */ header.tm-header, header.tm-header .uk-navbar-container { position: relative; /* để z-index có hiệu lực */ z-index: 2000; overflow: visible; } /* Phòng xa: tăng z-index cho dropdown (nếu bạn đã chỉnh UIkit trước đó) */ .uk-navbar-dropdown, .uk-dropdown { z-index: 2100; /* lớn hơn header một chút */ } /* Nếu chỉ lỗi ở dark mode */ :root[data-theme="dark"] header.tm-header { z-index: 2000; } .home-hero, .uk-section, .whatever-under-header { z-index: auto; /* hoặc xoá transform/filter không cần thiết */ } /* 1) Nâng lớp cho toàn bộ top header (khối chứa dropnav) */ .tm-headerbar-top { position: relative; z-index: 5000; /* phải cao hơn khối menu bên dưới */ } /* 2) Đảm bảo không bị cắt bởi container của chính nó */ .tm-headerbar-top .uk-container, .tm-headerbar-top .uk-padding-small { overflow: visible; } /* 3) (không bắt buộc) đặt lớp thấp hơn cho khối menu bên dưới */ .uk-navbar-container.stacked-center-c { position: relative; z-index: 1000; } /* 4) (phòng xa) tăng lớp cho chính dropdown trong #member-menu */ #member-menu .uk-dropdown, #member-menu .uk-drop, #member-menu .uk-navbar-dropdown { z-index: 5100; } .uk-navbar { position: relative; } /* đảm bảo vị trí gốc cho overlay */ .search-overlay { top: 0; right: 12px; z-index: 1025; height: 100%; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--uk-navbar-background, #fff); box-shadow: 0 2px 12px rgba(0, 0, 0, .08); border-radius: 10px; width: clamp(320px, 42vw, 640px); } .search-overlay .uk-search-navbar { width: 100%; } @media (max-width: 959.98px) { .search-overlay { left: 12px; right: 12px; width: auto; border-radius: 8px; } } /* ---------- DARK (override khi ) ---------- */ :root[data-theme="dark"] .story-card { background: #151a23; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); border: 1px solid rgba(255, 255, 255, .06); } :root[data-theme="dark"] .meta-label { color: #e5e7eb; } :root[data-theme="dark"] .meta-value, :root[data-theme="dark"] .meta-value.status a { color: #d1d5db; } body { font-size: 14px; color: #4c5258; letter-spacing: .5px; font-family: Roboto, sans-serif; background: url('../images/bg-site.jpg') center/cover no-repeat; background-size: cover; } body { background: var(--bg); color: var(--fg); } a { color: var(--fg); opacity: .9; } .text-muted { color: var(--muted); } .card { background: var(--surface); } .uk-h3, h3 { font-size: 15px; } header.tm-header .tm-headerbar-default.tm-headerbar.tm-headerbar-top { height: 65px; background: rgb(255 246 249 / 54%); border-bottom: 1px solid #e0f0fb; } :root[data-theme="dark"] header.tm-header .tm-headerbar-default.tm-headerbar.tm-headerbar-top { background: #0f141b; /* dải header tối */ border-bottom: 1px solid rgba(255, 255, 255, .08); } .uk-navbar-item, .uk-navbar-nav>li>a, .uk-navbar-toggle { min-height: 30px !important; } .uk-navbar-container { border-bottom: 1px solid #e0f0fb; box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important; background: rgb(255 255 255 / 66%) !important; } :root[data-theme="dark"] .uk-navbar-container { background: #0f141b !important; /* bắt buộc !important để thắng rule light */ border-bottom: 1px solid rgba(255, 255, 255, .08) !important; box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .5) !important; } .uk-navbar-container .uk-container.uk-flex.uk-flex-middle { height: 53px; } .uk-dropdown-nav>li>a { color: #000000; padding: 5px 0; } :root[data-theme="dark"] .uk-dropdown { background: #151a23; color: #e5e7eb; box-shadow: 0 5px 12px rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .06); } .uk-navbar-nav>li>a { border-radius: 8px; font-size: 16px; color: #0c3b5c; text-transform: none; transition: .1s ease-in-out; transition-property: color, background-color; font-weight: 500; padding: 3px 5px; } :root[data-theme="dark"] .uk-navbar-nav>li>a { color: #c5c5c5; } .uk-navbar-nav>li>a:hover { color: #32393f; background-color: #f5f6f7; } .uk-navbar-dropdown-nav>li>a { color: #000000; } :root[data-theme="dark"] .uk-navbar-dropdown-nav>li>a { color: #d3d3d3; } .uk-navbar-dropdown-nav>li>a:hover { color: #fb768b; font-weight: 700; } a.uk-logo img { max-width: 150px; max-height: 30px; } .btn-primary { color: #fff; background-color: #f596c2; border-color: #f596c2; } .btn-primary:hover { color: #fff; background-color: #037de2; border-color: #037de2; } .uk-link-toggle:hover .uk-link, .uk-link:hover, a:hover { color: #0f6ecd; text-decoration: none; } .btn-primary:focus { color: #fff; background-color: #037de2; border-color: #037de2; box-shadow: 0 0 0 .25rem rgba(49, 132, 253, .5); } .uk-button { border-radius: 5px; border: 1px solid; text-transform: none; padding: 4px 8px; font-size: 13px; line-height: 1.5; font-weight: 500; } .uk-search-navbar.stacked-left { width: 440px; } .uk-search-navbar .uk-search-input { border-radius: 8px; } .uk-breadcrumb>*>* { color: #000000; } :root[data-theme="dark"] .uk-breadcrumb>*>* { color: #cbd5e1; /* xám nhạt để dịu mắt */ } .uk-breadcrumb>:nth-child(n+2):not(.uk-first-column)::before { margin: 0 10px; color: #000000; } :root[data-theme="dark"] .uk-breadcrumb>:nth-child(n+2):not(.uk-first-column)::before { margin: 0 10px; color: #e9e9e9; } .uk-breadcrumb>:last-child>a:not([href]), .uk-breadcrumb>:last-child>span { color: #3F51B5; } :root[data-theme="dark"] .uk-breadcrumb>:last-child>a:not([href]), :root[data-theme="dark"] .uk-breadcrumb>:last-child>span { color: #8ab4ff; /* nhấn màu breadcrumb cuối ở dark */ } /* Visiblity helpers cho toàn site */ .if-login, .if-logout { display: none !important; } /* mặc định ẩn cả hai để tránh FOUC */ body.logged-in .if-login { display: revert !important; } /* thành viên -> show khu vực if-login */ body:not(.logged-in) .if-logout { display: revert !important; } /* khách -> show khu vực if-logout */ /* Tùy chọn: ép kiểu hiển thị khi cần (nếu element cần flex/grid/inline) */ body.logged-in .if-login.if-flex, body:not(.logged-in) .if-logout.if-flex { display: flex !important; } body.logged-in .if-login.if-inline, body:not(.logged-in) .if-logout.if-inline { display: inline !important; } body.logged-in .if-login.if-block, body:not(.logged-in) .if-logout.if-block { display: block !important; } .tb-member-toggle { display: flex; align-items: center; gap: 8px; } .tb-member-avatar { width: 32px; height: 32px; object-fit: cover; } .tb-member-name { font-weight: 700; text-transform: capitalize; margin-left: 5px; /* Tuỳ chỉnh nhanh */ --stroke-width: 1px; /* độ dày viền */ --stroke-color: hotpink; /* màu viền */ --speed: 6s; /* tốc độ chạy gradient */ /* Rainbow gradient chạy ngang */ background-image: linear-gradient(90deg, #ff0000, #ff7a00, #ffee00, #00e400, #00d5ff, #0055ff, #7a00ff, #ff0000); background-size: 200% 100%; background-clip: text; -webkit-background-clip: text; /* Làm chữ trong suốt để lộ gradient */ color: transparent; -webkit-text-fill-color: transparent; /* Chạy gradient từ trái sang phải */ animation: rainbow-slide var(--speed) linear infinite; } /* Fallback viền cho trình duyệt không hỗ trợ text-stroke */ @supports not (-webkit-text-stroke: 1px hotpink) { .tb-member-name { text-shadow: 1px 0 0 var(--stroke-color), -1px 0 0 var(--stroke-color), 0 1px 0 var(--stroke-color), 0 -1px 0 var(--stroke-color), 1px 1px 0 var(--stroke-color), -1px 1px 0 var(--stroke-color), 1px -1px 0 var(--stroke-color), -1px -1px 0 var(--stroke-color); } } @keyframes rainbow-slide { 100% { background-position: 0% 0; } 0% { background-position: 200% 0; } } .uk-article img { max-width: 100%; height: auto; } .uk-card .uk-card-title a { text-decoration: none; } /* canh cột và không xuống dòng ở cột "Chương ..." */ .gd-bought-table .col-idx { width: 2.5rem; white-space: nowrap; } .gd-bought-table .col-chap { white-space: nowrap; } /* mobile: xếp lại cho dễ đọc */ @media (max-width: 640px) { .gd-bought-table { font-size: 14px; } .gd-bought-table .col-idx { width: 2rem; } } .btn-follow .icon { margin-right: 6px; display: inline-block; vertical-align: middle } .btn-follow .label { vertical-align: middle } /* =========================== DARK THEME & RESPONSIVE ADD-ONS (append to the end of main.css) =========================== */ /* --------- Palette helpers (safe fallbacks even if not used elsewhere) --------- */ :root { --dk-bg-900: #0f131a; --dk-bg-800: #141a23; --dk-bg-700: #1a2230; --dk-elev: #0e1520; --dk-card: #151a23; --dk-border: rgba(255, 255, 255, .08); --dk-soft-border: rgba(255, 255, 255, .06); --dk-text: #d6d9df; --dk-muted: #9aa3b2; --dk-dim: #7b8597; --dk-link: var(--ui-primary); --dk-link-hover: var(--ui-primary-hover); --dk-success: #10b981; --dk-danger: #ef4444; --dk-warning: #f59e0b; } /* If site uses OS dark automatically and hasn't set data-theme */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; } } /* ================= DARK MODE (html|:root[data-theme=dark]) ================= */ :root[data-theme="dark"], html[data-theme="dark"] { color-scheme: dark; } /* Base */ :root[data-theme="dark"] body { color: var(--dk-text); } :root[data-theme="dark"] a { color: var(--dk-link); } :root[data-theme="dark"] a:hover { color: var(--dk-link-hover); } :root[data-theme="dark"] .text-muted, :root[data-theme="dark"] .uk-text-meta, :root[data-theme="dark"] .uk-text-muted { color: var(--dk-muted) !important; } /* Sections */ :root[data-theme="dark"] .uk-section-muted { background: var(--dk-bg-800); } :root[data-theme="dark"] .uk-section-primary { background: #0d1a2b; } :root[data-theme="dark"] .uk-container { color: var(--dk-text); } /* Header / Navbar / Dropdown */ :root[data-theme="dark"] .uk-navbar-container { background: rgba(15, 19, 26, .9); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--dk-soft-border); } :root[data-theme="dark"] .uk-navbar-nav>li>a, :root[data-theme="dark"] .uk-navbar-item, :root[data-theme="dark"] .uk-navbar-toggle { color: var(--dk-text); } :root[data-theme="dark"] .uk-navbar-nav>li:hover>a, :root[data-theme="dark"] .uk-navbar-nav>li.uk-open>a { background: transparent; color: #fff; } :root[data-theme="dark"] .uk-navbar-dropdown, :root[data-theme="dark"] .uk-dropdown { background: var(--dk-bg-800); border: 1px solid var(--dk-soft-border); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); } :root[data-theme="dark"] .uk-dropdown-nav>li>a { color: var(--dk-text); } :root[data-theme="dark"] .uk-dropdown-nav>li>a:hover { background: rgba(255, 255, 255, .04); color: #fff; } /* Offcanvas */ :root[data-theme="dark"] .uk-offcanvas-bar { background: #0c111a; color: var(--dk-text); border-right: 1px solid var(--dk-soft-border); } :root[data-theme="dark"] .uk-offcanvas-bar .uk-nav-default>li>a { color: var(--dk-text); } :root[data-theme="dark"] .uk-offcanvas-bar .uk-nav-default>li>a:hover { color: #fff; } /* Modal */ :root[data-theme="dark"] .uk-modal-dialog { background: var(--dk-bg-800); color: var(--dk-text); border: 1px solid var(--dk-soft-border); box-shadow: 0 12px 36px rgba(0, 0, 0, .6); } /* Cards / Articles */ :root[data-theme="dark"] .uk-card, :root[data-theme="dark"] .uk-card-default, :root[data-theme="dark"] .card, :root[data-theme="dark"] .story-card { background: var(--dk-card) !important; color: var(--dk-text); border: 1px solid var(--dk-soft-border); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); } :root[data-theme="dark"] .uk-article { color: var(--dk-text); } :root[data-theme="dark"] .uk-article a { color: var(--dk-link); } :root[data-theme="dark"] .uk-article pre, :root[data-theme="dark"] .uk-article code { background: #0e1622; border-color: var(--dk-soft-border); color: #dbe4ee; } /* Chips / Pills / Labels */ :root[data-theme="dark"] .chip { background: #1b2432; color: var(--dk-text); border: 1px solid var(--dk-soft-border); } :root[data-theme="dark"] .chip-outline { background: transparent; color: var(--dk-text); border: 1px solid var(--dk-link); } :root[data-theme="dark"] .uk-label { background: #1e2634; color: var(--dk-text); } /* Breadcrumb + Pagination */ :root[data-theme="dark"] .uk-breadcrumb>*>* { color: var(--dk-muted); } :root[data-theme="dark"] .uk-breadcrumb>*>*:hover { color: #fff; } :root[data-theme="dark"] .uk-pagination>*>* { background: #101622; border: 1px solid var(--dk-soft-border); color: var(--dk-text); } :root[data-theme="dark"] .uk-pagination>.uk-active>*, :root[data-theme="dark"] .uk-pagination>*>*:hover { background: #172033; border-color: var(--dk-border); color: #fff; } /* Tabs / Accordion */ :root[data-theme="dark"] .uk-tab>*>a { color: var(--dk-muted); border-bottom-color: transparent; } :root[data-theme="dark"] .uk-tab>.uk-active>a { color: #fff; border-color: var(--dk-link); } :root[data-theme="dark"] .uk-accordion-title { color: var(--dk-text); } :root[data-theme="dark"] .uk-accordion-content { color: var(--dk-text); } /* Alerts */ :root[data-theme="dark"] .uk-alert { background: #121a26; border: 1px solid var(--dk-soft-border); color: var(--dk-text); } :root[data-theme="dark"] .uk-alert-primary { background: #0d1a2b; border-color: #163557; } :root[data-theme="dark"] .uk-alert-success { background: #0f241b; border-color: #164a35; color: #c2f2dd; } :root[data-theme="dark"] .uk-alert-warning { background: #241b0f; border-color: #6b4e16; color: #ffe2b3; } :root[data-theme="dark"] .uk-alert-danger { background: #261316; border-color: #5a1f27; color: #ffc7cf; } /* Forms */ :root[data-theme="dark"] .uk-input, :root[data-theme="dark"] .uk-textarea, :root[data-theme="dark"] .uk-select, :root[data-theme="dark"] .uk-search-input { background-color: #0e1520; color: var(--dk-text); border: 1px solid var(--dk-soft-border); } :root[data-theme="dark"] .uk-input:focus, :root[data-theme="dark"] .uk-textarea:focus, :root[data-theme="dark"] .uk-select:focus, :root[data-theme="dark"] .uk-search-input:focus { border-color: var(--dk-link); box-shadow: 0 0 0 3px rgba(62, 168, 255, .2); } :root[data-theme="dark"] ::placeholder { color: var(--dk-dim); } /* Buttons */ :root[data-theme="dark"] .uk-button-default { background: #131a26; color: #e8eef6; border: 1px solid var(--dk-soft-border); } :root[data-theme="dark"] .uk-button-default:hover { background: #182235; border-color: var(--dk-border); } :root[data-theme="dark"] .uk-button-primary { background: #2563eb; color: #fff; border-color: transparent; } :root[data-theme="dark"] .uk-button-danger { background: #b91c1c; color: #fff; } /* Tables */ :root[data-theme="dark"] .uk-table { color: var(--dk-text); } :root[data-theme="dark"] .uk-table th { background: #0f1622; color: #cfd6e3; border-bottom: 1px solid var(--dk-border); } :root[data-theme="dark"] .uk-table td { border-top: 1px solid var(--dk-soft-border); } :root[data-theme="dark"] .uk-table-striped tbody tr:nth-of-type(odd) { background: #0d141f; } :root[data-theme="dark"] .uk-table-hover tbody tr:hover { background: #131c2a; } /* Tooltips */ :root[data-theme="dark"] .uk-tooltip { background: #0f1622; color: #eef4ff; } /* Scrollbar (webkit) */ :root[data-theme="dark"] *::-webkit-scrollbar { height: 10px; width: 10px; } :root[data-theme="dark"] *::-webkit-scrollbar-thumb { background: #223049; border-radius: 6px; } :root[data-theme="dark"] *::-webkit-scrollbar-thumb:hover { background: #2d4064; } /* --------- THEME-SPECIFIC COMPONENTS --------- */ /* Story header bits already partially dark; complete the rest */ :root[data-theme="dark"] .story-title { color: #e8ecf2; } :root[data-theme="dark"] .no-cover { background: #0f1622; color: #5f6b81; } :root[data-theme="dark"] .action-row .uk-button { border-color: var(--dk-soft-border); } /* Meta rows (label/value) */ :root[data-theme="dark"] .meta-label { color: var(--dk-dim); } :root[data-theme="dark"] .meta-value { color: var(--dk-text); } :root[data-theme="dark"] .meta-value.status a { color: #7dd3fc; } /* Chapters list */ :root[data-theme="dark"] .chap-card { background: var(--dk-card); border: 1px solid var(--dk-soft-border); } :root[data-theme="dark"] .chap-link { color: #cfe3ff; } :root[data-theme="dark"] .chap-link:hover { color: #fff; text-decoration: underline; } :root[data-theme="dark"] .chap-date { color: var(--dk-muted); } :root[data-theme="dark"] .chap-toolbar { background: #0f1622; border: 1px solid var(--dk-soft-border); } /* Follow / Like */ :root[data-theme="dark"] .btn-follow { background: #111a27; border: 1px solid var(--dk-soft-border); color: #e5ebf3; } :root[data-theme="dark"] .btn-follow:hover { background: #172235; } /* Wallet / Topup */ :root[data-theme="dark"] .balance-highlight { color: #ffcc66; } :root[data-theme="dark"] .gd-btn-buy, :root[data-theme="dark"] .gd-btn-buy-story { background: #1a2942; color: #e8f0ff; border: 1px solid var(--dk-soft-border); } :root[data-theme="dark"] .gd-btn-buy:hover, :root[data-theme="dark"] .gd-btn-buy-story:hover { background: #203458; border-color: var(--dk-border); } /* Bought table container */ .gd-bought-table { overflow-x: auto; -webkit-overflow-scrolling: touch; } .gd-bought-table table { min-width: 560px; } :root[data-theme="dark"] .gd-bought-table table { background: transparent; } :root[data-theme="dark"] .gd-bought-table thead th { background: #0f1622; color: #cfd6e3; } :root[data-theme="dark"] .gd-bought-table tbody tr { border-bottom: 1px solid var(--dk-soft-border); } /* Search form */ :root[data-theme="dark"] .uk-search-default { background: #0e1520; border: 1px solid var(--dk-soft-border); border-radius: 8px; } :root[data-theme="dark"] .uk-search-input { color: #e6edf6; } /* Footer */ :root[data-theme="dark"] footer, :root[data-theme="dark"] footer.uk-section { background: #0b1018; color: var(--dk-muted); } :root[data-theme="dark"] footer a { color: var(--dk-link); } /* =================== RESPONSIVE ENHANCEMENTS =================== */ /* Breadcrumb: allow long trails on small screens */ .uk-breadcrumb { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } .uk-breadcrumb>*>* { display: inline-block; } div#chap-content-box { padding: 0 20px; } @media (min-width: 1000px) { div#chap-content-box { padding: 0 40px; } } /* Action buttons stack on small screens */ @media (max-width: 640px) { .action-row { gap: 10px; } .action-row .uk-button { flex: 1 1 auto; width: 100%; } } /* Story card padding and grid tweaks */ @media (max-width: 960px) { .story-card { padding: 14px; } .single-chap .uk-container { padding: 0; } } @media (max-width: 640px) { .story-card { padding: 12px; border-radius: 10px; } .story-title { font-size: 22px; } } /* Cover image height hint (when using fixed placeholders) */ @media (max-width: 640px) { .no-cover { height: 220px; } } /* Chapters toolbar -> vertical on small screens (some exists; ensure tighter spacing) */ @media (max-width: 640px) { .chap-toolbar { gap: 8px; } .chap-toolbar .right { width: 100%; } } /* Tables: ensure scroll on narrow devices (global) */ @media (max-width: 768px) { .uk-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* Pagination: wrap nicely */ @media (max-width: 480px) { .uk-pagination { flex-wrap: wrap; row-gap: 8px; } } /* Navbar spacing on mobile */ @media (max-width: 640px) { .uk-navbar-item, .uk-navbar-nav>li>a { padding-left: 10px; padding-right: 10px; } } /* Search input width behavior */ @media (max-width: 480px) { .uk-search { width: 100%; } .uk-search-input { width: 100%; } } /* Cards grid gutters */ @media (max-width: 960px) { .uk-grid-small>[class*="uk-width"] { padding-left: 8px; } .uk-grid-small { margin-left: -8px; } } @media (max-width: 640px) { .uk-grid-small>[class*="uk-width"] { padding-left: 6px; } .uk-grid-small { margin-left: -6px; } } /* Offcanvas nav link spacing for touch */ @media (max-width: 960px) { .uk-offcanvas-bar .uk-nav-default>li>a { padding: 10px 0; } } /* Story meta grid (fallback if template uses .meta grid) */ @media (max-width: 960px) { .meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } } @media (max-width: 640px) { .meta { grid-template-columns: 1fr; } } /* Wallet topup layout helpers */ @media (max-width: 640px) { .gd-denom-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } } @media (max-width: 420px) { .gd-denom-row { grid-template-columns: 1fr; } } /* Footer: reduce padding on mobile sections */ @media (max-width: 640px) { footer.uk-section { padding-top: 18px; padding-bottom: 18px; } } /* Utility: make any long chips wrap nicely on phones */ @media (max-width: 480px) { .chip, .chip-outline { display: inline-flex; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* =========================== LOGIN / REGISTER MODALS — RESPONSIVE FIXES (append after previous CSS) =========================== */ /* Base modal sizing for comfortable desktops */ .uk-modal-dialog { width: min(560px, calc(100vw - 48px)); max-width: calc(100vw - 32px); max-height: 85vh; border-radius: 14px; overflow: hidden; /* keep sticky header/footer clean */ } /* Improve default spacing inside modal */ .uk-modal-header, .uk-modal-body, .uk-modal-footer { padding-left: 24px; padding-right: 24px; } .uk-modal-header, .uk-modal-footer { padding-top: 14px; padding-bottom: 14px; } .uk-modal-body { padding-top: 16px; padding-bottom: 16px; } /* Short screens (landscape phones or small laptops) */ @media (max-height: 720px) { .uk-modal-dialog { max-height: 92vh; display: flex; flex-direction: column; } .uk-modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; } } /* ========== FORM LAYOUT INSIDE AUTH MODALS ========== */ /* Make all inputs/buttons naturally fill width */ .uk-modal-dialog form .uk-input, .uk-modal-dialog form .uk-textarea, .uk-modal-dialog form .uk-select, .uk-modal-dialog form .uk-search-input { width: 100%; } /* Compact vertical rhythm */ .uk-modal-dialog form .uk-form-row, .uk-modal-dialog form .uk-margin, .uk-modal-dialog form .uk-margin-small { margin-top: 10px; margin-bottom: 10px; } /* Horizontal → stacked on small screens */ @media (max-width: 640px) { .uk-form-horizontal .uk-form-label { width: 100%; margin-bottom: 6px; text-align: left; float: none; display: block; } .uk-form-horizontal .uk-form-controls { margin-left: 0; } } /* Optional: two-column quick fields (e.g., first/last name) */ .auth-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 640px) { .auth-grid-2 { grid-template-columns: 1fr; gap: 10px; } } /* Keep remember/forgot row tidy */ .auth-aux-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; } @media (max-width: 640px) { .auth-aux-row { flex-direction: column; align-items: stretch; gap: 8px; } .auth-aux-row .uk-button { width: 100%; } } /* Main action buttons grouped responsively */ .auth-actions { display: flex; gap: 12px; margin-top: 12px; } @media (max-width: 640px) { .auth-actions { flex-direction: column; } .auth-actions .uk-button { width: 100%; } } /* Social login buttons: stacked on mobile */ .auth-social { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; } @media (max-width: 640px) { .auth-social { grid-template-columns: 1fr; } } /* Terms / helper text wraps nicely */ .auth-terms, .uk-text-small.auth-help { line-height: 1.5; word-break: break-word; } /* Tabs (login / register) become scrollable if too many */ .uk-modal-dialog .uk-tab { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; margin-bottom: 8px; } /* Error / success messaging visibility */ .auth-error, .uk-alert-danger.auth-error { font-size: 14px; line-height: 1.45; } .auth-success { font-size: 14px; line-height: 1.45; } /* Divider styling for clarity */ .auth-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 12px 0; } .auth-divider::before, .auth-divider::after { content: ""; height: 1px; background: rgba(0, 0, 0, .08); } :root[data-theme="dark"] .auth-divider::before, :root[data-theme="dark"] .auth-divider::after { background: var(--dk-soft-border); } /* Reduce visual noise on tight mobile widths */ @media (max-width: 375px) { .uk-modal-header h3, .uk-modal-header .uk-h3, .uk-modal-header .uk-h4 { font-size: 18px; } .uk-modal-dialog form .uk-button { padding-top: 10px; padding-bottom: 10px; } } /* ReCAPTCHA and similar widgets should not overflow */ .auth-captcha, .auth-captcha>* { max-width: 100%; overflow: hidden; } /* ===== Dark theme touch-ups (inherits your previous palette) ===== */ :root[data-theme="dark"] .uk-modal-dialog { background: var(--dk-bg-800); border: 1px solid var(--dk-soft-border); } :root[data-theme="dark"] .uk-modal-header, :root[data-theme="dark"] .uk-modal-footer { background: var(--dk-bg-800); border-color: var(--dk-soft-border); } :root[data-theme="dark"] .uk-modal-dialog form .uk-input, :root[data-theme="dark"] .uk-modal-dialog form .uk-textarea, :root[data-theme="dark"] .uk-modal-dialog form .uk-select { background: #0e1520; color: var(--dk-text); border: 1px solid var(--dk-soft-border); } :root[data-theme="dark"] .uk-modal-dialog form .uk-input:focus, :root[data-theme="dark"] .uk-modal-dialog form .uk-textarea:focus, :root[data-theme="dark"] .uk-modal-dialog form .uk-select:focus { border-color: var(--dk-link); box-shadow: 0 0 0 3px rgba(62, 168, 255, .2); } /* Optional subtle backdrop tint for readability on mobile */ @media (max-width: 640px) { .uk-modal { background: rgba(0, 0, 0, .35); } } /* =========================== OVERRIDE: STOP FULL-SCREEN AUTH MODALS ON MOBILE (paste after previous modal CSS so it wins) =========================== */ @media (max-width: 640px) { /* restore some outer gutter so dialog isn’t full-screen */ .uk-modal { padding: 18px !important; } /* center, constrained width/height */ .uk-modal-dialog { width: min(480px, 92vw) !important; height: auto !important; max-height: 88vh !important; margin: auto !important; border-radius: 14px !important; max-width: 100%; display: flex; flex-direction: column; padding: 0; } /* undo sticky header/footer from earlier mobile rules */ .uk-modal-header, .uk-modal-footer { position: static !important; top: auto !important; bottom: auto !important; z-index: 1; } /* scroll the body if content is long */ .uk-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 16px; } /* keep close button reachable but inside the rounded box */ .uk-modal-close-default { top: 10px !important; right: 10px !important; transform: none !important; } } /* Optional: slightly tighter on very small phones */ @media (max-width: 360px) { .uk-modal-dialog { width: 94vw !important; } } /* =========================== FOLLOW BUTTON — CHỈ SỬA ĐỘ DÀI (KHÔNG ĐỔI MÀU) Dán ở cuối main.css =========================== */ /* Gọn theo nội dung, không kéo full, không đổi màu nền/chữ */ .uk-button.btn-follow, .btn-follow.uk-button { border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; /* khoảng cách icon–text nhỏ */ padding: 6px 12px; /* thu gọn chiều ngang */ width: auto !important; /* theo nội dung */ min-width: 0 !important; /* bỏ mọi min-width của theme */ flex: 0 0 auto; /* không bị container kéo giãn */ white-space: nowrap; /* không xuống dòng chữ */ } /* Nếu nằm trong .action-row trên mobile, vẫn không full width */ @media (max-width: 640px) { .action-row .uk-button.btn-follow { width: auto !important; flex: 0 0 auto; } } /* Icon theo màu chữ nhưng không can thiệp màu chữ/nền */ .btn-follow .uk-icon, .btn-follow .icon { line-height: 0; display: inline-flex; } .btn-follow .uk-icon svg { width: 18px; height: 18px; display: block; } .btn-follow .uk-icon svg [stroke] { stroke: currentColor !important; } .btn-follow .uk-icon svg [fill] { fill: currentColor !important; } /* Rất nhỏ thì còn gọn nữa */ @media (max-width: 360px) { .uk-button.btn-follow { padding: 5px 10px; } } /* VIP Story box – center layout + prominent styling (light & dark) */ /* reset inline styles coming from HTML */ .gd-vip-storybox { /* center the box */ max-width: 720px; margin: 16px auto !important; text-align: center; /* look & feel (light) */ background: #ffffff !important; border: 1px solid #ffd5e6 !important; border-radius: 12px !important; padding: 18px 20px !important; box-shadow: 0 10px 24px rgba(255, 100, 160, .12), 0 1px 0 rgba(0, 0, 0, .04); } .gd-vip-storybox p { margin: 0 0 10px 0; color: #2e3443; } .gd-vip-storybox .gd-saving { color: #10b981 !important; font-weight: 700; } /* form alignment */ .gd-vip-buy-story-form { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 8px; } /* primary CTA button – matches site’s pink accent */ .gd-vip-storybox .button.button-primary { appearance: none; display: inline-flex; align-items: center; justify-content: center; padding: 11px 18px; font-weight: 700; border-radius: 999px; border: 0; color: #fff; background-image: linear-gradient(180deg, #ff6aa2, #ff8fb3); box-shadow: 0 6px 16px rgba(255, 106, 162, .28); transition: transform .06s ease, box-shadow .2s ease, filter .2s ease; } .gd-vip-storybox .button.button-primary:hover { filter: brightness(0.98); box-shadow: 0 8px 20px rgba(255, 106, 162, .34); } .gd-vip-storybox .button.button-primary:active { transform: translateY(1px); } .gd-vip-storybox .button.button-primary:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(255, 106, 162, .35), 0 6px 16px rgba(255, 106, 162, .28); } /* mobile: full-width CTA for easier tap */ @media (max-width: 480px) { .gd-vip-buy-story-form { gap: 8px; } .gd-vip-storybox .button.button-primary { width: 100%; padding: 12px 18px; } } /* --------- Dark theme --------- */ :root[data-theme="dark"] .gd-vip-storybox { background: var(--dk-card) !important; border-color: var(--dk-soft-border) !important; color: var(--dk-text); box-shadow: 0 12px 28px rgba(0, 0, 0, .45); } :root[data-theme="dark"] .gd-vip-storybox p { color: var(--dk-text); } :root[data-theme="dark"] .gd-vip-storybox .button.button-primary { background-image: linear-gradient(180deg, #ff5f9e, #ff86b6); box-shadow: 0 8px 22px rgba(255, 116, 174, .35); } /* =========================== VIP GATE (gd-vip-gate) Centered layout, clean light theme + full dark-mode support =========================== */ /* Container */ .gd-vip-gate { max-width: 720px; margin: 16px auto; border: 1px solid #ffd5e6; background: #ffffff; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 24px rgba(255, 100, 160, .12), 0 1px 0 rgba(0, 0, 0, .04); } /* Header */ .gd-vip-gate__head { padding: 12px 16px; background: linear-gradient(180deg, #fff7fb, #fff); border-bottom: 1px solid #ffe1ee; text-align: center; } .gd-vip-gate__head strong { font-size: 16px; letter-spacing: .2px; } /* Body */ .gd-vip-gate__body { padding: 14px 16px 16px; text-align: center; color: #2e3443; } .gd-vip-gate__body p { margin: 0 0 8px; } .gd-vip-gate__body .gd-saving { color: #10b981; font-weight: 700; } /* Buy-one-chapter form */ .gd-vip-buy-form { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; } /* Keep your theme’s primary colors — only sizing/shape */ .gd-vip-buy-form .button.button-primary.gd-btn-buy { color: #fff; background-image: linear-gradient(180deg, #ff6aa2, #ff8fb3); box-shadow: 0 6px 16px rgba(255, 106, 162, .28); display: inline-flex; align-items: center; justify-content: center; padding: 11px 18px; border-radius: 999px; font-weight: 700; min-width: 160px; } /* Nested “buy whole story” box inside the gate: make it subtle to avoid double heavy cards */ .gd-vip-gate .gd-vip-storybox { margin-top: 12px !important; padding-top: 12px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; text-align: center; } .gd-vip-gate .gd-vip-storybox::before { content: ""; display: block; height: 1px; margin: 0 8px 12px; background: repeating-linear-gradient(90deg, #ffd5e6 0 8px, transparent 8px 16px); } .gd-vip-gate .gd-vip-storybox p { color: #2e3443; } .gd-vip-gate .gd-vip-storybox .gd-saving { color: #10b981; font-weight: 700; } /* Whole-story CTA – keep theme color; only shape/size */ .gd-vip-gate .gd-vip-buy-story-form { display: flex; justify-content: center; align-items: center; gap: 10px; } .gd-vip-gate .gd-vip-buy-story-form .button.gd-btn-buy-story { background-image: linear-gradient(180deg, #ff6aa2, #ff8fb3); box-shadow: 0 6px 16px rgba(255, 106, 162, .28); display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 999px; font-weight: 700; min-width: 190px; color: #fff; } /* Responsive improvements */ @media (max-width: 480px) { .gd-vip-gate { border-radius: 10px; } .gd-vip-buy-form .button.button-primary.gd-btn-buy, .gd-vip-gate .gd-vip-buy-story-form .button.gd-btn-buy-story { width: 100%; } } /* =========================== DARK THEME =========================== */ :root[data-theme="dark"] .gd-vip-gate { background: var(--dk-card); border-color: var(--dk-soft-border); box-shadow: 0 12px 28px rgba(0, 0, 0, .45); } :root[data-theme="dark"] .gd-vip-gate__head { background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent); border-bottom: 1px solid var(--dk-soft-border); color: var(--dk-text); } :root[data-theme="dark"] .gd-vip-gate__body { color: var(--dk-text); } :root[data-theme="dark"] .gd-vip-gate__body p { color: var(--dk-text); } /* dashed divider color in dark */ :root[data-theme="dark"] .gd-vip-gate .gd-vip-storybox::before { background: repeating-linear-gradient(90deg, var(--dk-soft-border) 0 8px, transparent 8px 16px); } /* text inside nested box */ :root[data-theme="dark"] .gd-vip-gate .gd-vip-storybox p { color: var(--dk-text); } /* Keep buttons’ theme colors; just ensure focus ring is visible on dark */ :root[data-theme="dark"] .gd-vip-gate .button:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(62, 168, 255, .28); } /* =================================================================== HOMEPAGE CUSTOM CSS (FOR UIKIT) =================================================================== */ /* --- Tùy chỉnh màu sắc chung --- */ :root { --theme-primary-color: #f8405d; } .uk-badge-danger { background-color: var(--theme-primary-color); } .uk-text-danger { color: var(--theme-primary-color) !important; } .section-header { border-color: var(--theme-primary-color); } /* --- Tinh chỉnh tiêu đề --- */ .story-title, .story-title-mini, .story-title-widget { color: #333; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; /* Giới hạn 2 dòng */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } a.story-title-link { font-weight: 700; text-align: center; font-size: 24px; color: #ff97b5 !important; } h1.chap-title div { font-size: 16px; margin-top: 10px; font-weight: 700; } .story-title { font-size: 15px; } .story-title-mini { font-size: 14px; } .story-title-widget { font-size: 15px; } /* Giữ tỷ lệ ảnh cho card truyện */ .card-thumbnail-uikit { position: relative; padding-top: 140%; /* Tỷ lệ 10:14 */ background-color: #f0f0f0; border-radius: 4px; overflow: hidden; } .card-thumbnail-uikit img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } /* Tinh chỉnh slider nav */ .uk-slidenav-previous { left: -25px; } .uk-slidenav-next { right: -25px; } /* Tùy chỉnh badge thể loại */ .widget-area .uk-badge { background-color: #f0f0f0; color: #555; padding: 6px 12px; } .widget-area .uk-badge:hover { background-color: var(--theme-primary-color); color: #fff; } /* ... (toàn bộ CSS giữ nguyên như cũ) ... */ .chap-content img, .chap-content p { display: block; margin: 0 auto; } .story-card-item .card-thumbnail-slider { position: relative; padding-top: 140%; } .story-card-item .card-thumbnail-slider img, .story-card-item .no-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .story-card-item .no-cover { display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; font-size: 14px; color: #999; } .info-overlay span[uk-icon] { margin-right: 4px; } .story-card-content .story-title-main { margin-bottom: 8px; color: #333; font-weight: 600; font-size: 15px; line-height: 1.4; height: 42px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .story-card-content .latest-chap-title { color: #666; font-size: 14px; margin-top: 4px !important; } .story-card-item { display: block; transition: transform 0.2s ease-in-out; } .story-card-item:hover { transform: translateY(-4px); } .uk-slidenav-previous { left: -25px; } .uk-slidenav-next { right: -25px; } /* === THAY ĐỔI CSS CHO OVERLAY === */ .info-overlay { margin: 0; width: 100%; padding: 5px; } span.time-since-update { font-size: 10px; width: 40%; text-align: right; -webkit-line-clamp: 1; line-clamp: 1; text-overflow: ellipsis; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; } .story-status-badge { background: var(--wp--preset--color--vivid-green-cyan); color: white; font-weight: bold; font-size: 13px; padding: 2px 10px; border-radius: 5px; z-index: 2; top: 5px; right: 5px; } .vr-board { border: 2px solid var(--ui-border, #f9b3c6); border-radius: 14px; padding: 12px; background: var(--ui-card-bg, #fff); max-width: 680px } .vr-head { display: block; align-items: center; justify-content: space-between; margin-bottom: 8px } .vr-title { font-weight: 700; letter-spacing: .5px; color: var(--ui-text-main, #333) } .vr-tabs { display: flex; gap: 8px; margin: 5px 0; } .vr-tab { border: none; background: var(--ui-card-sub, #ffe8ef); color: var(--ui-primary, #d03b6b); padding: 6px 10px; border-radius: 999px; font-weight: 600; cursor: pointer } .vr-tab.is-active { background: var(--ui-primary, #d03b6b); color: #fff } .vr-list { display: none; list-style: none; margin: 0; padding: 0 } .vr-list.is-active { display: block } .vr-item { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid #f2f2f2 } .vr-item:first-child { border-top: none } .vr-thumb-wrap { position: relative; display: block; flex: 0 0 72px; height: 72px; border-radius: 10px; overflow: hidden } .vr-thumb { width: 72px; height: 72px; object-fit: cover; display: block; background: #f7f7f7 } .vr-thumb--placeholder { display: block } .vr-rank { position: absolute; top: 6px; left: 6px; background: var(--ui-card-bg, #fff); color: var(--ui-primary, #d03b6b); font-weight: 800; width: 24px; height: 24px; border-radius: 999px; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .08) } .vr-meta { flex: 1; min-width: 0 } .vr-post-title { display: block; font-weight: 700; color: var(--ui-text-main, #222) !important; text-decoration: none } .vr-post-title:hover { text-decoration: underline } .vr-sub { display: block; margin-top: 2px; color: var(--ui-text-muted, #666); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .vr-views { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: #333; font-weight: 600 } .vr-eye { fill: #777 } .vr-empty { padding: 12px; color: #666 } @media (max-width:420px) { .vr-thumb-wrap { flex-basis: 60px; height: 60px } .vr-thumb { width: 60px; height: 60px } } /* =============== PILL BUTTONS =============== */ .btn-pill { --ring: rgba(0, 0, 0, .12); display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; font-size: 12px; border: none; border-radius: 20px; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: 0 2px 0 var(--ring), 0 6px 16px var(--ring); transition: filter .15s ease, transform .03s ease, box-shadow .2s ease; text-decoration: none; } .btn-pill:hover { filter: brightness(1.05) saturate(1.02); } .btn-pill:active { transform: translateY(1px); } .btn-pill:focus { outline: none; } /* icon bubble (dùng ) */ .btn-pill .icon { width: 24px; height: 24px; border-radius: 999px; display: inline-grid; place-items: center; background: rgba(255, 255, 255, .22); border: 2px solid rgba(255, 255, 255, .7); color: #fff; } .btn-pill .icon svg { width: 14px; height: 14px; stroke: currentColor; } /* ===== Variants ===== */ .btn-donate { background: #ff3b57; color: #fff; --ring: rgba(255, 59, 87, .25); } .btn-start { background: #ffc107; color: #111; --ring: rgba(255, 193, 7, .25); } .btn-latest { background: #22c55e; color: #fff; --ring: rgba(34, 197, 94, .25); } .btn-follow { background: #f59ac6; color: #fff; --ring: rgba(245, 154, 198, .25); } .btn-report { background: #2c3036; color: #fff; --ring: rgba(44, 48, 54, .3); } /* tinh chỉnh icon cho nền vàng: icon tối hơn 1 chút */ .btn-start .icon { background: rgba(255, 255, 255, .7); border-color: rgba(255, 255, 255, .9); color: #111; } /* focus ring theo màu */ .btn-donate:focus-visible { box-shadow: 0 0 0 3px rgba(255, 59, 87, .28), 0 6px 16px var(--ring); } .btn-start:focus-visible { box-shadow: 0 0 0 3px rgba(255, 193, 7, .35), 0 6px 16px var(--ring); } .btn-latest:focus-visible { box-shadow: 0 0 0 3px rgba(34, 197, 94, .35), 0 6px 16px var(--ring); } .btn-follow:focus-visible { box-shadow: 0 0 0 3px rgba(245, 154, 198, .35), 0 6px 16px var(--ring); } .btn-report:focus-visible { box-shadow: 0 0 0 3px rgba(44, 48, 54, .5), 0 6px 16px var(--ring); } /* khoảng cách trong hàng nút */ .action-row .btn-pill { margin-right: 12px; } /* Nút sort dạng pill, gọn và trung tính */ .archive-sort .sort-btn { border-radius: 9999px; padding: 6px 12px; line-height: 1.2; background: #fff; border: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 2px 6px rgba(0, 0, 0, .04); transition: border-color .2s, box-shadow .2s, background-color .2s; } .archive-sort .sort-btn:hover { border-color: #cfcfcf; } .archive-sort .sort-btn:focus { outline: none; border-color: #1e87f0; box-shadow: 0 0 0 3px rgba(30, 135, 240, .12); } /* Dark mode */ .uk-light .archive-sort .sort-btn, .theme-dark .archive-sort .sort-btn { background: #2a2a2a; color: #eee; border-color: rgba(255, 255, 255, .14); box-shadow: none; } .uk-light .archive-sort .sort-btn .uk-text-muted, .theme-dark .archive-sort .sort-btn .uk-text-muted { color: #bbb !important; } /* Ẩn label trên mobile để gọn */ @media (max-width: 640px) { .archive-sort label { display: none; } } a.uk-link-heading { font-size: 16px; color: var(--wp--preset--color--black); font-weight: 600; } .uk-link-heading a:hover, .uk-link-toggle:hover .uk-link-heading, a.uk-link-heading:hover { color: var(--pink-2); } /* Pagination – TruyenBiz (áp dụng cho ul.uk-pagination.uk-flex-center) */ .uk-pagination.uk-flex-center { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; } /* Màu & hiệu ứng chung */ :root { --tb-accent: #ff4fa0; /* hồng chủ đạo */ --tb-accent-600: #d33682; /* hồng đậm */ --tb-ring: rgba(255, 79, 160, .25); --tb-border: rgba(0, 0, 0, .08); --tb-bg: rgba(255, 255, 255, .9); } /* Nút số & mũi tên */ .uk-pagination.uk-flex-center>li>a, .uk-pagination.uk-flex-center>li>span { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 25px; padding: 0 5px; border-radius: 999px; border: 1px solid var(--tb-border); background: var(--tb-bg); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); font-weight: 600; line-height: 1; text-decoration: none; transition: all .18s ease; color: inherit; backdrop-filter: saturate(120%) blur(6px); } /* Hover/Focus */ .uk-pagination.uk-flex-center>li>a:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .08); border-color: rgba(0, 0, 0, .12); } .uk-pagination.uk-flex-center>li>a:focus { outline: none; box-shadow: 0 0 0 6px var(--tb-ring); } /* Trang hiện tại (li có class uk-active hoặc span.current của paginate_links) */ .uk-pagination.uk-flex-center>li.uk-active>a, .uk-pagination.uk-flex-center>li.uk-active>span, .uk-pagination.uk-flex-center>li>span.current { background: linear-gradient(180deg, var(--tb-accent), var(--tb-accent-600)); border-color: transparent; color: #fff; box-shadow: 0 8px 18px rgba(211, 54, 130, .35); transform: translateY(-1px); } /* Dấu … (ellipsis) */ .uk-pagination.uk-flex-center .dots, .uk-pagination.uk-flex-center>li>span.dots { background: transparent; border-color: transparent; box-shadow: none; cursor: default; opacity: .6; } /* Prev/Next icon (span có thuộc tính uk-pagination-*) */ .uk-pagination.uk-flex-center [uk-pagination-previous], .uk-pagination.uk-flex-center [uk-pagination-next] { line-height: 1; font-size: 14px; } /* Responsive */ @media (max-width:640px) { .uk-pagination.uk-flex-center>li>a, .uk-pagination.uk-flex-center>li>span { min-width: 36px; height: 36px; padding: 0 10px; } } /* Dark mode nhẹ */ @media (prefers-color-scheme: dark) { .uk-pagination.uk-flex-center>li>a, .uk-pagination.uk-flex-center>li>span { background: rgba(30, 30, 34, .8); border-color: rgba(255, 255, 255, .06); color: #eaeaea; } .uk-pagination.uk-flex-center>li.uk-active>a, .uk-pagination.uk-flex-center>li.uk-active>span { box-shadow: 0 8px 18px rgba(255, 79, 160, .3); } } /* ===== Theme Otruyen: Filter Page ===== */ .otr-filter { --otr-accent: #1e87f0; /* UIkit primary */ --otr-accent-2: #8e54e9; /* tím nhạt để tạo gradient */ --otr-surface: rgba(255, 255, 255, 0.7); /* nền “glass” nhẹ */ --otr-border: rgba(30, 135, 240, 0.15); --otr-text: #1a1a1a; } /* --- Page header --- */ .otr-filter .otr-page-header { margin-bottom: 18px; } .otr-filter .otr-title { margin: 0 0 6px; font-size: clamp(28px, 3.6vw, 36px); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; background: linear-gradient(90deg, var(--otr-accent), var(--otr-accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .otr-filter .otr-title::after { content: ""; display: block; width: 180px; height: 4px; margin-top: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--otr-accent), var(--otr-accent-2)); opacity: 0.65; } .otr-filter .otr-subtitle { margin: 8px 0 0; color: rgba(0, 0, 0, 0.6); font-size: 14.5px; } /* --- Sort buttons: pill + shadow --- */ .otr-filter .sort-btn { border-radius: 999px; padding: 6px 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, .07); transition: transform .08s ease, box-shadow .2s ease; } .otr-filter .sort-btn[aria-pressed="true"] { box-shadow: 0 6px 16px rgba(30, 135, 240, .22); } .otr-filter .sort-btn:hover { transform: translateY(-1px); } /* --- Accordion: cardy & dễ nhìn --- */ .otr-filter [uk-accordion]>li { border: 1px solid var(--otr-border); border-radius: 14px; background: var(--otr-surface); backdrop-filter: blur(6px); overflow: hidden; box-shadow: 0 6px 18px rgba(0, 0, 0, .06); margin-bottom: 14px; } .otr-filter .uk-accordion-title { position: relative; padding: 14px 52px 14px 18px; font-weight: 600; color: var(--otr-text); } .otr-filter .uk-accordion-title::after { /* mũi tên */ content: ""; position: absolute; right: 18px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--otr-text); border-bottom: 2px solid var(--otr-text); transform: translateY(-60%) rotate(45deg); opacity: .6; transition: transform .2s ease, opacity .2s ease; } .otr-filter li.uk-open .uk-accordion-title::after { transform: translateY(-40%) rotate(-135deg); opacity: 1; } .otr-filter .uk-accordion-content { padding: 18px 18px 12px; border-top: 1px dashed var(--otr-border); } /* --- Field headings inside accordion --- */ .otr-filter h4.uk-heading-bullet { font-size: 16px; margin-bottom: 10px; color: var(--otr-text); } .otr-filter h4.uk-heading-bullet::before { border-color: var(--otr-accent); opacity: .6; } /* --- Term lists (checkbox/radio) --- */ .otr-filter .uk-form-label { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; transition: background-color .15s ease; } .otr-filter .uk-form-label:hover { background: rgba(30, 135, 240, .08); } /* --- Clear link --- */ .otr-filter .status-clear { color: var(--otr-accent); } .otr-filter .status-clear:hover { text-decoration: underline; } /* --- Cards area spacing --- */ .otr-filter #search-results .fs-grid { margin-top: 10px; } /* --- Responsive tweaks --- */ @media (max-width: 640px) { .otr-filter .uk-accordion-title { padding-right: 44px; } .otr-filter .sort-btn { padding: 6px 12px; } } footer#site-footer a.tag-cloud-link { font-size: 14px !important; background: #ffd9e4; padding: 3px 5px; line-height: 2; color: #000; border-radius: 4px; margin-right: 3px; } a.tag-cloud-link:hover { background: linear-gradient(180deg, var(--tb-accent), var(--tb-accent-600)) !important; color: #fff !important; } .widget-title { display: none } /* Mobile topbar theo mẫu */ .tbz-mobile-topbar .uk-button-small { padding: 2px 8px; font-size: 12px; line-height: 20px; } .tbz-mh-avatar img { width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .6); } .tbz-mh-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: rgba(255, 255, 255, .25); } /* Giữ cơ chế show/hide có sẵn */ .if-login, .if-logout { display: none !important; } body.logged-in .if-login { display: revert !important; } body:not(.logged-in) .if-logout { display: revert !important; } body.logged-in .if-login.if-flex, body:not(.logged-in) .if-logout.if-flex { display: flex !important; } /* mobile-v2 */ .tbz-mobile-topbar { background: #ffe3ee; } /* nền hồng nhẹ như ảnh mẫu, tùy bạn */ .tbz-mh-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: rgba(0, 0, 0, .04); } .tbz-mh-avatar img { width: 34px; height: 34px; border-radius: 50%; } .tbz-user-menu .uk-nav>li>a { display: flex; align-items: center; gap: 8px; } .tbz-user-menu { min-width: 220px; border-radius: 12px; } /* Giới hạn chiều cao cho mọi uk-navbar-dropdown và cho phép cuộn bên trong */ .uk-navbar-dropdown { max-height: calc(100dvh - 120px); /* chừa ~120px cho header, tùy chỉnh */ overflow-y: auto; overscroll-behavior: contain; /* không kéo lôi cả trang */ -webkit-overflow-scrolling: touch; /* cuộn mượt trên iOS */ } /* (Tùy chọn) Chỉ áp dụng trên mobile */ @media (max-width: 959px) { .uk-navbar-dropdown { max-height: 60dvh; } } /* (Tùy chọn) Nếu phần dropdown này là “Thể loại” và bạn muốn giới hạn riêng nó, hãy gắn class cho menu item (vd. .tbz-theloai) rồi dùng selector dưới: */ /* .tbz-theloai .uk-navbar-dropdown{ max-height: 60dvh; overflow-y: auto; } */ li.bc-author { border-radius: 5px; background: #ffa0b7; padding: 5px 20px; margin: -25px -25px 5px; font-weight: 700; } li.bc-author a { color: #fff; } /* ========================= CHAPTER LIST — DARK FIXES ========================= */ /* Bố cục hàng chương: title ... dots ... date */ .chap-list { list-style: none; margin: 0; padding: 0; } .chap-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 8px; } /* Title co giãn, không tràn */ .chap-link { flex: 0 1 auto; /* giữ đúng kích thước text */ max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; } /* Dot leader giữa title và date */ .dots { flex: 1 1 auto; height: 1px; border-bottom: 1px dashed rgba(0, 0, 0, .18); margin: 0 8px; opacity: .6; } /* Date sát phải, không xuống dòng */ .chap-date { margin-left: auto; white-space: nowrap; } /* Light theme stripes nhẹ nhàng */ .uk-list-striped.chap-list>li:nth-of-type(odd) { background: rgba(0, 0, 0, .03); } /* ========================= DARK MODE TUNING ========================= */ :root[data-theme="dark"] .uk-list-striped.chap-list>li:nth-of-type(odd) { background: #0f1622; /* thay nền vệt sáng bằng tông tối */ } /* Đảm bảo hàng nào cũng dễ đọc + viền nhẹ */ :root[data-theme="dark"] .chap-item { border: 1px solid var(--dk-soft-border); background: transparent; /* nền trong suốt (stripe li đã lo nền) */ } /* padding/spacing giữa các hàng cho gọn */ :root[data-theme="dark"] .chap-list>li+li { margin-top: 6px; } /* Màu link & date ở nền tối */ :root[data-theme="dark"] .chap-link { color: #e6eefc; } :root[data-theme="dark"] .chap-link:hover { color: #ffffff; text-decoration: underline; } :root[data-theme="dark"] .chap-date { color: var(--dk-muted); } /* Dấu chấm phù hợp nền tối */ :root[data-theme="dark"] .dots { border-bottom-color: rgba(255, 255, 255, .14); opacity: .8; } /* (tuỳ chọn) Loại bỏ mọi đường kẻ “lạ” do theme khác can thiệp */ :root[data-theme="dark"] .chap-list.uk-list-striped>li { border-top: 0 !important; } /* Khoảng cách dưới list tách khỏi nút "Xem thêm" để khỏi dính đường kẻ */ #chap-list { margin-bottom: 8px; } /* ========================= THEME TOKENS (nhẹ, tự dùng) ========================= */ :root { --rb: 12px; /* radius base */ --rb-lg: 16px; --shadow-1: 0 6px 18px rgba(17, 24, 39, .06), 0 1px 2px rgba(17, 24, 39, .04); --shadow-2: 0 10px 24px rgba(17, 24, 39, .12), 0 3px 6px rgba(17, 24, 39, .06); --border-soft: #e9eef5; --bg-card: #fff; --text-1: #0f172a; --text-2: #64748b; --accent: #f43f5e; /* điểm nhấn (nút, link active) */ --mint-1: #34d399; /* cho badge Full */ --mint-2: #10b981; } :root[data-theme="dark"] { --bg-card: #121826; --border-soft: rgba(255, 255, 255, .08); --text-1: #e6eefc; --text-2: #9fb0ca; --shadow-1: 0 8px 20px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .25); --shadow-2: 0 14px 28px rgba(0, 0, 0, .45), 0 6px 10px rgba(0, 0, 0, .3); } /* ========================= CARD TRUYỆN ========================= */ .card-item { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--rb-lg); box-shadow: var(--shadow-1); transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease; overflow: hidden; } .card-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); } /* thumbnail bo góc mềm, giữ cover */ .thumb { border-radius: var(--rb); overflow: hidden; } /* Overlay stats: blur + gradient dễ đọc */ .card-stats__inner { backdrop-filter: saturate(140%) blur(6px); -webkit-backdrop-filter: saturate(140%) blur(6px); border-bottom-left-radius: var(--rb); border-bottom-right-radius: var(--rb); } .card-stats .stat { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } /* Tiêu đề & text phụ */ .card-item h3 a { color: var(--text-1); } .card-item h3 a:hover { color: #111; text-decoration: underline; } .uk-text-meta, .uk-text-small, .meta-time { color: var(--text-2); } /* ========================= BADGE "FULL" ========================= */ .story-status-badge { display: inline-flex; align-items: center; gap: .4em; padding: .28rem .55rem; font-weight: 700; letter-spacing: .2px; border-radius: 999px; color: #fff; text-transform: uppercase; background: linear-gradient(135deg, var(--mint-1), var(--mint-2)); box-shadow: 0 4px 10px rgba(16, 185, 129, .35); border: 1px solid rgba(255, 255, 255, .25); font-size: 11px; } .story-status-badge::before { content: "\f058"; /* fa-circle-check */ font: 900 0.9em/1 "Font Awesome 7 Free"; } /* ========================= CHIP (thẻ, tác giả, người đăng) ========================= */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-weight: 600; line-height: 1; font-size: 14px; text-decoration: none; border: 1px solid var(--border-soft); background: #fff; color: #334155; transition: box-shadow .2s, transform .08s, background .2s, color .2s, border-color .2s; } .chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); } .chip i { font-size: .95em; } /* màu mục đích */ .chip-green { background: #e7f8f0; color: #0a5c2b; border-color: #bfe9d3; } .chip-blue { background: #eaf5ff; color: #0b4a6f; border-color: #c8e2fb; } .chip-outline { background: transparent; color: #334155; } /* ========================= PAGINATION → pill ========================= */ .uk-pagination { gap: 8px; } .uk-pagination>*>a, .uk-pagination>*>span { display: inline-flex; min-width: 36px; height: 36px; align-items: center; justify-content: center; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--bg-card); color: var(--text-1); box-shadow: var(--shadow-1); transition: background .2s, color .2s, box-shadow .2s, transform .08s; } .uk-pagination>*>a:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); } .uk-pagination .uk-active>span { background: var(--accent); color: #fff; border-color: transparent; } /* ========================= BREADCRUMB & BUTTONS (nhẹ) ========================= */ .uk-breadcrumb>*>* { color: var(--text-2); } .uk-breadcrumb> :nth-child(n+2)::before { color: var(--text-2); opacity: .7; } /* Nút chính */ .uk-button-danger, .uk-button-primary { border-radius: 999px; box-shadow: var(--shadow-1); } /* ========================= SIDEBAR FILTER — sticky ========================= */ @media (min-width: 1024px) { .widget-area, .filter-sticky { position: sticky; top: 88px; } } /* ========================= DARK MODE POLISH ========================= */ :root[data-theme="dark"] .card-item h3 a:hover { color: #fff; } :root[data-theme="dark"] .uk-pagination>*>a, :root[data-theme="dark"] .uk-pagination>*>span { background: var(--bg-card); color: var(--text-1); border-color: var(--border-soft); } :root[data-theme="dark"] .chip { background: rgba(255, 255, 255, .04); color: var(--text-1); } :root[data-theme="dark"] .chip-outline { border-color: var(--border-soft); color: var(--text-1); } /* Tắt “sọc sáng” list ở dark (nếu còn) */ :root[data-theme="dark"] .uk-list-striped.chap-list>li:nth-of-type(odd) { background: transparent; } /* Focus ring cho accessibility */ :where(a, button, [role="button"], .chip, .uk-pagination a):focus-visible { outline: 2px solid color-mix(in oklab, var(--accent) 80%, white); outline-offset: 2px; border-radius: 10px; } /* Giảm motion nếu người dùng không thích */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* Tiêu đề thẻ truyện */ .card-title a, .card-title a:hover { text-decoration: none !important; /* bỏ gạch chân */ } .card-title { font-weight: 700; line-height: 1.35; margin: 0; /* Giới hạn 2 dòng + cắt bớt */ display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Bình luận mới đăng sẽ viền nhẹ trong 2s */ .comment--just-posted { outline: 2px solid #22c55e; transition: outline 2s ease; } .uk-totop.uk-icon:not(.uk-preserve) [stroke*="#"]:not(.uk-preserve) { stroke: #ff0057c2 !important; stroke-width: 3; } .uk-nav.uk-nav-default li.current-menu-item>a, .uk-nav.uk-nav-default li.current-menu-ancestor>a, .uk-nav.uk-nav-default li.current_page_item>a, .uk-nav.uk-nav-default li.current_page_parent>a { color: #1e87f0; /* giống uk-active */ font-weight: 600; } .uk-nav.uk-nav-default li.current-menu-item>a:hover, .uk-nav.uk-nav-default li.current-menu-ancestor>a:hover, .uk-nav.uk-nav-default li.current_page_item>a:hover, .uk-nav.uk-nav-default li.current_page_parent>a:hover { color: #0f6ecd; } /* ===== Base Card Styles ===== */ .otr-author-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 24px; padding: 3px; box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .otr-author-card:hover { transform: translateY(-4px); box-shadow: 0 30px 80px rgba(102, 126, 234, 0.4); } .otr-card-inner { background: #ffffff; border-radius: 21px; padding: 32px; display: grid; grid-template-columns: 140px 1fr; gap: 32px; align-items: start; } /* ===== Avatar Section ===== */ .otr-avatar-section { display: flex; flex-direction: column; align-items: center; gap: 16px; } .otr-avatar-wrapper { position: relative; width: 120px; height: 120px; border-radius: 50%; padding: 4px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); animation: rotateGradient 3s linear infinite; } @keyframes rotateGradient { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .otr-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 4px solid #ffffff; } .otr-author-name { margin: 0; font-size: 18px; font-weight: 700; text-align: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.3; word-break: break-word; } /* ===== Content Section ===== */ .otr-content-section { display: flex; flex-direction: column; gap: 24px; min-width: 0; } /* ===== Bio ===== */ .otr-bio { color: #64748b; font-size: 14px; line-height: 1.7; } .otr-bio p { margin: 0; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ===== Stats Grid ===== */ .otr-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; } .otr-stat-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #f8fafc; border-radius: 12px; border: 1px solid #e2e8f0; transition: all 0.2s ease; } .otr-stat-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .otr-stat-item>i { font-size: 20px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px; flex-shrink: 0; } .otr-stat-followers>i { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; } .otr-stat-views>i { background: linear-gradient(135deg, #f093fb, #f5576c); color: #fff; } .otr-stat-posts>i { background: linear-gradient(135deg, #4facfe, #00f2fe); color: #fff; } .otr-stat-balance>i { background: linear-gradient(135deg, #fa709a, #fee140); color: #fff; } .otr-stat-content { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .otr-stat-label { font-size: 12px; color: #94a3b8; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .otr-stat-value { font-size: 16px; font-weight: 700; color: #1e293b; font-variant-numeric: tabular-nums; } .otr-stat-value small { font-size: 12px; font-weight: 500; color: #64748b; margin-left: 4px; } /* ===== Actions ===== */ .otr-actions { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; border-top: 1px solid #e2e8f0; } /* ===== Contact Links ===== */ .otr-contact-links { display: flex; flex-direction: column; gap: 12px; } .otr-contact-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #475569; } .otr-contact-label i { color: #667eea; } .otr-contact-buttons { display: flex; flex-wrap: wrap; gap: 8px; } .otr-contact-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; color: #475569; text-decoration: none; font-size: 13px; font-weight: 500; transition: all 0.2s ease; } .otr-contact-btn:hover { background: #667eea; border-color: #667eea; color: #ffffff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); } .otr-contact-btn i { font-size: 16px; } /* ===== NÚT DONATE MỚI ===== */ .otr-contact-btn.otr-donate-btn { background: #ffc107; border-color: #ffc107; color: #1e293b; } .otr-contact-btn.otr-donate-btn:hover { background: #ffca2c; border-color: #ffca2c; color: #1e293b; box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3); } /* ===== HẾT NÚT DONATE MỚI ===== */ /* ===== Recharge Button ===== */ .otr-recharge-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #ffffff; text-decoration: none; border-radius: 12px; font-weight: 600; font-size: 14px; transition: all 0.3s ease; box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3); } .otr-recharge-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4); background: linear-gradient(135deg, #764ba2 0%, #667eea 100%); color: #ffffff; } .otr-recharge-btn i { font-size: 16px; animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } /* ===== Responsive Design ===== */ @media (max-width: 768px) { .otr-card-inner { grid-template-columns: 1fr; gap: 24px; padding: 24px; } .otr-avatar-section { flex-direction: row; justify-content: flex-start; align-items: center; } .otr-avatar-wrapper { width: 80px; height: 80px; } .otr-author-name { text-align: left; font-size: 20px; } .otr-stats-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } .otr-stat-item { padding: 12px; } .otr-contact-buttons { flex-direction: column; } .otr-contact-btn { width: 100%; justify-content: center; } } @media (max-width: 480px) { .otr-stats-grid { grid-template-columns: 1fr; } .otr-bio p { -webkit-line-clamp: 4; line-clamp: 4; } } /* ===== Dark Mode Support ===== */ @media (prefers-color-scheme: dark) { .otr-card-inner { background: #1e293b; } .otr-author-name { background: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .otr-bio { color: #94a3b8; } .otr-stat-item { background: #334155; border-color: #475569; } .otr-stat-label { color: #94a3b8; } .otr-stat-value { color: #f1f5f9; } .otr-stat-value small { color: #94a3b8; } .otr-actions { border-top-color: #475569; } .otr-contact-label { color: #cbd5e1; } .otr-contact-btn { background: #334155; border-color: #475569; color: #cbd5e1; } .otr-contact-btn:hover { background: #667eea; border-color: #667eea; color: #ffffff; } /* ===== NÚT DONATE DARK MODE ===== */ .otr-contact-btn.otr-donate-btn { background: #ffc107; border-color: #ffc107; color: #1e293b; } .otr-contact-btn.otr-donate-btn:hover { background: #ffca2c; border-color: #ffca2c; color: #1e293b; } /* ===== HẾT NÚT DONATE DARK MODE ===== */ /* Widget Overrides */ :root[data-theme="dark"] .vr-board { background: var(--dk-card); border-color: var(--dk-soft-border); } :root[data-theme="dark"] .vr-title, :root[data-theme="dark"] .vr-post-title { color: var(--dk-text) !important; } :root[data-theme="dark"] .vr-tab { background: var(--dk-bg-800); color: var(--dk-muted); } :root[data-theme="dark"] .vr-tab.active { background: var(--dk-bg-700); color: var(--dk-text); } :root[data-theme="dark"] .vr-rank { background: var(--dk-elev); color: var(--dk-text); box-shadow: none; } :root[data-theme="dark"] .vr-sub { color: var(--dk-muted); } :root[data-theme="dark"] .otr-card-inner { background: var(--dk-card); } } /* ===== Print Styles ===== */ @media print { .otr-author-card { box-shadow: none; page-break-inside: avoid; } .otr-avatar-wrapper { animation: none; } .otr-recharge-btn, .otr-donate-btn { display: none; } }