/*
Theme Name: Truyen Tranh Lite
Theme URI: https://example.com/
Author: OpenAI
Description: Theme WordPress nhẹ, tối giản, tương thích shortcode Truyện Tranh Lite.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: truyen-tranh-lite-theme
*/
:root{--ttl-primary:#2563eb;--ttl-text:#202938;--ttl-muted:#687386;--ttl-border:#e7eaf0;--ttl-bg:#f6f8fb;--ttl-surface:#fff;--ttl-radius:12px;--ttl-content:1180px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ttl-bg);color:var(--ttl-text);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-size:16px;line-height:1.65}
a{color:var(--ttl-primary);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
.ttl-container{width:min(var(--ttl-content),calc(100% - 32px));margin-inline:auto}
.ttl-skip{position:absolute;left:-9999px;top:auto}.ttl-skip:focus{left:12px;top:12px;background:#fff;padding:10px;z-index:1000}
.ttl-header{background:#fff;border-bottom:1px solid var(--ttl-border)}
.ttl-header-inner{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.ttl-brand{display:flex;align-items:center;gap:10px;color:var(--ttl-text);font-weight:800;font-size:22px;letter-spacing:-.5px}
.ttl-brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--ttl-primary);color:#fff;font-size:19px}
.ttl-brand img{max-height:48px;width:auto}
.ttl-nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.ttl-nav a{font-size:14px;font-weight:650;color:#465166}
.ttl-nav-toggle{display:none}
.ttl-main{min-height:65vh;padding:28px 0 48px}
.ttl-page-card,.ttl-post-card,.ttl-content-card{background:var(--ttl-surface);border:1px solid var(--ttl-border);border-radius:var(--ttl-radius);padding:clamp(18px,3vw,30px);box-shadow:0 3px 16px rgba(25,40,70,.025)}
.ttl-page-title{font-size:clamp(25px,3vw,36px);line-height:1.2;letter-spacing:-.8px;margin:0 0 22px}
.ttl-footer{background:#fff;border-top:1px solid var(--ttl-border);padding:25px 0;color:var(--ttl-muted);font-size:13px}
.ttl-footer-inner{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.ttl-footer p{margin:0}
.ttl-content-card h1,.ttl-content-card h2,.ttl-content-card h3{line-height:1.3}
.ttl-content-card h1{font-size:clamp(26px,4vw,38px)}
.ttl-content-card h2{font-size:24px}
.ttl-content-card a{overflow-wrap:anywhere}
.ttl-content-card .ttl-wrap{max-width:none}
.ttl-content-card .ttl-head{align-items:center;flex-wrap:wrap}
.ttl-content-card .ttl-head h2{font-size:clamp(22px,3vw,30px);margin:0}
.ttl-content-card .ttl-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.ttl-content-card .ttl-card{border-color:var(--ttl-border);border-radius:10px;box-shadow:0 2px 8px rgba(20,35,60,.035)}
.ttl-content-card .ttl-card h3{font-weight:700}
.ttl-content-card .ttl-btn{background:var(--ttl-primary);font-weight:650}
.ttl-content-card .ttl-detail{align-items:start}
.ttl-content-card .ttl-detail .ttl-cover{height:auto}
.ttl-content-card .ttl-pages{max-width:900px}
.ttl-content-card .ttl-notice{background:#f8fafc}
input,button,select,textarea{font:inherit}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #93c5fd;outline-offset:2px}
@media(max-width:980px){.ttl-content-card .ttl-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:720px){.ttl-header-inner{min-height:66px;gap:12px}.ttl-brand{font-size:19px}.ttl-nav{gap:12px}.ttl-nav a{font-size:13px}.ttl-main{padding:18px 0 32px}.ttl-content-card .ttl-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.ttl-content-card .ttl-cardbody{padding:8px}.ttl-content-card .ttl-card h3{font-size:13px}}
@media(max-width:520px){.ttl-container{width:calc(100% - 22px)}.ttl-header-inner{align-items:flex-start;padding:13px 0;flex-direction:column}.ttl-nav{width:100%;gap:15px}.ttl-main{padding-top:12px}.ttl-page-card,.ttl-content-card{padding:14px}.ttl-content-card .ttl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.ttl-content-card .ttl-detail{grid-template-columns:100px minmax(0,1fr);gap:12px}.ttl-content-card .ttl-detail h1{font-size:22px}.ttl-content-card .ttl-detail p{font-size:14px}.ttl-footer-inner{display:block}.ttl-footer p+p{margin-top:8px}}