/*
Theme Name: Ascale.vn
Author: ninhductuyen12@gmail.com
Version: 1.1.2
Description: Theme được thiết kế riêng cho Ascale.vn
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 7.4
*/
/* Style body , container and permalink
-------------------------------------------------------------- */

strong{
    font-weight: 600;
}
a{
    text-decoration: none;
    color: var(--fc_color_permalink);
}

.container{
    max-width:1640px;
}
.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;
}

.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);
    color: var(--fc_color_header_top);
    padding:7px 15px 7px 15px;
}

.header-hotline {

    margin-top:5px;
}
.header-hotline img{
    margin-right: 2px;
    margin-top:3px;
}
.header-top-link {
    color: rgb(129, 215, 66);
}
.header-top-link:hover {
    color: #fff;
}
/* Header Main
-------------------------------------------------------------- */
.header-menu-main{
    background: transparent;
    transition: all 0.5s;
    z-index:99;
}
.right-header-menu{
    padding-right:200px;
}
@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-100px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Header Desktop Structure
-------------------------------------------------------------- */
.header-menu-main {
    transition: all 0.5s;
    z-index: 99;
}
/* Header Default State (Overlay) */
.header-menu-main:not(.header-normal-state) a.logo,
.header-menu-main:not(.header-normal-state) .btn-menu-overlay {
    color: #fff !important;
}
.header-menu-main:not(.header-normal-state) a.logo img {
    filter: invert(1) brightness(100%);
}

/* Header Normal State (No Overlay) */
.header-normal-state {
    background: #fff !important;
    position: relative !important;
}
.header-normal-state a.logo,
.header-normal-state .btn-menu-overlay {
    color: #000 !important;
}
.header-normal-state a.logo img {
    filter: none !important;
}

/* === Sticky Header - Must come after default overlay styles to override === */
.header-menu-main.fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100%;
    z-index: 999;
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(0,0,0,0.06);
    animation: fadeInDown 0.4s ease-out;
    transition: all 0.4s ease;
}

/* When scrolled: logo should be dark (no invert) */
.header-menu-main.fixed .logo-small img,
.header-menu-main.fixed a.logo img {
    filter: none !important;
}

/* When scrolled: text and button turn dark */
.header-menu-main.fixed a.logo,
.header-menu-main.fixed .btn-menu-overlay {
    color: #111 !important;
}




.header-menu-main .container-fluid {
    padding-left: 3rem !important; /* Forces edge-to-edge look like demo */
    padding-right: 3rem !important;
    padding-top: 1.5rem !important; /* Increase height */
    padding-bottom: 1.5rem !important;
}



/* Header action image logic modified due to overlay */
.logo-small img, .header-menu-main a.logo img {
    height: 50px; 
    width: auto;
    max-width: 100%;
}
.aeterna-main-overlay a.logo img {
    height: 50px; 
    width: auto;
    max-width: 100%;
}


/* Two-Tier Mega Menu Panel
-------------------------------------------------------------- */
.menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.aeterna-main-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 460px;
    max-width: 100%;
    height: 100vh;
    background: #ffffff;
    z-index: 9999;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1), visibility 0.5s;
    box-shadow: -5px 0 20px rgba(0,0,0,0.08);
    overflow-y: auto;
    font-family: inherit;
    display: flex;
    flex-direction: column;
}

.aeterna-main-overlay.active {
    transform: translateX(0);
    visibility: visible;
}

.menu-backdrop.active {
    opacity: 1;
    visibility: visible;
}

/* Tier 1: Tab Navigation */
.overlay-tier1 {
    background: #fff;
    flex-shrink: 0;
    padding: 24px 40px 20px !important;
}

/* Desktop: tabs left, actions right on same row */
.overlay-tier1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}



.overlay-tabs {
    gap: 28px;
    flex-wrap: wrap;
}

.overlay-body {
    background: #fff;
    flex: 1;
    overflow-y: auto;
    padding: 10px 40px 40px !important;
}

.mega-tab {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: none;
    color: #999;
    text-decoration: none;
    padding-bottom: 6px;
    position: relative;
    transition: color 0.25s;
    white-space: nowrap;
}

.mega-tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: #000;
    transition: width 0.3s ease;
}

.mega-tab.active,
.mega-tab:hover {
    color: #000;
}

.mega-tab.active::after {
    width: 24px;
}

.btn-close-overlay {
    font-size: 36px;
    font-weight: 200;
    line-height: 1;
    color: #555;
    text-decoration: none;
}

.btn-search-overlay svg {
    color: #555;
}

/* Tier 2: Sub-item Panels */
.mega-panel {
    display: none;
}

.mega-panel.active {
    display: block;
}

.mega-subitems {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mega-subitems li a {
    display: block;
    font-size: 28px;
    font-weight: 300;
    color: #111 !important;
    text-decoration: none !important;
    margin-bottom: 18px;
    letter-spacing: 0.3px;
    text-transform: none;
    transition: color 0.25s;
    line-height: 1.2;
    font-family: inherit;
}

.mega-subitems li a:hover {
    color: #000 !important;
}

.mega-group-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: none;
    color: #aaa;
    margin-bottom: 12px;
    margin-top: 24px;
    display: block;
}

.mega-panel .all-colors-link {
    display: inline-block;
    margin-top: 20px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: none;
    color: #555;
    text-decoration: none;
}

.mega-panel .all-colors-link:hover {
    color: #000;
}



/* In-Panel Search Mode
-------------------------------------------------------------- */
.overlay-search-panel {
    display: none;
    padding: 30px 40px 40px !important;
}

.aeterna-main-overlay.search-mode .overlay-body {
    display: none;
}

.aeterna-main-overlay.search-mode .overlay-search-panel {
    display: flex;
    flex: 1;
    align-items: flex-start;
}

.search-panel-inner {
    width: 100%;
}

.search-panel-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: none;
    color: #999;
    margin-bottom: 12px;
}

.search-panel-input-wrap {
    position: relative;
    border-bottom: 1.5px solid #222;
    display: flex;
    align-items: center;
}

.search-panel-input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 18px;
    font-weight: 300;
    color: #111;
    padding: 10px 40px 10px 0;
    background: transparent;
    font-family: inherit;
}

