/* Put your theme custom styles here */ .uk-modal-container .uk-modal-dialog { width: 900px; } span#gd-bank-code { text-transform: uppercase !important; } .tb-avatar-wrap img { width: 120px; height: 120px; } .uk-text-truncate { max-width: 60%;} /* ---------- 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('/wp-content/themes/truyenbiz/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); } header.tm-header .tm-headerbar-default.tm-headerbar.tm-headerbar-top { height: 65px; background: rgb(255 246 249); 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 246 249) !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:#3ea8ff; --dk-link-hover:#79c3ff; --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 { background: var(--dk-bg-900); 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:#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; } /* 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; } } @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; /* Giới hạn 2 dòng */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .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; -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; 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 #f9b3c6;border-radius:14px;padding:12px;background:#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:#333} .vr-tabs{display:flex;gap:8px; margin: 5px 0;} .vr-tab{border:none;background:#ffe8ef;color:#d03b6b;padding:6px 10px;border-radius:999px;font-weight:600;cursor:pointer} .vr-tab.is-active{background:#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:#fff;color:#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:#222;text-decoration:none} .vr-post-title:hover{text-decoration:underline} .vr-sub{display:block;margin-top:2px;color:#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-h3, h3 { line-height: 1 !important; } .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}