/*
Theme Name: Savour The Pho (GeneratePress Child)
Theme URI: https://savourthepho.com
Description: Child theme tinh gọn, siêu tốc cho Food Blog dựa trên GeneratePress, tối ưu Core Web Vitals (LCP, CLS, INP) và tương thích nội dung cũ.
Author: NguyenThaiMMO
Author URI: https://nguyenthaimmo.com
Template: generatepress
Version: 1.5.3
Text Domain: gp-foodblog
*/

/* ==========================================================================
   1. NỀN TOÀN BỘ WEBSITE MÀU TRẮNG (PURE WHITE BACKGROUND)
   ========================================================================== */
html,
body,
#page,
.site,
.site-content,
#content,
.site-main,
.inside-article,
.separate-containers .inside-article,
.separate-containers .site-main>* {
    background-color: #ffffff !important;
    background: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
}

/* ==========================================================================
   2. CSS VARIABLES & TOKENS (TƯƠNG THÍCH KADENCE PALETTE)
   ========================================================================== */
:root {
    --stp-primary: #b91c1c;
    --stp-primary-hover: #991b1b;
    --stp-cream-bg: #faf4eb;
    --stp-dark: #111827;
    --stp-text: #2d3748;
    --stp-muted: #6b7280;
    --stp-border: #e5e7eb;

    /* Typography Tokens (Matching savourthepho.com Kadence config) */
    --global-body-font-family: 'Figtree', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --global-heading-font-family: 'Lora', Georgia, serif;
    --global-primary-nav-font-family: 'Figtree', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --global-fallback-font: sans-serif;
    --global-display-fallback-font: serif;

    /* Base Font Sizes */
    --stp-body-font-size: 17px;
    --stp-body-line-height: 1.7;

    /* Kadence Global Palette Fallback & Link Highlight (Matching savourthepho.com) */
    --global-palette1: var(--stp-primary);
    --global-palette2: var(--stp-primary-hover);
    --global-palette3: var(--stp-dark);
    --global-palette4: var(--stp-text);
    --global-palette5: var(--stp-muted);
    --global-palette6: #f3f4f6;
    --global-palette7: var(--stp-cream-bg);
    --global-palette8: #ffffff;
    --global-palette9: #ffffff;
    --global-palette-highlight: rgba(227, 168, 121, 0.67);
    --global-palette-highlight-alt: var(--global-palette3);
    --global-palette-highlight-alt2: var(--global-palette9);
}

/* ==========================================================================
   2.1 GLOBAL TYPOGRAPHY (MATCHING SAVOURTHEPHO.COM)
   ========================================================================== */
body,
input,
select,
optgroup,
textarea {
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.7;
    letter-spacing: 0em;
    font-family: var(--global-body-font-family);
    color: var(--stp-text);
}

.entry-content,
.entry-content p,
.entry-content li {
    font-family: var(--global-body-font-family);
    font-size: 17px;
    line-height: 1.7;
    letter-spacing: 0em;
    color: var(--stp-text);
}

.entry-content p {
    margin-bottom: 1.5em;
}

/* ==========================================================================
   2.2 PAGE & POST TEXT LINKS (SAVOURTHEPHO OFFSET HIGHLIGHT GRADIENT)
   ========================================================================== */
.entry-content p a,
.entry-content li a,
.entry-content strong > a,
.entry-content em > a,
.entry-content span > a,
.entry-content blockquote a,
.entry-content > ul a,
.entry-content > ol a,
.entry-content .wp-block-group ul a:not(.kb-table-of-content-list a),
.entry-content .wp-block-group ol a:not(.kb-table-of-content-list a),
.inside-article p a,
.site-main .page-content p a,
.stp-authentic-content p a,
.stp-authentic-content li a,
.stp-authentic-content strong > a,
.stp-authentic-content em > a,
.stp-about-body a,
.stp-about__content p a,
.stp-legal-body a,
.kcat-hero__desc p a,
.kcat-hero__desc a,
.stp-recipe-hero__desc a,
.link-style-offset-background .entry-content p a,
.link-style-offset-background .entry-content strong > a,
.link-style-offset-background .entry-content em > a,
.link-style-offset-background .entry-content > ul a,
.link-style-offset-background .entry-content > ol a {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(var(--global-palette-highlight-alt2), var(--global-palette-highlight));
    background-repeat: no-repeat;
    background-position: 4px bottom;
    background-size: 100% 10px;
    transition: background-image 0.15s ease, color 0.15s ease;
}

.entry-content p a:hover,
.entry-content li a:hover,
.entry-content strong > a:hover,
.entry-content em > a:hover,
.entry-content span > a:hover,
.entry-content blockquote a:hover,
.entry-content > ul a:hover,
.entry-content > ol a:hover,
.entry-content .wp-block-group ul a:not(.kb-table-of-content-list a):hover,
.entry-content .wp-block-group ol a:not(.kb-table-of-content-list a):hover,
.inside-article p a:hover,
.site-main .page-content p a:hover,
.stp-authentic-content p a:hover,
.stp-authentic-content li a:hover,
.stp-authentic-content strong > a:hover,
.stp-authentic-content em > a:hover,
.stp-about-body a:hover,
.stp-about__content p a:hover,
.stp-legal-body a:hover,
.kcat-hero__desc p a:hover,
.kcat-hero__desc a:hover,
.stp-recipe-hero__desc a:hover,
.link-style-offset-background .entry-content p a:hover,
.link-style-offset-background .entry-content strong > a:hover,
.link-style-offset-background .entry-content em > a:hover,
.link-style-offset-background .entry-content > ul a:hover,
.link-style-offset-background .entry-content > ol a:hover {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(var(--global-palette-highlight-alt2), var(--global-palette-highlight-alt));
}

/* Loại trừ nút bấm, hình ảnh, breadcrumbs, card, và mục lục TOC để không bị gạch chân gradient */
.entry-content .wp-block-button__link,
.entry-content .button,
.entry-content .wp-element-button,
.entry-content .aio-recipe-card a,
.entry-content .wprm-recipe a,
.entry-content .table-of-contents a,
.entry-content .ez-toc-link,
.entry-content .kb-table-of-content-list a,
.entry-content .toc-box a,
.entry-content .toc-box li a,
.toc-box a,
.toc-box li a,
.entry-content a:has(img),
.entry-content .wp-block-image a,
.entry-content .stp-wrapped-img-link,
.stp-hero-breadcrumbs a,
.stp-hero-breadcrumbs .rank-math-breadcrumb a,
.stp-hero-breadcrumbs p a,
.stp-authentic-nav-pill,
.stp-authentic-breadcrumbs a,
.stp-authentic-content .stp-dish-card__link,
.stp-authentic-content .stp-wrapped-img-link,
.stp-authentic-content a:has(img),
.stp-home-card__thumb-link,
.stp-home-card__title-link,
.stp-home-feed__loadmore {
    background-image: none !important;
}

.entry-content .toc-box a,
.toc-box a {
    color: #774c32;
    text-decoration: none;
    background-image: none !important;
}

.entry-content .toc-box a:hover,
.toc-box a:hover {
    color: #55331e;
    text-decoration: underline;
    background-image: none !important;
}

/* Headings font family and base styling */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--global-heading-font-family);
    color: var(--stp-dark);
}

/* H1 */
h1,
.entry-title {
    font-family: var(--global-heading-font-family);
    font-size: 36px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    font-weight: 700;
    color: var(--stp-dark);
}

/* H2 */
h2,
.entry-content h2 {
    font-family: var(--global-heading-font-family);
    font-size: 28px;
    line-height: 1.5;
    letter-spacing: -0.01em;
    font-weight: 700;
    color: var(--stp-dark);
    margin-top: 1.8em;
    margin-bottom: 0.6em;
}

/* H3 */
h3,
.entry-content h3 {
    font-family: var(--global-heading-font-family);
    font-size: 23px;
    line-height: 1.5;
    font-weight: 700;
    color: var(--stp-dark);
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

/* H4 */
h4,
.entry-content h4 {
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.5;
    font-family: var(--global-body-font-family);
    color: var(--stp-text);
}

/* H5 */
h5,
.entry-content h5 {
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.5;
    font-family: var(--global-body-font-family);
    color: var(--stp-text);
}

/* H6 */
h6,
.entry-content h6 {
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.5;
    font-family: var(--global-body-font-family);
    color: var(--stp-muted);
}

/* Main Navigation */
.main-navigation a,
.main-navigation .main-nav ul li a,
.menu a,
#site-navigation a {
    font-family: var(--global-primary-nav-font-family) !important;
}

/* Buttons */
button,
.button,
.wp-block-button__link,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    font-family: var(--global-body-font-family);
}

/* Responsive typography */
@media (max-width: 767px) {

    body,
    .entry-content,
    .entry-content p,
    .entry-content li {
        font-size: 16px;
        line-height: 1.7;
        letter-spacing: 0.03em;
    }

    h1,
    .entry-title {
        font-size: 32px;
        line-height: 1.3;
        letter-spacing: -0.01em;
    }

    h2,
    .entry-content h2 {
        font-size: 25px;
        line-height: 1.4;
    }

    h3,
    .entry-content h3 {
        font-size: 21px;
        line-height: 1.4;
    }
}

/* ==========================================================================
   3. SINGLE POST HERO HEADER 
   ========================================================================== */
.single-post .entry-header,
.single-post .page-header-image-single,
.single-post .featured-image.page-header-image-single {
    display: none !important;
}

.stp-hero-header-wrap {
    background-color: var(--stp-cream-bg) !important;
    width: 100%;
    margin: 0;
    padding: 40px 0 0 0;
    position: relative;
    box-sizing: border-box;
}

.stp-hero-header-inner {
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
    text-align: left;
}

/* Breadcrumbs  */
.stp-hero-breadcrumbs,
.stp-hero-breadcrumbs .rank-math-breadcrumb {
    font-size: 14px;
    color: #4b5563;
    margin-bottom: 12px;
}

.stp-hero-breadcrumbs p {
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.stp-hero-breadcrumbs a {
    color: #1f2937;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: #9ca3af;
    display: inline-flex;
    align-items: center;
    background-image: none !important;
}

.stp-hero-breadcrumbs a:hover {
    color: var(--stp-primary);
    background-image: none !important;
}

.stp-home-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.stp-home-icon {
    width: 15px;
    height: 15px;
    fill: currentColor;
    display: inline-block;
    transition: transform 0.15s ease, color 0.15s ease;
}

.stp-hero-breadcrumbs a:hover .stp-home-icon {
    transform: scale(1.15);
    color: var(--stp-primary);
}

.stp-hero-breadcrumbs .separator {
    color: #9ca3af;
    margin: 0 4px;
}

.stp-hero-breadcrumbs .last {
    color: #6b7280;
    font-weight: 500;
}

/* Title H1 */
.stp-hero-title {
    font-family: var(--global-heading-font-family);
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 16px 0;
    line-height: 1.25;
}

/* Author & Date */
.stp-hero-author-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    font-size: 15px;
    color: #1f2937;
}

.stp-hero-avatar img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: block;
    object-fit: cover;
}

.stp-hero-by {
    font-weight: 600;
}

.stp-hero-dot {
    color: #9ca3af;
}