.search-panel-input::placeholder {
    color: #ccc;
}

.search-panel-submit {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #555;
}

.search-panel-submit:hover {
    color: #000;
}

.btn-panel-search {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #555;
    display: flex;
    align-items: center;
}

.btn-panel-search:hover {
    color: #000;
}



.btn-menu-overlay {
    font-size: 40px;
    font-weight: 100;
    line-height: 0.8;
}



.btn-menu-overlay, .btn-close-overlay {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.btn-menu-overlay:hover, .btn-close-overlay:hover {
    transform: scale(1.1);
}

/* Reset Lists for Overlay Menu */
.overlay-main-menu, .overlay-main-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Top Level Items (SINTERED SLABS, DISCOVER, etc.) */
.overlay-main-menu {
    display: flex;
    justify-content: flex-start;
    gap: 40px;
    border-bottom: 1px solid transparent; /* reserved for active state */
    margin-bottom: 40px;
}

.overlay-main-menu > li > a {
    font-family: var(--fc_font_family, inherit);
    font-size: 16px;
    font-weight: 500;
    color: #434343; /* Matches typical footer/text color */
    text-transform: none;
    text-decoration: none;
    padding-bottom: 5px;
    display: inline-block;
    position: relative;
}

.overlay-main-menu > li.current-menu-item > a,
.overlay-main-menu > li > a:hover {
    color: #000;
}

.overlay-main-menu > li.current-menu-item > a::after,
.overlay-main-menu > li > a:hover::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #000;
}

/* Sub-menu styling (The Inspirations List) */
.overlay-main-menu ul.sub-menu {
    display: none; /* Hide all submenus by default */
    flex-direction: column;
    gap: 15px;
    position: absolute;
    left: 0;
    width: 100%;
    padding-top: 20px;
}

/* Active Level 1 item shows its submenu */
.overlay-main-menu > li.active-submenu ul.sub-menu,
.overlay-main-menu > li:hover ul.sub-menu {
    display: flex; /* Show on hover for desktop, or click via JS */
}

/* Position context for the submenu container */
.overlay-menu-container {
    position: relative;
    min-height: 400px; /* Give space for the absolute submenus to render */
}


.overlay-main-menu ul.sub-menu > li > a {
    font-family: var(--fc_font_family, inherit);
    font-size: 28px;
    font-weight: 300;
    text-transform: none;
    color: #222;
    text-decoration: none;
    transition: color 0.2s ease;
}

.overlay-main-menu ul.sub-menu > li > a:hover {
    color: #888;
}


/* Header Menu
-------------------------------------------------------------- */
.header-menu-main .notification-admin-message a{
    display: inline-block;
    color: #0a7aff;
    margin:0px 5px;
}
/* Navigation menu links
--------------------------------------------------------------*/
.fc-menu-header ul a {
    color: var(--fc_color_primary);
}
.fc-menu-header ul a:hover {
    color: var(--fc_color_nav_menu_hover);
	font-weight: 600;
}
/* Header action images
--------------------------------------------------------------*/
.header-action img {
    width: 25px;
}

/* Submenu links with inherited line height
--------------------------------------------------------------*/
.fc-menu-header ul li ul a {
    line-height: inherit;
}



/* Submenu styling (excluding mega menus)
--------------------------------------------------------------*/
.fc-menu-header ul li:not(.mega-menu-item) ul {
    background: var(--fc_header_background);
    box-shadow: 3px 3px 10px 5px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    font-size: 15px;
    top: 90%;
}

/* Submenu link styling (excluding mega menus)
--------------------------------------------------------------*/
.fc-menu-header ul li:not(.mega-menu-item) ul a {
    color: var(--fc_color_primary);
    font-weight: 400;
}
.fc-menu-header ul li:not(.mega-menu-item) ul a:hover {
    color: var(--fc_color_nav_menu_hover);
	font-weight: 600;
}
/* Dropdown menu styling
--------------------------------------------------------------*/
.fc-menu-header ul li .dropdown-menu {
    border-top: 6px solid var(--fc_color_nav_menu);
    transition: all .3s;
    top: 100%;
}

/* Hover state for dropdown menus
--------------------------------------------------------------*/
.fc-menu-header ul li:hover .dropdown-menu {
    top: 90%;
    visibility: inherit;
    opacity: 1;
}
/* Header Button Menu Mobile
-------------------------------------------------------------- */
a.btn-menu-mobile{
    display: none;
}
/* Mega menu content styling
--------------------------------------------------------------*/
.fc-menu-header .mega-menu-content {
    top: 100px;
    background: var(--fc_header_background);
    font-size: 14px;
    box-shadow: 3px 3px 10px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
    font-weight: 300;
    max-width: 1020px;
    left: 50%;
    transform: translateX(-50%);
}

/* Widget links in mega menu
--------------------------------------------------------------*/
.fc-menu-header .mega-menu-widget .widget ul li a {
    color: var(--fc_body_color);
}

/* Hover state for widget links in mega menu
--------------------------------------------------------------*/
.fc-menu-header .mega-menu-widget .widget ul li a:hover {
    color: var(--fc_color_permalink_hover);
}

/* Hover state for mega menu items
--------------------------------------------------------------*/
.fc-menu-header li.mega-menu-item:hover .mega-menu-content {
    top: 80px;
}
/* Style mega menu hover
-------------------------------------------------------------- */
.header-menu-main.enable-header-fixed.fixed .fc-menu-header li.mega-menu-item:hover .mega-menu-content{
    top:65px;
}

/* 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: #FFF;
}
/* Styling for the search products results container
--------------------------------------------------------------*/
#search-products-results {
    max-height: 60vh;
    border-radius: 0px 0px 5px 5px;
    border-top: 1px solid #EEE;
}
/* Styling for product thumbnail links within the search results
--------------------------------------------------------------*/
#search-products-results .thumbnail-result-product a {
    width: 50px;
    height: 50px;
    border: 1px solid #EEE;
    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 - Minimalist
