/*
Theme Name: clientv7
Author: ninhductuyen12@gmail.com
Version: 1.2.0
Description: clientv7 Theme for Wordpress.Speed up your website experience
Requires PHP: 8.3
Text Domain: clientv7
*/
/* Style body , container and permalink
-------------------------------------------------------------- */
body {
    background: var(--fc_body_background_color);
    color: var(--fc_body_color);
}

strong {
    font-weight: 600;
}

a {
    color: var(--fc_color_permalink);
}

a:hover {
    color: var(--fc_color_permalink_hover);
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--fc_color_heading);
}

.container {
    max-width: var(--fc_container_max_width, 1200px);
}

.color-secondary {
    color: var(--fc_color_secondary) !important;
}

.color-primary {
    color: var(--fc_color_primary) !important;
}

.color-tertiary {
    color: var(--fc_color_tertiary) !important;
}

.background-primary {
    background: var(--fc_color_primary) !important;
}

.background-secondary {
    background: var(--fc_color_secondary) !important;
}

.background-tertiary {
    background: var(--fc_color_tertiary) !important;
}

/* Style swal2
-------------------------------------------------------------- */
.swal2-confirm {
    min-width: 100px;
    background: var(--fc_color_primary);
    outline: none !important;
    border: 0px !important;
    box-shadow: none !important;
}

.swal2-html-container {
    font-size: 15px;
    color: #666;
}