.stp-hero-date {
    color: #4b5563;
}

/* Action Buttons & Rating */
.stp-hero-actions-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.stp-btn-pill {
    background-color: var(--stp-primary);
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 9999px;
    padding: 9px 24px;
    font-weight: 700;
    font-size: 14.5px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 6px rgba(185, 28, 28, 0.2);
    transition: all 0.2s ease-in-out;
}

.stp-btn-pill:hover {
    background-color: var(--stp-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(185, 28, 28, 0.3);
}

.stp-arrow-icon {
    font-size: 16px;
    line-height: 1;
}

.stp-pin-svg {
    display: inline-block;
    vertical-align: middle;
}

.stp-btn-pin {
    background-color: var(--stp-pin-bg, #e60023) !important;
    color: var(--stp-pin-text, #ffffff) !important;
    box-shadow: 0 2px 6px rgba(230, 0, 35, 0.25) !important;
    cursor: pointer;
    line-height: 1.2 !important;
}

.stp-btn-pin:hover {
    background-color: #cc001f !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(230, 0, 35, 0.35) !important;
}

/* Triệt để ẩn nút Save Pinterest trên Sidebar Author Avatar */
.stp-sidebar-author-widget span[class*="PIN_"],
.stp-sidebar-author-widget a[data-pin-do],
.stp-sidebar-author-widget .PIN_123_button_pin,
.stp-sidebar-author-avatar-wrap span[class*="PIN_"],
.stp-sidebar-author-avatar-wrap a[data-pin-do] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.stp-hero-rating {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    margin-left: 5px;
}

.stp-stars {
    color: #9ca3af;
    letter-spacing: 2px;
    font-size: 17px;
}

.stp-rating-label {
    color: #4b5563;
    font-size: 14px;
}

/* Affiliate Disclosure */
.stp-hero-disclosure {
    font-size: 13.5px;
    color: #4b5563;
    margin-bottom: 10px;
    line-height: 1.6;
}

.stp-hero-disclosure a {
    color: #1f2937;
    text-decoration: underline;
}

/* Language Switcher in Post Header */
.stp-hero-lang-switch {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    font-style: normal;
    vertical-align: middle;
}

.stp-hero-lang-btn {
    display: inline-flex !important;
    align-items: center;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 2px 10px 2px 7px !important;
    color: #1e293b !important;
    text-decoration: none !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.stp-hero-lang-btn:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-1px);
}

.stp-hero-lang-btn img.stp-switch-flag-img {
    width: 18px !important;
    height: 12px !important;
    border-radius: 2px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
    margin-right: 5px !important;
}

/* Wavy Scallop SVG Divider */
.stp-wavy-scallop-divider {
    width: 100%;
    height: 32px;
    overflow: hidden;
    line-height: 0;
    margin-top: 0;
}

.stp-wavy-scallop-divider svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   4. BÀI VIẾT VÀ SIDEBAR (GRID 1FR 360PX & GAP 3.5EM)
   ========================================================================== */
.single-post #page {
    max-width: 1220px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

.single-post .site-content {
    display: grid !important;
    grid-template-columns: 1fr 360px !important;
    grid-gap: 3.5em !important;
    gap: 3.5em !important;
    max-width: 1220px !important;
    margin: 0 auto !important;
    padding: 8px 24px 60px 24px !important;
    box-sizing: border-box !important;
}

/* Triệt tiêu pseudo-element clearfix của GP để không biến thành grid item */
.single-post .site-content::before,
.single-post .site-content::after {
    display: none !important;
    content: none !important;
}

/* Cột nội dung chính */
.single-post #primary {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
}

.single-post #primary .site-main {
    margin: 0 !important;
    padding: 0 !important;
}

.single-post .inside-article {
    padding: 0 !important;
    margin: 0 !important;
}

/* Khử khoảng cách đỉnh dư thừa của GP và khối đầu tiên */
.single-post .entry-content:not(:first-child),
.single-post .entry-content {
    margin-top: 0 !important;
}

.single-post .entry-content>*:first-child,
.single-post .entry-content>.wp-block-group:first-child>*:first-child {
    margin-top: 0 !important;
}

/* Khử padding/lề của wp-block-group thông thường, KHÔNG áp dụng cho hộp ghi chú is-style- và stp- */
.single-post .entry-content .wp-block-group:not([class*="is-style-"]):not([class*="stp-"]),
.single-post .entry-content .wp-block-group:not([class*="is-style-"]):not([class*="stp-"]) > .wp-block-group__inner-container {
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    max-width: 100% !important;
}

/* Cột Sidebar */
.single-post #right-sidebar {
    width: 360px !important;
    max-width: 360px !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.single-post #right-sidebar .inside-right-sidebar {
    margin: 0 !important;
    padding: 0 !important;
}