-------------------------------------------------------------- */
.footer-template-new {
    background: var(--fc_background_footer, #FFF);
    color: var(--fc_color_footer, #434343);
    padding: 70px 0 30px 0;
    margin-top: 50px;
}
.container-footer-wide {
    max-width: 1620px;
    width: 100%;
    margin: 0 auto;
    padding-right: 30px;
    padding-left: 30px;
}
.footer-top-row-flex {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end; /* Align bottom to match text baselines */
    gap: 48px;
}

.footer-huge-logo-link {
    color: var(--fc_color_footer, #000);
    display: block;
}
.footer-huge-logo-link:hover {
    color: var(--fc_color_footer, #000);
}
.footer-huge-text {
    font-size: 160px;
    font-weight: 300;
    letter-spacing: -3px;
    line-height: 0.8;
}
.item-footer-huge-logo img {
    max-width: 400px; 
    object-fit: contain;
    display: block;
}
.item-footer-nav {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}
.footer-nav-grid {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 64px;
    width: auto;
}


.item-footer-nav-col {
    min-width: 0;
}
.content-item-footer-nav {
    padding-left: 0;
}
.footer-nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-nav-links li {
    margin-bottom: 12px;
}
.footer-nav-links li a {
    color: var(--fc_color_footer, #888);
    opacity: 0.8;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.5px;
}
.footer-nav-links li a:hover {
    color: var(--fc_color_permalink_footer_hover, #000);
    opacity: 1;
}
.footer-separator-row {
    margin: 40px 0 20px 0;
}
.footer-separator {
    border: 0;
    border-top: 1px solid var(--fc_color_footer, #E5E5E5);
    margin: 0;
}
.item-footer-copyright {
    color: var(--fc_color_footer, #888);
    opacity: 0.8;
}
.item-footer-bottom-logo img {
    max-height: 25px;
    width: auto;
}
/* Footer loading
-------------------------------------------------------------- */
#loading_page{
    display: none !important;
    z-index:9999;
}
#loading_page.active{
    display: flex !important;
}

.loading-spinner{
    border-color:var(--fc_color_primary);
}
.loading-spinner:after{
    border-color:#FF0000 transparent;
}
/* breadcrumb style
-------------------------------------------------------------- */
.breadcrumb-template{
    background:var(--fc_background_breadcrumb);
    color:#434343;
}
.breadcrumb-template a{
    color:#434343;
}
body.single.single-post .content-single-full .breadcrumb-template .container{
    max-width:800px;
}
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: none;
    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;
}

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

/* Style sidebar widget current taxonomy
--------------------------------------------------------------*/
.custom_sidebar_archive ul{
        display: block;
    width: 100%;
    padding: 0px;
    margin: 0px;
    position: relative;
    list-style: none;
}
.custom_sidebar_archive .title_custom_sidebar_archive,
.widget_current_taxonomy_widget .widget-title{
    font-weight:600;
    font-size:15px;
    color: var(--fc_color_secondary);
    text-transform: none;
    margin:0px;
}
.custom_sidebar_archive .current-name-taxonomy,
.widget_current_taxonomy_widget .current-name-taxonomy{
    color:var(--fc_color_primary);
    margin-bottom: 10px;
}
.custom_sidebar_archive ul li,
.widget_current_taxonomy_widget ul li{
    padding:0px !important;
    position: relative;
}
.custom_sidebar_archive ul ul,
.widget_current_taxonomy_widget ul ul{
    padding:0px;
    margin:0px;
}
.custom_sidebar_archive ul li a,
.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;
}
.custom_sidebar_archive ul li:last-child a,
.widget_current_taxonomy_widget ul li:last-child a{
    border-bottom: 0px;
}
.custom_sidebar_archive ul li a:before,
.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;
}
.custom_sidebar_archive ul li a:hover,
.widget_current_taxonomy_widget ul li a:hover{
    color: var(--fc_color_heading);
}
.custom_sidebar_archive ul li:hover,
.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;
}
/* style newsletter
-------------------------------------------------------------- */
/* Styling for the newsletter form container */
.content-form-newsletter {
    padding: 20px 50px;
    background: #F1EACE !important;
}
.row-newsletter{
    margin-left:-10px;
    margin-right:-10px;
}

/* 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;
}
/* Single style
-------------------------------------------------------------- */
.information-single-post{
    color:#B5B5B5;
}
body.single.single-post .content-single-full .container{
    max-width:800px;
}
/* Styling for individual tag links
--------------------------------------------------------------*/
.tags-post a {
    display: inline-block;
    padding: 2px 10px 2px 30px;
    background: #ECECEC;
    color: #333333a8;
    margin: 2px;
    position: relative;
}

/* Styling for tag links when hover
--------------------------------------------------------------*/
.tags-post a:hover {
    background: var(--fc_color_primary);
    color: #FFF;
}

/* Adding a tag icon before the tag link
--------------------------------------------------------------*/
.tags-post a:before {
    content: "";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translate(0, -50%);
    background-image: url("assets/icons/icon-tag.png");
    display: inline-block;
    width: 12px;
    height: 12px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/* Invert tag icon on hover
--------------------------------------------------------------*/
.tags-post a:hover:before {
    filter: invert(1);
}

/* Styling for the related post list
--------------------------------------------------------------*/
.content-relate-post ul,
.content-relate-post ul li {
    list-style: none;
    margin: 0px;
    display: block;
    position: relative;
    padding: 0px;
}

/* Styling for individual list items in the related posts
--------------------------------------------------------------*/
.content-relate-post ul li {
    padding: 7px 15px 7px 30px;
}

/* Adding an icon before each related post item
--------------------------------------------------------------*/
.content-relate-post ul li:before {
    content: "";
    position: absolute;
    left: 0px;
    background-image: url("assets/icons/icon-relate.svg");
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
/* 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 Header Product Category Woocommerce
-------------------------------------------------------------- */
.header-product-category{
    background-color: var(--fc_background_header_top);
}
.header-product-category:after{
    content:"";
    position: absolute;
    background: var(--fc_background_header_top);
    opacity: 0.6;
    width:100%;
    height:100%;
    left:0px;
    top:0px;
}
.header-product-category *{
    color:var(--fc_color_tertiary);
}
.header-product-category .container{
    z-index: 1;
}
/* Style Header Description Product Category Woocommerce
-------------------------------------------------------------- */
.description-product-category{
    background-color: var(--fc_background_header_top);
    padding-top:70px;
    padding-bottom:30px;
}
.description-product-category *{
    color:var(--fc_color_tertiary);
}
.description-product-category .container{
    z-index:1;
}


/* Style Order Link Product Category
-------------------------------------------------------------- */
ul.orderby-links li a:hover,
ul.orderby-links li.active a{
    background: var(--fc_color_primary) !important;
    border-color: var(--fc_color_primary) !important;
}


/* Style Item Loop Product
-------------------------------------------------------------- */
.content-product-loop .action-item-product-loop a{
    background: #FFF;
    color:var(--fc_color_primary);
    border-color: var(--fc_color_primary);
}
.content-product-loop:hover .action-item-product-loop a{
    background: var(--fc_color_primary);
    color:#FFF;
}


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

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


/*
Style Contact
--------------------------------------------------------------*/
.box-contact-form{
    background:#F1EACE;
}
/*
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 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;
}

/*
overwrite CSS
--------------------------------------------------------------*/
.container-full{
    max-width:1550px;
    margin:0px auto;
}
.container-full-small{
    max-width: 1320px;
    margin:0px auto;
}
.container-full-medium{
    max-width: 1320px;
    margin:0px auto;
	padding-bottom: 50px;
}

#review-summary{
    background: #F4F2E9;
        color: #957951;
}
#content-reviews #comments{
    padding: 20px;
    background: #FFFDF6;
}
.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;
}

.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;
}
.background-facebook{
    background: #16428F !important;
}

