/*
Theme Name: Box Audio Cinematic
Theme URI: https://boxaudio.net
Author: Box Audio
Description: Giao diện "Cinematic Audio" cho website truyện audio Box Audio — nền navy sâu, hiệu ứng glassmorphism, chữ Noto Serif cho tiêu đề truyện, trình phát dính đáy màn hình. Thiết kế dựa trên hệ design Cinematic Audio.
Version: 1.3.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: boxaudio-cinematic
Tags: dark, audio, blog, custom-menu, featured-images, translation-ready
*/
/* ============================================================
1. DESIGN TOKENS — hệ màu Cinematic Audio
============================================================ */
:root{
--surface:#0b1326;
--surface-dim:#0b1326;
--surface-bright:#31394d;
--sc-lowest:#060e20;
--sc-low:#131b2e;
--sc:#171f33;
--sc-high:#222a3d;
--sc-highest:#2d3449;
--on-surface:#dae2fd;
--on-surface-variant:#c7c4d7;
--outline:#908fa0;
--outline-variant:#464554;
--primary:#c0c1ff;
--on-primary:#1000a9;
--primary-container:#8083ff;
--on-primary-container:#0d0096;
--secondary:#ffb690;
--on-secondary:#552100;
--secondary-container:#ec6a06;
--on-secondary-container:#4a1c00;
--tertiary:#ffb783;
--error:#ffb4ab;
--font-display:"Noto Serif",Georgia,"Times New Roman",serif;
--font-body:"Hanken Grotesk","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
--r-sm:.25rem;
--r:.5rem;
--r-md:.75rem;
--r-lg:1rem;
--r-xl:1.5rem;
--r-full:9999px;
--gutter:1.5rem;
--margin:2rem;
--section-gap:4rem;
--wrap:1280px;
--shadow-ambient:0 18px 50px -12px rgba(73,75,214,.35);
--glass:rgba(11,19,38,.72);
}
/* ============================================================
2. RESET & BASE
============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
margin:0;
background:var(--surface);
color:var(--on-surface);
font-family:var(--font-body);
font-size:16px;
line-height:1.6;
font-weight:400;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
body.has-mini-player{padding-bottom:104px}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-decoration:none;transition:color .18s ease}
a:hover{color:#e1e0ff}
h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:600;line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(2rem,4vw,3rem);font-weight:700;letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,2.6vw,2rem)}
h3{font-size:1.5rem}
h4{font-size:1.125rem}
p{margin:0 0 1em}
ul,ol{padding-left:1.25rem}
hr{border:0;border-top:1px solid var(--outline-variant);margin:2rem 0}
::selection{background:var(--primary-container);color:#fff}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--margin)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--primary);color:var(--on-primary);padding:.75rem 1rem;border-radius:0 0 var(--r) 0}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:var(--r-sm)}
/* Nhãn kỹ thuật — JetBrains Mono */
.label-caps{
font-family:var(--font-mono);
font-size:12px;
font-weight:500;
letter-spacing:.1em;
text-transform:uppercase;
line-height:1;
}
/* ============================================================
3. NÚT & PILL
============================================================ */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
font-family:var(--font-body);font-size:15px;font-weight:600;
padding:.8rem 1.5rem;border-radius:var(--r-full);
border:1px solid transparent;cursor:pointer;
transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease;
white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-primary:hover{background:#d3d3ff;color:var(--on-primary);box-shadow:var(--shadow-ambient)}
.btn-accent{background:var(--secondary-container);color:#fff}
.btn-accent:hover{background:#ff7d1a;color:#fff}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.18);color:var(--on-surface)}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary);background:rgba(192,193,255,.06)}
.btn-sm{padding:.5rem 1rem;font-size:13px}
.pill{
display:inline-flex;align-items:center;gap:.35rem;
padding:.35rem .75rem;border-radius:var(--r-full);
background:rgba(192,193,255,.15);color:var(--primary);
font-family:var(--font-mono);font-size:11px;font-weight:500;
letter-spacing:.08em;text-transform:uppercase;line-height:1.2;
}
.pill-accent{background:rgba(236,106,6,.18);color:var(--tertiary)}
.pill-outline{background:transparent;border:1px solid var(--outline-variant);color:var(--on-surface-variant)}
.icon{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon-fill{fill:currentColor;stroke:none}
/* ============================================================
4. HEADER
============================================================ */
.site-header{
position:sticky;top:0;z-index:60;
background:var(--glass);
backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
border-bottom:1px solid rgba(255,255,255,.07);
}
.header-inner{
display:flex;align-items:center;gap:1.5rem;
height:68px;
max-width:var(--wrap);margin-inline:auto;padding-inline:var(--margin);
}
.site-brand{
font-family:var(--font-display);font-size:1.4rem;font-weight:700;
color:var(--primary);letter-spacing:-.01em;white-space:nowrap;
}
.site-brand:hover{color:#e1e0ff}
.site-brand img{max-height:40px;width:auto}
.main-nav{flex:1;min-width:0}
.main-nav ul{display:flex;align-items:center;gap:1.75rem;list-style:none;margin:0;padding:0}
.main-nav li{position:relative}
.main-nav > ul > li > a{
display:inline-block;padding:.45rem 0;
color:var(--on-surface-variant);font-weight:500;font-size:15px;
border-bottom:2px solid transparent;
}
.main-nav > ul > li > a:hover,
.main-nav > ul > li.current-menu-item > a,
.main-nav > ul > li.current-menu-parent > a,
.main-nav > ul > li.current-menu-ancestor > a{
color:var(--on-surface);border-bottom-color:var(--primary);
}
/* dropdown */
.main-nav ul ul{
position:absolute;top:100%;left:-1rem;min-width:230px;
flex-direction:column;align-items:stretch;gap:0;
background:var(--sc);border:1px solid var(--outline-variant);
border-radius:var(--r-md);padding:.5rem;
box-shadow:0 20px 45px rgba(0,0,0,.5);
opacity:0;visibility:hidden;transform:translateY(8px);
transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.main-nav li:hover > ul,.main-nav li:focus-within > ul{opacity:1;visibility:visible;transform:translateY(0)}
.main-nav ul ul li a{
display:block;padding:.5rem .75rem;border-radius:var(--r);
color:var(--on-surface-variant);font-size:14px;
}
.main-nav ul ul li a:hover{background:var(--sc-high);color:var(--on-surface)}
.main-nav ul ul ul{top:0;left:100%}
.header-actions{display:flex;align-items:center;gap:.75rem;margin-left:auto}
.icon-btn{
display:inline-flex;align-items:center;justify-content:center;
width:40px;height:40px;border-radius:var(--r-full);
background:transparent;border:1px solid rgba(255,255,255,.12);
color:var(--on-surface-variant);cursor:pointer;transition:all .18s ease;
}
.icon-btn:hover{color:var(--primary);border-color:var(--primary);background:rgba(192,193,255,.08)}
.nav-toggle{display:none}
/* thanh tìm kiếm trượt xuống */
.header-search{
display:none;border-top:1px solid rgba(255,255,255,.07);
background:var(--sc-lowest);
}
.header-search.is-open{display:block}
.header-search .wrap{padding-block:1rem}
.search-form{display:flex;align-items:center;gap:.5rem;position:relative}
.search-form input[type=search],
.search-field{
flex:1;width:100%;
background:transparent;border:1px solid var(--outline-variant);
border-radius:var(--r-full);color:var(--on-surface);
padding:.75rem 1.15rem;font-family:var(--font-body);font-size:15px;
transition:border-color .18s ease,box-shadow .18s ease;
}
.search-field::placeholder{color:var(--outline)}
.search-field:focus{
outline:none;border-color:var(--primary);
box-shadow:0 0 0 4px rgba(192,193,255,.12);
}
/* ============================================================
5. HERO TRANG CHỦ
============================================================ */
.hero{position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.06)}
.hero-bg{
position:absolute;inset:0;
background-size:cover;background-position:center;
filter:blur(56px) saturate(1.25);transform:scale(1.25);opacity:.35;
}
.hero::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(11,19,38,.55) 0%,rgba(11,19,38,.88) 60%,var(--surface) 100%);
}
.hero-inner{
position:relative;z-index:2;
max-width:var(--wrap);margin-inline:auto;padding:5rem var(--margin);
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);
gap:3rem;align-items:center;
}
.hero-meta{display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem;flex-wrap:wrap}
.hero-meta .stat{
display:inline-flex;align-items:center;gap:.4rem;
font-family:var(--font-mono);font-size:12px;color:var(--on-surface-variant);
}
.hero h1{
font-size:clamp(2rem,4.4vw,3rem);font-weight:700;
letter-spacing:-.02em;line-height:1.1;margin-bottom:1rem;
}
.hero h1 a{color:inherit}
.hero h1 a:hover{color:var(--primary)}
.hero-excerpt{
font-size:18px;line-height:1.6;color:var(--on-surface-variant);
max-width:52ch;margin-bottom:2rem;
}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
.hero-cover{
border-radius:var(--r-lg);overflow:hidden;
aspect-ratio:2/3;background:var(--sc);
box-shadow:0 32px 70px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);
justify-self:end;width:100%;max-width:340px;
}
.hero-cover img{width:100%;height:100%;object-fit:cover}
/* ============================================================
6. SECTION & LƯỚI TRUYỆN
============================================================ */
.section{padding-block:var(--section-gap)}
.section + .section{padding-top:0}
.section-head{
display:flex;align-items:center;justify-content:space-between;
gap:1rem;margin-bottom:1.75rem;flex-wrap:wrap;
}
.section-head h2{margin:0;font-size:clamp(1.4rem,2.4vw,2rem)}
.section-head .more{
display:inline-flex;align-items:center;gap:.4rem;
font-size:14px;font-weight:500;color:var(--primary);
}
.section-head .more:hover{gap:.6rem}
.story-grid{
display:grid;gap:var(--gutter);
grid-template-columns:repeat(6,minmax(0,1fr));
}
.story-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.story-grid.cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.story-card{position:relative;min-width:0}
.story-card .cover{
position:relative;display:block;
aspect-ratio:2/3;border-radius:var(--r-lg);overflow:hidden;
background:linear-gradient(160deg,var(--sc-high),var(--sc-lowest));
border:1px solid rgba(255,255,255,.08);
transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s ease,border-color .28s ease;
}
.story-card .cover img{
width:100%;height:100%;object-fit:cover;
transition:transform .5s cubic-bezier(.2,.7,.3,1),opacity .3s ease;
}
.story-card:hover .cover{
transform:translateY(-6px);
border-color:rgba(192,193,255,.4);
box-shadow:0 22px 44px rgba(0,0,0,.55),0 0 0 1px rgba(192,193,255,.18);
}
.story-card:hover .cover img{transform:scale(1.06)}
.cover-fallback{
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
padding:1rem;text-align:center;font-family:var(--font-display);
font-size:1rem;color:var(--on-surface-variant);
}
.cover .badge{
position:absolute;top:.6rem;right:.6rem;z-index:2;
background:rgba(6,14,32,.82);backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.14);
border-radius:var(--r-full);padding:.25rem .55rem;
font-family:var(--font-mono);font-size:11px;color:var(--on-surface);
display:inline-flex;align-items:center;gap:.25rem;
}
.cover .badge-new{left:.6rem;right:auto;background:rgba(236,106,6,.9);border-color:transparent;color:#fff}
.cover .play-overlay{
position:absolute;inset:0;z-index:3;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(180deg,rgba(6,14,32,0) 40%,rgba(6,14,32,.75) 100%);
opacity:0;transition:opacity .25s ease;
}
.story-card:hover .play-overlay{opacity:1}
.play-overlay span{
width:52px;height:52px;border-radius:var(--r-full);
background:var(--secondary-container);color:#fff;
display:flex;align-items:center;justify-content:center;
box-shadow:0 8px 24px rgba(236,106,6,.45);
}
.story-card .title{
display:block;margin:.85rem 0 .2rem;
font-family:var(--font-display);font-size:1rem;font-weight:600;
line-height:1.35;color:var(--on-surface);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.story-card:hover .title{color:var(--primary)}
.story-card .meta{
font-size:13px;color:var(--on-surface-variant);
display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
/* Hàng cuộn ngang trên mobile */
.scroll-row{display:flex;gap:var(--gutter);overflow-x:auto;padding-bottom:.5rem;scroll-snap-type:x mandatory}
.scroll-row::-webkit-scrollbar{height:6px}
.scroll-row::-webkit-scrollbar-thumb{background:var(--sc-highest);border-radius:var(--r-full)}
.scroll-row > *{flex:0 0 150px;scroll-snap-align:start}
/* ============================================================
7. TRANG DANH MỤC / LƯU TRỮ
============================================================ */
.archive-layout{
display:grid;grid-template-columns:280px minmax(0,1fr);
gap:2.5rem;align-items:start;padding-block:2.5rem var(--section-gap);
}
.filter-panel{
position:sticky;top:88px;
background:var(--sc);border:1px solid rgba(255,255,255,.08);
border-radius:var(--r-lg);padding:1.25rem;
}
.filter-panel h3{
display:flex;align-items:center;justify-content:space-between;
font-size:1.05rem;margin:0 0 1rem;
}
.filter-panel h3 .reset{
font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
text-transform:uppercase;color:var(--tertiary);font-weight:500;
}
.filter-group{padding-block:1rem;border-top:1px solid var(--outline-variant)}
.filter-group:first-of-type{border-top:0;padding-top:0}
.filter-group > .label-caps{display:block;color:var(--on-surface-variant);margin-bottom:.85rem}
.filter-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem}
.filter-list a{
display:flex;align-items:center;gap:.65rem;
padding:.45rem .5rem;border-radius:var(--r);
color:var(--on-surface-variant);font-size:14px;
}
.filter-list a:hover{background:var(--sc-high);color:var(--on-surface)}
.filter-list a .box{
width:18px;height:18px;flex:none;border-radius:var(--r-sm);
border:1.5px solid var(--outline);display:flex;align-items:center;justify-content:center;
transition:all .18s ease;
}
.filter-list .is-active a{color:var(--on-surface);font-weight:500}
.filter-list .is-active .box{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.filter-list a .count{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--outline)}
.archive-head{margin-bottom:1.75rem}
.archive-head .breadcrumb{margin-bottom:.75rem}
.archive-head h1{font-size:clamp(1.75rem,3.4vw,2.5rem);margin-bottom:.35rem}
.archive-head .count{color:var(--on-surface-variant);font-size:15px}
.archive-toolbar{
display:flex;align-items:center;justify-content:space-between;
gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem;
}
.sort-control{display:flex;align-items:center;gap:.75rem}
.sort-control .label-caps{color:var(--on-surface-variant)}
.sort-control select{
appearance:none;-webkit-appearance:none;
background:var(--sc-high) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c7c4d7' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .85rem center/16px;
border:1px solid var(--outline-variant);border-radius:var(--r-full);
color:var(--on-surface);padding:.6rem 2.4rem .6rem 1.1rem;
font-family:var(--font-body);font-size:14px;cursor:pointer;
}
.sort-control select:focus{outline:none;border-color:var(--primary)}
.breadcrumb{font-size:13px;color:var(--on-surface-variant)}
.breadcrumb a{color:var(--on-surface-variant)}
.breadcrumb a:hover{color:var(--primary)}
.breadcrumb .sep{margin-inline:.5rem;color:var(--outline-variant)}
.load-more-wrap{display:flex;justify-content:center;margin-top:3rem}
/* ============================================================
8. TRANG CHI TIẾT TRUYỆN
============================================================ */
.story-hero{position:relative;overflow:hidden;padding-block:3.5rem}
.story-hero-bg{
position:absolute;inset:0;background-size:cover;background-position:center;
filter:blur(64px) saturate(1.2);transform:scale(1.3);opacity:.32;
}
.story-hero::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(11,19,38,.6),rgba(11,19,38,.95) 70%,var(--surface));
}
.story-hero-inner{
position:relative;z-index:2;
max-width:var(--wrap);margin-inline:auto;padding-inline:var(--margin);
display:grid;grid-template-columns:300px minmax(0,1fr);gap:2.5rem;align-items:start;
}
.story-hero .cover{
aspect-ratio:2/3;border-radius:var(--r-lg);overflow:hidden;
border:1px solid rgba(255,255,255,.1);
box-shadow:0 30px 60px rgba(0,0,0,.6);
background:var(--sc);position:relative;
}
.story-hero .cover img{width:100%;height:100%;object-fit:cover}
.story-tags{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.25rem}
.story-hero h1{font-size:clamp(1.9rem,4vw,3rem);font-weight:700;letter-spacing:-.02em;margin-bottom:.6rem}
.story-byline{font-size:1.05rem;color:var(--on-surface-variant);margin-bottom:1.75rem}
.story-byline strong{color:var(--on-surface);font-weight:600}
.story-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1.75rem}
.story-share{
display:flex;align-items:center;gap:1rem;
padding-top:1.5rem;border-top:1px solid var(--outline-variant);
}
.story-share .label-caps{color:var(--on-surface-variant)}
.share-links{display:flex;gap:.5rem}
.story-body{
display:grid;grid-template-columns:minmax(0,1fr) 320px;
gap:3rem;align-items:start;padding-block:3rem var(--section-gap);
}
.story-content h2{font-size:1.5rem;margin-bottom:1rem}
.story-content{font-size:16px;line-height:1.75;color:var(--on-surface-variant)}
.story-content a{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
.story-content strong,.story-content b{color:var(--on-surface)}
.story-content img{border-radius:var(--r-md);margin-block:1.5rem}
.story-content blockquote{
margin:1.5rem 0;padding:1rem 1.25rem;
border-left:3px solid var(--primary);background:var(--sc-low);
border-radius:0 var(--r) var(--r) 0;color:var(--on-surface);
}
.story-content iframe{max-width:100%;border-radius:var(--r-md)}
.info-card{
background:var(--sc);border:1px solid rgba(255,255,255,.08);
border-radius:var(--r-lg);padding:1.5rem;
}
.info-card h3{font-size:1.25rem;margin-bottom:1rem}
.info-row{
display:flex;align-items:center;justify-content:space-between;gap:1rem;
padding-block:.75rem;border-top:1px solid var(--outline-variant);font-size:14px;
}
.info-row:first-of-type{border-top:0}
.info-row .k{color:var(--on-surface-variant)}
.info-row .v{color:var(--on-surface);font-weight:500;text-align:right}
/* Danh sách chương */
.chapter-list{display:flex;flex-direction:column;gap:.6rem;margin-top:1rem}
.chapter-item{
display:flex;align-items:center;gap:1rem;
background:var(--sc);border:1px solid rgba(255,255,255,.06);
border-radius:var(--r-md);padding:.9rem 1.15rem;
transition:border-color .18s ease,background .18s ease,transform .18s ease;
cursor:pointer;
}
.chapter-item:hover{border-color:rgba(192,193,255,.35);background:var(--sc-high);transform:translateX(3px)}
.chapter-item.is-playing{border-color:var(--secondary-container);background:rgba(236,106,6,.08)}
.chapter-item .num{
font-family:var(--font-mono);font-size:13px;color:var(--outline);
width:1.75rem;flex:none;text-align:center;
}
.chapter-item.is-playing .num{color:var(--tertiary)}
.chapter-item .info{flex:1;min-width:0}
.chapter-item .info b{display:block;font-weight:500;font-size:15px;color:var(--on-surface)}
.chapter-item .info small{font-size:13px;color:var(--on-surface-variant)}
.chapter-item .dur{font-family:var(--font-mono);font-size:13px;color:var(--on-surface-variant)}
/* ============================================================
9. TRÌNH PHÁT DÍNH ĐÁY
============================================================ */
.mini-player{
position:fixed;left:0;right:0;bottom:0;z-index:80;
transform:translateY(120%);transition:transform .35s cubic-bezier(.2,.7,.3,1);
padding:0 var(--margin) 1rem;
pointer-events:none;
}
.mini-player.is-visible{transform:translateY(0)}
.mini-player-inner{
pointer-events:auto;
max-width:var(--wrap);margin-inline:auto;
display:flex;align-items:center;gap:1rem;
background:rgba(23,31,51,.72);
backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.12);
border-radius:var(--r-xl);padding:.65rem 1rem;
box-shadow:var(--shadow-ambient),0 12px 40px rgba(0,0,0,.5);
}
.mini-player .thumb{
width:52px;height:52px;flex:none;border-radius:var(--r);overflow:hidden;background:var(--sc-high);
}
.mini-player .thumb img{width:100%;height:100%;object-fit:cover}
.mini-player .track{flex:1;min-width:0}
.mini-player .track b{
display:block;font-family:var(--font-display);font-size:15px;font-weight:600;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--on-surface);
}
.mini-player .track small{
font-family:var(--font-mono);font-size:12px;color:var(--on-surface-variant);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;
}
.mini-player .controls{display:flex;align-items:center;gap:.5rem}
.mp-btn{
width:40px;height:40px;border-radius:var(--r-full);border:0;background:transparent;
color:var(--on-surface-variant);display:flex;align-items:center;justify-content:center;
cursor:pointer;transition:all .18s ease;
}
.mp-btn:hover{color:var(--on-surface);background:rgba(255,255,255,.07)}
.mp-play{
width:48px;height:48px;background:var(--secondary-container);color:#fff;
box-shadow:0 6px 20px rgba(236,106,6,.4);
}
.mp-play:hover{background:#ff7d1a;color:#fff}
.mini-player .time{
font-family:var(--font-mono);font-size:12px;color:var(--on-surface-variant);
white-space:nowrap;
}
.mini-player .bar{
flex:1;height:4px;border-radius:var(--r-full);
background:rgba(255,255,255,.14);position:relative;cursor:pointer;min-width:80px;
}
.mini-player .bar > i{
position:absolute;inset:0 auto 0 0;width:0;
background:var(--primary);border-radius:var(--r-full);display:block;
}
.mini-player .progress-wrap{display:flex;align-items:center;gap:.75rem;flex:1.4;min-width:0}
.mp-close{margin-left:.25rem}
/* ============================================================
10. TÍCH HỢP AUDIOIGNITER (ghi đè cho hợp tông tối)
============================================================ */
.audioigniter-wrap,.audioigniter{
background:var(--sc)!important;border:1px solid rgba(255,255,255,.08)!important;
border-radius:var(--r-lg)!important;color:var(--on-surface)!important;
padding:.5rem!important;
}
.audioigniter *{color:inherit}
.audioigniter .ai-track-title,.audioigniter .ai-audio-title{color:var(--on-surface)!important;font-family:var(--font-display)!important}
.audioigniter .ai-track-subtitle,.audioigniter .ai-audio-subtitle{color:var(--on-surface-variant)!important}
.audioigniter .ai-track{border-color:var(--outline-variant)!important}
.audioigniter .ai-track:hover,.audioigniter .ai-track.ai-track-active{background:var(--sc-high)!important}
.audioigniter .ai-btn,.audioigniter button{color:var(--on-surface)!important}
.audioigniter .ai-progress-bar,.audioigniter .ai-volume-bar{background:rgba(255,255,255,.14)!important}
.audioigniter .ai-progress-value,.audioigniter .ai-volume-value{background:var(--primary)!important}
.audioigniter .ai-audio-control-play{background:var(--secondary-container)!important;color:#fff!important;border-radius:var(--r-full)!important}
audio{width:100%;border-radius:var(--r-full);margin-block:1rem}
/* ============================================================
11. SIDEBAR / WIDGET
============================================================ */
.widget{
background:var(--sc);border:1px solid rgba(255,255,255,.08);
border-radius:var(--r-lg);padding:1.35rem;margin-bottom:1.5rem;
}
.widget-title,.widget h2,.widget h3{font-size:1.15rem;margin:0 0 1rem}
.widget ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem}
.widget li a{
display:block;padding:.5rem;border-radius:var(--r);
color:var(--on-surface-variant);font-size:14px;
}
.widget li a:hover{background:var(--sc-high);color:var(--on-surface)}
.rank-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.85rem}
.rank-item{display:flex;align-items:center;gap:.9rem}
.rank-item .rank{
font-family:var(--font-display);font-size:1.5rem;font-weight:700;
color:var(--outline-variant);width:1.6rem;flex:none;text-align:center;
}
.rank-item:nth-child(1) .rank{color:var(--secondary)}
.rank-item:nth-child(2) .rank{color:var(--primary)}
.rank-item:nth-child(3) .rank{color:var(--on-surface-variant)}
.rank-item .thumb{width:48px;height:64px;flex:none;border-radius:var(--r);overflow:hidden;background:var(--sc-high)}
.rank-item .thumb img{width:100%;height:100%;object-fit:cover}
.rank-item .info{min-width:0}
.rank-item .info b{
display:block;font-family:var(--font-display);font-size:14px;font-weight:600;
color:var(--on-surface);line-height:1.35;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.rank-item .info small{font-size:12px;color:var(--on-surface-variant)}
/* Bảng thể loại lớn (mega category grid) */
.cat-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--gutter)}
.cat-group{
background:var(--sc);border:1px solid rgba(255,255,255,.08);
border-radius:var(--r-lg);padding:1.35rem;
}
.cat-group > a.head{
display:flex;align-items:center;gap:.6rem;
font-family:var(--font-display);font-size:1.1rem;font-weight:600;
color:var(--on-surface);margin-bottom:.9rem;
}
.cat-group > a.head:hover{color:var(--primary)}
.cat-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.cat-chips a{
padding:.35rem .7rem;border-radius:var(--r-full);
background:var(--sc-high);border:1px solid transparent;
font-size:13px;color:var(--on-surface-variant);
}
.cat-chips a:hover{border-color:var(--primary);color:var(--primary);background:rgba(192,193,255,.08)}
/* ============================================================
12. PHÂN TRANG
============================================================ */
.pagination{display:flex;justify-content:center;gap:.4rem;margin-top:3rem;flex-wrap:wrap}
.pagination .page-numbers{
display:inline-flex;align-items:center;justify-content:center;
min-width:42px;height:42px;padding-inline:.75rem;
border-radius:var(--r-full);border:1px solid var(--outline-variant);
color:var(--on-surface-variant);font-size:14px;font-weight:500;
}
.pagination .page-numbers:hover{border-color:var(--primary);color:var(--primary)}
.pagination .page-numbers.current{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.pagination .dots{border-color:transparent}
/* ============================================================
13. FOOTER
============================================================ */
.site-footer{
border-top:1px solid rgba(255,255,255,.07);
background:var(--sc-lowest);padding-block:3rem;margin-top:var(--section-gap);
}
.footer-inner{
max-width:var(--wrap);margin-inline:auto;padding-inline:var(--margin);
display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;flex-wrap:wrap;
}
.footer-brand .site-brand{font-size:1.5rem;display:inline-block;margin-bottom:.5rem}
.footer-brand p{font-size:13px;color:var(--on-surface-variant);margin:0}
.footer-nav ul{display:flex;gap:2rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.footer-nav a{color:var(--on-surface-variant);font-size:14px}
.footer-nav a:hover{color:var(--primary)}
/* ============================================================
14. TRANG TĨNH / 404 / BÌNH LUẬN
============================================================ */
.page-hero{padding-block:3rem 1.5rem}
.entry-content{font-size:16px;line-height:1.75;color:var(--on-surface-variant);padding-bottom:var(--section-gap)}
.entry-content h2,.entry-content h3{color:var(--on-surface);margin-top:2rem}
.error-404{text-align:center;padding-block:6rem}
.error-404 .code{font-family:var(--font-mono);font-size:14px;color:var(--tertiary);letter-spacing:.2em}
.comments-area{padding-bottom:var(--section-gap)}
.comments-area h3{font-size:1.35rem;margin-bottom:1.25rem}
.comment-list{list-style:none;margin:0;padding:0}
.comment-list li{
background:var(--sc);border:1px solid rgba(255,255,255,.07);
border-radius:var(--r-md);padding:1rem 1.25rem;margin-bottom:1rem;list-style:none;
}
.comment-list .children{margin-top:1rem;padding-left:1rem;border-left:1px solid var(--outline-variant)}
.comment-form input[type=text],.comment-form input[type=email],
.comment-form input[type=url],.comment-form textarea{
width:100%;background:var(--sc-low);border:1px solid var(--outline-variant);
border-radius:var(--r);color:var(--on-surface);padding:.75rem 1rem;
font-family:var(--font-body);font-size:15px;margin-bottom:1rem;
}
.comment-form textarea:focus,.comment-form input:focus{outline:none;border-color:var(--primary)}
.comment-form .submit{
background:var(--primary);color:var(--on-primary);border:0;
border-radius:var(--r-full);padding:.8rem 1.75rem;font-weight:600;cursor:pointer;
font-family:var(--font-body);
}
/* ============================================================
15. RESPONSIVE
============================================================ */
@media (max-width:1180px){
.story-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.story-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1024px){
:root{--margin:1.5rem;--section-gap:3rem}
.hero-inner{grid-template-columns:1fr;padding-block:3.5rem}
.hero-cover{max-width:260px;justify-self:start;order:-1}
.story-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.archive-layout{grid-template-columns:1fr;gap:1.5rem}
.filter-panel{position:static}
.story-body{grid-template-columns:1fr}
.story-hero-inner{grid-template-columns:220px minmax(0,1fr);gap:1.75rem}
}
@media (max-width:820px){
.nav-toggle{display:inline-flex}
.main-nav{
position:fixed;inset:68px 0 0;z-index:70;
background:var(--surface);padding:1.5rem var(--margin);
overflow-y:auto;display:none;
}
.main-nav.is-open{display:block}
.main-nav ul{flex-direction:column;align-items:stretch;gap:.25rem}
.main-nav > ul > li > a{padding:.75rem 0;font-size:16px;border-bottom:0}
.main-nav ul ul{
position:static;opacity:1;visibility:visible;transform:none;
background:transparent;border:0;box-shadow:none;
padding:0 0 .5rem 1rem;border-left:1px solid var(--outline-variant);
}
.story-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.story-grid.cols-4{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:600px){
:root{--gutter:1rem}
.story-grid,.story-grid.cols-4,.story-grid.cols-5{grid-template-columns:repeat(2,minmax(0,1fr))}
.hero h1{font-size:2rem;line-height:1.2}
.hero-excerpt{font-size:16px}
.story-hero-inner{grid-template-columns:1fr}
.story-hero .cover{max-width:200px}
.hero-actions .btn,.story-actions .btn{flex:1}
.mini-player{padding-inline:.75rem}
.mini-player .progress-wrap,.mini-player .time{display:none}
.footer-inner{flex-direction:column;gap:1.5rem}
.footer-nav ul{gap:1rem}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* ============================================================
16. TƯƠNG THÍCH PLUGIN & THANH ADMIN
============================================================ */
/* Thanh admin của WordPress */
body.admin-bar .site-header{top:32px}
@media screen and (max-width:782px){body.admin-bar .site-header{top:46px}}
/* Bìa dự phòng khi bài chưa có ảnh đại diện */
.hero-cover,.story-card .cover,.story-hero .cover{position:relative}
.cover-fallback{
background:
radial-gradient(120% 80% at 50% 0%,rgba(192,193,255,.16),transparent 60%),
linear-gradient(165deg,var(--sc-high) 0%,var(--sc-lowest) 100%);
font-family:var(--font-display);font-weight:600;font-size:1.05rem;
line-height:1.35;color:var(--on-surface);letter-spacing:-.01em;
}
.hero-cover .cover-fallback{font-size:1.6rem;padding:2rem}
/* ------------------------------------------------------------
Max Mega Menu — đổi sang tông tối cho khớp giao diện
------------------------------------------------------------ */
#mega-menu-wrap-primary,
.mega-menu-wrap{background:transparent!important;box-shadow:none!important}
#mega-menu-wrap-primary .mega-menu-toggle{background:transparent!important}
.main-nav #mega-menu-primary,
#mega-menu-wrap-primary #mega-menu-primary{background:transparent!important;padding:0!important}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link{
background:transparent!important;
color:var(--on-surface-variant)!important;
font-family:var(--font-body)!important;
font-size:15px!important;font-weight:500!important;
text-transform:none!important;letter-spacing:0!important;
height:auto!important;line-height:1.4!important;
padding:.5rem 0!important;margin-right:1.6rem!important;
border-bottom:2px solid transparent!important;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-post-ancestor > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link{
color:var(--on-surface)!important;
background:transparent!important;
border-bottom-color:var(--primary)!important;
}
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item ul.mega-sub-menu{
background:var(--sc)!important;
border:1px solid var(--outline-variant)!important;
border-radius:var(--r-md)!important;
padding:.5rem!important;
box-shadow:0 20px 45px rgba(0,0,0,.55)!important;
}
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item ul.mega-sub-menu a.mega-menu-link{
background:transparent!important;
color:var(--on-surface-variant)!important;
font-family:var(--font-body)!important;
font-weight:400!important;font-size:14px!important;
text-transform:none!important;
padding:.5rem .75rem!important;border-radius:var(--r)!important;
}
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item ul.mega-sub-menu a.mega-menu-link:hover{
background:var(--sc-high)!important;color:var(--on-surface)!important;
}
#mega-menu-wrap-primary .mega-toggle-animated-inner,
#mega-menu-wrap-primary .mega-toggle-animated-inner::before,
#mega-menu-wrap-primary .mega-toggle-animated-inner::after{background:var(--on-surface)!important}
@media (max-width:820px){
.main-nav{position:static;display:block;background:transparent;padding:0;inset:auto}
.nav-toggle{display:none}
}
/* ------------------------------------------------------------
AudioIgniter — tông tối, nút phát màu cam như thiết kế
------------------------------------------------------------ */
.audioigniter-root{margin-block:1.5rem}
.ai-wrap,.ai-audioigniter{
background:var(--sc)!important;
border:1px solid rgba(255,255,255,.08)!important;
border-radius:var(--r-lg)!important;
color:var(--on-surface)!important;
overflow:hidden;
}
.ai-control-wrap{background:transparent!important;padding:.75rem!important}
.ai-track-title,.ai-track-name{
color:var(--on-surface)!important;
font-family:var(--font-display)!important;font-weight:600!important;
}
.ai-track-info,.ai-track-time,.ai-track-artist{color:var(--on-surface-variant)!important;font-family:var(--font-mono)!important}
.ai-thumb,.ai-track-thumb{border-radius:var(--r)!important;overflow:hidden}
.ai-audio-control,.ai-btn,.ai-tracklist-toggle{color:var(--on-surface)!important}
.ai-audio-control svg,.ai-btn svg,.ai-tracklist-toggle svg{fill:currentColor!important}
.ai-audio-controls-main .ai-audio-control:first-child{
background:var(--secondary-container)!important;color:#fff!important;
border-radius:var(--r-full)!important;
box-shadow:0 6px 20px rgba(236,106,6,.4)!important;
}
.ai-track-progress-bar{background:rgba(255,255,255,.16)!important;border-radius:var(--r-full)!important}
.ai-track-progress{background:var(--primary)!important;border-radius:var(--r-full)!important}
.ai-volume-bar{background:rgba(255,255,255,.18)!important}
.ai-volume-bar-active{background:var(--primary)!important}
.ai-tracklist-wrap,.ai-scroll-wrap,.ai-tracklist{background:transparent!important}
.ai-track{
border-color:var(--outline-variant)!important;
color:var(--on-surface-variant)!important;
transition:background .18s ease;
}
.ai-track:hover{background:var(--sc-high)!important}
.ai-track.ai-track-active{background:rgba(236,106,6,.1)!important}
.ai-track.ai-track-active .ai-track-name{color:var(--tertiary)!important}
/* ------------------------------------------------------------
Sassy Social Share & kk Star Ratings
------------------------------------------------------------ */
.heateor_sss_sharing_container{margin-block:1rem 1.5rem}
.heateor_sss_sharing_title{
color:var(--on-surface-variant)!important;
font-family:var(--font-mono)!important;font-size:12px!important;
letter-spacing:.08em;text-transform:uppercase;
}
.kk-star-ratings{margin-block:.5rem 1.25rem}
.kk-star-ratings .kksr-legend{color:var(--on-surface-variant)!important;font-family:var(--font-body)!important}
#comments,.wpd-thread-wrapper{color:var(--on-surface-variant)}
/* Ẩn thanh chia sẻ nổi trên màn hình nhỏ để không che nội dung */
@media (max-width:1400px){
.heateor_sss_vertical_sharing{display:none!important}
}
/* ============================================================
17. TỐI ƯU HIỆU NĂNG DỰNG HÌNH
============================================================ */
/* Ảnh nền hero dùng bản thu nhỏ + độ mờ vừa phải để giảm chi phí đổ bóng */
.hero-bg{filter:blur(38px) saturate(1.2)!important;transform:scale(1.18) translateZ(0)!important}
.story-hero-bg{filter:blur(42px) saturate(1.15)!important;transform:scale(1.2) translateZ(0)!important}
.hero::after,.story-hero::after{contain:paint}
/* Header dính: nền đục hơn, blur nhẹ hơn */
.site-header{background:rgba(11,19,38,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
/* Trình phát dính đáy không tạo lớp ghép hình khi đang ẩn */
.mini-player{backdrop-filter:none}
.mini-player:not(.is-visible){visibility:hidden;pointer-events:none}
.mini-player:not(.is-visible) .mini-player-inner{backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
/* Tinh chỉnh nút phụ của AudioIgniter */
.ai-btn{border:1px solid rgba(255,255,255,.16)!important;background:transparent!important;border-radius:var(--r)!important}
.ai-btn:hover{border-color:var(--primary)!important;color:var(--primary)!important}
.ai-audio-volume-control-btns button{border-color:rgba(255,255,255,.16)!important;color:var(--on-surface-variant)!important}
.ai-volume-bar{background:rgba(255,255,255,.18)!important}
.ai-volume-bar.ai-volume-bar-active{background:var(--primary)!important}
/* Cho phép menu nhiều mục xuống dòng gọn gàng */
.header-inner{height:auto;min-height:68px;padding-block:.6rem;flex-wrap:wrap;row-gap:.25rem}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link{margin-right:1.15rem!important;font-size:14.5px!important}
#mega-menu-wrap-primary #mega-menu-primary{display:flex!important;flex-wrap:wrap!important;align-items:center!important;row-gap:.15rem}
@media (max-width:1100px){#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link{margin-right:.9rem!important;font-size:14px!important}}
/* ============================================================
18. SỬA THANH ĐIỀU HƯỚNG (v1.1.0)
============================================================ */
/* --- 18.1 Desktop: giữ menu trên một hàng ---------------------
Max Mega Menu đã có margin-right riêng cho từng mục; quy tắc
gap 1.75rem của theme cộng thêm vào làm dư ~66px nên menu rớt
xuống hàng thứ hai. Bỏ gap cho riêng mega menu. */
.main-nav #mega-menu-wrap-primary #mega-menu-primary{
gap:0!important;
flex-wrap:nowrap!important;
justify-content:flex-end;
}
.header-inner{
height:auto;min-height:68px;
padding-block:.5rem;
flex-wrap:nowrap;
gap:1.25rem;
}
.main-nav{flex:1 1 auto;min-width:0}
.main-nav #mega-menu-wrap-primary{width:100%}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link{
margin-right:1.1rem!important;
font-size:15px!important;
white-space:nowrap!important;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:last-child > a.mega-menu-link{
margin-right:0!important;
}
/* Màn hình vừa: thu nhỏ dần thay vì rớt dòng */
@media (max-width:1400px){
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link{
margin-right:.85rem!important;font-size:14px!important;
}
}
@media (max-width:1150px) and (min-width:901px){
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link{
margin-right:.6rem!important;font-size:13.5px!important;
}
.site-brand{font-size:1.2rem}
}
/* --- 18.2 Mobile & tablet: menu dạng bảng trượt toàn màn hình --- */
@media (max-width:900px){
:root{--margin:1.1rem}
.header-inner{
min-height:56px;height:auto;
padding-block:.45rem;
gap:.6rem;flex-wrap:nowrap;
}
.site-brand{font-size:1.15rem}
.site-brand img{max-height:34px}
/* Dùng nút hamburger của theme, ẩn nút của Max Mega Menu */
.header-actions .nav-toggle{display:inline-flex!important}
#mega-menu-wrap-primary .mega-menu-toggle{display:none!important}
/* Bảng menu trượt toàn màn hình */
.site-header .main-nav{
position:fixed;inset:0;z-index:55;
display:none;flex:none;width:auto;
background:var(--surface);
padding:74px var(--margin) 7rem;
overflow-y:auto;-webkit-overflow-scrolling:touch;
overscroll-behavior:contain;
}
body.admin-bar .site-header .main-nav{padding-top:120px}
.site-header .main-nav.is-open{display:block}
.main-nav #mega-menu-wrap-primary,
.main-nav .mega-menu-wrap{width:100%!important}
.main-nav #mega-menu-wrap-primary #mega-menu-primary{
display:block!important;
width:100%!important;height:auto!important;
flex-wrap:wrap!important;
}
.main-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item{
display:block!important;width:100%!important;float:none!important;
}
.main-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link{
display:flex!important;align-items:center;justify-content:space-between;
width:100%!important;height:auto!important;
margin:0!important;padding:.9rem 0!important;
font-size:17px!important;font-weight:600!important;
line-height:1.35!important;white-space:normal!important;
color:var(--on-surface)!important;
border:0!important;
border-bottom:1px solid rgba(255,255,255,.07)!important;
}
/* Danh mục con: hiện sẵn, thụt vào, không đổ bóng */
.main-nav #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item > ul.mega-sub-menu{
position:static!important;
display:block!important;
opacity:1!important;visibility:visible!important;transform:none!important;
width:100%!important;max-width:none!important;min-width:0!important;
background:transparent!important;
border:0!important;border-left:2px solid var(--outline-variant)!important;
border-radius:0!important;box-shadow:none!important;
margin:.5rem 0 1rem .25rem!important;
padding:0 0 0 .9rem!important;
}
.main-nav #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link{
padding:.5rem 0!important;font-size:15px!important;
color:var(--on-surface-variant)!important;
white-space:normal!important;
}
.main-nav #mega-menu-wrap-primary #mega-menu-primary .mega-indicator{display:none!important}
/* Thanh tìm kiếm trong header */
.header-search .wrap{padding-block:.75rem}
.search-form .btn{padding:.6rem .9rem}
/* Trình phát dính đáy gọn hơn */
body.has-mini-player{padding-bottom:92px}
.mini-player{padding:0 .6rem .6rem}
.mini-player-inner{gap:.6rem;padding:.5rem .65rem;border-radius:var(--r-lg)}
.mini-player .thumb{width:44px;height:44px}
.mini-player .track b{font-size:14px}
.mini-player .track small{font-size:11px}
.mp-btn{width:36px;height:36px}
.mp-play{width:44px;height:44px}
.mp-close{display:none}
/* Bộ lọc trang danh mục: không đẩy nội dung xuống quá xa */
.filter-panel{padding:1rem}
.filter-panel .filter-list{max-height:210px;overflow-y:auto}
/* Hero gọn hơn */
.hero-inner{padding-block:2.5rem}
.story-hero{padding-block:2rem}
/* Thanh chia sẻ nổi của plugin không che nội dung */
.heateor_sss_vertical_sharing,
.heateor_sss_floating_sharing{display:none!important}
}
@media (max-width:600px){
.hero-cover{max-width:200px}
.story-hero .cover{max-width:180px}
.info-card{padding:1.1rem}
}
/* 18.3 — backdrop-filter trên header tạo "containing block" khiến bảng menu
position:fixed bị kẹt bên trong header. Bỏ blur ở mobile (nền đã gần đục
hoàn toàn nên nhìn không khác) để bảng menu phủ đúng toàn màn hình. */
@media (max-width:900px){
.site-header{
background:var(--surface);
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
}
}
/* 18.4 — Bảng menu mở ra BÊN DƯỚI thanh header (không phủ lên), để logo và
nút đóng luôn nhìn thấy; kèm hiệu ứng đổi hamburger thành dấu X. */
@media (max-width:900px){
.site-header .main-nav{
top:57px;bottom:0;left:0;right:0;
padding:1rem var(--margin) 7rem!important;
}
body.admin-bar .site-header .main-nav{top:103px}
.header-actions .nav-toggle{position:relative}
.header-actions .nav-toggle[aria-expanded="true"]{
color:var(--primary);border-color:var(--primary);
background:rgba(192,193,255,.1);
}
.header-actions .nav-toggle[aria-expanded="true"] svg{display:none}
.header-actions .nav-toggle[aria-expanded="true"]::before,
.header-actions .nav-toggle[aria-expanded="true"]::after{
content:"";position:absolute;left:50%;top:50%;
width:17px;height:2px;background:currentColor;border-radius:2px;
}
.header-actions .nav-toggle[aria-expanded="true"]::before{transform:translate(-50%,-50%) rotate(45deg)}
.header-actions .nav-toggle[aria-expanded="true"]::after{transform:translate(-50%,-50%) rotate(-45deg)}
}
/* 18.5 — Trên mobile, thanh chia sẻ nổi của Sassy Social Share bám đáy và
đè lên trình phát. Đẩy trình phát lên trên nó và chừa thêm khoảng trống
cuối trang để không che nội dung. */
@media (max-width:900px){
.heateor_sss_bottom_sharing{z-index:60!important}
body:has(.heateor_sss_bottom_sharing) .mini-player{bottom:46px}
body.has-mini-player:has(.heateor_sss_bottom_sharing){padding-bottom:150px}
}
/* 18.6 — Trang chi tiết truyện gọn hơn trên mobile */
@media (max-width:600px){
.story-hero-inner{gap:1.25rem}
.story-hero h1{font-size:1.65rem;line-height:1.25}
.story-tags{gap:.35rem;margin-bottom:.9rem}
.story-actions{gap:.6rem;margin-bottom:1.25rem}
.story-actions .btn{flex:1 1 auto;padding:.7rem 1rem;font-size:14px}
.story-share{padding-top:1rem}
.story-body{gap:2rem;padding-block:2rem 3rem}
.story-content h2{font-size:1.3rem}
.archive-head h1{font-size:1.5rem}
.section-head h2{font-size:1.35rem}
}
/* 18.7 — Khoá trạng thái hiện/ẩn của trình phát dính đáy để không plugin nào
ghi đè được (sassy-social-share và mega menu đều nạp CSS sau theme). */
.mini-player.is-visible{transform:translateY(0)!important}
/* 18.8 — Trên mobile, thanh admin của WordPress là position:absolute nên nó
cuộn đi mất; nếu header vẫn dính ở top:46px sẽ hở một khe 46px cho nội dung
lọt lên phía trên header. Dính sát mép trên. */
@media screen and (max-width:782px){
body.admin-bar .site-header{top:0}
}
/* 18.9 — Header tự ẩn khi cuộn xuống trên mobile (class do main.js gắn). */
@media (max-width:900px){
/* KHÔNG dùng will-change/backdrop-filter ở đây: cả hai đều tạo
"containing block" làm bảng menu position:fixed bị neo sai. */
.site-header{transition:transform .28s cubic-bezier(.2,.7,.3,1)}
body.bac-nav-hidden .site-header{transform:translateY(-105%)}
body.bac-nav-hidden .header-search{display:none}
}
/* ============================================================
19. TRÌNH PHÁT CỦA THEME (v1.3.0)
============================================================ */
/* --- 19.1 Danh sách chương trên trang truyện --- */
.chapters{margin-block:2rem}
.chapters h2{font-size:1.5rem;margin-bottom:.9rem}
.chapter-item{
width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
display:flex;align-items:center;gap:1rem;
background:var(--sc);border:1px solid rgba(255,255,255,.06);
border-radius:var(--r-md);padding:.85rem 1.1rem;
transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.chapter-item:hover{border-color:rgba(192,193,255,.35);background:var(--sc-high);transform:translateX(3px)}
.chapter-item .dur{
display:inline-flex;align-items:center;justify-content:center;
width:34px;height:34px;border-radius:var(--r-full);
background:rgba(255,255,255,.06);color:var(--on-surface-variant);flex:none;
}
.chapter-item:hover .dur{background:var(--secondary-container);color:#fff}
.chapter-item.is-playing{border-color:var(--secondary-container);background:rgba(236,106,6,.1)}
.chapter-item.is-playing .num{color:var(--tertiary)}
.chapter-item.is-playing .dur{background:var(--secondary-container);color:#fff}
.chapter-item .info b{margin:0}
/* Nút "Nghe ngay" khi đang phát chính truyện này */
.btn-accent.is-playing{background:var(--sc-high);color:var(--tertiary);border-color:transparent}
.btn-accent.is-playing:hover{background:var(--sc-highest);color:var(--tertiary)}
/* --- 19.2 Nút play trên bìa truyện --- */
.play-overlay{cursor:pointer}
.play-overlay.is-loading span{opacity:.5;animation:bac-pulse 1s ease-in-out infinite}
@keyframes bac-pulse{50%{opacity:1}}
/* --- 19.3 Nút chương trước / sau --- */
.mp-btn:disabled{opacity:.3;cursor:default}
.mp-btn:disabled:hover{background:transparent;color:var(--on-surface-variant)}
.mini-player .thumb{display:block}
/* --- 19.4 Ngăn kéo danh sách chương của trình phát --- */
.mp-queue{
pointer-events:auto;
max-width:var(--wrap);margin:0 auto .5rem;
background:rgba(23,31,51,.94);
backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.12);
border-radius:var(--r-xl);
box-shadow:var(--shadow-ambient),0 12px 40px rgba(0,0,0,.5);
overflow:hidden;
}
.mp-queue-head{
display:flex;align-items:center;justify-content:space-between;gap:1rem;
padding:.9rem 1.1rem;border-bottom:1px solid var(--outline-variant);
}
.mp-queue-head b{font-family:var(--font-display);font-size:1rem;color:var(--on-surface)}
.mp-queue-list{
list-style:none;margin:0;padding:.5rem;
max-height:46vh;overflow-y:auto;
}
.mp-queue-item{
width:100%;display:flex;align-items:center;gap:.75rem;
background:transparent;border:0;cursor:pointer;
font:inherit;text-align:left;color:var(--on-surface-variant);
padding:.6rem .75rem;border-radius:var(--r);
}
.mp-queue-item:hover{background:var(--sc-high);color:var(--on-surface)}
.mp-queue-item .n{font-family:var(--font-mono);font-size:12px;color:var(--outline);width:1.6rem;flex:none}
.mp-queue-item .t{flex:1;min-width:0;font-size:14px}
.mp-queue-item.is-playing{background:rgba(236,106,6,.12);color:var(--tertiary)}
.mp-queue-item.is-playing .n{color:var(--tertiary)}
/* --- 19.5 Thanh báo đang nạp trang --- */
.pjax-bar{
position:fixed;top:0;left:0;right:0;height:3px;z-index:120;
background:linear-gradient(90deg,var(--primary),var(--secondary-container));
transform-origin:left;animation:bac-load 1.4s ease-in-out infinite;
}
@keyframes bac-load{0%{transform:scaleX(.05)}50%{transform:scaleX(.7)}100%{transform:scaleX(1);opacity:.4}}
/* --- 19.6 Ghi chú khi trang được nạp nhanh --- */
.bac-reload-note{
background:var(--sc);border:1px solid var(--outline-variant);
border-left:3px solid var(--tertiary);
border-radius:0 var(--r) var(--r) 0;
padding:.75rem 1rem;font-size:14px;color:var(--on-surface-variant);
}
@media (max-width:900px){
.mp-queue{margin-inline:0;border-radius:var(--r-lg)}
.mp-queue-list{max-height:40vh}
.mini-player .mp-step{display:none}
.mini-player #mp-queue-toggle{display:flex}
}
/* ==========================================================================
19. LOGO TUỲ CHỈNH (Customizer → Nhận diện trang web → Logo)
--------------------------------------------------------------------------
Trước v1.4.0 theme không có CSS nào cho logo, nên WordPress xuất thẻ
![]()
ở kích thước gốc (1982x496) -> logo hiển thị
777x194, header phình từ 68px lên 212px và menu (bị ép flex-wrap:nowrap
ở mục 18) không đủ chỗ nên tràn ra đè lên logo.
Giới hạn chiều cao logo là đủ để xử lý cả hai triệu chứng.
Không dùng overflow:hidden trên .site-header — xem cảnh báo ở mục 18.
========================================================================== */
.custom-logo-link{
display:flex;
align-items:center;
flex:0 0 auto;
line-height:0;
}
.custom-logo{
height:40px;
width:auto;
max-width:220px;
object-fit:contain;
display:block;
}
/* Cho phép vùng menu co lại thay vì đẩy tràn ra ngoài header */
.main-nav{ min-width:0 }
@media (max-width:1150px){
.custom-logo{ height:34px; max-width:180px }
}
@media (max-width:900px){
.custom-logo{ height:30px; max-width:150px }
}
/* ==========================================================================
20. ẢNH BÌA TRÊN MOBILE — cho ảnh chiếm trọn chiều ngang
--------------------------------------------------------------------------
Trước v1.5.0: ở <=900px ảnh bìa bị ghim max-width 260px (hero trang chủ)
/ 220px (trang truyện), <=600px còn 200px / 180px và dán sát mép trái
-> trông như bị co về một góc.
Nay ảnh trải hết chiều ngang cột và canh giữa. Chiều cao được chặn theo
56vh (tỉ lệ 2:3 nên quy ra chiều rộng = 56vh * 2/3) để ảnh không cao quá
màn hình, đẩy tiêu đề và nút "Nghe ngay" xuống dưới nếp gấp.
========================================================================== */
@media (max-width:900px){
/* Trang truyện: xếp một cột, ảnh lên trên phần chữ */
.story-hero-inner{
grid-template-columns:1fr;
gap:1.5rem;
}
.story-hero .cover{ order:-1 }
/* Ảnh bìa trang chủ và trang truyện */
.hero-cover,
.story-hero .cover{
width:100%;
max-width:min(100%, 420px, calc(56vh * 2 / 3));
margin-inline:auto;
justify-self:center;
}
/* Bớt khoảng trống cho vừa màn hình điện thoại */
.hero-inner{
padding-block:2rem 2.25rem;
gap:1.75rem;
}
}
@media (max-width:600px){
/* Ghi đè hai mốc cũ 200px / 180px ở mục 18 */
.hero-cover{ max-width:min(100%, calc(56vh * 2 / 3)) }
.story-hero .cover{ max-width:min(100%, calc(56vh * 2 / 3)) }
.hero-inner{ padding-block:1.75rem 2rem }
.hero-cover .cover-fallback{ font-size:1.45rem; padding:1.5rem }
}
/* ==========================================================================
21. ÂM LƯỢNG + NÚT TẮT TRÌNH PHÁT TRÊN MOBILE (v1.6.0)
--------------------------------------------------------------------------
- Nút loa chèn ngay trước nút danh sách chương (do main.js tạo).
- Desktop: rê chuột / focus vào nút loa thì hiện thanh trượt; bấm nút = tắt/bật tiếng.
- Mobile: chỉ có nút tắt/bật tiếng. Lý do: iOS không cho chỉnh volume bằng
JavaScript (chỉ hardware volume), thanh trượt sẽ kéo được mà không đổi âm.
- Mục 18 từng ẩn .mp-close ở <=900px cho đỡ chật; nay bật lại theo yêu cầu.
========================================================================== */
.mp-vol{ position:relative; display:flex; align-items:center; flex:0 0 auto }
.mp-vol-panel{
position:absolute;
bottom:calc(100% + 10px);
left:50%;
transform:translateX(-50%) translateY(6px);
padding:.7rem .75rem;
background:var(--sc-low);
border:1px solid var(--outline-variant);
border-radius:var(--r);
box-shadow:0 14px 34px rgba(0,0,0,.6);
opacity:0; visibility:hidden; pointer-events:none;
transition:opacity .18s ease, transform .18s ease, visibility .18s;
z-index:5;
}
.mp-vol.is-open .mp-vol-panel{
opacity:1; visibility:visible; pointer-events:auto;
transform:translateX(-50%) translateY(0);
}
#mp-vol-range{
-webkit-appearance:none; appearance:none;
display:block; width:112px; height:4px; margin:0;
border-radius:999px; outline:none; cursor:pointer;
background:linear-gradient(90deg,
var(--primary) calc(var(--vol,1) * 100%),
var(--outline-variant) calc(var(--vol,1) * 100%));
}
#mp-vol-range::-webkit-slider-thumb{
-webkit-appearance:none; appearance:none;
width:14px; height:14px; border-radius:50%;
background:var(--primary); border:0; cursor:pointer;
box-shadow:0 0 0 4px rgba(192,193,255,.18);
}
#mp-vol-range::-moz-range-thumb{
width:14px; height:14px; border-radius:50%;
background:var(--primary); border:0; cursor:pointer;
}
#mp-vol-range:focus-visible{ box-shadow:0 0 0 2px var(--primary) }
@media (max-width:900px){
/* Bật lại nút tắt trình phát (mục 18 đang ẩn) */
.mp-close{ display:inline-flex }
/* Mobile không dùng thanh trượt — nút loa thành nút tắt/bật tiếng */
.mp-vol-panel{ display:none }
/* Thu khoảng cách để đủ chỗ cho 2 nút mới */
.mini-player-inner{ gap:.4rem; padding:.5rem .5rem }
.mini-player .mp-btn{ width:34px; height:34px }
}
@media (max-width:420px){
.mini-player .mp-thumb{ display:none }
.mini-player-inner{ gap:.3rem }
}
/* --------------------------------------------------------------------------
21b. TRINH PHAT MOBILE — xep 2 hang (v1.6.0)
Them nut loa + nut tat lam thanh player 1 hang qua chat: ten chuong bi ep
con 44px. Nay tren <=600px xep lam 2 hang:
hang 1: anh bia · ten truyen/chuong · nut X
hang 2: lui 15s · phat · tien 15s · loa · danh sach chuong
Phan tu .mp-break (do main.js tao) co flex-basis 100% de ngat dong.
-------------------------------------------------------------------------- */
.mp-break{ display:none }
@media (max-width:600px){
.mini-player-inner{
flex-wrap:wrap;
row-gap:.45rem;
align-items:center;
}
.mini-player .mp-thumb{ order:1; flex:0 0 auto; display:block }
.mini-player .track{ order:2; flex:1 1 0; min-width:0; overflow:hidden }
.mini-player .track b,
.mini-player .track small{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.mini-player .mp-close{ order:3; flex:0 0 auto }
.mp-break{ display:block; order:4; flex:0 0 100%; height:0; margin:0 }
.mini-player .controls{ order:5; flex:1 1 0; min-width:0; justify-content:flex-start; gap:.45rem }
.mini-player .mp-vol{ order:6; flex:0 0 auto }
.mini-player #mp-queue-toggle{ order:7; flex:0 0 auto }
}
@media (max-width:420px){
/* Bo quy tac an anh bia o 21 — bo cuc 2 hang da du cho */
.mini-player .mp-thumb{ display:block }
.mini-player-inner{ gap:.4rem }
}
/* ==========================================================================
22. HERO CAROUSEL — 6 truyen noi bat, vuot ngang (v1.7.0)
--------------------------------------------------------------------------
front-page.php lay 6 bai (uu tien bai ghim, thieu thi bu bai moi nhat) va
boc cac trong .hero-track.
Truot bang CSS scroll-snap — vuot tay chay san tren mobile, khong can thu vien.
Hang anh bia tron ben duoi do main.js tao tu chinh cac slide.
========================================================================== */
.hero-carousel{ position:relative }
.hero-track{
display:flex;
overflow-x:auto;
overflow-y:hidden;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
}
.hero-track::-webkit-scrollbar{ display:none }
.hero-track > .hero{
flex:0 0 100%;
min-width:100%;
scroll-snap-align:center;
scroll-snap-stop:always;
border-bottom:0;
}
/* Hang anh bia tron lam chi muc */
.hero-dots{
position:relative;
z-index:3;
display:flex;
gap:.6rem;
justify-content:center;
align-items:center;
flex-wrap:wrap;
padding:0 var(--margin) 1.6rem;
margin-top:-1.4rem;
background:var(--surface);
border-bottom:1px solid rgba(255,255,255,.06);
}
.hero-dot{
width:44px; height:44px; padding:0;
border-radius:50%;
border:2px solid transparent;
background:var(--sc-high);
overflow:hidden;
cursor:pointer;
opacity:.55;
transition:opacity .2s ease, border-color .2s ease, transform .2s ease;
}
.hero-dot img{ width:100%; height:100%; object-fit:cover; display:block }
.hero-dot:hover{ opacity:.9; transform:translateY(-2px) }
.hero-dot.is-active{
opacity:1;
border-color:var(--accent, #ec6a06);
box-shadow:0 0 0 3px rgba(236,106,6,.22);
}
.hero-dot:focus-visible{ outline:2px solid var(--primary); outline-offset:2px }
/* Nut mui ten — chi tren may co chuot */
.hero-nav{
position:absolute; top:50%; transform:translateY(-50%);
z-index:4;
width:44px; height:44px;
display:none;
align-items:center; justify-content:center;
border:1px solid rgba(255,255,255,.14);
border-radius:50%;
background:rgba(11,19,38,.72);
backdrop-filter:blur(8px);
color:var(--on-surface);
cursor:pointer;
transition:background .2s ease, border-color .2s ease;
}
.hero-nav:hover{ background:rgba(11,19,38,.95); border-color:var(--primary) }
.hero-nav .icon{ width:22px; height:22px }
.hero-prev{ left:.8rem }
.hero-next{ right:.8rem }
@media (hover:hover) and (min-width:1025px){
.hero-nav{ display:flex }
}
@media (max-width:600px){
.hero-dots{ gap:.45rem; padding-bottom:1.2rem; margin-top:-1rem }
.hero-dot{ width:38px; height:38px }
}
@media (prefers-reduced-motion:reduce){
.hero-track{ scroll-behavior:auto }
}
/* ==========================================================================
23. HERO MOBILE GON LAI + LO SLIDE KE BEN (v1.8.0)
--------------------------------------------------------------------------
Truoc do tren mobile: 1 slide cao 961px > man hinh 844px, hang anh bia tron
nam o 1048px -> phai cuon 204px moi thay, khong biet la co nhieu bai.
Nay: slide chiem 88% chieu ngang (lo mep slide sau), anh bia 56vh -> 38vh,
tom tat con 2 dong, hang anh tron nho lai va keo sat len.
Tieu de slide 2..6 la (SEO: 1 trang chi 1 the H1),
nen phai style giong h1 cu.
========================================================================== */
/* Tieu de slide khong phai slide dau — trong giong h1 */
.hero .hero-title{
font-size:clamp(2rem,4.4vw,3rem);
font-weight:700;
letter-spacing:-.02em;
line-height:1.1;
margin-bottom:1rem;
font-family:var(--font-display);
}
.hero .hero-title a{ color:inherit }
.hero .hero-title a:hover{ color:var(--primary) }
/* Chip "+N nua" trong bang the loai */
.cat-chips .chip-more{
border-style:dashed;
opacity:.85;
}
@media (max-width:900px){
/* Lo mep slide ke ben de biet con vuot duoc */
.hero-track{ scroll-padding-inline:6% }
.hero-track > .hero{
flex:0 0 88%;
min-width:88%;
margin-inline:1.5%;
border-radius:var(--r-lg);
overflow:hidden;
}
.hero-track > .hero:first-child{ margin-left:6% }
.hero-track > .hero:last-child{ margin-right:6% }
/* Rut chieu cao slide */
.hero-inner{ padding-block:1.5rem 1.75rem; gap:1.25rem }
.hero-cover{ max-width:min(100%, calc(32vh * 2 / 3)) }
.hero h1, .hero .hero-title{ font-size:1.7rem; line-height:1.2; margin-bottom:.6rem }
.hero-excerpt{
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
margin-bottom:1.1rem;
}
.hero-meta{ margin-bottom:.8rem }
/* Hang anh bia tron: nho lai, keo sat len */
.hero-dots{ gap:.4rem; padding-bottom:.9rem; margin-top:-1.4rem }
.hero-dot{ width:32px; height:32px }
}
@media (max-width:600px){
.hero-cover{ max-width:min(100%, calc(32vh * 2 / 3)) }
.hero h1, .hero .hero-title{ font-size:1.55rem }
.hero-inner{ padding-block:1rem 1.15rem }
}
/* May man ngan (iPhone SE/8...): bo tom tat, thu nho anh de hang anh tron
van nam trong man hinh dau tien. */
@media (max-width:900px) and (max-height:740px){
.hero-inner{ padding-block:.9rem 1rem; gap:.9rem }
.hero-cover{ max-width:min(100%, calc(24vh * 2 / 3)) }
.hero-excerpt{ display:none }
.hero h1, .hero .hero-title{ font-size:1.35rem; margin-bottom:.5rem }
.hero-meta{ margin-bottom:.55rem }
.hero-actions .btn{ padding:.6rem .9rem; font-size:14px }
.hero-dots{ margin-top:-1.6rem; padding-bottom:.75rem }
.hero-dot{ width:30px; height:30px }
}