/*
Theme Name: STHL Lite
Theme URI: https://saotruchoalong.com/
Author: Sáo Trúc Hoa Long
Description: Theme nhẹ, hiện đại, tải nhanh cho blog cảm âm sáo trúc. Không jQuery, không font icon, font hệ thống, có vị trí quảng cáo AdSense và YouTube chỉ tải khi bấm.
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sthl-lite
*/

:root{--bg:#fff;--fg:#1c2330;--mut:#5b6575;--line:#e4e8ee;--card:#f4f7fb;--ac:#0b67c2;--w:1100px;--rw:780px}
@media(prefers-color-scheme:dark){:root{--bg:#10151c;--fg:#e6e9ee;--mut:#9aa6b6;--line:#232c38;--card:#18202a;--ac:#5aa9f0}}
*,::before,::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.7 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;overflow-wrap:break-word}
html,body{overflow-x:hidden}
img,iframe,video,svg,embed,object,ins{max-width:100%;height:auto}
a{color:var(--ac)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 16px}
.screen-reader-text,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{position:fixed;top:8px;left:8px;z-index:99;background:var(--bg);padding:8px 12px;border-radius:6px}

/* Header */
.site-header{background:var(--bg)}
.brandbar{padding-top:10px;padding-bottom:10px}
.brand{margin:0;font-size:1.3rem;font-weight:700;line-height:1.2}
.brand a{color:var(--fg);text-decoration:none}
.custom-logo{max-height:44px;width:auto}
.navbar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg)}
.nb{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:52px}
.nav-toggle{display:none;align-items:center;gap:10px;padding:8px 2px;border:0;background:none;color:var(--mut);font:inherit;font-size:.92rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.bars,.bars::before,.bars::after{display:block;width:18px;height:2.5px;background:currentColor;border-radius:2px}
.bars{position:relative}
.bars::before,.bars::after{content:"";position:absolute;left:0}
.bars::before{top:-6px}
.bars::after{top:6px}
#site-nav{flex:1;min-width:0}
#site-nav ul{list-style:none;margin:0;padding:0}
#site-nav .menu{display:flex;flex-wrap:wrap}
#site-nav li{position:relative}
#site-nav a{display:block;padding:16px 14px 14px;color:var(--fg);text-decoration:none;font-size:.82rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-bottom:2px solid transparent}
#site-nav .menu>li>a:hover,#site-nav .menu>.current-menu-item>a,#site-nav .menu>.current-menu-ancestor>a,#site-nav .menu>.current-menu-parent>a{color:var(--ac);border-bottom-color:var(--ac)}
#site-nav .menu>li.menu-item-has-children>a::after{content:"";display:inline-block;width:5px;height:5px;margin-left:8px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translateY(-2px)}
#site-nav .sub-menu{display:none;position:absolute;left:0;top:100%;z-index:30;min-width:230px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:6px;box-shadow:0 10px 28px rgba(0,0,0,.14)}
#site-nav li:hover>.sub-menu,#site-nav li:focus-within>.sub-menu{display:block}
#site-nav .sub-menu .sub-menu{left:100%;top:-7px}
#site-nav .sub-menu a{padding:9px 12px;font-size:.95rem;font-weight:500;letter-spacing:0;text-transform:none;border:0;border-radius:6px}
#site-nav .sub-menu a:hover,#site-nav .sub-menu .current-menu-item>a{background:var(--card);color:var(--ac)}
.sub-toggle{display:none}
.hs{position:relative;flex:none;width:250px}
.hs input{width:100%;padding:9px 12px 9px 38px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg);font:inherit;font-size:.95rem;-webkit-appearance:none;appearance:none}
.hs button{position:absolute;left:0;top:0;bottom:0;width:38px;display:flex;align-items:center;justify-content:center;padding:0;border:0;background:none;color:#8a94a3;cursor:pointer}
@media(max-width:820px){
.nb{flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.nav-toggle{display:inline-flex}
.hs{width:min(60%,320px);margin-left:auto}
#site-nav{display:none;order:3;flex:0 0 100%;border-top:1px solid var(--line);margin-top:6px}
#site-nav.open{display:block}
#site-nav .menu{flex-direction:column}
#site-nav a,#site-nav .sub-menu a{padding:13px 4px;font-size:.9rem;border-bottom:0;border-radius:0}
#site-nav .menu>li.menu-item-has-children>a::after{content:none}
#site-nav li{border-bottom:1px solid var(--line)}
#site-nav li:last-child{border-bottom:0}
#site-nav li.menu-item-has-children{display:flex;flex-wrap:wrap;align-items:center}
#site-nav li.menu-item-has-children>a{flex:1}
.sub-toggle{display:flex;align-items:center;justify-content:center;width:46px;height:44px;border:0;background:none;color:var(--mut);cursor:pointer}
.sub-toggle::before{content:"";width:8px;height:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px);transition:transform .15s}
#site-nav li.open>.sub-toggle::before{transform:rotate(225deg) translateY(-2px)}
#site-nav .sub-menu{display:none;position:static;flex:0 0 100%;min-width:0;border:0;border-radius:0;box-shadow:none;padding:0 0 4px 14px;background:none}
#site-nav li:hover>.sub-menu,#site-nav li:focus-within>.sub-menu{display:none}
#site-nav li.open>.sub-menu{display:block}
#site-nav .sub-menu li{border-bottom:0}
}

/* Thông báo quảng cáo */
.ad-notice{background:var(--card);border-bottom:1px solid var(--line);padding:14px 0 16px;text-align:center}
.ad-notice p{overflow-wrap:anywhere;margin:0 0 10px;font-size:.95rem;line-height:1.5;font-weight:700;color:var(--mut)}
.ad-notice button{padding:10px 22px;border:0;border-radius:6px;background:#1769c2;color:#fff;font:inherit;font-size:.82rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.ad-notice button:hover{background:#0f56a3}
.notice-off .ad-notice{display:none}

/* Layout */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;padding-top:20px;padding-bottom:20px}
.narrow{max-width:var(--rw);margin:0 auto;padding:20px 16px}
@media(max-width:900px){.layout{grid-template-columns:minmax(0,1fr)}}

/* Archive list */
.arch h1{margin:.2em 0 .3em;font-size:1.6rem;line-height:1.3}
.arch p{color:var(--mut);margin:0 0 .5em}
.post-card{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.post-card .thumb{flex:none;display:block}
.post-card img{display:block;width:160px;height:100px;object-fit:cover;border-radius:8px}
.post-card h2{margin:0 0 4px;font-size:1.15rem;line-height:1.35}
.post-card h2 a{color:var(--fg);text-decoration:none}
.post-card h2 a:hover{color:var(--ac)}
.post-card p{margin:6px 0 0;color:var(--mut);font-size:.95rem;line-height:1.55}
.meta{font-size:.85rem;color:var(--mut)}
.meta a{color:inherit}
@media(max-width:560px){.post-card{gap:12px}.post-card img{width:108px;height:76px}.post-card p{display:none}}
.nav-links{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:24px 0}
.page-numbers{padding:6px 12px;border:1px solid var(--line);border-radius:6px;color:var(--fg);text-decoration:none;font-size:.95rem}
.page-numbers.current,.page-numbers:hover{background:var(--ac);border-color:var(--ac);color:#fff}

/* Sidebar */
.sidebar{font-size:.95rem}
.widget{margin:0 0 24px;padding:16px;background:var(--card);border-radius:10px}
.widget-title,.widget h2{margin:0 0 10px;font-size:1.05rem;line-height:1.3}
.widget ul{margin:0;padding-left:18px}
.widget li{margin:6px 0}
.sf{display:flex;gap:6px}
.sf input[type=search]{flex:1;min-width:0;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg);font:inherit}
.sf button,.wp-block-search__button,.comment-form .submit{padding:9px 16px;border:0;border-radius:8px;background:var(--ac);color:#fff;font:inherit;cursor:pointer}

/* Single */
.crumbs{margin:0 0 14px;font-size:.85rem;color:var(--mut)}
.crumbs p{display:flex;align-items:center;flex-wrap:nowrap;margin:0;padding:2px 0;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.crumbs p::-webkit-scrollbar{display:none}
.crumbs a{flex:none;color:var(--ac);font-weight:500;text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs p>a:first-child::before{content:"";display:inline-block;width:14px;height:14px;margin-right:6px;vertical-align:-2px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 12h3v8h5v-6h4v6h5v-8h3z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 12h3v8h5v-6h4v6h5v-8h3z'/%3E%3C/svg%3E") center/contain no-repeat}
.crumbs .separator{flex:none;display:block;width:6px;height:6px;margin:0 11px 0 9px;font-size:0;border:solid var(--mut);border-width:1.5px 1.5px 0 0;transform:rotate(45deg);opacity:.55}
.crumbs .last,.crumbs p>span:last-child:not(.separator){flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--mut)}
.entry-title{margin:.1em 0 .3em;font-size:1.9rem;line-height:1.25}
.hero{display:block;width:100%;border-radius:10px;margin:14px 0}
.entry{margin-top:14px}
.entry>*{margin-top:0;margin-bottom:1em}
.entry h2{margin:1.7em 0 .6em;font-size:1.45rem;line-height:1.3}
.entry h3{margin:1.4em 0 .5em;font-size:1.2rem;line-height:1.35}
.entry ul,.entry ol{padding-left:1.4em}
.entry li{margin:.25em 0}
.entry figure{margin:1.2em 0}
.entry blockquote{margin:1.2em 0;padding:8px 18px;border-left:3px solid var(--ac);background:var(--card);border-radius:0 8px 8px 0;font-style:italic}
.entry blockquote p{margin:.5em 0}
.entry table{border-collapse:collapse;width:100%}
.entry td,.entry th{border:1px solid var(--line);padding:6px 10px}
.has-text-align-center{text-align:center}
.has-text-align-right{text-align:right}
.alignleft{float:left;margin:0 1em 1em 0}
.alignright{float:right;margin:0 0 1em 1em}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.entry::after{content:"";display:block;clear:both}
.related{margin:28px 0;padding:16px 18px;background:var(--card);border-radius:10px}
.related h2{margin:0 0 8px;font-size:1.1rem}
.related ul{margin:0;padding-left:18px}
.related li{margin:6px 0}

/* Ads */
.ad{margin:28px 0;min-height:250px;text-align:center;overflow:hidden}
.ad-side{min-height:250px;margin:0 0 24px}

/* Video: tải khi bấm */
.yt{position:relative;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden;cursor:pointer}
.yt img{width:100%;height:100%;object-fit:cover;display:block}
.yt button{position:absolute;inset:0;margin:auto;width:68px;height:48px;border:0;border-radius:12px;background:#f00;cursor:pointer}
.yt button::after{content:"";position:absolute;left:27px;top:14px;border-left:18px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.yt:hover button{background:#c00}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Khung bấm-để-phát đã tự giữ tỉ lệ 16:9, nên bỏ phần đệm tỉ lệ của khối embed (nguyên nhân khoảng trắng thừa phía trên video) */
.wp-block-embed__wrapper:has(>.yt)::before{content:none!important;display:none!important}
.wp-block-embed__wrapper>.yt{position:relative;width:100%}

/* Comments */
#comments{margin-top:32px}
.c-title{font-size:1.2rem}
.comment-list{list-style:none;margin:0;padding:0}
.comment-list .children{list-style:none;padding-left:18px;border-left:2px solid var(--line)}
.comment-body{padding:12px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.comment-meta{font-size:.82rem;color:var(--mut)}
.comment-form label{display:block;font-size:.9rem;margin-bottom:4px}
.comment-form input[type=text],.comment-form input[type=email],.comment-form textarea{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg);font:inherit}
.comment-form-cookies-consent{display:flex;gap:8px;align-items:center}
.comment-form-cookies-consent label{margin:0}

/* Footer */
.site-footer{margin-top:32px;padding:22px 0;border-top:1px solid var(--line);color:var(--mut);font-size:.9rem;text-align:center}
.site-footer a{color:inherit}
.entry table{display:block;max-width:100%;overflow-x:auto}
.entry pre{max-width:100%;overflow:auto}
.entry,.wp-block-embed,.wp-block-embed__wrapper{min-width:0;max-width:100%}

/* Cuối bài: hộp tác giả, chia sẻ, bài trước/sau, tag */
.abh_box{display:none!important}
.sthl-author{margin:30px 0 0}
.ab-tab{display:inline-block;padding:7px 14px;background:var(--card);border:1px solid var(--line);border-bottom:0;font-size:.9rem;color:var(--fg)}
.ab-body{display:flex;gap:18px;align-items:flex-start;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ab-avatar{flex:none;width:84px;height:84px;border-radius:50%;overflow:hidden;background:#d9dce1;box-shadow:0 0 0 3px var(--bg),0 1px 6px rgba(0,0,0,.28)}
.ab-avatar img,.ab-avatar svg{display:block;width:100%;height:100%;object-fit:cover}
.ab-info{min-width:0}
.ab-name{margin:2px 0 4px;font-size:1.15rem;font-weight:700;line-height:1.3}
.ab-name a{color:#6aa22c;text-decoration:none}
.ab-desc{margin:0;color:var(--mut);font-size:.95rem;line-height:1.65}
.ab-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ab-links a{padding:4px 12px;border:1px solid var(--line);border-radius:99px;color:var(--fg);font-size:.82rem;text-decoration:none}
.ab-links a:hover{border-color:var(--ac);color:var(--ac)}
.share{display:flex;margin:24px 0}
.share a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:#fff;font:700 20px/1 Arial,Helvetica,sans-serif;text-decoration:none}
.share a:hover{filter:brightness(1.1)}
.s-fb{background:#5a72b5}.s-tw{background:#14171a}.s-pi{background:#b3202a}.s-tu{background:#35465c}
.post-nav{display:flex;justify-content:space-between;gap:12px;margin:26px 0}
.post-nav a{flex:0 1 48%;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 14px;border-radius:4px;background:#1769c2;color:#fff;font-size:.82rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.post-nav a:hover{background:#0f56a3}
.post-nav .pn-next{margin-left:auto}
.tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:24px 0;font-size:.9rem}
.tags strong{color:var(--mut)}
.tags a{padding:5px 12px;border:1px solid var(--line);border-radius:3px;background:var(--bg);color:var(--mut);text-decoration:none;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.tags a:hover{border-color:var(--ac);color:var(--ac)}
@media(max-width:420px){.ab-body{gap:14px}.ab-avatar{width:68px;height:68px}.post-nav a{padding:12px 8px;font-size:.78rem}}