/*
Theme Name: So Tay Review
Description: Giao diện biên tập nhiều góc nhìn, dành cho Sổ Tay Review.
Version: 0.1.0
Requires at least: 6.4
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: so-tay-review
Tags: blog, block-patterns, full-site-editing, custom-colors, featured-images
*/
:root{--str-paper:#f6f1e7;--str-ink:#252820;--str-olive:#536047;--str-clay:#8e452e;--str-line:#d9d3c6;--str-muted:#65665a}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--str-paper);color:var(--str-ink);font-family:"Segoe UI",Arial,sans-serif;line-height:1.65}
a{color:inherit;text-underline-offset:.23em}
a:hover{color:var(--str-clay)}
button,input{font:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--str-clay);outline-offset:5px}
img{max-width:100%;height:auto}
h1,h2,h3{font-family:Cambria,"Times New Roman",serif;font-weight:400;line-height:1.18;text-wrap:balance}
h1{font-size:clamp(2.6rem,5.6vw,4.9rem);letter-spacing:-.055em}
h2{font-size:clamp(2rem,3vw,2.7rem);letter-spacing:-.035em}
h3{font-size:1.6rem;letter-spacing:-.02em}
p{margin-top:0}
.str-shell{width:min(1200px,calc(100% - 64px));margin-inline:auto}
.str-masthead{border-bottom:1px solid var(--str-line);padding:24px 0}
.str-masthead-inner{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.str-brand,.str-masthead .wp-block-site-title{font:600 2rem/1.15 Cambria,"Times New Roman",serif;letter-spacing:-.04em;margin:0;white-space:nowrap}
.str-brand a,.str-masthead .wp-block-site-title a{text-decoration:none}
.str-brand span{color:var(--str-olive)}
.str-nav{display:flex;align-items:center;gap:30px;font-size:.9rem;flex-wrap:wrap}
.str-nav a{text-decoration:none}
.str-masthead .wp-block-navigation{font-size:.9rem}
.str-kicker{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;font-weight:650;color:var(--str-clay)}
.str-hero{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:64px 0 54px}
.str-hero h1{margin:20px 0 24px}
.str-hero-copy>p:not(.str-kicker){max-width:470px;font-size:1.06rem;color:var(--str-muted)}
.str-hero-art{margin:0;position:relative}
.str-hero-art img{display:block;width:100%;aspect-ratio:1.16;object-fit:cover;border-radius:44% 44% 3px 3px}
.str-caption{font-size:.72rem;color:var(--str-muted);margin-top:10px;text-align:right}
.str-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:30px}
.str-button,.wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;gap:28px;background:var(--str-olive);color:#fffdf8;border:1px solid var(--str-olive);padding:13px 22px;border-radius:3px;text-decoration:none;cursor:pointer;font-size:.92rem}
.str-button:hover,.wp-block-button__link:hover{background:#414e35;color:#fff}
.str-text-link{font-size:.9rem}
.str-note{display:flex;gap:14px;align-items:flex-start;margin-top:28px;font-size:.8rem;color:var(--str-muted)}
.str-note:before{content:"";display:block;width:24px;height:27px;flex:0 0 24px;border:1px solid #92997e;border-bottom:4px solid #92997e;border-radius:2px;transform:rotate(-7deg)}
.str-rule{border-top:1px solid var(--str-line)}
.str-section{padding-block:48px}
.str-section-heading{display:flex;justify-content:space-between;gap:24px;align-items:baseline;margin-bottom:26px}
.str-section-heading h2{margin:0}
.str-section-heading p{font-size:.85rem;color:var(--str-muted);margin:0}
.str-filterbar{display:flex;align-items:center;justify-content:space-between;gap:24px;border-block:1px solid var(--str-line);padding:16px 0;flex-wrap:wrap}
.str-filters{display:flex;gap:8px;flex-wrap:wrap}
.str-chip{padding:8px 16px;border:1px solid transparent;background:transparent;color:var(--str-muted);border-radius:2px;cursor:pointer;font-size:.87rem;min-height:42px}
.str-chip[aria-pressed="true"]{background:var(--str-olive);color:#fff}
.str-chip:hover{border-color:var(--str-olive)}
.str-search{display:flex;gap:8px;align-items:center}
.str-search input,.wp-block-search__input{min-width:0;padding:10px 12px;border:1px solid var(--str-line);background:transparent;color:var(--str-ink);border-radius:2px}
.str-search input{width:220px}
.str-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.str-card{min-width:0;position:relative}
.str-card[hidden]{display:none}
.str-card figure{margin:0 0 18px;overflow:hidden;background:#e8e1d2}
.str-card img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;transition:transform .3s ease}
.str-card:hover img{transform:scale(1.025)}
.str-card .str-kicker{margin-bottom:8px;font-size:.66rem}
.str-card h3{margin:0 0 12px;font-size:1.65rem}
.str-card h3 a{text-decoration:none}
.str-card p:not(.str-kicker){font-size:.88rem;color:var(--str-muted)}
.str-card-meta{display:flex;justify-content:space-between;align-items:center;padding-top:16px;border-top:1px solid var(--str-line);font-size:.76rem}
.str-card-meta span{color:var(--str-muted)}
.str-ai-tag{font-size:.66rem;float:right;color:var(--str-muted)}
.str-editorial{background:#eae8dc;padding:42px 46px;display:grid;grid-template-columns:1fr 1fr;gap:60px;margin:20px 0 64px;border-left:3px solid var(--str-olive)}
.str-editorial h2{margin:12px 0 0}
.str-editorial p{font-size:.95rem}
.str-editorial p:last-child{margin-bottom:0}
.str-footer{border-top:1px solid var(--str-line);padding:30px 0;color:var(--str-muted);font-size:.8rem}
.str-footer-inner{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.str-footer p{margin:0}
.str-footer a{text-decoration:none}
.str-content{max-width:740px;margin:0 auto;padding:48px 0 64px}
.str-content h1{font-size:clamp(2.3rem,4vw,3.8rem)}
.str-content h2{font-size:2rem;margin:40px 0 18px;scroll-margin-top:24px}
.str-content h3{font-size:1.45rem}
.str-content p,.str-content li{font-size:1.05rem}
.str-content .str-kicker{font-size:.7rem}
.str-content figure{margin:28px 0}
.str-content figure img{width:100%}
.str-reading-meta{font-size:.8rem;color:var(--str-muted);padding-bottom:20px;border-bottom:1px solid var(--str-line)}
.str-quick{padding:28px;background:#eae8dc;border-left:3px solid var(--str-olive);margin:28px 0}
.str-quick h2{font-size:1.3rem;margin:0 0 16px}
.str-quick p:last-child{margin:0}
.str-quote{border-left:2px solid var(--str-clay);padding:5px 0 5px 24px;margin:32px 0;font-family:Cambria,"Times New Roman",serif;font-size:1.45rem;line-height:1.5}
.str-toc{border:1px solid var(--str-line);padding:16px 22px}
.str-toc summary{cursor:pointer;font-weight:600}
.str-toc ol{padding-left:20px}
.str-source-note{font-size:.86rem!important;color:var(--str-muted)}
.str-table-wrap{overflow-x:auto;max-width:100%}
.str-table-wrap table,.wp-block-table table{border-collapse:collapse;width:100%;font-size:.9rem}
.str-table-wrap th,.str-table-wrap td,.wp-block-table th,.wp-block-table td{padding:12px 14px;border:1px solid var(--str-line);text-align:left;vertical-align:top}
.str-table-wrap th{background:#eae8dc}
.str-preview-banner{padding:7px 20px;text-align:center;background:#252820;color:#f6f1e7;font-size:.71rem;letter-spacing:.04em}
.str-empty{padding:48px 16px;text-align:center;border:1px dashed var(--str-line);color:var(--str-muted)}
.str-status{font-size:.8rem;color:var(--str-muted);min-height:22px;margin:12px 0}
.str-skip{position:absolute;left:-9999px;top:8px;background:var(--str-ink);color:white;padding:12px;z-index:100}
.str-skip:focus{left:12px}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wp-block-query .wp-block-post-template{gap:30px}
.str-post-card{padding-bottom:20px;border-bottom:1px solid var(--str-line);height:100%}
.str-post-card .wp-block-post-title{font-size:1.6rem;margin:12px 0}
.str-post-card .wp-block-post-title a{text-decoration:none}
.str-post-card .wp-block-post-excerpt{font-size:.9rem;color:var(--str-muted)}
.str-post-card .wp-block-post-date,.str-post-card .wp-block-post-terms{font-size:.75rem;color:var(--str-clay)}
.wp-block-post-featured-image img{aspect-ratio:3/2;object-fit:cover}
.wp-block-query-pagination{margin-block:32px;gap:20px}
.wp-block-query-pagination-numbers a,.wp-block-query-pagination-numbers span{padding:8px}
.wp-block-post-content>*,.wp-block-post-title{overflow-wrap:anywhere}
@media(max-width:900px){
.str-shell{width:calc(100% - 40px)}
.str-hero{gap:28px;padding-top:42px}
.str-hero h1{font-size:3.4rem}
.str-grid{gap:20px}
.str-card h3{font-size:1.35rem}
.str-editorial{gap:28px;padding:30px}
}
@media(max-width:640px){
.str-shell{width:calc(100% - 36px)}
.str-masthead{padding:18px 0}
.str-masthead-inner{gap:18px;justify-content:center;text-align:center}
.str-nav{gap:24px;justify-content:center;width:100%}
.str-hero{grid-template-columns:1fr;padding:36px 0;gap:30px}
.str-hero h1{font-size:3.35rem;margin:16px 0 20px}
.str-hero-art img{aspect-ratio:3/2;border-radius:3px}
.str-hero-copy>p:not(.str-kicker){font-size:1rem}
.str-actions{gap:20px}
.str-note{margin-top:20px}
.str-filterbar{gap:14px}
.str-filters{gap:2px}
.str-chip{padding:8px 11px;font-size:.78rem}
.str-search,.str-search input{width:100%}
.str-grid{grid-template-columns:1fr;gap:34px}
.str-card h3{font-size:1.8rem}
.str-section{padding-block:32px}
.str-section-heading{display:block}
.str-section-heading p{margin-top:10px}
.str-editorial{grid-template-columns:1fr;gap:20px;padding:26px;margin-bottom:40px}
.str-content{padding-top:32px}
.str-content h1{font-size:2.7rem}
.str-content p,.str-content li{font-size:1rem}
.str-quick{padding:22px}
.str-footer-inner{display:block}
.str-footer-inner p+p{margin-top:10px}
.wp-block-post-template.is-layout-grid{grid-template-columns:1fr!important}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}