/* Header top
-------------------------------------------------------------- */
.header-top-content {
    background: var(--fc_background_header_top, #263C22);
    color: var(--fc_color_header_top, #FFFFFF);
    padding: 8px 0;
    font-size: 13px;
    line-height: 1.4;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.header-top-inner {
    width: 100%;
}

.header-top-item {
    letter-spacing: 0.01em;
}

.header-top-link {
    color: var(--fc_color_header_top, #FFFFFF);
    transition: opacity 0.2s ease;
}

.header-top-link:hover {
    color: #FFFFFF;
    opacity: 0.85;
}

/* Header Main
-------------------------------------------------------------- */
.header-menu-main {
    background: var(--fc_header_background, #FFFFFF);
    border-bottom: 1px solid var(--fc_color_border, #E1E5DF);
    transition: background 0.3s ease, box-shadow 0.3s ease;
    z-index: 1000;
}

.header-main-inner {
    height: 76px;
}

.header-minimal {
    padding: 16px 0;
    border-bottom: 1px solid var(--fc_color_border, #E1E5DF);
}

/* Logo */
.header-brand-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.header-logo-img {
    height: 48px;
    width: auto;
    max-width: 170px;
    object-fit: contain;
    display: block;
}

/* Navigation Menu
-------------------------------------------------------------- */
.header-nav-col {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.header-nav-col .main-menu-wrapper {
    height: 100%;
}

.header-nav-col .main-menu {
    height: 100%;
    gap: 32px;
}

.header-nav-col .main-menu>li {
    height: 100%;
    display: inline-flex;
    align-items: center;
}

.fc-menu-header ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fc-menu-header ul li {
    list-style: none;
}

.fc-menu-header ul a {
    color: var(--fc_color_nav_menu, var(--fc_color_heading, #263C22));
    font-size: 15px;
    font-weight: 700;
    padding: 8px 0;
    display: inline-flex;
    align-items: center;
    position: relative;
    text-decoration: none;
    transition: color 0.2s ease;
}

.fc-menu-header ul a:hover,
.fc-menu-header ul li:hover>a {
    color: var(--fc_color_nav_menu_hover, var(--fc_color_primary, #3F6234));
}

.fc-menu-header ul a svg.biodino-icon {
    transition: transform 0.25s ease;
}

.fc-menu-header ul li:hover>a svg.biodino-icon {
    transform: rotate(180deg);
}

.fc-menu-header .dropdown-menu {
    display: none !important;
}

/* Submenu & Dropdown (Standard Non-Mega) */
.fc-menu-header ul li {
    position: relative;
}

.fc-menu-header ul li:not(.mega-menu-item) ul {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    background: var(--fc_color_surface, #FFFFFF);
    border: 1px solid var(--fc_color_border, #E1E5DF);
    box-shadow: 0 8px 24px rgba(38, 60, 34, 0.1);
    border-radius: var(--fc_radius_md, 12px);
    padding: 12px;
    min-width: 220px;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.25s ease;
    z-index: 1010;
}

.fc-menu-header ul li:not(.mega-menu-item):hover>ul {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    top: 100%;
}

.fc-menu-header ul li:not(.mega-menu-item) ul a {
    font-size: 14px;
    font-weight: 500;
    color: var(--fc_color_text_muted, #6B7569);
    padding: 8px 12px;
    border-radius: var(--fc_radius_sm, 8px);
    display: block;
}

.fc-menu-header ul li:not(.mega-menu-item) ul a:hover {
    background: var(--fc_color_soft_green, #EEF5E8);
    color: var(--fc_color_primary, #3F6234);
}

/* Mega Menu Full Width (Biodino Design System V1 - Match Figma/Hình 2) */
.fc-menu-header ul li.mega-menu-item {
    position: static;
}


.fc-menu-header .mega-menu-content {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--fc_color_surface, #FFFFFF);
    border-top: 1px solid var(--fc_color_border, #E1E5DF);
    border-bottom: 1px solid var(--fc_color_border, #E1E5DF);
    box-shadow: 0 16px 36px rgba(38, 60, 34, 0.08);
    padding: 36px 0 40px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
    z-index: 1010;
}

.fc-menu-header li.mega-menu-item:hover .mega-menu-content {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 280px;
    gap: 30px;
    align-items: start;
}

.mega-col-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--fc_color_heading, #263C22);
    margin-bottom: 18px;
    padding-bottom: 0;
    border-bottom: none;
}

.mega-col-title a {
    color: var(--fc_color_heading, #263C22) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 0 !important;
    display: inline-block !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

.mega-col-title a:hover {
    color: var(--fc_color_primary, #3F6234) !important;
}

.mega-sub-menu {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.mega-sub-menu li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mega-sub-menu li a {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--fc_color_text_muted, #6B7569) !important;
    padding: 0 !important;
    line-height: 1.5 !important;
    display: inline-block !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

.mega-sub-menu li a:hover {
    color: var(--fc_color_primary, #3F6234) !important;
}

/* Mega Menu Aside Recommendation Card */
.mega-aside-card {
    background: var(--fc_color_soft_green, #EEF5E8);
    border-radius: var(--fc_radius_lg, 16px);
    padding: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mega-aside-card b {
    color: var(--fc_color_heading, #263C22);
    font-size: 15px;
    font-weight: 700;
    display: block;
    margin-bottom: 8px;
}

.mega-aside-card p {
    color: var(--fc_color_text_muted, #6B7569);
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 18px;
}

.btn-mega-guide {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    color: var(--fc_color_primary, #3F6234) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 0 !important;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

.btn-mega-guide:hover {
    color: var(--fc_color_permalink_hover, #8EAE68) !important;
    transform: translateX(3px);
}

/* Header Actions */
.header-actions-col {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.header-action-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--fc_color_border, #E1E5DF);
    background: var(--fc_color_surface, #FFFFFF);
    color: var(--fc_color_heading, #263C22);
    border-radius: var(--fc_radius_md, 12px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.header-action-btn:hover {
    border-color: var(--fc_color_primary, #3F6234);
    color: var(--fc_color_primary, #3F6234);
    background: var(--fc_color_soft_green, #EEF5E8);
}

.cart-badge-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--fc_color_primary, #3F6234);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.btn-menu-mobile {
    display: none;
}

/* Hotline / Zalo Secondary Button */
.btn-consult-header {
    height: 44px;
    min-height: 44px;
    border: 1.5px solid var(--fc_color_primary, #3F6234);
    border-radius: var(--fc_radius_md, 12px);
    background: #FFFFFF;
    color: var(--fc_color_primary, #3F6234);
    padding: 0 16px;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.btn-consult-header:hover {
    background: var(--fc_color_soft_green, #EEF5E8);
    color: var(--fc_color_primary, #3F6234);
    border-color: var(--fc_color_primary, #3F6234);
}

/* Sticky Header */
@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.header-menu-main.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    box-shadow: 0 4px 20px rgba(38, 60, 34, 0.08);
    animation: fadeInDown 0.35s ease-out;
}

/* Styling for the search product modal
--------------------------------------------------------------*/
.modal-search-product {
    z-index: 9999;
    display: none;
}

/* Active state for search product modal
--------------------------------------------------------------*/
.modal-search-product.active {
    display: block;
}

/* Modal content styling
--------------------------------------------------------------*/
.modal-content-search {
    max-width: 700px;
    max-height: 100%;
    margin-top: 20vh;
}

/* Styling for the modal form
--------------------------------------------------------------*/
.modal-content-search form {
    width: 100%;
    border-radius: 5px 5px 0px 0px;
}

/* Input field styling inside the modal
--------------------------------------------------------------*/
.modal-content-search form .input-search {
    width: 100%;
    border-radius: 0px;
    border: 0px;
    padding: 25px 15px;
}

/* Submit button styling in the search form
--------------------------------------------------------------*/
.modal-content-search form .btn-search-submit {
    border-radius: 0px;
    background: var(--fc_color_surface, #FFFFFF);
    /* Nền nút trắng nên icon search phải là màu đậm mới thấy được */
    color: var(--fc_color_heading, #263C22);
}

/* Styling for the search products results container
--------------------------------------------------------------*/
#search-products-results {
    max-height: 60vh;
    border-radius: 0px 0px 5px 5px;
    border-top: 1px solid var(--fc_color_border, #E1E5DF);
}

/* Styling for product thumbnail links within the search results
--------------------------------------------------------------*/
#search-products-results .thumbnail-result-product a {
    width: 50px;
    height: 50px;
    border: 1px solid var(--fc_color_border, #E1E5DF);
    border-radius: 5px;
}

/* style width sidebar and content
--------------------------------------------------------------*/
.sidebar-template {
    width: 27%;
}

.layout-sidebar {
    width: 73%;
}

/* Style Logo menu sidebar mobile
-------------------------------------------------------------- */
.logo-menu-sidebar-mobile {
    height: 100px;
}

.logo-menu-sidebar-mobile:after {
    background: var(--fc_background_header_top);
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 50%;
}

.logo-menu-sidebar-mobile img {
    max-width: 80px;
    border-radius: 50%;
}

/* Background for the mobile sidebar menu
--------------------------------------------------------------*/
.background-sidebar-menu-mobile {
    background: rgba(0, 0, 0, 0.5);
}

/* Styling for the mobile sidebar menu
--------------------------------------------------------------*/
.sidebar-menu-mobile {
    z-index: 9999;
}

/* Styling for the content area of the mobile sidebar menu
--------------------------------------------------------------*/
.content-sidebar-menu-mobile {
    max-width: 300px;
    background: var(--fc_header_background);
}

/* Wrapper for the mobile menu
--------------------------------------------------------------*/
.mobile-menu-wrapper {
    height: calc(100% - 150px);
}

/* Styling for images inside the mobile menu wrapper
--------------------------------------------------------------*/
.mobile-menu-wrapper img {
    max-width: 20px;
    max-height: 20px;
    margin-right: 5px;
}

/* Footer menu styling in the mobile sidebar
--------------------------------------------------------------*/
.footer-menu-sidebar-mobile {
    background: var(--fc_background_header_top);
    height: 50px;
}

/* Styling for social media links in the mobile sidebar footer
--------------------------------------------------------------*/
.footer-menu-sidebar-mobile .item-social a {
    width: 30px;
    height: 30px;
    padding: 5px;
}

/* Styling for the sidebar menu list and list items
--------------------------------------------------------------*/
.content-sidebar-menu-mobile ul,
.content-sidebar-menu-mobile ul li {
    list-style: none;
    margin: 0px;
    padding: 0px;
    display: block;
    position: relative;
}

/* Styling for nested submenus
--------------------------------------------------------------*/
.content-sidebar-menu-mobile ul ul {
    display: none;
    padding: 10px 10px 10px 15px;
}

/* Dropdown menu styling
--------------------------------------------------------------*/
.mobile-menu .dropdown-menu {
    position: absolute;
    right: 10px;
    top: 15px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid var(--fc_color_nav_menu);
}

/* Styling for links inside the sidebar menu
--------------------------------------------------------------*/
.content-sidebar-menu-mobile ul li a {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 15px;
    color: var(--fc_color_nav_menu);
    position: relative;
}

/* Bottom border styling for sidebar menu links
--------------------------------------------------------------*/
.content-sidebar-menu-mobile ul li a:after {
    content: "";
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 1px;
    background: var(--fc_color_nav_menu);
    opacity: 0.1;
}

/* Hide the bottom border for nested submenu links
--------------------------------------------------------------*/
.content-sidebar-menu-mobile ul ul a:after {
    display: none;
}

/* Hover effect for links in the sidebar menu
--------------------------------------------------------------*/
.content-sidebar-menu-mobile ul li a:hover {
    color: #FFF;
    background: var(--fc_color_nav_menu);
}

/* Hover effect for dropdown menu when the link is hovered
--------------------------------------------------------------*/
.content-sidebar-menu-mobile ul li a:hover .dropdown-menu {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #FFF;
}

/* Hover effect for nested submenu links
--------------------------------------------------------------*/
.content-sidebar-menu-mobile ul li ul li a:hover {
    background: transparent;
    color: var(--fc_color_nav_menu);
}

/* Footer style (Biodino V1)
-------------------------------------------------------------- */
.footer-template {
    background: var(--fc_background_footer);
    color: var(--fc_color_footer);
    padding: var(--fc_space_7, 48px) 0 var(--fc_space_4, 16px);
}

/* 4 cột: cột thương hiệu rộng hơn + 3 cột menu */
.bd-footer-top {
    display: grid;
    grid-template-columns: 1.45fr 1fr 1fr 1fr;
    gap: var(--fc_space_6, 32px);
    align-items: start;
}

/* Cột 1: thương hiệu */
.bd-footer-brand {
    min-width: 0;
}

.bd-footer-logo {
    display: inline-block;
    margin-bottom: var(--fc_space_4, 16px);
}

.bd-footer-logo img {
    display: block;
    max-width: 140px;
    height: auto;
}

.bd-footer-brand-text {
    font-size: 14px;
    line-height: 1.6;
}

.bd-footer-brand-text p {
    margin: 0 0 var(--fc_space_2, 8px);
}

.bd-footer-brand-text p:last-child {
    margin-bottom: 0;
}

/* Dòng đầu của khối thương hiệu = tên thương hiệu */
.bd-footer-brand-text > :first-child {
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bd-footer-contact {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--fc_space_4, 16px);
    font-size: 14px;
    font-weight: 600;
    color: var(--fc_color_footer);
    text-decoration: none;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.bd-footer-contact:hover {
    opacity: 0.85;
    color: var(--fc_color_permalink_footer_hover, #FFFFFF);
}

.bd-footer-contact .biodino-icon {
    flex-shrink: 0;
}

/* Cột 2-4: menu */
.bd-footer-col {
    min-width: 0;
}

.bd-footer-col-title {
    margin: 0 0 var(--fc_space_3, 12px);
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--fc_color_footer);
}

.bd-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bd-footer-links li {
    margin: 0 0 10px;
}

.bd-footer-links li:last-child {
    margin-bottom: 0;
}

.bd-footer-links a {
    font-size: 13px;
    line-height: 1.5;
    color: var(--fc_color_footer);
    opacity: 0.85;
    text-decoration: none;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.bd-footer-links a:hover {
    opacity: 1;
    color: var(--fc_color_permalink_footer_hover, #FFFFFF);
    text-decoration: underline;
}

/* Dòng thông tin cuối footer (MST - địa chỉ - website - email) */
.bd-footer-bottom {
    margin-top: var(--fc_space_6, 32px);
    padding-top: var(--fc_space_4, 16px);
    /* Gạch ngăn cách lấy theo màu chữ để đúng cả khi đổi màu nền footer */
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-top-color: color-mix(in srgb, currentColor 22%, transparent);
    font-size: 13px;
    line-height: 1.6;
    color: var(--fc_color_footer);
    opacity: 0.9;
}

.bd-footer-bottom p {
    margin: 0;
}

/* Footer style social (dùng chung với menu mobile)
-------------------------------------------------------------- */
.item-social a {
    width: 35px;
    height: 35px;
    border: 1px solid var(--fc_color_footer);
    margin-right: 10px;
}

/* Footer loading
-------------------------------------------------------------- */
#loading_page {
    display: none !important;
    z-index: 9999;
}

#loading_page.active {
    display: flex !important;
}

/* breadcrumb style
-------------------------------------------------------------- */
.breadcrumb-template {
    background: var(--fc_background_breadcrumb);
    color: #434343;
}

.breadcrumb-template a {
    color: #434343;
}

body.single.single-post .breadcrumb-template {
    background: #FFF;
}

/* Content editor style
-------------------------------------------------------------- */
.content-editor img {
    width: 100%;
    max-width: 100%;
    margin: 15px 0px;
}

.overflow-image-content .content-editor img {
    width: 120%;
    max-width: 120%;
    margin: 12px 0% 10px -10%;
}

/* Sidebar Widget Style
-------------------------------------------------------------- */
.sidebar-template .widget-title {
    font-weight: 600;
    font-size: 20px;
    border: 0px;
    text-transform: inherit;
    margin-bottom: 5px;
}

.sidebar-template .fc-widget-recent-post .thumbnail-widget-recent-post {
    width: 90px;
    height: 82px;
}

.sidebar-template .widget .fc-widget-recent-post li {
    padding-left: 85px;
    min-height: 70px;
}

/* Styling for category links in the sidebar
--------------------------------------------------------------*/
.sidebar-template .widget.widget_categories ul li a {
    text-transform: uppercase;
    font-weight: 600;
    color: var(--fc_color_primary);
    display: block;
    padding: 10px 15px 10px 25px;
    position: relative;
}

/* Styling for the underline effect after category links
--------------------------------------------------------------*/
.sidebar-template .widget.widget_categories ul li a:after {
    content: "";
    position: absolute;
    background: var(--fc_color_primary);
    width: 100%;
    height: 1px;
    bottom: 0px;
    left: 0px;
    opacity: 0.3;
}

/* Removing the underline for the last category link
--------------------------------------------------------------*/
.sidebar-template .widget.widget_categories ul li:last-child a:after {
    display: none;
}

/* Styling for the circular icon before category links
--------------------------------------------------------------*/
.sidebar-template .widget.widget_categories ul li a:before {
    content: "";
    position: absolute;
    left: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fc_color_primary);
    top: 15px;
}

/* Styling for hover effect on category links
--------------------------------------------------------------*/
.sidebar-template .widget.widget_categories ul li a:hover {
    background-color: #71C139;
}

/* Styling for hover effect on the circular icon before category links
--------------------------------------------------------------*/

/* Style sidebar blog
--------------------------------------------------------------*/
.sidebar-template .content-sidebar-template .widget:first-child {
    padding-top: 0px;
}

/* Style sidebar widget current taxonomy
--------------------------------------------------------------*/
.widget_current_taxonomy_widget .widget-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--fc_color_secondary);
    text-transform: uppercase;
    margin: 0px;
}

.widget_current_taxonomy_widget .current-name-taxonomy {
    color: var(--fc_color_primary);
    margin-bottom: 10px;
    font-family: inherit;
    font-weight: 600;
}

.widget_current_taxonomy_widget ul li {
    padding: 0px !important;
    position: relative;
}

.widget_current_taxonomy_widget ul ul {
    padding: 0px;
    margin: 0px;
}

.widget_current_taxonomy_widget ul li a {
    font-weight: 600;
    display: block;
    color: var(--fc_color_primary);
    border-bottom: 1px solid #3a792040;
    position: relative;
    padding: 10px 10px 10px 30px;
    font-size: 16px;
}

.widget_current_taxonomy_widget ul li:last-child a {
    border-bottom: 0px;
}

.widget_current_taxonomy_widget ul li a:before {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--fc_color_primary);
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    left: 10px;
    top: 15px;
}

.widget_current_taxonomy_widget ul li a:hover {
    color: var(--fc_color_heading);
}

.widget_current_taxonomy_widget ul li:hover {
    background-color: #71C139;
}

/* Button back to top Style
-------------------------------------------------------------- */
.btn-to-top {
    width: 40px;
    height: 40px;
    right: 20px;
    top: 90%;
    z-index: 99999;
}

/* Styling for pagination links and current page
--------------------------------------------------------------*/
.fc-pagination ul li span,
.fc-pagination ul li a,
.fc-pagination ul li span:hover,
.fc-pagination ul li a:hover,
.fc-pagination ul li span.current {
    background: none;
    color: var(--fc_color_primary);
    border: 0px;
    padding: 2px 10px;
}

/* Styling for pagination link elements
--------------------------------------------------------------*/
.fc-pagination ul li span,
.fc-pagination ul li a {
    position: relative;
    font-weight: 500;
}

/* Adding a vertical line to the right of pagination links
--------------------------------------------------------------*/
.fc-pagination ul li span:after,
.fc-pagination ul li a:after {
    content: "";
    position: absolute;
    right: 0px;
    top: 15%;
    width: 1px;
    height: 70%;
    background: var(--fc_color_primary);
}

/* Hiding the line for the "next" button in pagination
--------------------------------------------------------------*/
.fc-pagination ul li a.next:after {
    display: none;
}

/* Styling for the current page number in pagination
--------------------------------------------------------------*/
.fc-pagination ul li span.current {
    color: #000;
}

/* Styling for breadcrumb template on non-woocommerce pages
--------------------------------------------------------------*/
body.page:not(.woocommerce) .breadcrumb-template,
body.single.single-post:not(.woocommerce) .breadcrumb-template,
body.search:not(.woocommerce) .breadcrumb-template,
body.archive:not(.woocommerce) .breadcrumb-template {
    background: #FFF;
    padding-top: 30px;
    padding-bottom: 20px;
}

/* Styling for the post loop item separator line
--------------------------------------------------------------*/
.item-post-loop:after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 1px;
    background: var(--fc_color_primary);
    opacity: 0.5;
}

/* Hiding the separator line for the first post item
--------------------------------------------------------------*/
.item-post-loop.first-item-post-loop:after {
    display: none;
}

/* Style Thumbnail Item Post Date
-------------------------------------------------------------- */
.item-post-loop .date-item-post-loop {
    color: #B5B5B5;
}

/* Styling for list items within the thumbnail item post loop
--------------------------------------------------------------
*/
.item-blog-builder ul.post-categories,
.item-blog-builder ul.post-categories li,
.item-post-loop .thumbnail-item-post-loop ul,
.item-post-loop .thumbnail-item-post-loop ul li {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

/* Positioning and styling of the thumbnail item post loop list
 --------------------------------------------------------------
 */
.item-blog-builder ul.post-categories,
.item-post-loop .thumbnail-item-post-loop ul {
    position: absolute;
    bottom: -5px;
    left: 0px;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.item-blog-builder ul.post-categories {
    bottom: 10px;
}

/* Styling for links inside the thumbnail item post loop list
 --------------------------------------------------------------
 */
.item-blog-builder ul.post-categories a,
.item-post-loop .thumbnail-item-post-loop ul a {
    color: #FFF;
    background: var(--fc_color_primary);
    font-size: 11px;
    display: inline-block;
    padding: 5px 10px;
    margin-right: 10px;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}

.bd-article-relate {
    margin-top: var(--fc_space_7, 48px);
    margin-bottom: 0;
}

/* 404 page
-------------------------------------------------------------- */
.four-zero-four-bg {
    background-image: url("assets/images/dribbble.gif");
    height: 400px;
    background-position: center;
    max-width: 700px;
    background-repeat: no-repeat;
}

/* Style Blog Woocommerce
-------------------------------------------------------------- */
.content-item-blog-wc {
    transition: all 0.3s;
    border: 1px solid var(--fc_color_border, #E1E5DF);
}

.content-item-blog-wc:hover {
    background: var(--fc_color_tertiary);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}

/* ==============================================================
   GÓC CHĂM SÓC — Trang Danh mục Tin tức
   (template-parts/blog/blog-category.php + card-post.php)
   ============================================================== */

.bd-care-corner {
    padding-top: var(--fc_space_5, 24px);
    padding-bottom: var(--fc_space_7, 48px);
}

/* 1. Header */
.bd-care-header {
    max-width: 780px;
    margin-bottom: var(--fc_space_5, 24px);
}

.bd-care-kicker {
    margin-bottom: var(--fc_space_2, 8px);
}

.bd-care-title {
    margin: 0 0 var(--fc_space_3, 12px);
    padding: 0;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--fc_color_secondary, #263C22);
}

.bd-care-intro {
    font-size: 16px;
    line-height: 1.6;
    color: var(--fc_color_text_muted, #6B7569);
}

.bd-care-intro p {
    margin: 0 0 var(--fc_space_2, 8px);
}

.bd-care-intro p:last-child {
    margin-bottom: 0;
}

/* 2. Hàng chip danh mục con */
.bd-care-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fc_space_2, 8px);
    margin-bottom: var(--fc_space_5, 24px);
}

/* 2b. Panel của tab đang mở — JS bật/tắt thuộc tính `hidden` */
.bd-care-panel[hidden] {
    display: none;
}

.bd-care-panels {
    margin-bottom: var(--fc_space_7, 48px);
}

/* Bỏ khoảng cách thừa của phần tử cuối trong panel */
.bd-care-panel > :last-child {
    margin-bottom: 0;
}

/* 3. Bài nổi bật */
.bd-care-featured {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--fc_space_6, 32px);
    align-items: center;
    padding: var(--fc_space_5, 24px);
    margin-bottom: var(--fc_space_7, 48px);
    border-radius: var(--fc_radius_lg, 16px);
    background-color: var(--fc_color_soft_green, #EEF5E8);
}

.bd-care-featured-media {
    display: block;
    overflow: hidden;
    border-radius: var(--fc_radius_md, 12px);
    background-color: var(--fc_color_surface, #FFFFFF);
}

.bd-care-featured-media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Khung ảnh chờ của bài nổi bật cao bằng ảnh thật */
.bd-care-featured-media .bd-post-card-ph {
    aspect-ratio: 16 / 9;
    font-size: 15px;
}

.bd-care-featured-body .section-kicker {
    margin-bottom: var(--fc_space_2, 8px);
}

.bd-care-featured-title {
    margin: 0 0 var(--fc_space_3, 12px);
    padding: 0;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--fc_color_secondary, #263C22);
}

.bd-care-featured-title a {
    color: inherit;
    text-decoration: none;
}

.bd-care-featured-title a:hover {
    color: var(--fc_color_primary, #3F6234);
}

.bd-care-featured-desc {
    margin: 0 0 var(--fc_space_5, 24px);
    font-size: 16px;
    line-height: 1.6;
    color: var(--fc_color_text_muted, #6B7569);
}

/* 4. Khối danh sách */
.bd-care-section {
    margin-bottom: var(--fc_space_7, 48px);
}

.bd-care-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fc_space_4, 16px);
    margin-bottom: var(--fc_space_5, 24px);
}

.bd-care-section-title {
    margin: 0;
    padding: 0;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--fc_color_secondary, #263C22);
}

.bd-care-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--fc_color_secondary, #263C22);
    text-decoration: none;
    transition: gap 0.2s ease, color 0.2s ease;
}

.bd-care-more:hover {
    gap: 10px;
    color: var(--fc_color_primary, #3F6234);
}

.bd-care-col {
    display: flex;
}

/* 5. Card bài viết */
.bd-post-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: var(--fc_space_4, 16px);
    border: 1px solid var(--fc_color_border, #E1E5DF);
    border-radius: var(--fc_radius_lg, 16px);
    background-color: var(--fc_color_surface, #FFFFFF);
}

.bd-post-card-media {
    display: block;
    overflow: hidden;
    margin-bottom: var(--fc_space_4, 16px);
    border-radius: var(--fc_radius_md, 12px);
    background-color: var(--fc_color_soft_green, #EEF5E8);
}

.bd-post-card-media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.bd-post-card:hover .bd-post-card-media img {
    transform: scale(1.03);
}

.bd-post-card-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
    font-size: 13px;
    color: var(--fc_color_text_muted, #6B7569);
}

.bd-post-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.bd-post-card-cat {
    margin: 0 0 var(--fc_space_2, 8px);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fc_color_primary, #3F6234);
}

.bd-post-card-title {
    margin: 0 0 var(--fc_space_2, 8px);
    padding: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--fc_color_secondary, #263C22);
}

.bd-post-card-title a {
    color: inherit;
    text-decoration: none;
}

.bd-post-card-title a:hover {
    color: var(--fc_color_primary, #3F6234);
}

.bd-post-card-excerpt {
    margin: 0 0 var(--fc_space_4, 16px);
    font-size: 15px;
    line-height: 1.55;
    color: var(--fc_color_text_muted, #6B7569);
}

.bd-post-card-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    font-size: 15px;
    font-weight: 600;
    color: var(--fc_color_secondary, #263C22);
    text-decoration: none;
    transition: gap 0.2s ease, color 0.2s ease;
}

.bd-post-card-more:hover {
    gap: 10px;
    color: var(--fc_color_primary, #3F6234);
}

.bd-care-empty {
    padding: var(--fc_space_6, 32px);
    margin: 0;
    text-align: center;
    color: var(--fc_color_text_muted, #6B7569);
}

/* ==============================================================
   CHI TIẾT BÀI VIẾT (Góc chăm sóc)
   (template-parts/single/single-article.php + helpers-article.php)
   ============================================================== */

.bd-article {
    padding-top: var(--fc_space_5, 24px);
    padding-bottom: var(--fc_space_7, 48px);
}

/* 1. Header */
.bd-article-header {
    max-width: 820px;
    margin-bottom: var(--fc_space_5, 24px);
}

.bd-article-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--fc_space_3, 12px);
}

.bd-article-title {
    margin: 0 0 var(--fc_space_3, 12px);
    padding: 0;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.22;
    color: var(--fc_color_secondary, #263C22);
}

.bd-article-excerpt {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--fc_color_text_muted, #6B7569);
}

/* 2. Bố cục 2 cột: mục lục | nội dung */
.bd-article-body {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: var(--fc_space_6, 32px);
    align-items: start;
}

.bd-article-body-no-toc {
    grid-template-columns: minmax(0, 1fr);
}

/* 2b. Trang Chính sách: cột trái là Widget Area "Policy Sidebar" */
.bd-policy-sidebar {
    position: sticky;
    top: var(--fc_space_5, 24px);
    min-width: 0;
}

/* Card: padding 0 để menu chạy full bề ngang (widget-default.css set .widget padding 10px 15px) */
.bd-policy-sidebar .widget {
    margin: 0 0 var(--fc_space_5, 24px);
    padding: 0;
    border: 1px solid var(--fc_color_border, #E1E5DF);
    border-radius: var(--fc_radius_md, 12px);
    background-color: var(--fc_color_surface, #FFFFFF);
    overflow: hidden;
}

.bd-policy-sidebar .widget:last-child {
    margin-bottom: 0;
}

.bd-policy-sidebar .widget-title {
    margin: 0;
    padding: 13px var(--fc_space_4, 16px);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fc_color_text_muted, #6B7569);
    border-bottom: 1px solid var(--fc_color_border, #E1E5DF);
}

/* Widget không phải menu (văn bản, form…) vẫn chừa lề trong cho dễ đọc */
.bd-policy-sidebar .widget > p,
.bd-policy-sidebar .widget > form,
.bd-policy-sidebar .widget > select,
.bd-policy-sidebar .widget > div:not([class*="menu"]) {
    padding: var(--fc_space_3, 12px) var(--fc_space_4, 16px);
}

.bd-policy-sidebar .widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bd-policy-sidebar .widget li {
    margin: 0;
}

.bd-policy-sidebar .widget li + li {
    border-top: 1px solid var(--fc_color_border, #E1E5DF);
}

.bd-policy-sidebar .widget li a {
    display: block;
    padding: var(--fc_space_4, 16px);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--fc_color_primary, #3F6234);
    text-decoration: none;
    border-left: 4px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.bd-policy-sidebar .widget li a:hover {
    color: var(--fc_color_secondary, #263C22);
    background-color: var(--fc_color_soft_green, #EEF5E8);
}

/* Mục đang xem (WordPress tự thêm class current-menu-item) */
.bd-policy-sidebar .widget .current-menu-item > a,
.bd-policy-sidebar .widget .current_page_item > a {
    font-weight: 700;
    color: var(--fc_color_secondary, #263C22);
    background-color: var(--fc_color_soft_green, #EEF5E8);
    border-left-color: var(--fc_color_secondary, #263C22);
}

/* 3. Mục lục tự động */
.bd-article-toc {
    position: sticky;
    top: var(--fc_space_5, 24px);
    padding-right: var(--fc_space_5, 24px);
    border-right: 1px solid var(--fc_color_border, #E1E5DF);
}

.bd-article-toc-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 var(--fc_space_3, 12px);
    font-size: 15px;
    font-weight: 700;
    color: var(--fc_color_secondary, #263C22);
}

.bd-article-toc-title .biodino-icon {
    color: var(--fc_color_primary, #3F6234);
    flex-shrink: 0;
}

.bd-article-toc-nav {
    display: flex;
    flex-direction: column;
}

.bd-article-toc-link {
    display: block;
    padding: 7px 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--fc_color_text_muted, #6B7569);
    text-decoration: none;
    transition: color 0.2s ease;
}

.bd-article-toc-link:hover,
.bd-article-toc-link.is-active {
    color: var(--fc_color_primary, #3F6234);
    font-weight: 600;
}

/* 4. Khung "Trả lời ngắn" */
.bd-article-quick {
    padding: var(--fc_space_4, 16px) var(--fc_space_5, 24px);
    margin-bottom: var(--fc_space_6, 32px);
    border-left: 4px solid var(--fc_color_primary, #3F6234);
    border-radius: var(--fc_radius_sm, 8px);
    background-color: var(--fc_color_soft_green, #EEF5E8);
}

/* Nhãn là <h2> để tự vào Mục lục -> cần thắng rule `.bd-article-content h2` */
.bd-article-quick-label,
.bd-article-content h2.bd-article-quick-label {
    scroll-margin-top: 90px;
    margin: 0 0 6px;
    padding: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--fc_color_secondary, #263C22);
}

.bd-article-quick-text {
    font-size: 15px;
    line-height: 1.65;
    color: var(--fc_color_text_muted, #6B7569);
}

.bd-article-quick-text p {
    margin: 0 0 8px;
}

.bd-article-quick-text p:last-child {
    margin-bottom: 0;
}

/* 5. Nội dung bài viết */
.bd-article-content {
    font-size: 16px;
    line-height: 1.75;
    color: var(--fc_body_color, #3C443B);
}

.bd-article-content h2 {
    /* Chừa chỗ cho header dính khi nhảy tới anchor */
    scroll-margin-top: 90px;
    margin: var(--fc_space_6, 32px) 0 var(--fc_space_3, 12px);
    padding: 0;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--fc_color_secondary, #263C22);
}

.bd-article-content h2:first-child {
    margin-top: 0;
}

.bd-article-content h3 {
    scroll-margin-top: 90px;
    margin: var(--fc_space_5, 24px) 0 var(--fc_space_3, 12px);
    padding: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--fc_color_secondary, #263C22);
}

.bd-article-content h4 {
    margin: var(--fc_space_4, 16px) 0 var(--fc_space_2, 8px);
    padding: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--fc_color_secondary, #263C22);
}

.bd-article-content p {
    margin: 0 0 var(--fc_space_4, 16px);
}

.bd-article-content ul,
.bd-article-content ol {
    margin: 0 0 var(--fc_space_4, 16px);
    padding-left: 22px;
}

.bd-article-content li {
    margin-bottom: 8px;
}

.bd-article-content a {
    color: var(--fc_color_primary, #3F6234);
    text-decoration: underline;
}

.bd-article-content img {
    border-radius: var(--fc_radius_md, 12px);
}

.bd-article-content blockquote {
    margin: var(--fc_space_5, 24px) 0;
    padding: var(--fc_space_4, 16px) var(--fc_space_5, 24px);
    border-left: 4px solid var(--fc_color_tertiary, #8EAE68);
    border-radius: var(--fc_radius_sm, 8px);
    background-color: var(--fc_color_soft_green, #EEF5E8);
}

.bd-article-content blockquote p:last-child {
    margin-bottom: 0;
}

.bd-article-content table {
    width: 100%;
    margin: var(--fc_space_5, 24px) 0;
    border-collapse: collapse;
    font-size: 15px;
}

.bd-article-content th,
.bd-article-content td {
    padding: 12px 14px;
    border: 1px solid var(--fc_color_border, #E1E5DF);
    text-align: left;
}

.bd-article-content th {
    font-weight: 700;
    color: var(--fc_color_secondary, #263C22);
    background-color: var(--fc_color_soft_green, #EEF5E8);
}

/* 6. Card gợi ý sản phẩm */
.bd-article-hint {
    display: flex;
    align-items: center;
    gap: var(--fc_space_4, 16px);
    padding: var(--fc_space_4, 16px);
    margin: var(--fc_space_6, 32px) 0;
    border: 1px solid var(--fc_color_border, #E1E5DF);
    border-radius: var(--fc_radius_md, 12px);
    background-color: var(--fc_color_surface, #FFFFFF);
}

/* Khung ảnh sản phẩm: KHÔNG nền màu — ảnh nằm trên nền trắng của card.
   `display: block` (không dùng flex) để tránh bẫy `min-height: auto` của flex item. */
.bd-article-hint-media {
    display: block;
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    overflow: hidden;
    border-radius: var(--fc_radius_sm, 8px);
    background-color: transparent;
}

/* Khoá cứng kích thước ảnh: ảnh LUÔN vừa đúng khung, không tràn, không cắt.
   Dùng !important vì theme có nhiều rule `img` toàn cục (default.css, .content-editor img…)
   và ảnh sản phẩm là ảnh packshot dọc (186×300) rất dễ tràn khung 96×96. */
.bd-article-hint-media img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    object-fit: contain !important;
    background-color: transparent !important;
    border-radius: 0;
}

.bd-article-hint-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 12px;
    color: var(--fc_color_text_muted, #6B7569);
}

.bd-article-hint-body {
    flex: 1 1 auto;
    min-width: 0;
}

.bd-article-hint-body .section-kicker {
    margin-bottom: 6px;
    color: var(--fc_color_text_muted, #6B7569);
}

.bd-article-hint-title {
    margin: 0 0 4px;
    padding: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--fc_color_secondary, #263C22);
}

.bd-article-hint-title a {
    color: inherit;
    text-decoration: none;
}

.bd-article-hint-title a:hover {
    color: var(--fc_color_primary, #3F6234);
}

/* Dạng GỌN: chỉ chọn sản phẩm -> ảnh + tên + giá "Chỉ từ …" (không nút) */
.bd-article-hint-compact .bd-article-hint-media {
    width: 76px;
    height: 76px;
}

.bd-article-hint-compact .bd-article-hint-title {
    margin-bottom: 2px;
}

.bd-article-hint-price {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--fc_color_primary, #3F6234);
}

/* Giá WooCommerce bên trong kế thừa màu/typography của dòng giá */
.bd-article-hint-price .woocommerce-Price-amount,
.bd-article-hint-price .woocommerce-Price-currencySymbol {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.bd-article-hint-unit {
    font-weight: 600;
    color: var(--fc_color_text_muted, #6B7569);
}

.bd-article-hint-desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--fc_color_text_muted, #6B7569);
}

.bd-article-hint-cta {
    flex-shrink: 0;
}

/* 7. Banner tư vấn Zalo */
.bd-article-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fc_space_4, 16px);
    margin-top: var(--fc_space_6, 32px);
    padding: var(--fc_space_4, 16px) var(--fc_space_5, 24px);
    border-radius: var(--fc_radius_md, 12px);
    background-color: var(--fc_color_secondary, #263C22);
}

.bd-article-cta-text {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--fc_color_surface, #FFFFFF);
}

.bd-article-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    height: 44px;
    min-height: 44px;
    padding: 0 20px;
    font-size: 15px;
    font-weight: 600;
    color: var(--fc_color_secondary, #263C22);
    background-color: var(--fc_color_surface, #FFFFFF);
    border-radius: var(--fc_radius_sm, 8px);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bd-article-cta-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.woocommerce-checkout #order_review,
.cart-collaterals .cart_totals {
    border-color: var(--fc_color_primary);
}



/* Style Sidebar Cart đã được quy hoạch tập trung trong theme-woocommerce.css */



/* Style Sidebar Woocommerce mini cart button and Price filter
-------------------------------------------------------------- */
.widget.woocommerce.widget_shopping_cart .woocommerce-mini-cart__buttons.buttons a,
.widget.woocommerce.widget_price_filter .button {
    background: var(--fc_color_primary) !important;
    border-color: var(--fc_color_primary) !important;
}

/* Hover effect for the buttons in the shopping cart widget
--------------------------------------------------------------*/
.widget.woocommerce.widget_shopping_cart .woocommerce-mini-cart__buttons.buttons a:hover,
.widget.woocommerce.widget_price_filter .button:hover {
    background: #FFF !important;
}

/* Styling for the price slider background Sidebar
--------------------------------------------------------------*/
.widget.woocommerce.widget_price_filter .price_slider {
    background: var(--fc_color_secondary) !important;
}

/* Hover effect for various widget links Sidebar
--------------------------------------------------------------*/
.woocommerce .widget_layered_nav ul li a:hover,
.woocommerce .widget_product_tag_cloud a:hover,
.widget.woocommerce.widget_price_filter .price_slider .ui-slider-range {
    background: var(--fc_color_primary) !important;
}

/* Styling for the slider handle Sidebar
--------------------------------------------------------------*/
.widget.woocommerce.widget_price_filter .price_slider .ui-slider-handle {
    border-color: var(--fc_color_primary) !important;
}



/* Style FlexSlider Dots
-------------------------------------------------------------- */
.woocommerce .flex-control-nav li a.flex-active {
    background: var(--fc_color_primary);
}

.woocommerce .flex-control-nav li a {
    border-color: var(--fc_color_primary);
}

/* Style Modal Image Single Product
-------------------------------------------------------------- */
.pswp__bg {
    background: var(--fc_color_primary) !important;
    opacity: 0.5 !important;
}

/* Style Product Gallery
--------------------------------------------------------------*/
.woocommerce-product-gallery .flex-control-nav img.flex-active {
    border-color: var(--fc_color_primary);
}

/* Style Title Tab in Single Product
 --------------------------------------------------------------*/
.single-product .title-tab-single-product {
    border: 0px;
}

/* Style Woocommerce Reviews
--------------------------------------------------------------*/
.woocommerce-Reviews #title-review-modal,
.woocommerce-Reviews #review-modal #submit-review-modal,
.woocommerce-Reviews #open-review-modal {
    background: var(--fc_color_primary);
}

.woocommerce-Reviews .item-review-breakdown div {
    background: #FFD900;
}

.woocommerce-Reviews .list-reviews-product .comment_container .comment-text {
    background: var(--fc_color_tertiary);
    border-color: var(--fc_color_tertiary);
}

.woocommerce-Reviews .list-reviews-product li .meta strong {
    color: var(--fc_color_primary);
}

.woocommerce-Reviews .review-breakdown:after,
.woocommerce-Reviews .review-average:after {
    border-color: var(--fc_color_primary);
}

/*
Style Buy Contact Modal Product
--------------------------------------------------------------*/
.button-quick-contact-us a,
.right-quick-contact-us .wpcf7-form .wpcf7-submit {
    background: var(--fc_color_primary);
}

.description-quick-contact-us {
    border-color: var(--fc_color_primary);
}

/*
Style Customer Review
--------------------------------------------------------------*/
.customer-review .item-customer-review {
    background: #F1EACE;
}

.customer-review .header-item-customer-review img {
    position: absolute;
    left: 0px;
    max-width: 65px !important;
    top: 5px;
}

.customer-review .header-item-customer-review {
    padding-left: 80px;
    min-height: 70px;
}

.customer-review .header-item-customer-review .title-item-customer-review {
    padding-bottom: 2px;
    padding-top: 2px;
}

.customer-review .star-rating:before,
.customer-review .star-rating span:before {
    font-size: 15px;
    line-height: 15px;
}

.customer-review .star-rating,
.customer-review .star-rating span {
    height: 15px;
}

.customer-review .star-rating {
    width: 75px;
}

.customer-review .flex-control-nav {
    margin-top: 30px;
}

.customer-review .flex-control-nav li a {
    width: 40px;
    height: 5px;
    border-radius: 0px;
    background: #F1EACE;
    border: 0px;
}

.customer-review .flex-control-nav li a.flex-active {
    background: var(--fc_color_secondary);
}

.customer-review .icon-quote:after {
    bottom: -5px;
    color: #957951;
    opacity: 0.1;
    font-size: 150px;
    left: 20px;
    top: inherit;
    transform: none;
}

/*
Style Contact
--------------------------------------------------------------*/
.box-contact-form {
    background: #F1EACE;
}

/*
Style Partner
--------------------------------------------------------------*/
.item-partner {
    width: calc(100% / 6);
    padding: 10px;
}

.row-partner {
    margin-left: -10px;
    margin-right: -10px;
}

/*
Style Slider Builder
--------------------------------------------------------------*/
.item-builder-slider {
    padding-top: 10%;
    padding-bottom: 10%;
}

.item-builder-slider:after {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: var(--fc_color_primary);
    opacity: 0.4;
}

/*
Style Brand Builder
--------------------------------------------------------------*/
.read-more-item-brand {
    background: #0000004f;
    display: none;
}

.content-item-brand-slider:hover .read-more-item-brand {
    display: flex;
}

.read-more-item-brand .background-primary:hover {
    background: #71C139 !important;
}

/*
Style Blog Builder
--------------------------------------------------------------*/
.read-more-blog {
    border: 1px solid var(--fc_color_primary);
}

.read-more-blog:hover {
    background: var(--fc_color_primary);
    color: #FFF;
}

/*
Style Statics Builder
--------------------------------------------------------------*/
.wrapper-builder-statics {
    width: 20%;
}

/*
Style Video Builder
--------------------------------------------------------------*/
.builder-video:after {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
}

/*
Style Title Builder
--------------------------------------------------------------*/
.builder-title:after {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: var(--fc_color_primary);
    opacity: 0.5;
}

/*
Style Content Builder
--------------------------------------------------------------*/
.builder-content .builder-content-default {
    width: 100%;
}

.builder-content .builder-content-right {
    text-align: right;
}

/*
Style Contact Builder
--------------------------------------------------------------*/
.row-builder-contact {
    margin-left: -15px;
    margin-right: -15px;
}

.builder-contact ul,
.builder-contact ul li {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.builder-contact ul li {
    margin-bottom: 15px;
}

.builder-contact-detail {
    padding-left: 55px;
    min-height: 38px;
}

.builder-contact .builder-contact-detail:after {
    content: "";
    width: 36px;
    height: 36px;
    display: inline-block;
    position: absolute;
    left: 0px;
    top: 0px;
    border: 1px solid var(--fc_color_primary);
}

.builder-contact .builder-contact-detail:before {
    content: "";
    width: 16px;
    height: 16px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    left: 10px;
    top: 10px;
    position: absolute;
}

.builder-contact .builder-contact-address .builder-contact-detail:before {
    background-image: url("assets/icons/icon-contact-map.png");
}

.builder-contact .builder-contact-phone .builder-contact-detail:before {
    background-image: url("assets/icons/icon-contact-phone.svg");
}

.builder-contact .builder-contact-email .builder-contact-detail:before {
    background-image: url("assets/icons/icon-contact-email.svg");
}

/*
Style Collapse Builder
--------------------------------------------------------------*/
.builder-collapse-container .container {
    max-width: 1010px;
}

.builder-collapse-item.builder-collapse-inactive .builder-collapse-item-description {
    display: none;
}

.builder-collapse-item .builder-collapse-item-title {
    padding-right: 50px;
}

.builder-collapse-item .builder-collapse-item-title:after {
    content: "+";
    position: absolute;
    right: 10px;
    font-size: 40px;
    font-weight: 200;
    top: 25px;
    line-height: 0px;
}

.builder-collapse-item.builder-collapse-active .builder-collapse-item-title:after {
    content: "-";
}

/*
Style Shortcode Woocommerce tabs category
--------------------------------------------------------------*/
.woo-category-tabs .tabs li {
    display: inline-flex;
    padding: 0px;
}

.woo-category-tabs .tabs {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    border-bottom: 1px solid var(--fc_color_primary);
    margin-bottom: 20px;
}

.woo-category-tabs .tabs li a {
    font-weight: 500;
    font-size: 15px;
    padding: 0px 20px 15px 20px;
    position: relative;
}

.woo-category-tabs .tabs li a:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 2px;
    background: transparent;
}

.woo-category-tabs .tabs li a.active {
    font-weight: 600;
}

.woo-category-tabs .tabs li a.active:after {
    background: var(--fc_color_primary);
}

.woo-category-tabs .products-in-category .item-category-tab {
    display: inline-flex !important;
    flex: 0 0 auto;
    width: calc(100% / 3);
}

.woo-category-tabs .tab-content .products-in-category {
    margin-left: -10px;
    margin-right: -10px;
}

.woo-category-tabs .item-category-tab .image-item-category-tab img {
    max-width: 90px;
    border-radius: 5px;
    max-height: 65px;
}

/*
overwrite CSS
--------------------------------------------------------------*/
.container-full {
    max-width: 1750px;
    margin: 0px auto;
}

.container-full-small {
    max-width: 1320px;
    margin: 0px auto;
}

.builder-content .container {
    max-width: 980px;
}

#review-summary {
    background: #F4F2E9;
    color: #957951;
}

#content-reviews #comments {
    padding: 20px;
    background: #FFFDF6;
}

.woocommerce-Reviews .list-reviews-product li {
    padding: 15px 0px;
    border-bottom: 1px solid #3A7920;
}

.woocommerce-Reviews .list-reviews-product li .woocommerce-review__dash,
.woocommerce-Reviews .list-reviews-product li img {
    display: none;
}

.woocommerce-Reviews .list-reviews-product li .woocommerce-review__published-date {
    display: block;
    color: #B5B5B5;
}

.woocommerce-Reviews .list-reviews-product li .woocommerce-review__author {
    font-size: 18px;
}

.woocommerce-Reviews .list-reviews-product li .description {
    padding: 0px 20px;
    font-size: 14px;
}

.woocommerce-Reviews .list-reviews-product .comment_container .comment-text {
    background: transparent;
    border: 0px;
    padding: 0px;
}

.woocommerce-Reviews .review-breakdown:after,
.woocommerce-Reviews .review-average:after {
    height: 70%;
    top: 15%;
    border-right: 1px solid #957951;
}

.woocommerce-Reviews .list-reviews-product li .meta strong {
    text-transform: inherit;
    font-size: 16px;
}

.woocommerce-Reviews .list-reviews-product li:last-child {
    border-bottom: 0px;
}

.woocommerce-Reviews .number-review-product,
.woocommerce-Reviews #open-review-modal {
    background: transparent;
    color: #957951;
    border: 1px solid #957951;
}

.woocommerce-Reviews .number-review-product {
    height: 38px;
}

.search-form-desktop button.btn-search-submit {
    background: transparent;
    padding: 0px;
    border-radius: 0px;
    right: 5px;
}

.search-form-desktop .search-form .input-search {
    width: 0px;
    border: 0px;
    border-radius: 0px;
    background: transparent;
    transition: all 0.4s;
    overflow: hidden;
}

.search-form-desktop .search-form {
    border-radius: 5px;
}

.search-form-desktop:hover .search-form .input-search {
    width: 180px;
    background: #F1EACE;
}

.woocommerce-info {
    background-color: #fffdf6;
}

.content-single-product {
    border-top: 1px solid #3A7920;
}

.title-tab-single-product {
    margin-bottom: 0px;
}

.list-relate-product-sidebar li,
.list-relate-product-sidebar {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.list-relate-product-sidebar li {
    margin-bottom: 20px;
}

.list-relate-product-sidebar img {
    width: 100%;
}

.button-quick-contact-us img {
    filter: none;
}

.background-zalo {
    background: #0F8CE5 !important;
}

.background-phone {
    background: #00A806 !important;
}


#description-quick-contact-us {
    border-top: 2px solid #3a7920;
}

label,
input,
textarea,
input::placeholder,
textarea::placeholder {
    color: #957951;
}

#button-quick-contact-us {
    gap: 10px;
}

.builder-blog .woocommerce .flex-control-nav {
    display: none;
}

.title-customer-review {
    padding-left: 10px;
}

.header-menu-main .language-switch {
    display: flex;
    gap: 5px;
    padding-left: 5px;
}

.header-menu-main .language-btn {
    padding: 5px 6px;
    border: 1px solid #2e5d1b;
    border-radius: 8px;
    font-weight: bold;
    font-size: 14px;
    color: #2e5d1b;
    background-color: transparent;
    cursor: pointer;
    transition: all 0.3sease;
}

.header-menu-main .language-switch .active {
    background-color: #2e5d1b;
    color: white;
}

.woocommerce-breadcrumb:before {
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    background-image: url("/wp-content/themes/clientv7/assets/icons/icon-home.png");
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 5px;
}

.sub-product-category .read-more-content {
    display: none;
}

.iconPlayVideo {
    width: 80px;
    height: 80px;
    background-image: url(/wp-content/themes/clientv7/assets/icons/icon-play.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}

.iconPlayVideo:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

/* ==============================================================
   BUILDER SECTION: HOME HERO (Banner Trang Chủ Biodino)
   ============================================================== */
.builder-hero-section {
    background-color: var(--fc_color_surface, #FFFFFF);
    position: relative;
    overflow: hidden;
}

.builder-hero-split-wrapper {
    width: 100%;
    min-height: 580px;
}

/* Left Half (White, aligned with container) */
.builder-hero-half-content {
    flex: 0 0 50%;
    width: 50%;
    background-color: var(--fc_color_surface, #FFFFFF);
    padding-top: 70px;
    padding-bottom: 75px;
    padding-right: 50px;
    padding-left: max(30px, calc((100vw - 1320px) / 2 + 15px));
    display: flex;
    justify-content: flex-end;
}

.builder-hero-content-inner {
    width: 100%;
    max-width: 580px;
    margin-left: auto;
}

/* Right Half (Khung xanh - Green Area) */
.builder-hero-half-visual {
    flex: 0 0 50%;
    width: 50%;
    background-color: var(--fc_color_soft_green, #EEF5E8);
    padding: 45px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.builder-hero-kicker {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--fc_color_primary, #3F6234);
    margin-bottom: 18px;
    display: inline-block;
}

.builder-hero-title {
    font-size: 52px;
    font-weight: 700;
    line-height: 1.16;
    color: var(--fc_color_secondary, #263C22);
    margin-bottom: 22px;
    letter-spacing: -0.02em;
}

.font-weight-700 {
    font-weight: 700 !important;
}

.builder-hero-desc {
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--fc_color_text_muted, #6B7569);
    max-width: 530px;
    margin-bottom: 34px;
}

.builder-hero-actions {
    gap: 16px;
    margin-bottom: 40px;
}

.btn-hero-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--fc_color_primary, #3F6234);
    color: #FFFFFF !important;
    padding: 13px 26px;
    border-radius: var(--fc_radius_md, 12px);
    border: 1.5px solid transparent;
    transition: all 0.25s ease;
    box-shadow: 0 4px 14px rgba(63, 98, 52, 0.2);
    font-size: 15px;
    text-decoration: none;
}

.btn-hero-primary:hover {
    background-color: var(--fc_color_secondary, #263C22);
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(38, 60, 34, 0.25);
}

.btn-hero-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: var(--fc_color_secondary, #263C22) !important;
    padding: 13px 26px;
    border-radius: var(--fc_radius_md, 12px);
    border: 1.5px solid var(--fc_color_border, #E1E5DF);
    transition: all 0.25s ease;
    font-size: 15px;
    text-decoration: none;
}

.btn-hero-secondary:hover {
    border-color: var(--fc_color_primary, #3F6234);
    color: var(--fc_color_primary, #3F6234) !important;
    background-color: var(--fc_color_soft_green, #EEF5E8);
    transform: translateY(-2px);
}

.builder-hero-trust-list {
    gap: 24px;
    justify-content: flex-start !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.builder-hero-trust-item {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--fc_color_secondary, #263C22);
}

.builder-hero-trust-item .icon-trust-check {
    stroke: var(--fc_color_primary, #3F6234);
    color: var(--fc_color_primary, #3F6234);
    width: 16px;
    height: 16px;
}

/* Arch Card Visual */
.builder-hero-visual-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.builder-hero-arch-card {
    width: 100%;
    max-width: 500px;
    height: 85%;
    max-height: 520px;
    min-height: 300px;
    aspect-ratio: 1 / 1.1;
    background-color: var(--fc_color_surface, #FFFFFF);
    border-radius: 45% 45% 16px 16px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(38, 60, 34, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.builder-hero-arch-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px rgba(38, 60, 34, 0.12);
}

.builder-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.builder-hero-placeholder {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 30%, #FFFFFF 0%, #F9FAF7 100%);
    border: 2px dashed rgba(142, 174, 104, 0.4);
    border-radius: 45% 45% 16px 16px;
}

/* ==============================================================
   BUILDER SHARED: Khối tiêu đề dùng chung cho mọi block builder
   (Kicker + tiêu đề lớn + mô tả mở đầu  ·  Tiêu đề mục H2)
   Dùng cho: care-about, care-roles, proof-intro, proof-scope…
   ============================================================== */
.builder-intro-kicker {
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--fc_color_primary, #3F6234);
}

.builder-intro-title {
    font-size: 42px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--fc_color_secondary, #263C22);
    margin-bottom: 20px;
}

.builder-intro-desc {
    font-size: 17px;
    line-height: 1.65;
    color: var(--fc_color_text_muted, #6B7569);
    max-width: 860px;
    margin-bottom: 0;
}

.builder-section-heading {
    font-size: 30px;
    line-height: 1.25;
    color: var(--fc_color_secondary, #263C22);
    margin-bottom: 24px;
}

/* Hàng tiêu đề mục + link căn phải (dùng cho cat-main, product-grid…) */
.builder-section-head {
    margin-bottom: 24px;
}

.builder-section-head .builder-section-heading {
    margin-bottom: 0;
}

.builder-section-head-link {
    text-align: right;
}

.builder-section-link {
    display: inline-flex;
    align-items: center;
    gap: var(--fc_space_2, 8px);
    min-height: 44px;
    font-size: 15px;
    font-weight: 700;
    color: var(--fc_color_primary, #3F6234);
    text-decoration: none;
}

.builder-section-link:hover {
    color: var(--fc_color_secondary, #263C22);
}

.builder-section-link-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ==============================================================
   BUILDER SECTION: VỀ BIODINO CARE (Giới thiệu thương hiệu)
   Block: builder-care-about  ·  Layout: care-about
   ============================================================== */
.builder-care-about {
    padding-top: 56px;
    padding-bottom: 0;
    background-color: var(--fc_body_background_color, #FBFAF5);
}

.builder-care-about-content {
    max-width: 620px;
}

/* Cột nội dung hẹp nên mô tả cũng hẹp theo */
.builder-care-about .builder-intro-desc {
    max-width: 580px;
}

/* Khung ảnh thương hiệu / đội ngũ (cột phải) */
.builder-care-media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 280px;
    padding: var(--fc_space_5, 24px);
    text-align: center;
    background-color: var(--fc_color_soft_green, #EEF5E8);
    border: 1px solid var(--fc_color_border, #E1E5DF);
    border-radius: var(--fc_radius_lg, 16px);
    overflow: hidden;
}

.builder-care-media-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--fc_radius_md, 12px);
}

.builder-care-media-caption {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--fc_color_tertiary, #8EAE68);
}

.builder-care-about-divider {
    height: 1px;
    margin-top: 48px;
    background-color: var(--fc_color_border, #E1E5DF);
}

/* ==============================================================
   BUILDER SECTION: VAI TRÒ CỦA BIODINO
   Block: builder-care-roles  ·  Layout: care-roles
   ============================================================== */
.builder-care-roles {
    padding-top: 48px;
    padding-bottom: 32px;
    background-color: var(--fc_body_background_color, #FBFAF5);
}

.builder-care-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: var(--fc_space_5, 24px);
    background-color: var(--fc_color_surface, #FFFFFF);
    border: 1px solid var(--fc_color_border, #E1E5DF);
    border-radius: var(--fc_radius_lg, 16px);
}

.builder-care-card-title {
    font-size: 18px;
    line-height: 1.35;
    color: var(--fc_color_secondary, #263C22);
    margin-bottom: 8px;
}

.builder-care-card-desc {
    font-size: 15px;
    line-height: 1.6;
    color: var(--fc_color_text_muted, #6B7569);
    margin-bottom: 0;
}

/* Khối định vị: 1 khung trắng, các cột ngăn nhau bằng đường kẻ dọc */
.builder-care-statements {
    margin-top: 32px;
    background-color: var(--fc_color_surface, #FFFFFF);
    border: 1px solid var(--fc_color_border, #E1E5DF);
    border-radius: var(--fc_radius_lg, 16px);
    overflow: hidden;
}

.builder-care-statement {
    padding: var(--fc_space_5, 24px);
}

.builder-care-statement + .builder-care-statement {
    border-left: 1px solid var(--fc_color_border, #E1E5DF);
}

/* ==============================================================
   BUILDER SECTION: THÔNG TIN DOANH NGHIỆP & LIÊN HỆ
   Block: builder-care-info  ·  Layout: care-info
   ============================================================== */
.builder-care-info {
    padding-top: 48px;
    padding-bottom: 56px;
    background-color: var(--fc_body_background_color, #FBFAF5);
}

/* Khối Vai trò nằm ngay trên: khối trên đã tạo nhịp dưới nên bỏ padding-top để 2 khối liền mạch */
.builder-care-roles + .builder-care-info {
    padding-top: 0;
}

.builder-care-info-panel {
    padding: var(--fc_space_5, 24px);
    background-color: var(--fc_color_soft_green, #EEF5E8);
    border-radius: var(--fc_radius_lg, 16px);
}

.builder-care-info-title {
    font-size: 18px;
    line-height: 1.35;
    color: var(--fc_color_secondary, #263C22);
    margin-bottom: 16px;
}

.builder-care-info-list {
    border-top: 1px solid var(--fc_color_border, #E1E5DF);
}

.builder-care-info-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--fc_space_4, 16px);
    padding: 14px 0;
    border-bottom: 1px solid var(--fc_color_border, #E1E5DF);
}

.builder-care-info-label {
    flex: 0 0 16%;
    font-size: 14px;
    color: var(--fc_color_text_muted, #6B7569);
}

.builder-care-info-value {
    flex: 1 1 0;
    min-width: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--fc_color_secondary, #263C22);
}

/* ==============================================================
   BUILDER SECTION: CHẤT LƯỢNG & TIÊU CHUẨN
   Layout: proof-intro · proof-steps · proof-scope · proof-cta
   (4 block ghép thành 1 trang; mỗi block chỉ tạo nhịp TRÊN,
    các block đứng liền nhau sẽ nối nhịp dọc liền mạch)
   ============================================================== */
.builder-proof-intro {
    padding-top: 56px;
    padding-bottom: 0;
    background-color: var(--fc_body_background_color, #FBFAF5);
}

/* --- Quy trình: 4 thẻ số --- */
.builder-proof-steps {
    padding-top: 40px;
    padding-bottom: 0;
    background-color: var(--fc_body_background_color, #FBFAF5);
}

.builder-proof-step {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 105px;
    padding: var(--fc_space_4, 16px);
    background-color: var(--fc_color_surface, #FFFFFF);
    border: 1px solid var(--fc_color_border, #E1E5DF);
    border-radius: var(--fc_radius_lg, 16px);
}

.builder-proof-step-number {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--fc_color_tertiary, #8EAE68);
}

/* Tên bước luôn nằm sát đáy thẻ, số thứ tự nằm trên cùng */
.builder-proof-step-title {
    margin-top: auto;
    margin-bottom: 0;
    font-size: 18px;
    line-height: 1.35;
    color: var(--fc_color_secondary, #263C22);
}

.builder-proof-step-desc {
    margin-top: 6px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--fc_color_text_muted, #6B7569);
}

/* --- Phạm vi hồ sơ: H2 + ghi chú căn phải + 3 thẻ --- */
.builder-proof-scope {
    padding-top: 64px;
    padding-bottom: 0;
    background-color: var(--fc_body_background_color, #FBFAF5);
}

.builder-proof-scope-head {
    margin-bottom: 32px;
}

/* Tiêu đề đứng cùng hàng với ghi chú nên bỏ margin-bottom của class dùng chung */
.builder-proof-scope-head .builder-section-heading {
    margin-bottom: 0;
}

.builder-proof-scope-note {
    font-size: 16px;
    line-height: 1.5;
    color: var(--fc_body_color, #3C443B);
    text-align: right;
}

.builder-proof-scope-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: var(--fc_space_5, 24px);
    background-color: var(--fc_color_surface, #FFFFFF);
    border: 1px solid var(--fc_color_border, #E1E5DF);
    border-radius: var(--fc_radius_lg, 16px);
}

.builder-proof-scope-label {
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--fc_color_primary, #3F6234);
    margin-bottom: 8px;
}

.builder-proof-scope-card-title {
    font-size: 22px;
    line-height: 1.3;
    color: var(--fc_color_secondary, #263C22);
    margin-bottom: 8px;
}

.builder-proof-scope-card-desc {
    margin-bottom: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--fc_color_text_muted, #6B7569);
}

/* --- 2 panel CTA nền Leaf Soft --- */
.builder-proof-cta {
    padding-top: 56px;
    padding-bottom: 64px;
    background-color: var(--fc_body_background_color, #FBFAF5);
}

.builder-proof-cta-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 170px;
    padding: var(--fc_space_5, 24px);
    background-color: var(--fc_color_soft_green, #EEF5E8);
    border-radius: var(--fc_radius_lg, 16px);
}

.builder-proof-cta-title {
    font-size: 20px;
    line-height: 1.35;
    color: var(--fc_color_secondary, #263C22);
    margin-bottom: 12px;
}

.builder-proof-cta-desc {
    margin-bottom: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--fc_color_text_muted, #6B7569);
}

/* Nút luôn nằm sát đáy panel, cách mô tả tối thiểu 24px */
.builder-proof-cta-action {
    margin-top: auto;
    padding-top: 24px;
}

.builder-proof-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    font-size: 15px;
    font-weight: 600;
    color: var(--fc_color_secondary, #263C22);
    background-color: var(--fc_color_surface, #FFFFFF);
    border: 1.5px solid var(--fc_color_primary, #3F6234);
    border-radius: var(--fc_radius_md, 12px);
    text-decoration: none;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.builder-proof-cta-btn:hover {
    background-color: var(--fc_color_primary, #3F6234);
    color: #FFFFFF;
}

/* Nút chưa có URL: giữ đúng thiết kế nhưng không phải link */
.builder-proof-cta-btn.is-static {
    cursor: default;
}

.builder-proof-cta-btn.is-static:hover {
    background-color: var(--fc_color_surface, #FFFFFF);
    color: var(--fc_color_secondary, #263C22);
}

.builder-proof-cta-arrow {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ==============================================================
   BUILDER SECTION: QUIZ CHỌN NHU CẦU
   Block: builder-quiz  ·  Layout: quiz
   Khung wizard 3 bước: thanh tiến trình + tab + nội dung từng bước
   + chân khung (Quay lại / Tiếp tục). Tương tác do JS đảm nhiệm
   (hàm product_quiz() trong assets/js/base-theme.js).
   ============================================================== */
.builder-quiz {
    padding-top: 56px;
    padding-bottom: 64px;
    background-color: var(--fc_body_background_color, #FBFAF5);
}

/* --- Đầu khối: kicker + H1 + mô tả (căn giữa) --- */
.builder-quiz-head {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.builder-quiz-kicker {
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--fc_color_primary, #3F6234);
    margin-bottom: 8px;
}

.builder-quiz-title {
    font-size: 46px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--fc_color_secondary, #263C22);
    margin-bottom: 8px;
}

.builder-quiz-subtitle {
    max-width: 720px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.6;
    color: var(--fc_color_text_muted, #6B7569);
}

/* --- Khung wizard --- */
.builder-quiz-card {
    max-width: 990px;
    margin: 32px auto 0;
    background-color: var(--fc_color_surface, #FFFFFF);
    border: 1px solid var(--fc_color_border, #E1E5DF);
    border-radius: var(--fc_radius_lg, 16px);
    box-shadow: 0 18px 44px rgba(38, 60, 34, 0.07);
    overflow: hidden;
}

/* Thanh tiến trình: nằm sát mép trên khung, thụt 32px hai bên */
.builder-quiz-progress {
    display: flex;
    gap: 6px;
    padding: 0 32px;
}

.builder-quiz-progress-seg {
    flex: 1 1 0;
    height: 6px;
    background-color: var(--fc_color_soft_green, #EEF5E8);
    border-radius: var(--fc_radius_pill, 999px);
    transition: background-color 0.25s ease;
}

.builder-quiz-progress-seg.is-active {
    background-color: var(--fc_color_primary, #3F6234);
}

/* Tab 3 bước, mỗi tab ứng với 1 đoạn tiến trình */
.builder-quiz-tabs {
    display: flex;
    margin: 0;
    padding: 14px 32px 0;
}

.builder-quiz-tab {
    flex: 1 1 0;
    font-size: 13px;
    color: var(--fc_color_text_muted, #6B7569);
    text-align: center;
}

.builder-quiz-tab.is-active {
    font-weight: 700;
    color: var(--fc_color_primary, #3F6234);
}

/* --- Nội dung từng bước --- */
.builder-quiz-step {
    padding: 40px 60px 72px;
}

/* Step ẩn vẫn phải thắng display của .builder-quiz-step */
.builder-quiz-step[hidden] {
    display: none;
}

.builder-quiz-step-kicker {
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--fc_color_primary, #3F6234);
    margin-bottom: 8px;
}

.builder-quiz-question {
    font-size: 34px;
    line-height: 1.25;
    color: var(--fc_color_secondary, #263C22);
    margin-bottom: 8px;
}

.builder-quiz-question:focus {
    outline: none;
}

.builder-quiz-helper {
    margin-bottom: 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--fc_color_text_muted, #6B7569);
}

.builder-quiz-options {
    margin-top: 32px;
}

/* --- Phương án chọn --- */
.builder-quiz-option {
    display: flex;
    align-items: center;
    gap: var(--fc_space_3, 12px);
    width: 100%;
    min-height: 107px;
    padding: var(--fc_space_5, 24px);
    font: inherit;
    text-align: left;
    color: inherit;
    background-color: var(--fc_color_surface, #FFFFFF);
    border: 1px solid var(--fc_color_border, #E1E5DF);
    border-radius: var(--fc_radius_md, 12px);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.builder-quiz-option:hover {
    border-color: var(--fc_color_tertiary, #8EAE68);
}

.builder-quiz-option:focus-visible {
    outline: 2px solid var(--fc_color_primary, #3F6234);
    outline-offset: 2px;
}

.builder-quiz-option.is-selected {
    background-color: var(--fc_color_soft_green, #EEF5E8);
    border-color: var(--fc_color_primary, #3F6234);
}

.builder-quiz-option-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    font-size: 15px;
    font-weight: 700;
    color: var(--fc_color_primary, #3F6234);
    background-color: var(--fc_color_soft_green, #EEF5E8);
    border-radius: var(--fc_radius_md, 12px);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.builder-quiz-option.is-selected .builder-quiz-option-badge {
    color: #FFFFFF;
    background-color: var(--fc_color_primary, #3F6234);
}

.builder-quiz-option-body {
    display: block;
    min-width: 0;
}

.builder-quiz-option-title {
    display: block;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--fc_color_secondary, #263C22);
    margin-bottom: 4px;
}

.builder-quiz-option-desc {
    display: block;
    font-size: 15px;
    line-height: 1.5;
    color: var(--fc_color_text_muted, #6B7569);
}

/* --- Chân khung: Quay lại / ghi chú + nút Tiếp tục --- */
.builder-quiz-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fc_space_4, 16px);
    padding: 16px 32px;
    background-color: var(--fc_body_background_color, #FBFAF5);
    border-top: 1px solid var(--fc_color_border, #E1E5DF);
}

/* JS ẩn chân khung khi sang màn kết quả — phải thắng display:flex ở trên */
.builder-quiz-footer[hidden] {
    display: none;
}

.builder-quiz-footer-left {
    display: flex;
    align-items: center;
    min-width: 0;
}

.builder-quiz-note {
    font-size: 15px;
    color: var(--fc_color_text_muted, #6B7569);
}

.builder-quiz-back {
    display: inline-flex;
    align-items: center;
    gap: var(--fc_space_2, 8px);
    min-height: 44px;
    padding: 0;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--fc_color_secondary, #263C22);
    background: none;
    border: 0;
    cursor: pointer;
}

.builder-quiz-back:hover {
    color: var(--fc_color_primary, #3F6234);
}

.builder-quiz-back[hidden],
.builder-quiz-note[hidden] {
    display: none;
}

.builder-quiz-back-icon,
.builder-quiz-next-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.builder-quiz-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fc_space_2, 8px);
    min-height: 48px;
    padding: 0 var(--fc_space_5, 24px);
    font-size: 15px;
    font-weight: 600;
    color: #FFFFFF;
    background-color: var(--fc_color_primary, #3F6234);
    border-radius: var(--fc_radius_md, 12px);
    box-shadow: 0 6px 16px rgba(63, 98, 52, 0.22);
    text-decoration: none;
    transition: background-color 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}

.builder-quiz-next:hover {
    color: #FFFFFF;
    background-color: var(--fc_color_secondary, #263C22);
}

/* Chưa chọn phương án mà bấm Tiếp tục: viền các phương án chuyển màu cảnh báo */
.builder-quiz-options.is-invalid .builder-quiz-option {
    border-color: var(--fc_color_warning_text, #684C1E);
}

/* Ô nhập text của phương án "không chọn" */
.builder-quiz-option-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.builder-quiz-option-extra {
    margin-top: var(--fc_space_3, 12px);
    padding: var(--fc_space_4, 16px);
    background-color: var(--fc_color_surface, #FFFFFF);
    border: 1px solid var(--fc_color_border, #E1E5DF);
    border-radius: var(--fc_radius_md, 12px);
}

.builder-quiz-option-extra[hidden] {
    display: none;
}

.builder-quiz-option-extra-label {
    display: block;
    margin-bottom: var(--fc_space_2, 8px);
    font-size: 13px;
    font-weight: 600;
    color: var(--fc_color_secondary, #263C22);
}

.builder-quiz-text-input {
    width: 100%;
    min-height: 48px;
    padding: 0 var(--fc_space_4, 16px);
    font: inherit;
    font-size: 15px;
    color: var(--fc_body_color, #3C443B);
    background-color: var(--fc_surface_input, #FFFFFF);
    border: 1px solid var(--fc_color_border, #E1E5DF);
    border-radius: var(--fc_radius_md, 12px);
}

.builder-quiz-text-input:focus {
    outline: none;
    border-color: var(--fc_color_primary, #3F6234);
    box-shadow: 0 0 0 3px rgba(63, 98, 52, 0.15);
}

/* ==============================================================
   MÀN KẾT QUẢ CỦA QUIZ (kết luận theo câu trả lời)
   ============================================================== */
.builder-quiz-result {
    padding: 40px 60px 0;
}

.builder-quiz-result[hidden] {
    display: none;
}

.builder-quiz-result .builder-quiz-helper {
    margin-bottom: 0;
}

/* Khối "Vì sao phù hợp" */
.builder-quiz-why {
    display: flex;
    align-items: flex-start;
    gap: var(--fc_space_5, 24px);
    margin-top: 24px;
    padding: var(--fc_space_5, 24px);
    background-color: var(--fc_color_soft_green, #EEF5E8);
    border-radius: var(--fc_radius_md, 12px);
}

.builder-quiz-why-label {
    flex: 0 0 26%;
    font-size: 17px;
    font-weight: 700;
    color: var(--fc_color_secondary, #263C22);
}

.builder-quiz-why-body {
    flex: 1 1 0;
    min-width: 0;
}

.builder-quiz-why-line {
    margin-bottom: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--fc_color_text_muted, #6B7569);
}

/* Thẻ "Gợi ý chính" (viền Forest) */
.builder-quiz-main {
    display: flex;
    align-items: center;
    gap: var(--fc_space_5, 24px);
    margin-top: 24px;
    padding: var(--fc_space_5, 24px);
    background-color: var(--fc_color_surface, #FFFFFF);
    border: 1.5px solid var(--fc_color_primary, #3F6234);
    border-radius: var(--fc_radius_md, 12px);
}

.builder-quiz-main-media {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 132px;
    min-height: 132px;
    padding: var(--fc_space_3, 12px);
    text-align: center;
    background: linear-gradient(160deg, var(--fc_color_soft_green, #EEF5E8) 0%, #DCEBCB 100%);
    border: 1px solid var(--fc_color_border, #E1E5DF);
    border-radius: var(--fc_radius_md, 12px);
    overflow: hidden;
}

.builder-quiz-main-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.builder-quiz-main-image[hidden] {
    display: none;
}

.builder-quiz-main-media-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--fc_color_primary, #3F6234);
}

.builder-quiz-main-media-group {
    display: block;
    margin-top: 4px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--fc_color_secondary, #263C22);
    text-transform: uppercase;
}

.builder-quiz-main-body {
    flex: 1 1 0;
    min-width: 0;
}

.builder-quiz-card-kicker {
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--fc_color_primary, #3F6234);
    margin-bottom: var(--fc_space_2, 8px);
}

.builder-quiz-main-title {
    margin-bottom: var(--fc_space_2, 8px);
    font-size: 22px;
    line-height: 1.3;
    color: var(--fc_color_secondary, #263C22);
}

.builder-quiz-main-desc {
    margin-bottom: var(--fc_space_3, 12px);
    font-size: 16px;
    line-height: 1.6;
    color: var(--fc_color_text_muted, #6B7569);
}

.builder-quiz-main-note {
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--fc_color_secondary, #263C22);
}

.builder-quiz-main-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fc_space_2, 8px);
    min-height: 48px;
    margin-top: var(--fc_space_5, 24px);
    padding: 0 var(--fc_space_5, 24px);
    font-size: 15px;
    font-weight: 600;
    color: #FFFFFF;
    background-color: var(--fc_color_primary, #3F6234);
    border: 1.5px solid var(--fc_color_primary, #3F6234);
    border-radius: var(--fc_radius_md, 12px);
    text-decoration: none;
    transition: background-color 0.25s ease;
}

.builder-quiz-main-btn:hover {
    color: #FFFFFF;
    background-color: var(--fc_color_secondary, #263C22);
}

.builder-quiz-main-btn[hidden] {
    display: none;
}

/* Khối cảnh báo size */
.builder-quiz-size {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fc_space_5, 24px);
    margin-top: 24px;
    padding: var(--fc_space_5, 24px);
    background-color: var(--fc_color_surface, #FFFFFF);
    border: 1px solid var(--fc_color_border, #E1E5DF);
    border-left: 3px solid var(--fc_color_warning_text, #684C1E);
    border-radius: var(--fc_radius_md, 12px);
}

.builder-quiz-size-body {
    min-width: 0;
}

.builder-quiz-size-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--fc_color_secondary, #263C22);
    margin-bottom: 4px;
}

.builder-quiz-size-desc {
    margin-bottom: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--fc_color_text_muted, #6B7569);
}

.builder-quiz-size-link {
    display: inline-flex;
    align-items: center;
    gap: var(--fc_space_2, 8px);
    flex: 0 0 auto;
    min-height: 44px;
    font-size: 15px;
    font-weight: 700;
    color: var(--fc_color_primary, #3F6234);
    text-decoration: none;
}

.builder-quiz-size-link:hover {
    color: var(--fc_color_secondary, #263C22);
}

/* 2 thẻ nhỏ: Phương án thay thế / Sản phẩm bổ trợ */
.builder-quiz-result-cards {
    margin-top: 24px;
}

.builder-quiz-mini {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: var(--fc_space_5, 24px);
    background-color: var(--fc_color_surface, #FFFFFF);
    border: 1px solid var(--fc_color_border, #E1E5DF);
    border-radius: var(--fc_radius_md, 12px);
}

.builder-quiz-mini-title {
    margin-bottom: var(--fc_space_2, 8px);
    font-size: 21px;
    line-height: 1.3;
    color: var(--fc_color_secondary, #263C22);
}

.builder-quiz-mini-desc {
    margin-bottom: var(--fc_space_5, 24px);
    font-size: 15px;
    line-height: 1.6;
    color: var(--fc_color_text_muted, #6B7569);
}

.builder-quiz-mini-link {
    margin-top: auto;
    font-size: 15px;
    font-weight: 700;
    color: var(--fc_color_primary, #3F6234);
    text-decoration: none;
}

.builder-quiz-mini-link:hover {
    color: var(--fc_color_secondary, #263C22);
}

.builder-quiz-mini-link[hidden] {
    display: none;
}

/* Dòng nội dung khách tự nhập */
.builder-quiz-result-text {
    margin: 24px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--fc_color_text_muted, #6B7569);
}

.builder-quiz-result-text strong {
    color: var(--fc_color_secondary, #263C22);
}

.builder-quiz-result-text[hidden] {
    display: none;
}

/* Chân khung của màn kết quả (tràn viền như chân khung chính) */
.builder-quiz-result-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fc_space_4, 16px);
    margin: 40px -60px 0;
    padding: 16px 32px;
    background-color: var(--fc_body_background_color, #FBFAF5);
    border-top: 1px solid var(--fc_color_border, #E1E5DF);
}

.builder-quiz-consult {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 var(--fc_space_5, 24px);
    font-size: 15px;
    font-weight: 600;
    color: var(--fc_color_secondary, #263C22);
    background-color: var(--fc_color_surface, #FFFFFF);
    border: 1.5px solid var(--fc_color_primary, #3F6234);
    border-radius: var(--fc_radius_md, 12px);
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.builder-quiz-consult:hover {
    color: #FFFFFF;
    background-color: var(--fc_color_primary, #3F6234);
}

/* Trạng thái Loading của Quiz */
.builder-quiz-loading {
    padding: 60px 20px;
}

.builder-quiz-loading[hidden] {
    display: none;
}

/* Nhánh động bước 2 và bước 3 */
.builder-quiz-branch-wrap[hidden] {
    display: none;
}

/* Placeholder ảnh danh mục khi chưa có ảnh cụ thể */
.builder-quiz-main-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.builder-quiz-main-placeholder[hidden] {
    display: none;
}


/* ==============================================================
   BUILDER SECTION: DANH MỤC CHÍNH (trang chủ)
   Block: builder-cat-main  ·  Layout: cat-main
   ============================================================== */
.builder-cat-main {
    padding-top: 52px;
    padding-bottom: 52px;
    background-color: var(--fc_body_background_color, #FBFAF5);
}

/* Đường phân cách trên khối (bật/tắt bằng field show_divider) */
.builder-cat-main.has-divider {
    border-top: 1px solid var(--fc_color_border, #E1E5DF);
}

/* Thẻ danh mục: huy hiệu trên cùng, chữ + link ghim đáy thẻ */
.builder-cat-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 223px;
    padding: var(--fc_space_5, 24px);
    background-color: var(--fc_color_surface, #FFFFFF);
    border: 1px solid var(--fc_color_border, #E1E5DF);
    border-radius: var(--fc_radius_lg, 16px);
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.builder-cat-card:hover {
    border-color: var(--fc_color_tertiary, #8EAE68);
    box-shadow: 0 12px 26px rgba(38, 60, 34, 0.07);
    transform: translateY(-2px);
}

/* Thẻ chưa có link danh mục: giữ nguyên thiết kế nhưng không phải link */
.builder-cat-card.is-static {
    cursor: default;
}

.builder-cat-card.is-static:hover {
    border-color: var(--fc_color_border, #E1E5DF);
    box-shadow: none;
    transform: none;
}

.builder-cat-card-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    font-size: 15px;
    font-weight: 700;
    color: var(--fc_color_primary, #3F6234);
    background-color: var(--fc_color_soft_green, #EEF5E8);
    border-radius: var(--fc_radius_md, 12px);
}

.builder-cat-card-body {
    display: block;
    margin-top: auto;
}

.builder-cat-card-title {
    display: block;
    margin-bottom: 4px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--fc_color_secondary, #263C22);
}

.builder-cat-card-desc {
    display: block;
    font-size: 15px;
    line-height: 1.5;
    color: var(--fc_color_text_muted, #6B7569);
}

.builder-cat-card-link {
    display: inline-flex;
    align-items: center;
    gap: var(--fc_space_2, 8px);
    margin-top: var(--fc_space_4, 16px);
    font-size: 15px;
    font-weight: 700;
    color: var(--fc_color_primary, #3F6234);
}

.builder-cat-card:hover .builder-cat-card-link {
    color: var(--fc_color_secondary, #263C22);
}

.builder-cat-card-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ==============================================================
   BUILDER SECTION: BIẾN THỂ VẬN ĐỘNG (trang chủ)
   Block: builder-variant-cards  ·  Layout: variant-cards
   (chính là các biến thể con của bước "Vận động" trong quiz)
   ============================================================== */
.builder-variant-cards {
    padding-top: 52px;
    padding-bottom: 52px;
    background-color: var(--fc_body_background_color, #FBFAF5);
}

.builder-variant-cards.has-divider {
    border-top: 1px solid var(--fc_color_border, #E1E5DF);
}

.builder-variant-cards-head {
    margin-bottom: 24px;
}

.builder-variant-cards-head .builder-section-heading {
    margin-bottom: 0;
}

.builder-variant-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-height: 142px;
    padding: var(--fc_space_5, 24px);
    background-color: var(--fc_color_surface, #FFFFFF);
    border: 1px solid var(--fc_color_border, #E1E5DF);
    border-top: 3px solid var(--fc_color_tertiary, #8EAE68);
    border-radius: var(--fc_radius_lg, 16px);
}

.builder-variant-card-title {
    margin-bottom: var(--fc_space_2, 8px);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--fc_color_secondary, #263C22);
}

.builder-variant-card-desc {
    margin-bottom: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--fc_color_text_muted, #6B7569);
}

/* ==============================================================
   BUILDER SECTION: SẢN PHẨM (lưới thẻ sản phẩm)
   Block: builder-product-grid  ·  Layout: product-grid
   Card sản phẩm dùng lại nguyên markup có sẵn của theme:
   woocommerce/content-product.php (ảnh, kicker, tiêu đề, mô tả,
   giá + đơn giá, nút "Xem sản phẩm") — chỉ bù nhịp dọc của khối.
   ============================================================== */
.builder-product-grid {
    padding-top: 52px;
    padding-bottom: 52px;
    background-color: var(--fc_body_background_color, #FBFAF5);
}

.builder-product-grid.has-divider {
    border-top: 1px solid var(--fc_color_border, #E1E5DF);
}

.builder-product-grid .products {
    margin-bottom: 0;
}

.builder-product-grid-empty {
    margin-bottom: 0;
    font-size: 15px;
    color: var(--fc_color_text_muted, #6B7569);
}

/* ==============================================================
   BUILDER SECTION: CTA TƯ VẤN ZALO (nền xanh đậm)
   Block: builder-cta-zalo  ·  Layout: cta-zalo
   ============================================================== */
.builder-cta-zalo {
    padding-top: 52px;
    padding-bottom: 52px;
    background-color: var(--fc_body_background_color, #FBFAF5);
}

.builder-cta-zalo.has-divider {
    border-top: 1px solid var(--fc_color_border, #E1E5DF);
}

.builder-cta-zalo-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fc_space_6, 32px);
    padding: var(--fc_space_6, 32px) 40px;
    background-color: var(--fc_color_primary, #3F6234);
    border-radius: var(--fc_radius_lg, 16px);
}

.builder-cta-zalo-content {
    min-width: 0;
}

.builder-cta-zalo-kicker {
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--fc_color_tertiary, #8EAE68);
    margin-bottom: 6px;
}

.builder-cta-zalo-title {
    font-size: 30px;
    line-height: 1.25;
    color: #FFFFFF;
    margin-bottom: 6px;
}

.builder-cta-zalo-desc {
    margin-bottom: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--fc_color_soft_green, #EEF5E8);
}

.builder-cta-zalo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fc_space_2, 8px);
    flex: 0 0 auto;
    min-height: 48px;
    padding: 0 var(--fc_space_5, 24px);
    font-size: 15px;
    color: var(--fc_color_secondary, #263C22);
    background-color: var(--fc_color_surface, #FFFFFF);
    border-radius: var(--fc_radius_md, 12px);
    text-decoration: none;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.builder-cta-zalo-btn:hover {
    color: var(--fc_color_secondary, #263C22);
    background-color: var(--fc_color_soft_green, #EEF5E8);
    transform: translateY(-1px);
}

.builder-cta-zalo-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}


/* Biodino: approved structure refinements, 2026-10-22. */
.home .builder-hero-split-wrapper { min-height: 440px; }
.home .builder-hero-half-content { padding-top: 40px; padding-bottom: 40px; }
.home .builder-hero-half-visual { padding-top: 28px; padding-bottom: 28px; }
.home .builder-hero-arch-card { max-width: 360px; min-height: 240px; }
.home .builder-hero-desc { margin-bottom: 24px; }
.home .builder-hero-title { padding-top: 0; padding-bottom: 0; }
.home .builder-hero-actions { margin-bottom: 24px; }
.home .builder-cat-main, .home .builder-product-grid, .home .builder-cta-zalo { padding-top: 32px; padding-bottom: 32px; }
.home .builder-cat-card { min-height: 184px; }
.home .builder-content { padding-top: 32px !important; padding-bottom: 32px !important; }
.home .builder-content > .container { padding-top: 0 !important; padding-bottom: 0 !important; }
.home .builder-content img { height: auto; max-width: 100%; }
.bd-category-path { margin: 24px 0; }
.bd-category-path-label { display: block; margin-bottom: 12px; color: var(--fc_color_secondary, #263C22); font-weight: 600; }
.bd-category-path-links { display: flex; flex-wrap: wrap; gap: 8px; }
.bd-category-path-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border: 1px solid var(--fc_color_border, #E1E5DF); border-radius: 12px; background: var(--fc_color_surface, #FFFFFF); color: var(--fc_color_secondary, #263C22); text-decoration: none; font-weight: 600; }
.bd-category-path-links a[aria-current="page"] { background: var(--fc_color_primary, #3F6234); border-color: var(--fc_color_primary, #3F6234); color: #FFFFFF; }
.bd-category-path-links a:hover { border-color: var(--fc_color_primary, #3F6234); }
.bd-category-path-links a:focus-visible, .bd-selected-filters a:focus-visible, .bd-more-filters summary:focus-visible { outline: 2px solid var(--fc_color_primary, #3F6234); outline-offset: 3px; }
.bd-mobility-label { margin: 16px 0 8px; font-weight: 600; color: var(--fc_color_secondary, #263C22); }
.bd-more-filters { border-top: 1px solid var(--fc_color_border, #E1E5DF); margin-top: 8px; }
.bd-more-filters summary { padding: 16px 0; min-height: 48px; cursor: pointer; color: var(--fc_color_primary, #3F6234); font-weight: 600; }
.bd-selected-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; font-size: 14px; }
.bd-selected-filters a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; min-height: 44px; border-radius: 12px; background: var(--fc_color_soft_green, #EEF5E8); color: var(--fc_color_secondary, #263C22); text-decoration: none; overflow-wrap: anywhere; }
.bd-selected-filters a.bd-clear-selected { background: transparent; text-decoration: underline; }
.mobile-menu .menu-item-has-children > a { padding-right: 58px; }
.mobile-menu .dropdown-menu { display: none; }
.bd-mobile-submenu-toggle { position: absolute; right: 4px; top: 0; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 8px; background: transparent; color: var(--fc_color_nav_menu, #1F4921); cursor: pointer; }
.bd-mobile-submenu-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: -3px; }
.bd-mobile-submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (max-width: 767px) {
    .home .builder-hero-split-wrapper { min-height: 0; }
    .home .builder-hero-half-content { order: 1; padding: 24px 20px; }
    .home .builder-hero-half-visual { order: 2; min-height: 0; padding: 16px 20px; }
    .home .builder-hero-visual-wrapper { height: auto; padding: 0; }
    .home .builder-hero-arch-card { max-width: 180px; height: auto; min-height: 0; }
    .home .builder-cat-main, .home .builder-product-grid, .home .builder-cta-zalo { padding-top: 24px; padding-bottom: 24px; }
    .home .builder-cat-card { min-height: 152px; }
    .bd-category-path-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bd-category-path-links a { padding: 10px; text-align: center; }
}