#description-quick-contact-us {
    border-top: 2px solid #3a7920;
}
label,
input,
textarea,
input::placeholder,
textarea::placeholder {
    color: #957951;
}



.sub-product-category .read-more-content {
	display: none;
}
.iconPlayVideo {
    width: 80px;
    height: 80px;
    background-image: url(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);
}

.description-brand {
    color: #4A7A2F;
    font-size: 15px;
    line-height: 1.5;
    display: flex;
    align-items: center;
}

.container.position-relative.description-brand {
    padding: 20px;
}

.category-description p {
    color: #3A7920;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    border-left: 4px solid #3A7920;
    padding-left: 10px;
    margin-top: 5px;
}
.content-quick-contact-us #messenger-contact-now1 {
    display: none;
}


/* Global Builder Spacing */
.builder-section-py {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Section Heading Builder Component */


.builder-heading .heading-title {
	letter-spacing: 0.05em; 
	line-height: 1.2;
}

.builder-heading .heading-description {
    font-size: 16px;
    line-height: 1.5;
    color: #000;
    font-weight: 400;
    width: 100%;
}

/* SIZE LARGE */
.builder-heading.size-large .heading-title {
    font-size: 60px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 30px;
}

.builder-heading.size-large .heading-description {
    font-size: 20px;
    max-width: 40% !important;
}

/* SIZE SMALL */
.builder-heading.size-small .heading-description {
    font-size: 14px;
}

/* Category Header Aeterna Style */
.category-header-aeterna h1 {
    font-size: 42px;
    font-weight: 300;
}

.category-header-aeterna .header-description {
    color: #666;
    border-left: 1px solid #eee;
    padding-left: 30px;
}

.category-header-aeterna .header-metadata ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-header-aeterna .header-metadata li {
    margin-bottom: 5px;
    color: #444;
}

.category-header-aeterna .color-count {
    color: #000;
    white-space: nowrap;
}

.ascale-product-archive .premium-product-card .product-card-inner {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.ascale-product-archive .premium-product-card:hover .product-card-inner {
    background-color: #f0f0f0 !important;
}

/* Single Product Adjustments */
.single-ascale-product .product-featured-image img {
    max-height: 600px;
    width: auto;
}

.letter-spacing-2 { letter-spacing: 2px; }
.line-height-1-8 { line-height: 1.8; }

/* Product Single Page Hero
-------------------------------------------------------------- */
.product-hero-section {

    align-items: center; /* Centered as per request */
}

.hero-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 60%);
    z-index: 3;
}

.hero-slab-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-slab-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    pointer-events: none;
}

.product-hero-content-wrapper {
    max-width: 40%;
    position: relative;
    z-index: 10;
}

.product-title-hero {
    font-size: clamp(3.4375rem, 3.0114rem + 2.1307vw, 3.975rem);
    text-transform: none;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 0rem;
    font-weight: 400;
    letter-spacing: -0.02em;
}

.product-hero-meta {
    color: #fff;
    display: inline-block;
    font-size: clamp(1rem, .9482rem + .221vw, 1.125rem);
    letter-spacing: 2.5px;
    font-weight: 500;
    text-transform: none;
    opacity: 0.9;
}
.product-entry-description h2 {
	font-weight: 400;
}

.product-technical-details-mini .tech-item span.text-muted {
    opacity: 0.7;
}

