/*
 * Giao diện — bảng màu ấm + Be Vietnam Pro / Lora. Nạp trên mọi trang (backend/stna-design.php),
 * sau style.css. Mọi quy tắc bắt đầu bằng body.stna-v2 để thắng style.css và "CSS bổ sung" của
 * Customizer (nạp sau file này). Quy tắc mới nên dùng các biến --v2-* bên dưới.
 *
 * Màu (tương phản trên nền kem #fbf8f3):
 *   chữ #1f1d1a (16:1) · chữ phụ #6b655d (5.4:1) · xanh #3f6b1f (6.3:1) · đỏ ớt #b8461f (5.0:1)
 */
body.stna-v2 {
    --v2-bg: #fbf8f3;
    --v2-surface: #ffffff;
    --v2-text: #1f1d1a;
    --v2-muted: #6b655d;
    --v2-green: #3f6b1f;
    --v2-green-dark: #2f5216;
    --v2-green-tint: #eef3e6;
    --v2-accent: #b8461f;
    --v2-border: #ece5da;
    --v2-footer: #2b2723;
    --v2-font: "Be Vietnam Pro", "Segoe UI", Helvetica, Arial, sans-serif;
    --v2-font-head: "Lora", Georgia, "Times New Roman", serif;

    color: var(--v2-text);
    font-family: var(--v2-font);
    background: var(--v2-bg);
}

/* Font: style.css có "h1, h2, h3, p, span, a { font-family: Roboto !important }" và theme cũ đặt
   Roboto/Helvetica rải rác: cần !important. Giữ FontAwesome (.fa). Quy tắc tiêu đề có độ ưu tiên
   cao hơn quy tắc chữ thường để cả link nằm trong tiêu đề cũng dùng Lora. */
body.stna-v2 :is(p, li, a, span, div, dt, dd, td, th, label, input, button, select, textarea, small, strong, em, b, i, cite, time, blockquote, figcaption, nav, section, article, aside, header, footer):not(.fa):not([class*="fa-"]) {
    font-family: var(--v2-font) !important;
}

body.stna-v2 :is(h1, h2, h3, h4, h5, h6, .entry-title, .widget-title):not(.fa):not([class*="fa-"]),
body.stna-v2 :is(h1, h2, h3, h4, h5, h6) :is(a, span):not(.fa):not([class*="fa-"]):not(.stna-v2-x) {
    font-family: var(--v2-font-head) !important;
    letter-spacing: -0.01em;
}

body.stna-v2 a {
    color: var(--v2-green);
}

/* ---------- Header + menu ---------- */
body.stna-v2 header.main {
    background: var(--v2-surface);
    border-bottom: 1px solid var(--v2-border);
}

body.stna-v2 #nav {
    background-color: var(--v2-green) !important;
}

body.stna-v2 #nav ul.menu > li > a {
    font-weight: 500;
    letter-spacing: 0.02em;
}

body.stna-v2 #searchform,
body.stna-v2 #searchform input#s {
    background: var(--v2-bg);
}

body.stna-v2 .stna-notebook-link {
    color: var(--v2-green);
    background: var(--v2-surface);
    border-color: var(--v2-border);
}

/* ---------- Tiêu đề khối, nhãn, chip ---------- */
body.stna-v2 .categories h2 a,
body.stna-v2 .cate-3 h2,
body.stna-v2 .cate-4 h2,
body.stna-v2 .cate-5 h2,
body.stna-v2 .cate-5 h2 a,
body.stna-v2 .post-three h2 a,
body.stna-v2 .stna-home-popular h2 {
    color: var(--v2-text);
    font-weight: 700;
}

body.stna-v2 .post-three article span a,
body.stna-v2 .info-1 span,
body.stna-v2 .info-1 span a {
    color: var(--v2-green);
}

body.stna-v2 .stna-quick-links a,
body.stna-v2 .category ul.stna-cat-chips a,
body.stna-v2 .stna-404-cats a,
body.stna-v2 #primary .wp-block-categories-list li {
    color: var(--v2-green);
    background: var(--v2-surface);
    border-color: var(--v2-border);
}

body.stna-v2 .stna-quick-links a:hover,
body.stna-v2 .stna-quick-links a:focus-visible,
body.stna-v2 .category ul.stna-cat-chips .stna-cat-parent a {
    color: #fff;
    background: var(--v2-green);
    border-color: var(--v2-green);
}

/* Tiêu đề widget sidebar: giữ dải màu (block widget "Chuyên mục nấu ăn" có style inline
   "color:#fff !important" nên không đổi được sang kiểu chữ tối), đổi sang xanh mới, bo góc */
body.stna-v2 #sidebar-post .widget-title,
body.stna-v2 #primary .widget-title,
body.stna-v2 #primary h3[style*="78b43d"] {
    padding: 8px 12px !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    background: var(--v2-green) !important;
    border-radius: 8px;
}

/* Nút chia sẻ: chữ trắng trên nền màu của từng mạng xã hội */
body.stna-v2 .social-link-anchor,
body.stna-v2 .social-link-anchor * {
    color: #fff !important;
}

