/*
Theme Name: Sổ Tay Review
Description: Theme WordPress nhẹ cho website review ăn uống và du lịch. Chuẩn SEO, tối ưu tốc độ, có khối "hóa đơn" hiển thị địa chỉ, giá, giờ mở cửa và điểm của mỗi bài review.
Version: 1.2.2
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: sotay-review
License: GPL-2.0-or-later
*/
:root{--ink:#10262E;--paper:#F5F7F4;--white:#fff;--chili:#C9382B;--turmeric:#F0B323;--sea:#1B7A80;--line:#D5DDD9;--muted:#4F6269;--r:6px;--wrap:1160px;--read:720px;
--f-head:"Bricolage Grotesque","Be Vietnam Pro",system-ui,sans-serif;--f-body:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.7 var(--f-body);-webkit-font-smoothing:antialiased}
img,video,iframe{max-width:100%;height:auto}
a{color:var(--sea)}
h1,h2,h3,h4{font-family:var(--f-head);line-height:1.15;margin:0 0 .5em;font-weight:800}
:focus-visible{outline:3px solid var(--sea);outline-offset:2px}
.hero :focus-visible,.site-footer :focus-visible{outline-color:var(--turmeric)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;z-index:100}
.skip:focus{left:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:24px;min-height:64px}
.brand{flex:none}
.brand-name{font:800 1.4rem/1 var(--f-head);color:var(--ink);text-decoration:none}
.custom-logo{max-height:48px;width:auto}
.primary-nav{flex:1}
.menu,.sub-menu{list-style:none;margin:0;padding:0}
.menu{display:flex;gap:2px;flex-wrap:wrap}
.menu li{position:relative}
.menu a{display:block;padding:8px 12px;color:var(--ink);text-decoration:none;font-weight:500;border-radius:4px}
.menu a:hover,.menu .current-menu-item>a,.menu .current-cat>a{color:var(--chili)}
.sub-menu{display:none;position:absolute;left:0;top:100%;min-width:200px;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:6px}
.menu li:hover>.sub-menu,.menu li:focus-within>.sub-menu{display:block}
.search-link{flex:none;color:var(--ink);font-weight:500;text-decoration:none;padding:8px 12px;border:1px solid var(--line);border-radius:4px;background:var(--white)}
.nav-toggle{display:none;margin-left:auto;background:var(--white);border:1px solid var(--line);border-radius:4px;padding:8px 14px;font:500 1rem var(--f-body);color:var(--ink)}
@media(max-width:860px){
 .nav-toggle{display:block}
 .search-link{display:none}
 .primary-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);padding:8px 20px 16px}
 .nav-open .primary-nav{display:block}
 .menu{flex-direction:column}
 .sub-menu{display:block;position:static;border:0;padding:0 0 0 14px;background:none}
}

/* Hero */
.hero{background:var(--ink);color:var(--paper);padding:56px 0 72px}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.1rem,5vw,3.7rem);letter-spacing:-.015em;margin-bottom:.4em}
.hero-sub{max-width:46ch;color:#C4D3D0;font-size:1.1rem;margin:0 0 28px}
.hero a{color:var(--turmeric)}
.search-form{display:flex;gap:8px;max-width:520px}
.search-form input[type=search]{flex:1;min-width:0;padding:13px 14px;border:1px solid var(--line);border-radius:4px;font:inherit;background:#fff;color:var(--ink)}
.btn,.search-form button,.search-submit{display:inline-block;background:var(--chili);color:#fff;border:0;border-radius:4px;padding:13px 22px;font:700 1rem var(--f-body);text-decoration:none;cursor:pointer}
.btn:hover,.search-form button:hover{background:#A92D22}
@media(max-width:860px){.hero .wrap{grid-template-columns:1fr;gap:40px}.hero{padding:40px 0 56px}}

/* Receipt: khối hóa đơn thông tin quán */
.receipt{--rbg:var(--white);position:relative;background:var(--rbg);color:var(--ink);padding:22px 22px 24px;border-radius:2px 2px 0 0;max-width:430px;margin:0 auto 14px;font-size:.95rem;line-height:1.5}
.hero .receipt{--rbg:var(--paper)}
.receipt::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:10px;background:linear-gradient(to bottom right,var(--rbg) 50%,transparent 50%) 0 0/14px 10px repeat-x,linear-gradient(to bottom left,var(--rbg) 50%,transparent 50%) 0 0/14px 10px repeat-x}
.r-title{font:800 1.3rem/1.2 var(--f-head);margin:0 0 4px}
.r-title a{color:inherit;text-decoration:none}
.r-note{margin:0 0 14px;color:var(--muted);font-size:.85rem;border-bottom:2px dotted var(--line);padding-bottom:12px}
.r-rows{margin:0;display:grid;gap:8px}
.r-rows>div{display:flex;align-items:baseline;gap:8px}
.r-rows dt{flex:none;color:var(--muted)}
.r-dots{flex:1;min-width:12px;border-bottom:2px dotted var(--line);transform:translateY(-4px)}
.r-rows dd{margin:0;max-width:62%;text-align:right;font-weight:500;font-variant-numeric:tabular-nums}
.r-total{display:flex;justify-content:space-between;align-items:center;margin:16px 0 0;padding-top:12px;border-top:2px solid var(--ink);font-weight:700}
.r-total strong{font:800 1.6rem var(--f-head);background:var(--turmeric);padding:0 10px;border-radius:3px}

/* Sections */
.section{padding:56px 0 8px}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(1.5rem,3vw,2rem);margin:0}
.sec-head a{color:var(--muted)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:-20px;position:relative}
.tile{display:block;background:var(--white);border:1px solid var(--line);border-left:5px solid var(--chili);border-radius:var(--r);padding:18px 20px;text-decoration:none;color:var(--ink)}
.tile:nth-child(even){border-left-color:var(--sea)}
.tile b{display:block;font:800 1.3rem var(--f-head)}
.tile span{color:var(--muted);font-size:.9rem}
.tile:hover b{text-decoration:underline}
@media(max-width:860px){.tiles{grid-template-columns:repeat(2,1fr)}}

/* Cards */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 28px}
.card{min-width:0}
.card-img{display:block;position:relative;aspect-ratio:4/3;background:var(--line);border-radius:var(--r);overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;display:block}
.score{position:absolute;left:10px;top:10px;background:var(--turmeric);color:var(--ink);font:800 .95rem var(--f-head);padding:2px 9px;border-radius:3px}
.card-body{padding-top:14px}
.cat{font-weight:700;font-size:.9rem;color:var(--sea);text-decoration:none}
.card-title{font-size:1.25rem;margin:.2em 0 .35em}
.card-title a{color:var(--ink);text-decoration:none}
.card-title a:hover{text-decoration:underline}
.card-ex{margin:0 0 10px;color:var(--muted);font-size:.97rem}
.meta{display:flex;flex-wrap:wrap;gap:2px 16px;color:var(--muted);font-size:.875rem}
.meta .price{color:var(--chili);font-weight:700}
.card.lead{grid-column:1/-1;display:grid;grid-template-columns:1.25fr 1fr;gap:32px;align-items:center}
.card.lead .card-title{font-size:clamp(1.6rem,3vw,2.3rem)}
.card.lead .card-body{padding:0}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}.card.lead{grid-template-columns:1fr;gap:0}.card.lead .card-body{padding-top:14px}}
@media(max-width:600px){.grid{grid-template-columns:1fr}}