.single-post .widget-area .widget {
    padding: 0 0 30px 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Responsive: Trên tablet thì chuyển về 1 cột */
@media (max-width: 1024px) {
    .single-post .site-content {
        grid-template-columns: 1fr !important;
        grid-gap: 2em !important;
        gap: 2em !important;
    }

    .single-post #right-sidebar {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   SIDEBAR AUTHOR PROFILE (CHUẨN SCREENSHOT_11.PNG)
   ========================================================================== */
.stp-sidebar-author-widget {
    text-align: center;
    padding: 10px 10px 32px 10px;
    margin-bottom: 24px;
    box-sizing: border-box;
    border-bottom: 1px solid #f1f5f9;
}

.stp-sidebar-author-avatar-wrap {
    margin: 0 auto 20px auto;
    width: 175px;
    height: 175px;
    position: relative;
}

.stp-sidebar-author-avatar {
    width: 175px;
    height: 175px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.stp-sidebar-author-title {
    font-family: var(--global-heading-font-family, 'Lora', Georgia, serif);
    font-size: 26px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 16px 0;
    line-height: 1.28;
    letter-spacing: -0.2px;
}

.stp-sidebar-author-bio {
    font-family: var(--global-body-font-family, 'Figtree', sans-serif);
    font-size: 15px;
    line-height: 1.75;
    color: #374151;
    margin: 0 auto 20px auto;
    max-width: 330px;
}

.stp-sidebar-author-bio strong {
    font-weight: 700;
    color: #111827;
}

.stp-sidebar-author-readmore {
    display: inline-block;
    color: #e5383b;
    font-size: 15.5px;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 24px;
    transition: color 0.15s ease, text-decoration 0.15s ease;
}

.stp-sidebar-author-readmore:hover {
    color: #c3272a;
    text-decoration: underline;
}

/* 5 Icon Mạng Xã Hội Tròn Chính Thức (Screenshot_11.png) */
.stp-sidebar-author-socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.stp-sidebar-social-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.stp-sidebar-social-btn:hover {
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    color: #ffffff !important;
}

.stp-sidebar-social-instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

.stp-sidebar-social-tiktok {
    background: #000000;
}

.stp-sidebar-social-youtube {
    background: #ff0000;
}

.stp-sidebar-social-pinterest {
    background: #e60023;
}

.stp-sidebar-social-facebook {
    background: #1877f2;
}

/* Ẩn hoàn toàn Sidebar trên màn hình điện thoại (<= 768px) theo yêu cầu */
@media (max-width: 768px) {
    .single-post #right-sidebar {
        display: none !important;
    }

    .single-post .site-content {
        grid-template-columns: 1fr !important;
        grid-gap: 0 !important;
        gap: 0 !important;
        padding-bottom: 30px !important;
    }
}

.entry-content {
    font-size: 1.125rem;
    line-height: 1.85;
    color: #2d3748;
}

.entry-content p {
    margin-bottom: 1.6em;
}

.entry-content h2 {
    margin-top: 1.3em;
    margin-bottom: 0.6em;
    font-weight: 800;
    line-height: 1.3;
    color: #111827;
}

.entry-content h3 {
    margin-top: 1.6em;
    margin-bottom: 0.6em;
    font-weight: 700;
    color: #111827;
}

.wp-block-image img {
    border-radius: 15px;
}

/* ==========================================================================
   5. MODERN FOOD BLOG COMMENTS & REVIEWS SYSTEM
   ========================================================================== */
.comments-area,
.single-post .comments-area,
.separate-containers .comments-area {
    margin-top: 48px !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-align: left !important;
    box-sizing: border-box !important;
}


.comments-title,
.comment-reply-title {
    font-family: var(--global-heading-font-family);
    font-size: clamp(22px, 3.5vw, 26px);
    font-weight: 700;
    color: #111827;
    margin: 0 0 16px 0;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 8px;
}

.stp-reply-icon {
    font-size: 20px;
}

#cancel-comment-reply-link {
    font-size: 13px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 600;
    color: #ef4444;
    text-decoration: underline;
    margin-left: 12px;
}

.comment-notes {
    font-size: 13.5px;
    color: #6b7280;
    margin-bottom: 20px;
    line-height: 1.5;
}

.comment-notes .required {
    color: var(--stp-primary, #b91c1c);
}

.logged-in-as {
    font-size: 14px;
    color: #4b5563;
    margin-bottom: 16px;
}

.logged-in-as a {
    color: var(--stp-primary, #b91c1c);
    text-decoration: underline;
}

/* 5.1 Interactive Star Rating Picker */
.stp-comment-rating-box {
    background: #faf8f5;
    border: 1px solid #f0eae1;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 18px;
}

.stp-comment-rating-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.stp-comment-rating-title {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
}

.stp-star-rating-selector {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.stp-star-btn {
    background: transparent;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #d1d5db;
    cursor: pointer;
    padding: 2px 3px;
    transition: color 0.15s ease, transform 0.1s ease;
}

.stp-star-btn:hover {
    transform: scale(1.2);
}

.stp-star-btn.is-active {
    color: #f59e0b;
    /* Amber Gold */
}

.stp-rating-feedback {
    font-size: 13px;
    font-weight: 600;
    color: #78716c;
}

/* 5.2 Form Inputs & Textarea */
.comment-form-comment {
    margin-bottom: 16px;
}

.comment-form-comment textarea {
    width: 100%;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 15px;
    font-family: inherit;
    line-height: 1.6;
    color: #111827;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.comment-form-comment textarea:focus {
    border-color: var(--stp-primary, #b91c1c);
    outline: none;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12);
}

.stp-comment-inputs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.stp-comment-inputs-grid p {
    margin: 0;
}

.stp-comment-inputs-grid label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.stp-comment-inputs-grid input {
    width: 100%;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 14px;
    color: #111827;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.stp-comment-inputs-grid input:focus {
    border-color: var(--stp-primary, #b91c1c);
    outline: none;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12);
}

.comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 22px;
    font-size: 13.5px;
    color: #4b5563;
    line-height: 1.45;
}

.comment-form-cookies-consent input[type="checkbox"] {
    accent-color: var(--stp-primary, #b91c1c);
    width: 17px;
    height: 17px;
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
}

.comment-form-cookies-consent label {
    cursor: pointer;
}

/* 5.3 Submit Button */
.comment-form .form-submit {
    margin-bottom: 0;
}

.stp-comment-submit-btn,
.comment-form input#submit {
    background-color: var(--stp-primary, #b91c1c) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 9999px !important;
    padding: 12px 34px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(185, 28, 28, 0.22) !important;
    transition: all 0.2s ease-in-out !important;
}

.stp-comment-submit-btn:hover,
.comment-form input#submit:hover {
    background-color: var(--stp-primary-hover, #991b1b) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(185, 28, 28, 0.35) !important;
}

/* 5.4 Comments List (Reviews) */
ol.comment-list {
    list-style: none;
    padding: 0;
    margin: 36px 0 0 0;
}

ol.comment-list .comment {
    margin-bottom: 22px;
}

.comment-body {
    padding: 22px;
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    transition: border-color 0.15s ease;
}

.comment-body:hover {
    border-color: #e5e7eb;
}

.comment-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.comment-meta .avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.comment-author-info {
    display: flex;
    flex-direction: column;
}

.comment-author cite {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    font-style: normal;
}

.bypostauthor .comment-author cite::after {
    content: "Author";
    font-size: 10px;
    font-weight: 700;
    background: var(--stp-primary, #b91c1c);
    color: #ffffff;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

.comment-metadata a {
    font-size: 12px;
    color: #9ca3af;
    text-decoration: none;
}

.comment-metadata a:hover {
    color: #4b5563;
    text-decoration: underline;
}

/* Rating badge inside comment */
.stp-comment-rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 9999px;
    padding: 3px 10px;
    margin-bottom: 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: #b45309;
}

.stp-comment-rating-badge .stp-rating-stars {
    letter-spacing: 2px;
    color: #f59e0b;
}

.comment-content {
    font-size: 15px;
    line-height: 1.7;
    color: #374151;
    margin-top: 0;
    padding: 0;
    border: none;
}

.comment-content p:last-child {
    margin-bottom: 0;
}

.reply {
    margin-top: 10px;
}

/* 5.5 Mobile Responsiveness */
@media (max-width: 768px) {
    .stp-comment-inputs-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .comment-body {
        padding: 16px;
    }

    .comment .children {
        padding-left: 14px;
        border-left-width: 2px;
    }

    .stp-comment-submit-btn,
    .comment-form input#submit {
        width: 100%;
    }
}

/* ==========================================================================
   6. RATING & REVIEW MODAL POPUP (Matching cửa số đánh giá sao.png)
   ========================================================================== */
.stp-rating-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.stp-rating-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
}

.stp-rating-modal-dialog {
    position: relative;
    background: #ffffff;
    width: 100%;
    max-width: 490px;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    padding: 30px 34px;
    box-sizing: border-box;
    z-index: 2;
    animation: stpModalFadeIn 0.25s ease-out;
}

@keyframes stpModalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.stp-rating-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 24px;
    line-height: 1;
    color: #4b5563;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.15s ease;
}

.stp-rating-modal-close:hover {
    color: #111827;
}

.stp-rating-modal-title {
    font-family: var(--global-heading-font-family);
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 6px 0;
    text-align: center;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.stp-rating-modal-subtitle {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    text-align: center;
    margin: 0 0 18px 0;
    letter-spacing: 0.5px;
    line-height: 1.4;
    text-transform: uppercase;
}

.stp-modal-stars-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

/* Zero background on star buttons across all contexts */
.stp-modal-star-btn,
.stp-star-btn,
.stp-hero-star-btn,
.aio-star-btn {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer;
    line-height: 1;
    padding: 0 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease;
}

.stp-modal-star-btn:hover,
.stp-modal-star-btn:focus,
.stp-modal-star-btn:active,
.stp-star-btn:hover,
.stp-star-btn:focus,
.stp-star-btn:active,
.stp-hero-star-btn:hover,
.stp-hero-star-btn:focus,
.stp-hero-star-btn:active,
.aio-star-btn:hover,
.aio-star-btn:focus,
.aio-star-btn:active {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Base Star SVG: transparent fill with fine outline stroke ("đường kẻ") */
.stp-modal-star-btn svg,
.aio-star-btn svg,
.stp-hero-star-btn svg {
    display: block;
    fill: transparent;
    stroke: #9ca3af;
    stroke-width: 1.5px;
    stroke-linejoin: round;
    transition: fill 0.15s ease, stroke 0.15s ease, transform 0.15s ease;
}

/* Active / Filled State: Solid Dark Sage Green (#4a5b40) matching screenshot */
.stp-modal-star-btn.is-active svg,
.aio-star-btn.is-filled svg,
.stp-hero-star-btn.is-filled svg {
    fill: #4a5b40;
    stroke: #4a5b40;
}

/* Hover Over Container: unhovered stars show subtle grey outline */
.stp-modal-stars-row:hover .stp-modal-star-btn svg,
.aio-stars-wrap:hover .aio-star-btn svg,
.stp-stars:hover .stp-hero-star-btn svg {
    fill: transparent;
    stroke: #d1d5db;
}

/* HOVER EFFECT: ĐƯỜNG KẺ VÀ NGÔI SAO HOVER VÀO MÀU VÀNG (#f59e0b / #d97706) */
.stp-modal-star-btn.is-hover svg,
.aio-star-btn.is-hover svg,
.stp-hero-star-btn.is-hover svg {
    fill: #f59e0b !important;
    stroke: #d97706 !important;
    stroke-width: 1.5px !important;
    filter: drop-shadow(0 2px 6px rgba(245, 158, 11, 0.45));
}

.stp-modal-star-btn.is-hover,
.aio-star-btn.is-hover,
.stp-hero-star-btn.is-hover {
    transform: scale(1.18);
}

/* Modal Logged-in user banner */
.stp-modal-logged-in-box {
    margin-bottom: 16px;
    font-size: 13.5px;
    color: #4b5563;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f9fafb;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
}

.stp-modal-logged-in-box strong {
    color: #111827;
}

.stp-modal-logout-link {
    color: #4a5b40;
    text-decoration: underline;
    font-size: 12.5px;
    font-weight: 600;
}

.stp-modal-logout-link:hover {
    color: #394731;
}

.stp-modal-field-wrap {
    margin-bottom: 14px;
}

.stp-modal-textarea {
    width: 100%;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 12px 14px;
    font-size: 13.5px;
    font-family: inherit;
    color: #111827;
    line-height: 1.5;
    box-sizing: border-box;
    resize: vertical;
}

.stp-modal-textarea:focus {
    border-color: #4a5b40;
    outline: none;
    box-shadow: 0 0 0 2px rgba(74, 91, 64, 0.18);
}

.stp-modal-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.stp-modal-label {
    width: 75px;
    flex-shrink: 0;
    font-size: 12.5px;
    font-weight: 700;
    color: #1f2937;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.stp-modal-input {
    flex: 1;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 13.5px;
    color: #111827;
    box-sizing: border-box;
}

.stp-modal-input:focus {
    border-color: #4a5b40;
    outline: none;
    box-shadow: 0 0 0 2px rgba(74, 91, 64, 0.18);
}

.stp-modal-action-row {
    margin-top: 18px;
    text-align: center;
}

.stp-modal-submit-btn {
    background-color: #4a5b40 !important;
    /* Dark sage green */
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 10px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, transform 0.1s ease !important;
    display: inline-block !important;
}

.stp-modal-submit-btn:hover {
    background-color: #3b4933 !important;
    transform: translateY(-1px);
}

.stp-modal-status-msg {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.stp-modal-status-msg.is-success {
    color: #15803d;
}

.stp-modal-status-msg.is-error {
    color: #dc2626;
}

/* ==========================================================================
/* ==========================================================================
   SECTION 7: FACEBOOK-STYLE COMMENTS & REPLIES (CLEAN, COMPACT & GENERATIVE AVATARS)
   ========================================================================== */

/* 1. Header Bar: "X COMMENTS" with active teal line (Toolbar removed per bl 2.png) */
.stp-comments-header-bar {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 24px;
    padding-bottom: 0;
}

.stp-comments-count-tab {
    position: relative;
    padding-bottom: 8px;
}

.stp-comments-count-text {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #111827;
}

.stp-comments-tab-line {
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background-color: #00b087;
    border-radius: 3px 3px 0 0;
}

/* 2. Comment List Container */
.comments-area .comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.stp-fb-comment-item {
    list-style: none;
    margin-bottom: 18px;
}

/* 2.1 Directory Tree Hierarchy Connector Lines (Đường line thư mục cha con chuẩn) */
.comment-list {
    position: relative;
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.stp-fb-comment-item {
    position: relative;
    list-style: none;
    margin-bottom: 20px;
}

/* Vertical trunk line running down from parent avatar into children */
.stp-fb-comment-item.parent>.stp-fb-comment-wrap .stp-fb-avatar-col {
    position: relative;
}

.stp-fb-comment-item.parent>.stp-fb-comment-wrap .stp-fb-avatar-col::after {
    content: "";
    position: absolute;
    top: 42px;
    /* Directly below 38px avatar */
    bottom: -18px;
    /* Extends straight into ol.children */
    left: 18px;
    /* Exact center of 38px avatar */
    width: 2px;
    background-color: #cbd5e1;
    z-index: 1;
    pointer-events: none;
}

/* Children list indent */
.comment-list .children {
    position: relative;
    list-style: none;
    margin: 6px 0 0 18px;
    /* Aligned with parent trunk at 18px */
    padding: 0 0 0 32px;
    /* Indent space for child replies */
    border-left: none;
    /* Individual items draw their own lines cleanly */
}

/* Individual child reply item */
.comment-list .children>.stp-fb-comment-item {
    position: relative;
    list-style: none;
    margin-bottom: 18px;
}

/* Curved L-shaped branch connecting from vertical trunk directly into child avatar */
.comment-list .children>.stp-fb-comment-item::before {
    content: "";
    position: absolute;
    top: -16px;
    /* Connects smoothly to vertical trunk from above */
    left: -32px;
    /* Starts at vertical trunk line */
    width: 32px;
    /* Extends right up to child avatar */
    height: 34px;
    /* Curves into the center (18px) of child avatar */
    border-left: 2px solid #cbd5e1;
    border-bottom: 2px solid #cbd5e1;
    border-bottom-left-radius: 12px;
    pointer-events: none;
    z-index: 1;
}

/* For child replies that have another reply below them: continue vertical line downwards */
.comment-list .children>.stp-fb-comment-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 18px;
    /* From the curve level */
    bottom: -18px;
    /* Down to next child's curve */
    left: -32px;
    width: 2px;
    background-color: #cbd5e1;
    pointer-events: none;
    z-index: 1;
}

/* Avatar positioning over lines */
.stp-fb-avatar-initial,
.stp-fb-avatar-img {
    position: relative;
    z-index: 2;
}

/* Nested replies (level 2+ / children within children) */
.comment-list .children .children {
    margin-left: 15px;
    padding-left: 28px;
}

.comment-list .children .children>.stp-fb-comment-item::before {
    left: -28px;
    width: 28px;
}

.comment-list .children .children>.stp-fb-comment-item:not(:last-child)::after {
    left: -28px;
}

@media (max-width: 640px) {
    .comment-list .children {
        margin-left: 15px;
        padding-left: 22px;
    }

    .comment-list .children>.stp-fb-comment-item::before {
        left: -22px;
        width: 22px;
    }

    .comment-list .children>.stp-fb-comment-item:not(:last-child)::after {
        left: -22px;
    }
}


/* 3. Facebook Comment Item Wrap */
.stp-fb-comment-wrap {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}

/* 4. Avatar Column */
.stp-fb-avatar-col {
    flex-shrink: 0;
    margin-top: 2px;
}

.stp-fb-avatar-initial {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    text-transform: uppercase;
    user-select: none;
}

.stp-fb-avatar-img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #00b087;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    display: block;
}

.stp-fb-comment-item.is-reply .stp-fb-avatar-initial,
.stp-fb-comment-item.is-reply .stp-fb-avatar-img {
    width: 32px;
    height: 32px;
    font-size: 14px;
}

/* 5. Main Body Column & Facebook Bubble */
.stp-fb-body-col {
    flex: 1;
    min-width: 0;
}

.stp-fb-bubble {
    background-color: #f0f2f5;
    border-radius: 18px;
    padding: 12px 18px;
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: background-color 0.15s ease;
}

.stp-fb-bubble:hover {
    background-color: #ebedf0;
}

.stp-fb-bubble-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-bottom: 4px;
}

.stp-fb-author-name {
    font-size: 14px;
    font-weight: 700;
    color: #050505;
    line-height: 1.3;
}

.stp-fb-author-name a {
    color: #050505;
    text-decoration: none;
}

.stp-fb-author-name a:hover {
    text-decoration: underline;
}

.stp-fb-author-badge {
    background-color: #00b087;
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 4px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.stp-fb-stars-inline {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

.stp-fb-star-svg {
    display: inline-block;
    vertical-align: middle;
}

.stp-fb-star-svg.is-filled {
    color: #f59e0b;
}

.stp-fb-star-svg.is-empty {
    color: #d1d5db;
}

.stp-fb-reply-to-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #65676b;
    background: #e4e6eb;
    padding: 1px 8px;
    border-radius: 10px;
}

.stp-fb-reply-to-label {
    font-style: italic;
    color: #65676b;
}

.stp-fb-parent-name {
    color: #050505;
    font-weight: 600;
}

/* 6. Text Container & Read More Collapse */
.stp-fb-text-container {
    position: relative;
    font-size: 14.5px;
    line-height: 1.55;
    color: #050505;
    word-break: break-word;
}

.stp-fb-text-inner {
    margin: 0;
}

.stp-fb-text-inner p {
    margin: 0 0 6px 0;
}

.stp-fb-text-inner p:last-child {
    margin-bottom: 0;
}

.stp-fb-text-inner.is-clamped {
    max-height: 130px;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
}

.stp-fb-readmore-btn {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: none;
    padding: 4px 0 0 0;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #00b087;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.3;
}

.stp-fb-readmore-btn:hover {
    color: #008767;
    text-decoration: underline;
}

/* 7. Meta Row Below Bubble: Time + Reply Link */
.stp-fb-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0 0 12px;
    font-size: 12px;
    color: #65676b;
}

.stp-fb-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #8c969b;
}

.stp-fb-time-icon {
    color: #9ca3af;
}

.stp-fb-bullet {
    color: #cbd5e1;
    font-size: 10px;
}

.stp-fb-reply-link {
    display: inline-flex !important;
    align-items: center !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.stp-fb-reply-link>a,
.stp-fb-meta-row a.comment-reply-link {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #a02322 !important;
    /* Red text matching bl 2.png */
    text-decoration: none !important;
    cursor: pointer !important;
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    /* 1 viền duy nhất, sạch đẹp */
    padding: 3px 12px !important;
    border-radius: 9999px !important;
    /* Pill button shape like bl 2.png */
    transition: all 0.2s ease !important;
    line-height: 1.4 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    outline: none !important;
    box-shadow: none !important;
}

.stp-fb-reply-link>a:hover,
.stp-fb-meta-row a.comment-reply-link:hover {
    color: #ffffff !important;
    /* Chữ màu trắng khi hover theo yêu cầu */
    background-color: #008767 !important;
    border-color: #008767 !important;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(0, 135, 103, 0.25) !important;
    transform: translateY(-1px);
}

.stp-reply-svg {
    display: inline-block;
    vertical-align: middle;
    width: 12px;
    height: 12px;
    fill: currentColor;
    transition: transform 0.2s ease;
}

.stp-fb-reply-link>a:hover .stp-reply-svg,
.stp-fb-meta-row a.comment-reply-link:hover .stp-reply-svg {
    fill: #ffffff !important;
    transform: translateX(1px);
}

/* Form phản hồi khi bấm nút Reply */
.comment-list .comment-respond {
    margin: 16px 0 24px 48px !important;
    padding: 20px 24px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

.comment-list .comment-respond .stp-bldep-title {
    font-size: 20px !important;
}

#cancel-comment-reply-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #ef4444 !important;
    text-decoration: none !important;
    background: #fee2e2 !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    margin-left: 12px !important;
    transition: all 0.15s ease !important;
}

#cancel-comment-reply-link:hover {
    background: #fecaca !important;
    color: #dc2626 !important;
}

@media (max-width: 640px) {
    .comment-list .comment-respond {
        margin-left: 10px !important;
        padding: 16px !important;
    }
}

.comment-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 24px 0 10px 0;
    padding: 10px 16px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.comment-navigation .nav-previous a,
.comment-navigation .nav-next a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    text-decoration: none;
    transition: all 0.15s ease;
}

.comment-navigation .nav-previous a:hover,
.comment-navigation .nav-next a:hover {
    border-color: #00b087;
    color: #00b087;
    background: #f0fdf4;
}

/* Horizontal Form Inputs (3 Columns across the row) */
.stp-form-inputs-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 16px;
    width: 100%;
}