/* ---------- Thẻ món ---------- */
body.stna-v2 #content h3,
body.stna-v2 #content h3 a,
body.stna-v2 .category h3 {
    color: var(--v2-text);
}

body.stna-v2 .post-cate-two h3,
body.stna-v2 .new-posts .post-two h3,
body.stna-v2 .new-posts .post-two h3 a,
body.stna-v2 .cate-5 .info-2 h3,
body.stna-v2 .cate-3 h3,
body.stna-v2 #cate h3,
body.stna-v2 .category-2 h3 {
    font-weight: 600;
    line-height: 1.4;
}

body.stna-v2 :is(.post-cate-one, .post-cate-two > div, .cate-5 .post-with-img, .cate-3 .posts > a, .cate-4 .post-one, #cate .post-1, .stna-card, #post-one) img {
    border-radius: 10px;
}

body.stna-v2 .stna-card-date,

body.stna-v2 span.stna-card-meta,
body.stna-v2 span.stna-card-meta span {
    color: var(--v2-muted);
}

body.stna-v2 span.stna-card-meta .stna-card-level {
    color: var(--v2-green);
}

body.stna-v2 .button-cate a {
    color: var(--v2-green);
    background: var(--v2-green-tint);
}

/* ---------- Trang công thức ---------- */
body.stna-v2.single .entry-content h2.entry-title,
body.stna-v2.single .entry-content h2.entry-title a {
    color: var(--v2-text);
    font-weight: 700;
}

body.stna-v2.single article.post #content p,
body.stna-v2.single article.post #content li {
    color: var(--v2-text);
    font-size: 17px;
    line-height: 1.75;
}

body.stna-v2.single article.post #content > h2:not(.entry-title) {
    color: var(--v2-text);
    font-weight: 700;
}

body.stna-v2.single article.post #content > h3,
body.stna-v2.single article.post #content > h4 {
    color: var(--v2-text);
    font-weight: 600;
}

body.stna-v2 .published-time,
body.stna-v2 .published-time span {
    color: var(--v2-muted);
}

/* Ngày đăng / tác giả có nền trắng (che đường kẻ trang trí phía sau): đổi theo nền trang */
body.stna-v2 .published-time span {
    background-color: var(--v2-bg);
}

body.stna-v2 .thumb img {
    border-radius: 12px;
}

body.stna-v2 .stna-recipe-summary {
    background: var(--v2-surface);
    border-color: var(--v2-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(31, 29, 26, 0.04);
}

body.stna-v2 .stna-recipe-facts dt {
    color: var(--v2-muted);
}

body.stna-v2 .stna-btn,
body.stna-v2 a.stna-btn {
    color: var(--v2-green);
    border-color: var(--v2-green);
    border-radius: 8px;
}

body.stna-v2 .stna-btn-primary,
body.stna-v2 a.stna-btn-primary,
body.stna-v2 .stna-btn-wake[aria-pressed="true"] {
    color: #fff;
    background: var(--v2-green);
}

body.stna-v2 .stna-btn-save,
body.stna-v2 a.stna-btn-save {
    color: var(--v2-accent);
    border-color: var(--v2-accent);
}

body.stna-v2 .stna-btn-save.is-saved {
    color: #fff;
    background: var(--v2-accent);
}

body.stna-v2 #ez-toc-container {
    background: var(--v2-surface) !important;
    border-color: var(--v2-border) !important;
    border-radius: 10px;
}

body.stna-v2 ul.stna-checklist > li {
    border-bottom-color: var(--v2-border);
}

body.stna-v2 .stna-intro.is-collapsible:not(.is-open)::after {
    background: linear-gradient(rgba(251, 248, 243, 0), var(--v2-bg));
}

body.stna-v2 .stna-notebook-cta,
body.stna-v2 .stna-notebook-empty {
    background: var(--v2-surface);
    border-color: var(--v2-border);
    border-radius: 12px;
}

body.stna-v2 .stna-notebook-tips,
body.stna-v2 #respond {
    background: var(--v2-surface);
    border: 1px solid var(--v2-border);
}

/* ---------- Footer ---------- */
body.stna-v2 #pattern-container,
body.stna-v2 #pattern-container .footer-widgets {
    background: var(--v2-footer);
}

body.stna-v2 #pattern-container,
body.stna-v2 #pattern-container p,
body.stna-v2 #pattern-container li {
    color: #e9e3d8;
}

body.stna-v2 #pattern-container a {
    color: #f6f1e8;
}

body.stna-v2 #pattern-container .widget-title,
body.stna-v2 #pattern-container h3 {
    color: #fff;
}

/* ---------- Mobile ---------- */
@media screen and (max-width: 900px) {
    body.stna-v2 header.main {
        background: var(--v2-surface);
    }

    body.stna-v2 #nav-mobile {
        background: var(--v2-surface);
    }

    body.stna-v2 .stna-notebook-link {
        color: var(--v2-text);
        background: transparent;
    }

    body.stna-v2.single article.post #content p,
    body.stna-v2.single article.post #content li {
        font-size: 16.5px;
    }
}