/* About */
.about{display:flex;gap:24px;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:28px;margin:56px 0 0}
.about img{border-radius:50%;flex:none}
.about h2{font-size:1.5rem}
.about p{margin:0;max-width:62ch}
@media(max-width:600px){.about{flex-direction:column;align-items:flex-start}}

/* Archive & page */
.page-head{padding:40px 0 8px}
.page-head h1{font-size:clamp(1.9rem,4vw,2.8rem)}
.page-head .desc{max-width:62ch;color:var(--muted)}
.crumbs{font-size:.875rem;color:var(--muted);padding:20px 0 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 8px;margin:0;padding:0}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--line)}
.crumbs a{color:var(--muted)}
.archive-body{padding:24px 0 64px}
.nav-links{display:flex;gap:6px;flex-wrap:wrap;margin-top:48px}
.page-numbers{padding:8px 14px;border:1px solid var(--line);border-radius:4px;background:var(--white);color:var(--ink);text-decoration:none}
.page-numbers.current{background:var(--ink);color:#fff;border-color:var(--ink)}
.empty{padding:48px 0;color:var(--muted)}

/* Single */
.single-wrap{max-width:calc(var(--read) + 40px);margin:0 auto;padding:0 20px}
.post-head{padding:12px 0 20px}
.post-head h1{font-size:clamp(2rem,4.6vw,3rem)}
.post-head .meta{font-size:.95rem}
.post-thumb{margin:0 0 28px}
.post-thumb img{width:100%;border-radius:var(--r);display:block}
.entry-content{font-size:1.08rem}
.entry-content h2{font-size:1.65rem;margin:2em 0 .6em}
.entry-content h3{font-size:1.3rem;margin:1.6em 0 .5em}
.entry-content p,.entry-content ul,.entry-content ol{margin:0 0 1.2em}
.entry-content img{border-radius:var(--r)}
.entry-content figcaption{color:var(--muted);font-size:.9rem;text-align:center;margin-top:6px}
.entry-content blockquote{margin:1.6em 0;padding:4px 0 4px 20px;border-left:4px solid var(--chili);font-size:1.15rem}
.entry-content table{display:block;overflow-x:auto;border-collapse:collapse;width:100%}
.entry-content th,.entry-content td{border:1px solid var(--line);padding:8px 12px;text-align:left}
.entry-content iframe{width:100%;border:0;border-radius:var(--r)}
.author-box{display:flex;gap:18px;margin:48px 0 0;padding:22px;background:var(--white);border:1px solid var(--line);border-radius:var(--r)}
.author-box img{border-radius:50%;flex:none}
.author-box p{margin:0;color:var(--muted)}
.related{padding:56px 0 64px}

/* Footer */
.site-footer{background:var(--ink);color:#C4D3D0;margin-top:72px;padding:48px 0 24px}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.site-footer h2{font-size:1.1rem;color:#fff}
.site-footer a{color:#C4D3D0}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.copy{border-top:1px solid #2A444D;margin-top:36px;padding-top:18px;font-size:.875rem}
@media(max-width:700px){.f-grid{grid-template-columns:1fr}}
.comments-area{margin-top:48px}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}