@media (max-width: 768px) {
    .stp-form-inputs-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* ==========================================================================
   COMMENT FORM - MATCHING bldep.png EXACTLY
   ========================================================================== */
#respond,
.comments-area .comment-respond,
.comment-form {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 32px 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    box-sizing: border-box !important;
}


/* 1. Title: 💬 Leave a Review & Comment */
.stp-bldep-title {
    font-family: var(--global-heading-font-family) !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 8px 0 !important;
    letter-spacing: -0.3px !important;
}

.stp-bldep-title-icon {
    display: inline-flex;
    align-items: center;
    color: #0f172a;
}

/* 2. Subtitle: Your email address will not be published. Required fields are marked * */
.stp-bldep-subtitle {
    font-size: 14px !important;
    color: #64748b !important;
    margin: 0 0 20px 0 !important;
}

.stp-bldep-subtitle .required {
    color: #dc2626 !important;
}

/* 3. Rating Box (Rate this recipe: ★ ★ ★ ★ ★ Click a star to rate) */
.stp-bldep-rate-box {
    background-color: #fdfbf7;
    border: 1px solid #f6f0e6;
    border-radius: 8px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.stp-bldep-rate-label {
    font-size: 14.5px;
    font-weight: 700;
    color: #1e293b;
}

.stp-bldep-stars-picker {
    display: inline-flex;
    gap: 4px;
    cursor: pointer;
}

.stp-bldep-star {
    font-size: 22px;
    line-height: 1;
    color: #d1d5db;
    transition: color 0.15s ease, transform 0.1s ease;
    user-select: none;
    display: inline-block;
}

.stp-bldep-star:hover,
.stp-bldep-star.is-hover,
.stp-bldep-star.is-selected {
    color: #f59e0b;
}

.stp-bldep-rate-hint {
    font-size: 13.5px;
    color: #64748b;
}

/* 4. Textarea: Write your review or comment here... */
.stp-bldep-comment-wrap {
    margin: 0 0 20px 0;
}

.stp-bldep-comment-wrap textarea {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    padding: 16px 18px !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    color: #1e293b !important;
    width: 100% !important;
    box-sizing: border-box !important;
    outline: none !important;
    min-height: 140px !important;
    resize: vertical !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.stp-bldep-comment-wrap textarea:focus {
    border-color: #b91c1c !important;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.1) !important;
}

.stp-bldep-comment-wrap textarea::placeholder {
    color: #6b7280;
}

/* 5. Horizontal Fields: Name *, Email *, Website */
.stp-bldep-fields-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1.25fr !important;
    gap: 16px !important;
    margin: 0 0 18px 0 !important;
    width: 100% !important;
}

.stp-bldep-col {
    display: flex;
    flex-direction: column;
}

.stp-bldep-col label {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-bottom: 6px !important;
    display: block !important;
}

.stp-bldep-col label .required {
    color: #dc2626 !important;
}

.stp-bldep-col input {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    padding: 11px 14px !important;
    font-size: 14px !important;
    color: #1e293b !important;
    width: 100% !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.stp-bldep-col input:focus {
    border-color: #b91c1c !important;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.1) !important;
}

.stp-bldep-col input::placeholder {
    color: #94a3b8;
}

@media (max-width: 768px) {
    .stp-bldep-fields-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

/* 6. Cookies Consent Checkbox */
.stp-bldep-cookies-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 13.5px !important;
    color: #475569 !important;
    margin: 0 0 24px 0 !important;
}

.stp-bldep-cookies-wrap input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    margin: 0 !important;
}

/* 7. Submit Button: Crimson Red Pill Button (POST COMMENT) */
.stp-bldep-submit-wrap {
    margin: 0 !important;
    padding: 0 !important;
}

.submit.stp-bldep-submit-btn,
.comment-form .submit {
    background-color: #b91c1c !important;
    /* Exact crimson red from bldep.png */
    color: #ffffff !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 12px 34px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(185, 28, 28, 0.25) !important;
    transition: all 0.15s ease !important;
    display: inline-block !important;
    height: auto !important;
    line-height: 1.2 !important;
}

.submit.stp-bldep-submit-btn:hover,
.comment-form .submit:hover {
    background-color: #991b1b !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(185, 28, 28, 0.35) !important;
}


.submit.stp-comment-submit-btn:hover,
.comment-form .submit:hover {
    background-color: #009673 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* ==========================================================================
   END OF POST AUTHOR BOX (Matching cuoi post tácgia.png)
   ========================================================================== */
.aio-author-box-section {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    margin: 48px 0 28px 0 !important;
    padding: 0 !important;
    text-align: center;
    background-color: var(--aio-author-bg, transparent);
    box-sizing: border-box;
}

/* Horizontal line with centered circular avatar intersecting cleanly */
.aio-author-divider-line {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.aio-author-divider-line::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--aio-author-divider, #e2e8f0);
    z-index: 1;
}

.aio-author-avatar-wrap {
    position: relative;
    z-index: 2;
    background-color: var(--aio-author-bg, #ffffff);
    padding: 0 20px;
    display: inline-block;
}

.aio-author-avatar-img {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    border: 3px solid #ffffff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.aio-author-avatar-img:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* Author Name */
.aio-author-name {
    font-size: 21px;
    font-weight: 700;
    color: var(--aio-author-name, #1e293b);
    margin: 12px 0 6px 0;
    letter-spacing: -0.2px;
}

.aio-author-subtitle {
    font-size: 15px;
    color: #64748b;
    margin: 0 0 14px 0;
    font-style: italic;
    font-weight: 500;
}

/* Bio Text */
.aio-author-bio {
    font-size: 15px;
    line-height: 1.75;
    color: var(--aio-author-bio, #374151);
    max-width: 680px;
    margin: 0 auto;
}

.aio-author-bio p {
    margin: 0 0 10px 0;
}

.aio-author-story-link-wrap {
    display: inline;
}

.aio-author-link {
    color: var(--aio-author-link, #e59866);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
    font-weight: 500;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.aio-author-link:hover {
    opacity: 0.8;
    color: var(--aio-author-link, #d97736);
    text-decoration: underline;
}

/* Social Media Icons Row (Matching mẫu 2.png) */
.aio-author-social-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 22px;
    flex-wrap: wrap;
}

.aio-author-social-btn {
    width: 42px;
    height: 42px;
    background-color: #faf5ee;
    /* Soft warm cream from mẫu 2.png */
    border-radius: 6px;
    /* Soft rounded square from mẫu 2.png */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #383127;
    /* Dark warm icon color from mẫu 2.png */
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.aio-author-social-btn:hover {
    background-color: #f1ebd8;
    color: #111111;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.09);
}

.aio-author-social-btn svg {
    display: block;
}

/* ==========================================================================
   AUTHOR BOX TEMPLATES (4 MẪU HOẠT ĐỘNG HOÀN HẢO)
   ========================================================================== */

/* MẪU 2: CĂN GIỮA HIỆN ĐẠI (MATCHING mẫu 2.png EXACTLY) */
.aio-author-box-section.aio-style-centered-minimal {
    padding: 0 !important;
    background: transparent !important;
}

.aio-author-centered-card {
    background: var(--aio-author-bg, #ffffff);
    border: 1px solid var(--aio-author-divider, #f1f5f9);
    border-radius: 12px;
    padding: 44px 36px 36px 36px;
    max-width: 720px;
    margin: 0 auto;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    text-align: center;
}

.aio-style-centered-minimal .aio-author-name {
    font-family: var(--global-heading-font-family);
    font-size: 28px;
    font-weight: 700;
    color: var(--aio-author-name, #1e293b);
    margin: 0 0 6px 0;
    letter-spacing: -0.3px;
}

.aio-style-centered-minimal .aio-author-subtitle {
    font-size: 16px;
    color: #475569;
    margin: 0 0 22px 0;
    font-style: normal;
    font-weight: 400;
}

.aio-style-centered-minimal .aio-author-bio {
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--aio-author-bio, #334155);
    max-width: 630px;
    margin: 0 auto 24px auto;
    text-align: center;
}

/* MẪU 3: THẺ NGANG HIỆN ĐẠI (SIDE AVATAR CARD) */
.aio-author-box-section.aio-style-card-side-avatar {
    padding: 0 !important;
    background: transparent !important;
}

.aio-author-side-card {
    background: var(--aio-author-bg, #ffffff);
    border: 1px solid var(--aio-author-divider, #e2e8f0);
    border-radius: 16px;
    padding: 32px;
    display: flex;
    align-items: center;
    gap: 30px;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    max-width: 760px;
    margin: 0 auto;
}

.aio-author-side-avatar-col {
    flex-shrink: 0;
}

.aio-author-side-card .aio-author-avatar-img {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 3px solid #00b087;
    object-fit: cover;
}

.aio-author-side-content-col {
    flex: 1;
    min-width: 0;
}

.aio-author-side-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.aio-author-side-card .aio-author-name {
    margin: 0;
    font-size: 22px;
}

.aio-author-badge-pill {
    background: #e6f7f3;
    color: #008767;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}

.aio-author-side-card .aio-author-bio {
    margin: 0 0 14px 0;
    text-align: left;
    max-width: 100%;
}

.aio-author-side-card .aio-author-social-row {
    justify-content: flex-start;
    margin-top: 14px;
}

@media (max-width: 640px) {
    .aio-author-side-card {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
    }

    .aio-author-side-card .aio-author-bio {
        text-align: center;
    }

    .aio-author-side-card .aio-author-social-row {
        justify-content: center;
    }

    .aio-author-side-header {
        justify-content: center;
    }
}

/* MẪU 4: TẠP CHÍ SANG TRỌNG (MAGAZINE BOXED) */
.aio-author-box-section.aio-style-magazine-boxed {
    padding: 0 !important;
    background: transparent !important;
}

.aio-author-magazine-box {
    background: var(--aio-author-bg, #fbf9f5);
    border: 3px double var(--aio-author-divider, #d5cebf);
    border-radius: 10px;
    padding: 40px 32px 32px 32px;
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.aio-author-magazine-header {
    margin-bottom: 16px;
}

.aio-author-magazine-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #8c8270;
    border-bottom: 2px solid #8c8270;
    padding-bottom: 2px;
}

.aio-author-magazine-box .aio-author-avatar-wrap {
    background: transparent;
    padding: 0;
    margin-bottom: 12px;
}

.aio-author-magazine-box .aio-author-avatar-img {
    width: 96px;
    height: 96px;
    margin: 0 auto;
    border: 3px solid #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.aio-author-magazine-box .aio-author-name {
    font-family: var(--global-heading-font-family);
    font-size: 24px;
    margin: 0 0 4px 0;
}

/* Bottom Divider */
.aio-author-bottom-divider {
    height: 1px;
    background-color: var(--aio-author-divider, #e2e8f0);
    margin-top: 36px;
    margin-bottom: 24px;
}

/* ==========================================================================
   SINGLE POST FOOTER: TAGS, BYLINE & POST NAVIGATION
   Matching reference image: qua bài post và các tag.png
   ========================================================================== */

.stp-single-post-footer {
    width: 100% !important;
    max-width: 100% !important;
    margin: 36px 0 20px 0 !important;
    padding: 0 !important;
    clear: both;
}

/* 1. Recipe Tags Pills (Matching qua bài post và các tag.png) */
.stp-post-tags-wrap {
    width: 100%;
    margin: 0 auto 24px auto;
    text-align: center;
}

.stp-post-tags-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 10px;
    max-width: 860px;
    margin: 0 auto;
}

.stp-tag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    color: #4b5853 !important;
    border: 1px solid #c9d5cf;
    border-radius: 2px;
    padding: 5px 13px;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px;
    text-decoration: none !important;
    line-height: 1.4;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.stp-tag-btn:hover {
    background-color: #4b5853;
    color: #ffffff !important;
    border-color: #4b5853;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* 2. Byline & Comments Row (Matching qua bài post và các tag.png) */
.stp-post-byline-block {
    text-align: center;
    margin: 0 auto 30px auto;
    color: #5c6764;
}

.stp-byline-row {
    font-size: 13.5px;
    line-height: 1.5;
    margin-bottom: 6px;
    color: #5c6764;
}

.stp-byline-italic {
    font-family: var(--global-heading-font-family);
    font-style: italic;
    font-weight: 400;
    color: #5c6764;
}

.stp-byline-author {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #374151;
    margin: 0 2px;
}

.stp-byline-date {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #4b5563;
    margin: 0 2px;
}

.stp-byline-updated {
    color: #6b7280;
    font-size: 13px;
    margin-left: 3px;
}

.stp-byline-comments-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 4px;
}

.stp-byline-comment-link,
.stp-byline-leave-link {
    color: #4b5853 !important;
    text-decoration: none !important;
    transition: color 0.15s ease;
}

.stp-byline-comment-link:hover,
.stp-byline-leave-link:hover {
    color: #008767 !important;
    text-decoration: underline !important;
}

.stp-byline-slash {
    color: #9ca3af;
    font-weight: 400;
}

/* 3. Post Navigation (Matching qua bài post và các tag.png) */
.post-navigation.stp-post-navigation,
.post-navigation {
    display: flex !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 36px 0 !important;
    padding: 28px 0 !important;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    gap: 40px;
}

/* Bỏ gạch dọc ở giữa */
.post-navigation::after {
    display: none !important;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.post-navigation .nav-previous {
    text-align: left;
}

.post-navigation .nav-next {
    text-align: right;
    margin-left: auto;
}

.post-navigation a {
    text-decoration: none !important;
    color: #1e293b;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: color 0.15s ease;
}

.post-navigation .nav-previous a {
    text-align: left;
    align-items: flex-start;
}

.post-navigation .nav-next a {
    text-align: right;
    align-items: flex-end;
}

.post-navigation .gp-nav-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: #5c6764 !important;
    line-height: 1.3;
}

.post-navigation .gp-nav-title {
    font-family: var(--global-heading-font-family) !important;
    font-size: 25px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #1e293b !important;
    transition: color 0.2s ease;
}

.post-navigation a:hover .gp-nav-title {
    color: #008767 !important;
}

@media (max-width: 640px) {
    .aio-author-avatar-img {
        width: 76px;
        height: 76px;
    }

    .aio-author-name {
        font-size: 19px;
    }

    .aio-author-bio {
        font-size: 14px;
    }

    .stp-post-tags-list {
        gap: 6px 8px;
    }

    .stp-tag-btn {
        font-size: 10.5px !important;
        padding: 5px 10px;
    }

    .stp-byline-row {
        font-size: 12.5px;
    }

    .post-navigation.stp-post-navigation,
    .post-navigation {
        flex-direction: column !important;
        gap: 22px !important;
        padding: 22px 0 !important;
    }

    .post-navigation .nav-next {
        text-align: left;
        margin-left: 0;
    }

    .post-navigation .nav-next a {
        text-align: left;
        align-items: flex-start;
    }

    .post-navigation .gp-nav-title {
        font-size: 20px !important;
    }
}

/* ==========================================================================
   STICKY HEADER (CHO CẢ ĐIỆN THOẠI & MÁY TÍNH)
   ========================================================================== */
html {
    scroll-padding-top: 65px;
}

@media (max-width: 768px) {
    html {
        scroll-padding-top: 52px;
    }
}

.site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 99999 !important;
    /* Luôn đè lên nút Save Pinterest và mọi nội dung cuộn */
    background-color: #ffffff !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    transition: box-shadow 0.25s ease, background-color 0.25s ease;
}

/* Đảm bảo nút pin save của Pinterest trên ảnh không bao giờ nhảy đè lên header khi cuộn */
span[class*="PIN_"],
a[data-pin-do],
span[data-pin-log],
.PIN_123_button_pin,
[data-pin-hover="true"] {
    z-index: 50 !important;
}

/* Tương thích khi Admin đăng nhập WordPress (tránh bị che bởi Admin Bar) */
.admin-bar .site-header {
    top: 32px !important;
}

@media (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px !important;
    }
}

@media (max-width: 600px) {
    #wpadminbar {
        position: fixed !important;
    }
}

/* ==========================================================================
   MOBILE HEADER, OFFCANVAS MENU (RIGHT) & 50% SEARCH BOTTOM SHEET
   ========================================================================== */

/* 1. Header Search Button (Desktop & Mobile) */
.stp-header-search-wrap {
    display: inline-flex;
    align-items: center;
}

.stp-header-search-btn {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 7px !important;
    color: #1e293b !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 1;
    transition: background-color 0.2s, color 0.2s, transform 0.15s;
}

.stp-header-search-btn:hover {
    background: #f1f5f9 !important;
    color: var(--stp-primary, #b91c1c) !important;
    transform: scale(1.06);
}

.stp-header-search-btn:active {
    transform: scale(0.95);
}

.stp-search-icon-svg {
    display: block;
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

/* 2. Mobile Header Layout & Ordering (max-width: 768px) */
@media (max-width: 768px) {

    /* Đảm bảo inside-header tinh gọn, giảm chiều cao */
    .site-header .inside-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 4px 12px !important;
        position: relative !important;
        width: 100% !important;
    }

    /* Ẩn triệt để các phần tử gây trùng lặp: menu-toggle bên trong #site-navigation, search GP */
    #site-navigation>.inside-navigation>.menu-toggle,
    #site-navigation .menu-toggle,
    .main-navigation .menu-bar-items,
    .navigation-search,
    .search-item {
        display: none !important;
    }

    /* Vị trí 1 (Bên Trái): Menu-Toggle nút KHÔNG NỀN, cố định chiều rộng 38px */
    .site-header .mobile-menu-control-wrapper {
        order: 1 !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    .site-header .mobile-menu-control-wrapper .menu-toggle {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 6px 2px !important;
        margin: 0 !important;
        color: #1e293b !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        line-height: 1 !important;
    }

    .site-header .mobile-menu-control-wrapper .menu-toggle:hover,
    .site-header .mobile-menu-control-wrapper .menu-toggle:focus {
        background: transparent !important;
        color: var(--stp-primary, #b91c1c) !important;
    }

    .menu-toggle .mobile-menu {
        display: none !important;
        /* Ẩn chữ 'Menu' text */
    }

    /* Fix icon menu-toggle: chỉ hiển thị ☰ khi đóng và ✕ khi mở, không bao giờ hiện cùng lúc cả hai */
    .menu-toggle .icon-menu-bars {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .menu-toggle .icon-menu-bars svg {
        width: 24px !important;
        height: 24px !important;
        fill: currentColor !important;
    }

    .menu-toggle .icon-menu-bars svg:first-child {
        display: block !important;
    }

    .menu-toggle .icon-menu-bars svg:nth-child(2) {
        display: none !important;
    }

    /* CHỈ KHI menu đang mở (body có class stp-menu-open) mới ẩn ☰ và hiện ✕ */
    body.stp-menu-open .menu-toggle .icon-menu-bars svg:first-child {
        display: none !important;
    }

    body.stp-menu-open .menu-toggle .icon-menu-bars svg:nth-child(2) {
        display: block !important;
    }

    /* Vị trí 2 (Ở Giữa): Logo / Site Title căn CHÍNH GIỮA TUYỆT ĐỐI, kích thước nhỏ gọn */
    .site-header .site-branding,
    .site-header .site-branding-container,
    .site-header .site-logo {
        order: 2 !important;
        flex: 1 1 auto !important;
        margin: 0 auto !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 4px !important;
    }

    .site-header .main-title {
        margin: 0 !important;
        font-size: 20px !important;
    }

    .site-header .site-logo img {
        max-height: 38px !important;
        /* Giảm chiều cao logo điện thoại tinh gọn */
        height: auto !important;
        width: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* Vị trí 3 (Bên Phải): Icon Tìm Kiếm Duy Nhất, cố định chiều rộng 38px */
    .site-header .stp-header-search-wrap {
        order: 3 !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }

    .mobile-menu-control-wrapper .stp-header-search-wrap {
        display: none !important;
    }

    /* 3. Off-Canvas Menu Trượt từ bên phải sang */
    body.stp-menu-open {
        overflow: hidden !important;
    }

    /* Khi mở menu mobile: Nâng .site-header lên z-index cao nhất (999999) để menu và nút đóng nổi hoàn toàn trên backdrop */
    body.stp-menu-open .site-header {
        z-index: 999999 !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border-bottom: none !important;
        pointer-events: none !important;
    }

    body.stp-menu-open .site-header .mobile-menu-control-wrapper {
        pointer-events: auto !important;
    }

    /* Nút X khi mở menu: Thiết kế nút tròn trắng nổi bật trên nền backdrop mờ */
    body.stp-menu-open .mobile-menu-control-wrapper .menu-toggle {
        background: rgba(255, 255, 255, 0.92) !important;
        color: #0f172a !important;
        border-radius: 50% !important;
        width: 38px !important;
        height: 38px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
        transition: all 0.2s ease !important;
    }

    /* Ẩn logo và search khi menu mở để nền backdrop trải đều tinh tế */
    body.stp-menu-open .site-header .site-branding,
    body.stp-menu-open .site-header .stp-header-search-wrap {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.2s ease, visibility 0.2s ease !important;
    }

    /* Khi đóng trên mobile: #site-navigation không chiếm diện tích */
    body:not(.stp-menu-open) #site-navigation {
        display: contents !important;
    }

    body:not(.stp-menu-open) #site-navigation .main-nav {
        display: none !important;
    }

    /* Khi mở trên mobile: #site-navigation bao phủ toàn màn hình với z-index cao hơn backdrop */
    body.stp-menu-open #site-navigation,
    #site-navigation.toggled.stp-drawer-open {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 999999 !important;
        pointer-events: none !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.stp-menu-open #site-navigation .inside-navigation,
    #site-navigation.toggled.stp-drawer-open .inside-navigation {
        position: static !important;
        pointer-events: none !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
    }

    /* Khối trượt .main-nav nền trắng 100% tinh khiết, bóng đổ thanh lịch */
    #site-navigation .main-nav,
    .main-navigation.toggled .main-nav {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 310px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
        box-shadow: -8px 0 35px rgba(0, 0, 0, 0.22) !important;
        z-index: 999999 !important;
        pointer-events: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease !important;
        display: flex !important;
        flex-direction: column !important;
        visibility: hidden !important;
        padding: 0 !important;
    }

    body.stp-menu-open #site-navigation .main-nav,
    #site-navigation.toggled.stp-drawer-open .main-nav {
        transform: translateX(0) !important;
        visibility: visible !important;
    }

    /* Tránh bị thanh Admin Bar che mất hàng tiêu đề MENU [X] khi admin đăng nhập */
    .admin-bar #site-navigation .main-nav,
    .admin-bar.stp-menu-open #site-navigation .main-nav {
        top: 46px !important;
        height: calc(100vh - 46px) !important;
        height: calc(100dvh - 46px) !important;
    }

    .stp-offcanvas-header-bar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 16px 20px !important;
        border-bottom: 1px solid #f1f5f9 !important;
        background: #fafaf9 !important;
        flex-shrink: 0 !important;
    }

    .stp-offcanvas-title {
        font-family: var(--global-heading-font-family, serif) !important;
        font-weight: 700 !important;
        font-size: 16px !important;
        letter-spacing: 0.05em !important;
        color: #0f172a !important;
    }

    .stp-offcanvas-close-btn {
        background: #f1f5f9 !important;
        border: none !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #475569 !important;
        cursor: pointer !important;
        transition: background 0.15s, color 0.15s !important;
    }

    .stp-offcanvas-close-btn:hover {
        background: #e2e8f0 !important;
        color: #0f172a !important;
    }

    #site-navigation.toggled .main-nav ul,
    body.stp-menu-open #site-navigation .main-nav ul {
        display: flex !important;
        flex-direction: column !important;
        padding: 8px 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    #site-navigation.toggled .main-nav ul li,
    body.stp-menu-open #site-navigation .main-nav ul li {
        width: 100% !important;
        float: none !important;
    }

    #site-navigation.toggled .main-nav ul li a,
    body.stp-menu-open #site-navigation .main-nav ul li a {
        padding: 14px 22px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #1e293b !important;
        border-bottom: 1px solid #f8fafc !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        line-height: 1.4 !important;
        transition: background-color 0.15s, color 0.15s !important;
    }

    #site-navigation.toggled .main-nav ul li a:hover,
    body.stp-menu-open #site-navigation .main-nav ul li a:hover {
        background: #f8fafc !important;
        color: var(--stp-primary, #b91c1c) !important;
    }

    /* Mobile: Khung tìm kiếm 70% màn hình trượt từ dưới lên */
    .stp-search-bottom-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 70vh !important;
        max-height: 70vh !important;
        height: 70dvh !important;
        max-height: 70dvh !important;
        background: #ffffff;
        border-radius: 22px 22px 0 0;
        box-shadow: 0 -10px 45px rgba(0, 0, 0, 0.25);
        z-index: 100001;
        transform: translateY(100%);
        transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .stp-search-bottom-sheet.is-open {
        transform: translateY(0);
    }

    .stp-search-esc-badge {
        display: none !important;
        /* Ẩn nút ESC trên mobile */
    }

    .stp-search-empty-state {
        display: none !important;
        /* Ẩn dòng chữ 'Type keywords to search...' trên điện thoại */
    }
}

/* 3. BẢO VỆ GIAO DIỆN MÁY TÍNH (> 768px): Tuyệt đối không cho menu điện thoại hiển thị trên máy tính */
@media (min-width: 769px) {

    /* Ẩn hoàn toàn header của menu mobile, mobile toggle và backdrop trên máy tính */
    .stp-offcanvas-header-bar,
    .stp-offcanvas-backdrop,
    .site-header .mobile-menu-control-wrapper {
        display: none !important;
    }

    /* Header container căn chỉnh một hàng: Logo bên trái, toàn bộ Menu & Search gom sát bên phải */
    .site-header .inside-header {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding-top: 3px !important;
        padding-bottom: 3px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .site-header .site-branding,
    .site-header .site-logo {
        flex-shrink: 0 !important;
        margin-right: auto !important; /* Đẩy cụm Menu và Icon Tìm Kiếm sang sát mép PHẢI */
    }

    .site-header .site-logo img {
        max-height: 40px !important;
        /* Giảm chiều cao logo tinh gọn theo yêu cầu */
        width: auto !important;
        height: auto !important;
        display: block !important;
    }

    /* Menu máy tính nằm ngang, căn sát về phía Icon Tìm Kiếm */
    .site-header #site-navigation,
    #site-navigation {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        width: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .site-header #site-navigation .inside-navigation {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
        max-width: none !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Icon tìm kiếm nằm ngay sát cạnh menu ở góc phải ngoài cùng, khoảng cách 10px */
    .site-header .stp-header-search-wrap {
        flex-shrink: 0 !important;
        margin-left: 10px !important;
        margin-right: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    .site-header .stp-header-search-btn {
        width: 36px !important;
        height: 36px !important;
        padding: 6px !important;
    }

    .main-navigation .main-nav {
        position: static !important;
        transform: none !important;
        visibility: visible !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        box-shadow: none !important;
        z-index: 100 !important;
        display: block !important;
        padding: 0 !important;
        max-width: none !important;
        overflow: visible !important;
    }

    .main-navigation .main-nav>ul {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;
        /* Căn các mục menu sát bên PHẢI */
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .main-navigation .main-nav>ul>li {
        width: auto !important;
        float: none !important;
        display: inline-flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        position: relative !important;
    }

    /* Tối ưu khoảng cách thanh trên để không bị tràn / dồn hàng & giảm chiều cao line-height */
    .main-navigation .main-nav>ul>li>a {
        display: inline-flex !important;
        align-items: center !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        line-height: 48px !important;
        font-size: 14.5px !important;
        font-weight: 500 !important;
        color: #1e293b !important;
        border-bottom: none !important;
        white-space: nowrap !important;
        transition: color 0.15s ease !important;
    }

    /* Thu gọn khoảng cách mục có mũi tên dropdown */
    .main-navigation .main-nav>ul>li.menu-item-has-children>a {
        padding-right: 4px !important;
    }

    .main-navigation .main-nav>ul>li .dropdown-menu-toggle {
        padding-left: 3px !important;
        padding-right: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        cursor: pointer !important;
    }

    /* Mục menu cuối cùng sát cạnh icon tìm kiếm: bỏ bớt khoảng dư thừa để khoảng cách sang nút search đúng 10px */
    .main-navigation .main-nav>ul>li:last-child>a {
        padding-right: 4px !important;
    }

    .main-navigation .main-nav>ul>li:last-child .dropdown-menu-toggle {
        padding-right: 0 !important;
    }

    .main-navigation .main-nav>ul>li .dropdown-menu-toggle svg {
        fill: currentColor !important;
        transition: fill 0.15s ease, transform 0.2s ease !important;
    }

    /* Thanh trên: Hover & Active chữ màu đỏ */
    .main-navigation .main-nav>ul>li:hover>a,
    .main-navigation .main-nav>ul>li>a:hover,
    .main-navigation .main-nav>ul>li.current-menu-item>a,
    .main-navigation .main-nav>ul>li.current-menu-ancestor>a {
        color: var(--stp-primary, #b91c1c) !important;
        background: transparent !important;
    }

    .main-navigation .main-nav>ul>li:hover>a .dropdown-menu-toggle svg,
    .main-navigation .main-nav>ul>li>a:hover .dropdown-menu-toggle svg,
    .main-navigation .main-nav>ul>li.current-menu-item>a .dropdown-menu-toggle svg,
    .main-navigation .main-nav>ul>li.current-menu-ancestor>a .dropdown-menu-toggle svg {
        fill: var(--stp-primary, #b91c1c) !important;
        color: var(--stp-primary, #b91c1c) !important;
    }

    /* ==========================================================================
       MENU XỔ XUỐNG (SUB-MENU) TRÊN MÁY TÍNH
       Hover & Active: Chữ trắng, nền rgb(45 55 72)
       ========================================================================== */
    .main-navigation ul ul,
    .main-navigation .main-nav ul ul,
    .main-navigation .main-nav ul .sub-menu {
        background-color: #ffffff !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12), 0 4px 10px -2px rgba(15, 23, 42, 0.05) !important;
        padding: 6px 0 !important;
        min-width: 200px !important;
        top: 100% !important;
        margin-top: 0 !important;
    }

    .main-navigation ul ul li,
    .main-navigation .main-nav ul ul li {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        display: block !important;
    }

    .main-navigation ul ul li a,
    .main-navigation .main-nav ul ul li a {
        display: block !important;
        padding: 9px 18px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1.4 !important;
        color: #334155 !important;
        background: transparent !important;
        border: none !important;
        white-space: nowrap !important;
        transition: background-color 0.15s ease, color 0.15s ease !important;
    }

    /* Sub-menu khi Hover: Chữ trắng, nền rgb(45 55 72) theo yêu cầu */
    .main-navigation ul ul li:hover>a,
    .main-navigation ul ul li a:hover,
    .main-navigation .main-nav ul ul li:hover>a,
    .main-navigation .main-nav ul ul li a:hover {
        color: #ffffff !important;
        background-color: rgb(45, 55, 72) !important;
        background: rgb(45, 55, 72) !important;
    }

    /* Sub-menu khi Kích hoạt (Active / Current): Chữ trắng, nền rgb(45 55 72) */
    .main-navigation ul ul li.current-menu-item>a,
    .main-navigation ul ul li.current_page_item>a,
    .main-navigation .main-nav ul ul li.current-menu-item>a,
    .main-navigation .main-nav ul ul li.current_page_item>a {
        color: #ffffff !important;
        background-color: rgb(45, 55, 72) !important;
        background: rgb(45, 55, 72) !important;
        font-weight: 600 !important;
    }

    .main-navigation ul ul li .dropdown-menu-toggle svg {
        fill: currentColor !important;
    }

    /* Màn hình trung bình (769px - 1100px): Thu nhỏ nhẹ padding để tuyệt đối không tràn hàng */
    @media (max-width: 1100px) {
        .main-navigation .main-nav>ul>li>a {
            padding-left: 7px !important;
            padding-right: 7px !important;
            font-size: 13.5px !important;
        }

        .main-navigation .main-nav>ul>li.menu-item-has-children>a {
            padding-right: 2px !important;
        }

        .main-navigation .main-nav>ul>li .dropdown-menu-toggle {
            padding-left: 2px !important;
            padding-right: 5px !important;
        }
    }

    /* MÁY TÍNH: Khung Tìm Kiếm Dạng Spotlight Modal Căn Giữa Màn Hình (Chuẩn Screenshot 16) */
    .stp-sheet-handle-bar,
    .stp-sheet-header,
    .stp-sheet-submit-btn {
        display: none !important;
    }

    .stp-search-bottom-sheet {
        position: fixed !important;
        top: 18% !important;
        bottom: auto !important;
        left: 50% !important;
        right: auto !important;
        width: 640px !important;
        max-width: 90vw !important;
        height: auto !important;
        max-height: 72vh !important;
        border-radius: 20px !important;
        background: #ffffff !important;
        box-shadow: 0 25px 65px -12px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
        transform: translate(-50%, -16px) scale(0.98) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease, visibility 0.22s ease !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        z-index: 100001 !important;
        border: 1px solid rgba(226, 232, 240, 0.9) !important;
    }

    .stp-search-bottom-sheet.is-open {
        transform: translate(-50%, 0) scale(1) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .stp-sheet-search-form-wrap {
        padding: 16px 22px !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }

    .stp-input-group {
        display: flex !important;
        align-items: center !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .stp-input-search-icon {
        width: 22px !important;
        height: 22px !important;
        color: #6366f1 !important;
        /* Tím xanh hiện đại như Screenshot 16 */
        margin-right: 12px !important;
        margin-left: 0 !important;
    }

    .stp-fast-search-input {
        flex: 1 !important;
        font-size: 18px !important;
        color: #0f172a !important;
        font-weight: 400 !important;
        padding: 4px 0 !important;
        border: none !important;
        background: transparent !important;
        outline: none !important;
    }

    .stp-search-esc-badge {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 4px 9px !important;
        font-family: inherit !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #64748b !important;
        background: #f1f5f9 !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 6px !important;
        cursor: pointer !important;
        letter-spacing: 0.05em !important;
        transition: all 0.15s ease !important;
        line-height: 1 !important;
        user-select: none !important;
    }

    .stp-search-esc-badge:hover {
        background: #e2e8f0 !important;
        color: #0f172a !important;
    }

    .stp-search-empty-state {
        padding: 48px 24px !important;
        text-align: center !important;
    }

    .stp-search-empty-text {
        font-size: 15.5px !important;
        color: #94a3b8 !important;
        margin: 0 !important;
        letter-spacing: 0.01em !important;
    }

    /* Ẩn quick tags trên máy tính để đúng chuẩn thiết kế Spotlight Screenshot 16 */
    .stp-quick-tags-wrap {
        display: none !important;
    }

    .stp-search-results-area {
        max-height: 52vh !important;
        padding: 12px 22px 20px 22px !important;
    }
}

/* 4. Thành phần dùng chung của Search (Cả Desktop & Mobile) */
.stp-offcanvas-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 99998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.stp-offcanvas-backdrop.is-active {
    opacity: 1;
    visibility: visible;
}

.stp-search-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.stp-search-backdrop.is-active {
    opacity: 1;
    visibility: visible;
}

body.stp-search-sheet-open {
    overflow: hidden !important;
}

/* Drag Handle */
.stp-sheet-handle-bar {
    display: flex;
    justify-content: center;
    padding: 10px 0 4px 0;
    flex-shrink: 0;
}

.stp-sheet-handle {
    width: 40px;
    height: 4px;
    background: #cbd5e1;
    border-radius: 99px;
}

/* Header */
.stp-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 20px 10px 20px;
    flex-shrink: 0;
}

.stp-sheet-title {
    margin: 0;
    font-family: var(--global-heading-font-family);
    font-size: 17px;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}

.stp-sheet-close {
    background: #f1f5f9 !important;
    border: none !important;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
}

.stp-sheet-close:hover {
    background: #e2e8f0 !important;
    color: #0f172a;
}

/* Search Input Form */
.stp-sheet-search-form-wrap {
    padding: 0 20px 8px 20px;
    flex-shrink: 0;
}

.stp-input-group {
    display: flex;
    align-items: center;
    position: relative;
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-radius: 12px;
    padding: 3px 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.stp-input-group:focus-within {
    border-color: var(--stp-primary, #b91c1c);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12);
}

.stp-input-search-icon {
    color: #94a3b8;
    margin-left: 6px;
    flex-shrink: 0;
}

.stp-fast-search-input {
    flex: 1;
    min-width: 0;
    border: none !important;
    background: transparent !important;
    padding: 9px 10px !important;
    font-size: 15px !important;
    color: #0f172a !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Tắt triệt để nút hủy mặc định của trình duyệt webkit (Safari, Chrome mobile) để không bị 2 dấu X */
.stp-fast-search-input::-webkit-search-cancel-button,
.stp-fast-search-input::-webkit-search-decoration,
.stp-fast-search-input::-webkit-search-results-button,
.stp-fast-search-input::-webkit-search-results-decoration {
    -webkit-appearance: none !important;
    display: none !important;
}

/* Nút xóa từ khóa hình tròn nhỏ gọn, hiện đại */
.stp-search-clear-input {
    background: #e2e8f0;
    border: none !important;
    border-radius: 50% !important;
    width: 22px;
    height: 22px;
    min-width: 22px;
    align-items: center;
    justify-content: center;
    color: #64748b;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 4px;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.stp-search-clear-input:hover {
    background: #cbd5e1;
    color: #0f172a;
}

/* Ẩn hoàn toàn nút submit (Live Search tức thì & Enter trên bàn phím) */
.stp-sheet-submit-btn {
    display: none !important;
}

/* Quick Tags */
.stp-quick-tags-wrap {
    padding: 0 20px 8px 20px;
    flex-shrink: 0;
}

.stp-quick-tags-label {
    font-size: 11.5px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 6px;
}

.stp-quick-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.stp-quick-tag {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 99px;
    padding: 4px 10px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    cursor: pointer;
    line-height: 1.3;
    transition: all 0.15s ease;
}

.stp-quick-tag:hover {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #991b1b !important;
}

/* Live Search Results List */
.stp-search-results-area {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 20px 20px 20px;
}

.stp-search-results-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stp-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    text-decoration: none !important;
    color: inherit !important;
    background: #ffffff;
    border: 1px solid #f1f5f9;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.stp-search-item:hover {
    background: #f8fafc;
    border-color: #e2e8f0;
    transform: translateY(-1px);
}

.stp-search-thumb-wrap {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #e2e8f0;
}

.stp-search-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.stp-search-info {
    flex: 1;
    min-width: 0;
}

.stp-search-item-title {
    margin: 0 0 4px 0;
    font-family: var(--global-heading-font-family);
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stp-search-highlight {
    background: #fef08a;
    color: #854d0e;
    padding: 0 2px;
    border-radius: 2px;
    font-weight: 700;
}

.stp-search-item-meta {
    font-size: 12px;
    color: #64748b;
    display: flex;
    gap: 8px;
}

.stp-search-cat {
    color: var(--stp-primary, #b91c1c);
    font-weight: 600;
}

.stp-search-arrow {
    font-size: 20px;
    color: #94a3b8;
    line-height: 1;
    padding: 0 4px;
}

.stp-search-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    color: #64748b;
    font-size: 13.5px;
}

.stp-search-spinner {
    width: 20px;
    height: 20px;
    border: 2.5px solid #e2e8f0;
    border-top-color: var(--stp-primary, #b91c1c);
    border-radius: 50%;
    animation: stp-spin 0.7s linear infinite;
}

@keyframes stp-spin {
    to {
        transform: rotate(360deg);
    }
}

.stp-no-results {
    text-align: center;
    padding: 24px 20px;
    color: #64748b;
    font-size: 14px;
}

.stp-search-view-all-wrap {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #e2e8f0;
    text-align: center;
}

.stp-search-view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--stp-primary, #b91c1c) !important;
    text-decoration: none !important;
    padding: 6px 12px;
    border-radius: 6px;
    transition: background 0.15s;
}

.stp-search-view-all-btn:hover {
    background: #fee2e2;
}

/* ==========================================================================
   11. ARCHIVE & CATEGORY LAYOUT (Matching savourthepho.com/ingredients/)
   - Mobile: 2-column grid layout (layout 2 cột)
   - Desktop: 14 items initial, 4-column grid, infinite scroll
   - Mobile: 6 items initial, 2-column grid, infinite scroll, speed optimized
   ========================================================================== */

/* --- Hero Banner (.kcat-hero) --- */
.kcat-hero {
    padding: 36px 0 28px;
    background: #f5f3ee;
    margin-bottom: 28px;
}

.kcat-hero__wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}

/* Breadcrumb & link decoration in hero */
.kcat-hero .rank-math-breadcrumb,
.kcat-hero__bc {
    margin: 0 0 10px;
    font-size: 13.5px;
    color: #4a5568;
    line-height: 1.4;
}

.kcat-hero .rank-math-breadcrumb a,
.kcat-hero__bc a,
.kcat-hero__desc a {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(var(--global-palette-highlight-alt2), var(--global-palette-highlight));
    background-repeat: no-repeat;
    background-position: 4px bottom;
    background-size: 100% 10px;
    transition: background-image 0.15s ease, color 0.15s ease;
}

.kcat-hero .rank-math-breadcrumb a:hover,
.kcat-hero__bc a:hover,
.kcat-hero__desc a:hover {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(var(--global-palette-highlight-alt2), var(--global-palette-highlight-alt));
}

.kcat-hero .rank-math-breadcrumb .separator {
    margin: 0 6px;
    opacity: 0.6;
}

/* Mobile Hero Card: Media on top, text below */
.kcat-hero__card {
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "media" "body";
}

.kcat-hero__card--no-media {
    grid-template-areas: "body";
}

.kcat-hero__media {
    grid-area: media;
    aspect-ratio: 4/3;
    max-height: 440px;
    overflow: hidden;
    background: #e2e8f0;
}

.kcat-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.kcat-hero__body {
    grid-area: body;
    padding: 20px 16px 22px;
}

.kcat-hero__title {
    font-family: 'Lora', Georgia, serif;
    font-size: clamp(26px, 6vw, 42px);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 12px;
    color: #1a202c;
    letter-spacing: -0.01em;
}

.kcat-hero__desc {
    font-size: 15px;
    line-height: 1.6;
    color: #4a5568;
}

.kcat-hero__desc p {
    margin: 0 0 10px;
}

.kcat-hero__desc p:last-child {
    margin-bottom: 0;
}

/* Desktop Hero (min-width: 992px): 2 columns, text on left, image on right */
@media (min-width: 992px) {
    .kcat-hero {
        padding: 56px 0 60px;
        margin-bottom: 44px;
    }

    .kcat-hero__wrap {
        padding: 0 24px;
    }

    .kcat-hero__card {
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        grid-template-areas: "body media";
        align-items: center;
        gap: 48px;
    }

    .kcat-hero__card--no-media {
        grid-template-columns: 1fr;
        grid-template-areas: "body";
    }

    .kcat-hero__body {
        padding: 0;
    }

    .kcat-hero__title {
        font-size: clamp(32px, 3.8vw, 52px);
        margin-bottom: 16px;
    }

    .kcat-hero__desc {
        font-size: 16.5px;
    }

    .kcat-hero__media {
        border-radius: 14px;
        box-shadow: 0 20px 38px rgba(0, 0, 0, 0.14);
    }

    .kcat-hero__media img {
        border-radius: 14px;
    }
}

/* Force vertical stack on Archive, Category & Search pages (Hero on top, Items strictly below) */
body.archive .site-content,
body.blog .site-content,
body.category .site-content,
body.tag .site-content,
body.tax-all .site-content,
body.search .site-content {
    display: block !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

body.archive #primary,
body.blog #primary,
body.category #primary,
body.tag #primary,
body.tax-all #primary,
body.search #primary {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.archive #page,
body.blog #page,
body.category #page,
body.tag #page,
body.tax-all #page,
body.search #page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

/* --- Archive Posts Grid --- */
.stp-archive-primary {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px 60px;
    box-sizing: border-box;
    width: 100%;
}

#archive-container {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    box-sizing: border-box;
}

#archive-container>li.entry-list-item {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* MOBILE: Layout 2 cột theo yêu cầu */
@media (max-width: 768px) {
    .stp-archive-primary {
        padding: 0 12px 40px;
    }

    #archive-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px 10px !important;
    }

    .stp-archive-card .entry-title {
        font-size: 14.5px !important;
        line-height: 1.35 !important;
        margin-top: 8px !important;
    }
}

/* TABLET: 3 cột */
@media (min-width: 769px) and (max-width: 1024px) {
    #archive-container {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 22px 16px !important;
    }

    .stp-archive-card .entry-title {
        font-size: 16px !important;
        margin-top: 10px !important;
    }
}

/* DESKTOP: 4 cột */
@media (min-width: 1025px) {
    #archive-container {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 28px 20px !important;
    }

    .stp-archive-card .entry-title {
        font-size: 17px !important;
        margin-top: 12px !important;
    }
}

/* --- Archive Post Card (.stp-archive-card) --- */
.stp-archive-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    position: relative;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

.stp-archive-card .post-thumbnail {
    display: block;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 4 / 5 !important;
    background: #edf2f7;
    text-decoration: none;
    transform: translateZ(0);
}

.stp-archive-card .post-thumbnail-inner {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.stp-archive-card .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 14px;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.stp-archive-card:hover .post-thumbnail img {
    transform: scale(1.05);
}

.stp-card-fallback-thumb {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 32px;
    font-weight: 700;
    font-family: 'Lora', Georgia, serif;
}

.stp-archive-card .entry-content-wrap {
    padding: 2px 2px 6px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.stp-archive-card .entry-header {
    margin: 0;
    padding: 0;
}

.stp-archive-card .entry-title {
    font-family: 'Lora', Georgia, serif !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

.stp-archive-card .entry-title a {
    color: #1a202c !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.stp-archive-card .entry-title a:hover,
.stp-archive-card:hover .entry-title a {
    color: var(--stp-primary, #b91c1c) !important;
}

/* --- Infinite Scroll Loader, Sentinel & End Message --- */
#infinite-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 36px 0 24px;
    font-size: 15px;
    color: #64748b;
    font-weight: 500;
}

#infinite-loader[hidden] {
    display: none !important;
}

.inf-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #e2e8f0;
    border-top-color: var(--stp-primary, #b91c1c);
    border-radius: 50%;
    animation: infSpin 0.75s linear infinite;
}

@keyframes infSpin {
    to {
        transform: rotate(360deg);
    }
}

#infinite-sentinel {
    height: 1px;
    width: 100%;
    pointer-events: none;
    visibility: hidden;
}

#infinite-end {
    text-align: center;
    padding: 36px 0 20px;
    font-size: 14px;
    color: #94a3b8;
    font-style: italic;
}

#infinite-end[hidden] {
    display: none !important;
}

.stp-archive-no-posts {
    text-align: center;
    padding: 60px 20px;
    color: #64748b;
    font-size: 16px;
}

/* Suppress default GeneratePress and WordPress pagination */
.navigation.pagination,
.nav-links,
.paging-navigation,
.pagination {
    display: none !important;
}

/* ==========================================================================
   Star Rating System (4.5 ★★★★☆ (23)) — Shared for Home & Archive Cards
   ========================================================================== */

.stp-card-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 7px;
    line-height: 1;
}

.stp-card-stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

.stp-card-star {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    fill: #d1d5db; /* empty - grey */
    stroke: none;
}

.stp-card-star--full {
    fill: #f59e0b; /* filled - amber */
}

.stp-card-star--half {
    fill: #f59e0b;
    opacity: 0.65;
}

.stp-card-rating-value {
    font-family: 'Figtree', -apple-system, sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    color: #374151;
    line-height: 1;
}

.stp-card-rating-count {
    font-family: 'Figtree', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #9ca3af;
    line-height: 1;
}

.stp-card-rating--archive {
    margin-top: 6px;
    margin-bottom: 4px;
    padding: 0 2px;
}

/* Archive entry-title centered (match homepage) */
.stp-archive-card .entry-title {
    font-family: 'Figtree', -apple-system, sans-serif;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.4;
    color: #0f172a;
    text-align: center;
    margin: 10px 0 0;
}

.stp-archive-card .entry-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.18s ease;
}

.stp-archive-card .entry-title a:hover {
    color: var(--stp-primary, #b91c1c);
}

.stp-archive-card .entry-content-wrap {
    padding: 0 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ==========================================================================
   Recipe Feedback & Social Callout Box (.stp-feedback-box)
   ========================================================================== */
.stp-feedback-box,
.wp-block-kadence-infobox {
    background-color: #F8F5EE !important;
    border-radius: 4px !important;
    padding: 24px 28px !important;
    margin: 32px 0 !important;
    border: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

.stp-feedback-box p,
.wp-block-kadence-infobox p,
.wp-block-kadence-infobox .kt-blocks-info-box-text {
    font-family: 'Figtree', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: #475569 !important;
    margin: 0 0 16px !important;
}

.stp-feedback-box p:last-child,
.wp-block-kadence-infobox p:last-child,
.wp-block-kadence-infobox .kt-blocks-info-box-text:last-child {
    margin-bottom: 0 !important;
}

.stp-feedback-box a,
.wp-block-kadence-infobox a {
    color: #0f172a !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    background: linear-gradient(180deg, transparent 62%, #F6D5CC 62%) !important;
    padding: 0 2px !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}

.stp-feedback-box a:hover,
.wp-block-kadence-infobox a:hover {
    background: linear-gradient(180deg, transparent 40%, #f2baa8 40%) !important;
    color: #c62828 !important;
}