.product-description-section {
    position: relative;
    z-index: 15;
}.product-entry-description { max-width: 64rem; font-weight: 400 !important; text-transform: none; }
/* All Colors Page & Filters 
-------------------------------------------------------------- */
.all-colors-page { background: #fff; }
.all-colors-header h1 { font-size: 58px; font-weight: 300; letter-spacing: 2px; color: #111; margin-bottom: 5px; text-transform: none; }
.all-colors-header p { font-size: 14px; letter-spacing: 1px; color: #999; }

/* Filter Sidebar */
.filter-sidebar .filter-main-title { font-size: 32px; font-weight: 300; margin-bottom: 40px; color: #111; display: flex; align-items: baseline; text-transform: none; }
.filter-count { font-size: 16px; color: #999; font-weight: 300; margin-left: 10px; }

.filter-group { margin-bottom: 12px; }
.filter-group-title { font-size: 24px !important; font-weight: 400 !important; letter-spacing: 0 !important; color: #000 !important; padding: 15px 0 !important; border-bottom: 1px solid #ddd !important; text-transform: none; }
.filter-group-title:hover { color: #333 !important; }
.filter-group-title .plus-icon { font-size: 20px; font-weight: 300; opacity: 0.6; }

.filter-options { padding: 15px 5px !important; }
.form-check-label { font-size: 13px !important; letter-spacing: 0.5px !important; padding-left: 5px; color: #444; }
.form-check-input { width: 1.1em; height: 1.1em; border-radius: 0 !important; }
.form-check-input:checked { background-color: #000; border-color: #000; }

.filter-actions { margin-top: 40px; }
.filter-actions .btn-dark { background: #000 !important; border-radius: 0 !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 1px !important; padding: 12px 25px !important; border: none; }
.filter-actions .btn-dark:hover { background: #222 !important; }
.filter-actions .btn-outline-secondary { border-radius: 0 !important; font-size: 11px !important; margin-top: 10px; border: none; color: #999; text-decoration: underline; background: transparent; }

/* Product Grid */
.color-card-image { background-color: #f2f2f2; aspect-ratio: 1 / 1.15; padding: 15%; border: none; }
.color-card-title { font-size: 14px !important; font-weight: 500 !important; margin-top: 15px; }
.color-card-meta { font-size: 11px !important; color: #777; margin-top: 3px; }
.color-card-finish { font-size: 11px !important; color: #999; margin-top: 5px; }

@media (max-width: 991px) {
    .all-colors-header h1 { font-size: 32px; }
    .filter-sidebar { margin-bottom: 50px; }
}

/* All Colors Page & Filters 
-------------------------------------------------------------- */
.all-colors-page { background: #fff; }
.all-colors-header h1 { font-size: 58px; font-weight: 300; letter-spacing: 2px; color: #111; margin-bottom: 5px; text-transform: none; }
.all-colors-header p { font-size: 14px; letter-spacing: 1px; color: #999; }

/* Filter Sidebar */
.filter-sidebar .filter-main-title { font-size: 32px; font-weight: 300; margin-bottom: 40px; color: #111; display: flex; align-items: baseline; text-transform: none; }
.filter-count { font-size: 16px; color: #999; font-weight: 300; margin-left: 10px; }

.filter-group { margin-bottom: 15px; }
.filter-group-title { font-size: 24px !important; font-weight: 400 !important; letter-spacing: 0 !important; color: #000 !important; padding: 15px 0 !important; border-bottom: 1px solid #ddd !important; text-transform: none; position: relative; }
.filter-group-title:hover { color: #333 !important; }
.filter-group-title .plus-icon { font-size: 22px; font-weight: 300; opacity: 0.5; position: absolute; right: 0; top: 50%; transform: translateY(-50%); transition: transform 0.3s; }

.filter-options { padding: 15px 5px !important; }
.form-check { display: flex; align-items: center; margin-bottom: 10px; }
.form-check-input { width: 1.2em; height: 1.2em; border-radius: 2px !important; border: 1px solid #ccc; margin-top: 0; cursor: pointer; }
.form-check-label { font-size: 13px !important; text-transform: none; letter-spacing: 0.5px !important; padding-left: 10px; color: #666; cursor: pointer; line-height: 1; }
.form-check-input:checked { background-color: #111; border-color: #111; }

.filter-actions { margin-top: 50px; }
.filter-actions .btn { border-radius: 0 !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 1px !important; padding: 15px 10px !important; border-width: 1px; }
.filter-actions .btn-dark { background: #000 !important; border-color: #000 !important; color: #fff !important; }
.filter-actions .btn-outline-dark { background: #fff !important; border-color: #000 !important; color: #000 !important; }
.filter-actions .btn:hover { opacity: 0.8; }

/* Fixed Toggles */
.filter-sidebar .collapse:not(.show) { display: none !important; }
.filter-sidebar .collapse.show { display: block !important; }
.filter-sidebar .collapsing { display: none !important; }

/* Product Grid */
.all-colors-grid .col { margin-bottom: 1rem; }
.color-card-image { background-color: #f2f2f2; aspect-ratio: 1 / 1.15; padding: 30%; border: none; overflow: hidden; position: relative; display: flex !important; align-items: center !important; justify-content: center !important; }
.color-card-image .thumb-inner { width: 100%; height: 100%; transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); display: flex; align-items: center; justify-content: center; }
.color-card:hover .thumb-inner { transform: scale(1.05); }
.slab-img-shadow { filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1)); }
.color-card-meta { font-size: 12px !important; color: #000 !important; margin-top: 2px; text-transform: none; letter-spacing: 0.5px; font-weight: 500 !important; line-height: 1.6; }
.color-card-finish { font-size: 12px !important; color: #777 !important; margin-top: 2px; text-transform: none; letter-spacing: 0.5px; font-weight: 500 !important; }

@media (max-width: 991px) {
    .all-colors-header h1 { font-size: 32px; }
    .filter-sidebar { margin-bottom: 50px; }
    .filter-group-title { font-size: 20px !important; }
}

/* Base Spacing Utilities (Bootstrap-style)
-------------------------------------------------------------- */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.ms-0 { margin-left: 0 !important; }
.me-0 { margin-right: 0 !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }

.m-1 { margin: 0.25rem !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }

.m-2 { margin: 0.5rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }

.m-3 { margin: 1rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }

.m-4 { margin: 1.5rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }

.m-5 { margin: 3rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }

.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.ps-0 { padding-left: 0 !important; }
.pe-0 { padding-right: 0 !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }

.p-1 { padding: 0.25rem !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }

.p-2 { padding: 0.5rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }

.p-3 { padding: 1rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }

.p-4 { padding: 1.5rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }

.p-5 { padding: 3rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

/* Gutters for Grid
-------------------------------------------------------------- */
.gx-0 { margin-right: 0; margin-left: 0; }
.gx-0 > * { padding-right: 0; padding-left: 0; }

.gx-1 { margin-right: -0.125rem; margin-left: -0.125rem; }
.gx-1 > * { padding-right: 0.125rem; padding-left: 0.125rem; }

.gx-2 { margin-right: -0.25rem; margin-left: -0.25rem; }
.gx-2 > * { padding-right: 0.25rem; padding-left: 0.25rem; }

.gx-3 { margin-right: -0.5rem; margin-left: -0.5rem; }
.gx-3 > * { padding-right: 0.5rem; padding-left: 0.5rem; }

.gx-4 { margin-right: -0.75rem; margin-left: -0.75rem; }
.gx-4 > * { padding-right: 0.75rem; padding-left: 0.75rem; }

.gx-5 { margin-right: -1.5rem; margin-left: -1.5rem; }
.gx-5 > * { padding-right: 1.5rem; padding-left: 1.5rem; }

.gy-0 { margin-top: 0; }
.gy-0 > * { margin-top: 0; }

.gy-1 { margin-top: -0.25rem; }
.gy-1 > * { margin-top: 0.25rem; }

.gy-2 { margin-top: -0.5rem; }
.gy-2 > * { margin-top: 0.5rem; }

.gy-3 { margin-top: -1rem; }
.gy-3 > * { margin-top: 1rem; }

.gy-4 { margin-top: -1.5rem; }
.gy-4 > * { margin-top: 1.5rem; }

.gy-5 { margin-top: -3rem; }
.gy-5 > * { margin-top: 3rem; }

@media (min-width: 992px) {
    .gx-lg-0 { margin-right: 0; margin-left: 0; }
    .gx-lg-0 > * { padding-right: 0; padding-left: 0; }
    
    .gx-lg-1 { margin-right: -0.125rem; margin-left: -0.125rem; }
    .gx-lg-1 > * { padding-right: 0.125rem; padding-left: 0.125rem; }
    
    .gx-lg-2 { margin-right: -0.25rem; margin-left: -0.25rem; }
    .gx-lg-2 > * { padding-right: 0.25rem; padding-left: 0.25rem; }
    
    .gx-lg-3 { margin-right: -0.5rem; margin-left: -0.5rem; }
    .gx-lg-3 > * { padding-right: 0.5rem; padding-left: 0.5rem; }
    
    .gx-lg-4 { margin-right: -0.75rem; margin-left: -0.75rem; }
    .gx-lg-4 > * { padding-right: 0.75rem; padding-left: 0.75rem; }
    
    .gx-lg-5 { margin-right: -1.5rem; margin-left: -1.5rem; }
    .gx-lg-5 > * { padding-right: 1.5rem; padding-left: 1.5rem; }

    .mb-lg-0 { margin-bottom: 0 !important; }
    .mt-lg-0 { margin-top: 0 !important; }
}

/* Common Utilities
-------------------------------------------------------------- */

.text-center { text-align: center !important; }
.text-dark { color: #000 !important; }

.font-weight-100 { font-weight: 100 !important; }
.font-weight-200 { font-weight: 200 !important; }
.font-weight-300 { font-weight: 300 !important; }
.font-weight-400 { font-weight: 400 !important; }
.font-weight-500 { font-weight: 500 !important; }
.font-weight-600 { font-weight: 600 !important; }
.font-weight-700 { font-weight: 700 !important; }

.opacity-50 { opacity: 0.5 !important; }
.opacity-60 { opacity: 0.6 !important; }
.opacity-80 { opacity: 0.8 !important; }

.letter-spacing-1 { letter-spacing: 1px !important; }
.letter-spacing-2 { letter-spacing: 2px !important; }
.letter-spacing-10 { letter-spacing: 10px !important; }

.font11 { font-size: 11px !important; }
.font12 { font-size: 12px !important; }
.font13 { font-size: 13px !important; }
.font14 { font-size: 14px !important; }
.font16 { font-size: 16px !important; }
.font18 { font-size: 18px !important; }
.font60 { font-size: 60px !important; }

.d-flex { display: flex !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.align-items-center { align-items: center !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.gap-3 { gap: 1rem !important; }

/* ==========================================================================
   SINGLE ASCALE PRODUCT STYLES
   ========================================================================== */

/* Product Formats Table */
.table-formats { width: 100%; border-collapse: collapse; margin-top: 5px; }
.table-formats thead { border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; }
.table-formats th { font-weight: 300; color: #888; font-size: 13px; letter-spacing: 0.5px; text-transform: none; padding: 15px 15px; text-align: left; vertical-align: middle; }
.table-formats td { font-size: 15px; color: #333; text-align: left; padding: 18px 15px; font-weight: 300; }
.table-formats tbody tr { background-color: #ffffff; cursor: pointer; transition: background-color 0.2s; }
.table-formats tbody tr:hover { background-color: #fafafa; }
.table-formats tbody tr td { color: #888; transition: color 0.2s; }
.table-formats .format-size { font-weight: 500; font-size: 15px; color: #555; }
.format-icon { display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; vertical-align: text-bottom; opacity: 0.6; }
.format-icon svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; }

/* 2-Column Split Padding */
.custom-pad-left { padding-left: 15px; padding-right: 15px; }
.custom-pad-right { padding-left: 15px; padding-right: 15px; }
@media (min-width: 992px) {
    .custom-pad-left { padding-left: 0px !important; padding-right: 40px !important; }
    .custom-pad-right { padding-left: 40px !important; padding-right: 0px !important; }
}

/* Tabs Navigation Styling */
.match-tab-btn {
    background: transparent;
    color: #d32f2f;
    border: none;
    padding: 5px 12px;
    font-size: 15px;
    letter-spacing: 1px;
    cursor: pointer;
    opacity: 0.8;
}
.match-tab-btn:hover {
    opacity: 1;
    color: #b71c1c;
}
.match-tab-btn.active {
    background: #111;
    color: #fff;
    border: none;
    padding: 5px 12px;
    font-size: 15px;
    letter-spacing: 1px;
    cursor: default;
    opacity: 1;
}

/* Panel Animation & Display */
.match-panel {
    display: none;
    opacity: 0;
    animation: fadeInPanel 0.4s ease forwards;
}
.match-panel.active {
    display: block;
    opacity: 1;
}
@keyframes fadeInPanel {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Matching Images Gap and Size logic */
.match-img-col {
    display: flex;
    flex-direction: column;
    align-items: center; 
    max-width: calc(50% - 1px);
}
.match-img-col img {
    display: block;
    aspect-ratio: 162 / 324;
    width: calc(162px * 2.1);
    max-width: 100%;
    object-fit: cover;
}

.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }

.p-3 { padding: 1rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }

.p-4 { padding: 1.5rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }

.p-5 { padding: 3rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

/* Gutters for Grid
-------------------------------------------------------------- */
.gx-0 { margin-right: 0; margin-left: 0; }
.gx-0 > * { padding-right: 0; padding-left: 0; }

.gx-1 { margin-right: -0.125rem; margin-left: -0.125rem; }
.gx-1 > * { padding-right: 0.125rem; padding-left: 0.125rem; }

.gx-2 { margin-right: -0.25rem; margin-left: -0.25rem; }
.gx-2 > * { padding-right: 0.25rem; padding-left: 0.25rem; }

.gx-3 { margin-right: -0.5rem; margin-left: -0.5rem; }
.gx-3 > * { padding-right: 0.5rem; padding-left: 0.5rem; }

.gx-4 { margin-right: -0.75rem; margin-left: -0.75rem; }
.gx-4 > * { padding-right: 0.75rem; padding-left: 0.75rem; }

.gx-5 { margin-right: -1.5rem; margin-left: -1.5rem; }
.gx-5 > * { padding-right: 1.5rem; padding-left: 1.5rem; }

.gy-0 { margin-top: 0; }
.gy-0 > * { margin-top: 0; }

.gy-1 { margin-top: -0.25rem; }
.gy-1 > * { margin-top: 0.25rem; }

.gy-2 { margin-top: -0.5rem; }
.gy-2 > * { margin-top: 0.5rem; }

.gy-3 { margin-top: -1rem; }
.gy-3 > * { margin-top: 1rem; }

.gy-4 { margin-top: -1.5rem; }
.gy-4 > * { margin-top: 1.5rem; }

.gy-5 { margin-top: -3rem; }
.gy-5 > * { margin-top: 3rem; }

@media (min-width: 992px) {
    .gx-lg-0 { margin-right: 0; margin-left: 0; }
    .gx-lg-0 > * { padding-right: 0; padding-left: 0; }
    
    .gx-lg-1 { margin-right: -0.125rem; margin-left: -0.125rem; }
    .gx-lg-1 > * { padding-right: 0.125rem; padding-left: 0.125rem; }
    
    .gx-lg-2 { margin-right: -0.25rem; margin-left: -0.25rem; }
    .gx-lg-2 > * { padding-right: 0.25rem; padding-left: 0.25rem; }
    
    .gx-lg-3 { margin-right: -0.5rem; margin-left: -0.5rem; }
    .gx-lg-3 > * { padding-right: 0.5rem; padding-left: 0.5rem; }
    
    .gx-lg-4 { margin-right: -0.75rem; margin-left: -0.75rem; }
    .gx-lg-4 > * { padding-right: 0.75rem; padding-left: 0.75rem; }
    
    .gx-lg-5 { margin-right: -1.5rem; margin-left: -1.5rem; }
    .gx-lg-5 > * { padding-right: 1.5rem; padding-left: 1.5rem; }

    .mb-lg-0 { margin-bottom: 0 !important; }
    .mt-lg-0 { margin-top: 0 !important; }
}

/* Common Utilities
-------------------------------------------------------------- */

.text-center { text-align: center !important; }
.text-dark { color: #000 !important; }

.font-weight-100 { font-weight: 100 !important; }
.font-weight-200 { font-weight: 200 !important; }
.font-weight-300 { font-weight: 300 !important; }
.font-weight-400 { font-weight: 400 !important; }
.font-weight-500 { font-weight: 500 !important; }
.font-weight-600 { font-weight: 600 !important; }
.font-weight-700 { font-weight: 700 !important; }

.opacity-50 { opacity: 0.5 !important; }
.opacity-60 { opacity: 0.6 !important; }
.opacity-80 { opacity: 0.8 !important; }

.letter-spacing-1 { letter-spacing: 1px !important; }
.letter-spacing-2 { letter-spacing: 2px !important; }
.letter-spacing-10 { letter-spacing: 10px !important; }

.font11 { font-size: 11px !important; }
.font12 { font-size: 12px !important; }
.font13 { font-size: 13px !important; }
.font14 { font-size: 14px !important; }
.font16 { font-size: 16px !important; }
.font18 { font-size: 18px !important; }
.font60 { font-size: 60px !important; }

.d-flex { display: flex !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.align-items-center { align-items: center !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.gap-3 { gap: 1rem !important; }

/* ==========================================================================
   SINGLE ASCALE PRODUCT STYLES
   ========================================================================== */

/* Product Formats Table */
.table-formats { width: 100%; border-collapse: collapse; margin-top: 5px; }
.table-formats thead { border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; }
.table-formats th { font-weight: 300; color: #888; font-size: 13px; letter-spacing: 0.5px; text-transform: none; padding: 15px 15px; text-align: left; vertical-align: middle; }
.table-formats td { font-size: 15px; color: #333; text-align: left; padding: 18px 15px; font-weight: 300; }
.table-formats tbody tr { background-color: #ffffff; cursor: pointer; transition: background-color 0.2s; }
.table-formats tbody tr:hover { background-color: #fafafa; }
.table-formats tbody tr td { color: #888; transition: color 0.2s; }
.table-formats .format-size { font-weight: 500; font-size: 15px; color: #555; }
.format-icon { display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; vertical-align: text-bottom; opacity: 0.6; }
.format-icon svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; }

/* 2-Column Split Padding */
.custom-pad-left { padding-left: 15px; padding-right: 15px; }
.custom-pad-right { padding-left: 15px; padding-right: 15px; }
@media (min-width: 992px) {
    .custom-pad-left { padding-left: 0px !important; padding-right: 40px !important; }
    .custom-pad-right { padding-left: 40px !important; padding-right: 0px !important; }
}

/* Tabs Navigation Styling */
.match-tab-btn {
    background: transparent;
    color: #d32f2f;
    border: none;
    padding: 5px 12px;
    font-size: 15px;
    letter-spacing: 1px;
    cursor: pointer;
    opacity: 0.8;
}
.match-tab-btn:hover {
    opacity: 1;
    color: #b71c1c;
}
.match-tab-btn.active {
    background: #111;
    color: #fff;
    border: none;
    padding: 5px 12px;
    font-size: 15px;
    letter-spacing: 1px;
    cursor: default;
    opacity: 1;
}

/* Panel Animation & Display */
.match-panel {
    display: none;
    opacity: 0;
    animation: fadeInPanel 0.4s ease forwards;
}
.match-panel.active {
    display: block;
    opacity: 1;
}
@keyframes fadeInPanel {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Matching Images Gap and Size logic */
.match-img-col {
    display: flex;
    flex-direction: column;
    align-items: center; 
    max-width: calc(50% - 1px);
}
.match-img-col img {
    display: block;
    aspect-ratio: 162 / 324;
    width: calc(162px * 2.1);
    max-width: 100%;
    object-fit: cover;
}

/* Related Products Slider */
.related-product-carousel-wrapper {
    padding-top: 30px;
    padding-bottom: 20px;
}
.related-products-slick .slick-slide {
    outline: none;
}
.related-products-slick .product-thumb {
    aspect-ratio: 1 / 1;
    background-color: #f2f2f2;
    width: 98%;
}
.related-products-slick .thumb-inner {
    max-width: 140px;
    margin: 18% auto;
    width: 98%;
}

/* ================================================================
   Blog Category Grid (4-column)
   ================================================================ */
.radius10 { border-radius: 10px !important; }
.transition-transform { transition: transform 0.3s ease; display: block; }
.transition-transform:hover img { transform: scale(1.05); }

.blog-item__title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    transition: color 0.2s;
}
.blog-item__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}
.hover-primary:hover {
    color: var(--fc_color_primary, #028099) !important;
}
/* ── Blog Grid Spacing & Responsive Fix ── */
.blog-grid-modern {
    margin-left: -15px !important;
    margin-right: -15px !important;
}
.blog-grid-modern [class*="col-"] {
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-bottom: 30px !important;
}

.blog-item__title a {
    font-size: 20px;
    font-weight: 700;
    text-transform: initial;
}
.title-single {
	text-transform: initial;
}
@media (max-width: 991px) {
    .blog-item__title a { font-size: 16px; }
}

@media (max-width: 575px) {
    .blog-grid-modern {
        margin-left: -5px !important;
        margin-right: -5px !important;
    }
    .blog-grid-modern [class*="col-"] {
        padding-left: 5px !important;
        padding-right: 5px !important;
        margin-bottom: 40px !important;
    }
    .blog-item__thumb img {
        aspect-ratio: 16/9 !important;
    }
}

.title-category-blog {
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 10px;
    text-transform: none;
    font-size: 28px;
}
.title-category-blog:after {
    content: "";
    position: absolute;
 left: 0;
 bottom: 0;
 width: 60px;
 height: 3px;
 background: var(--fc_color_primary, #028099);
}

/* -- Core Blog Item Styles -- */
.blog-item {
    display: flex !important;
    flex-direction: column !important;
    text-align: left;
    width: 100%;
}
.blog-item__thumb {
    width: 100% !important;
    display: block;
    border-radius: 10px;
    overflow: hidden;
}
.blog-item__thumb img {
    width: 100% !important;
    height: auto !important;
    display: block;
    transition: transform 0.3s ease;
}
.blog-item__body {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}
.blog-item__body > * {
    width: 100% !important;
}

.archive-description {
    max-width: 800px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 20px;
}

/* Hero Banner Rotation */
.product-hero-section {
    height: 350px; /* Fix height at 300px */
    position: relative;
    overflow: hidden;
}

.hero-slab-wrapper {
    width: 100%;
    height: 100%;
}

.hero-slab-img.rotate-banner-90 {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Rotating 90deg: 
       We set the element's width to the container's height (300px)
       and the element's height to the container's width (100%)
       Then rotate it. Object-fit ensures the image covers this area without stretching.
    */
    width: 300px !important;
    height: 100% !important; 
    /* Wait, since it's absolute in a 100% container, 100% height = 300px. 
       We need the height to be the container's width. 
       We can use a very large value and object-fit: cover, or use JS, or just use vh/vw.
    */
    min-height: 100vw !important; 
    object-fit: cover !important;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center;
}

/* Ensure overlay stays on top */
.hero-bg-overlay {
    z-index: 2;
    background: rgba(0,0,0,0.3);
}

.product-hero-content-wrapper {
    z-index: 3;
    pointer-events: none;
}

/* Store List Page - Simplified Refined */
.store-list-page { color: #111; }
.store-filter-sidebar { 
    position: sticky; 
    top: 120px; 
    transition: top 0.3s; 
    padding: 30px 25px !important;
}
.store-search-input { 
    height: 48px !important; 
    width: 100% !important;
    border-radius: 4px !important; 
    border: 1px solid #ddd !important; 
    background: #fff !important;
    padding-left: 15px !important;
}
.store-search-input::placeholder { color: #ccc; font-style: normal; }
.store-province-select {
    height: 48px !important;
    width: 100% !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    cursor: pointer;
    background-color: #fcfcfc !important;
}
.filter-separator {
    width: 100%;
}
.filter-separator span {
    color: #999;
    background: #fff;
    z-index: 1;
    font-size: 11px;
    letter-spacing: 3px;
    font-weight: 700;
}
.store-card { 
    border: 1px solid #f0f0f0 !important; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.03) !important;
    transition: all 0.3s ease;
}
.store-card:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,0.06) !important; }
.store-name { 
    color: #000; 
    font-size: 18px; 
    margin-bottom: 15px; 
    letter-spacing: 0.5px;
}
.store-content-editor p { margin-bottom: 6px; }
.store-content-editor p:last-child { margin-bottom: 0; }

.store-title-column {
    padding-left: 40px !important; /* Aligns with sidebar content (15px col padding + 25px box padding) */
}

@media (max-width: 991px) {
    .store-title-column {
        padding-left: 15px !important; /* Reset for mobile where sidebar layout changes */
    }
    .store-filter-sidebar {
        padding: 20px 15px !important;
    }
    .store-filter-sidebar h3 {
        font-size: 16px !important;
        margin-bottom: 20px !important;
        text-align: center;
    }
    .store-search-input {
        font-size: 12px !important;
    }
    .filter-separator span {
        font-size: 10px !important;
        letter-spacing: 2px !important;
    }
    .section-breadcrumb-title {
        margin-bottom: 30px !important;
    }
    .title-page {
        font-size: 24px !important;
    }
}

/* Builder Contact Section */
.builder-contact-right iframe {
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-height: 400px;
    border: 0;
}
.contact-icon svg {
    display: block;
}
.contact-info-list li {
    border-bottom: 1px solid rgba(0,0,0,0.03);
    padding-bottom: 15px;
}
.contact-info-list li:last-child {
    border-bottom: 0;
}
.contact-text a:hover {
    color: var(--fc_color_primary, #028099) !important;
    text-decoration: underline;
}