/*
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
-------------------------------------------------------------- */
body{
    background: var(--fc_body_background_color);
    font-family: franklin-gothic-urw, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Arial, Noto Sans, sans-serif;
    font-optical-sizing: auto;
    font-weight:300;
    font-style: normal;
    font-size: 16px;
    color: var(--fc_body_color);
}
strong{
    font-weight: 600;
}
a{
    text-decoration: none;
    color: var(--fc_color_permalink);
}
p, address, ul, ol, dl, dd, .faux-p {
    margin-bottom: 0;
    font-size: clamp(.8125rem, .7764rem + .1541vw, .875rem);
    line-height: 1.4;
    font-weight: 400;
}
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);
    font-family: franklin-gothic-urw, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, "Noto Sans", sans-serif;
    font-weight: 300;
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: .6px;
}
dl:not(.list-reset) dt, th, .faux-h2, .faux-h3 {
    font-family: franklin-gothic-urw, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, "Noto Sans", sans-serif;
    font-weight: 300;
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: .6px;
}

h2, .h2, .faux-h2 {
    font-size: clamp(2.1875rem, 1.6193rem + 2.8409vw, 3.4375rem);
    line-height: 1.18;
}
.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: 30px; 
    width: auto;
    max-width: 100%;
}
.aeterna-main-overlay a.logo img {
    height: 30px; 
    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: uppercase;
    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: uppercase;
    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: uppercase;
    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: uppercase;
    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: uppercase;
    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: uppercase;
    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: uppercase;
    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 {
    height: 130px; /* Match typical text height */
    width: auto;
    object-fit: contain;
    display: block;
}
.item-footer-nav {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}
.footer-nav-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 64px;
    width: 100%;
    max-width: 315px;
}


.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;
    text-transform: uppercase;
    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: 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;
}

/* 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: uppercase;
    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 {
    margin-bottom: 1.5rem;
    color: #000;
}

.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 {
    position: relative;
    height: 90vh;
    min-height: 600px;
    background: #fff; 
    display: flex;
    align-items: center; /* Centered as per request */
    padding-bottom: 0;
}

.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, 4.375rem);
    text-transform: uppercase;
    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: uppercase;
    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: uppercase; }
.slab-card-wrapper {
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

/* Metadata style */
.metadata-text {
    font-size: 13px;
    font-weight: 500;
}

/* Style cho từng tấm slab */
.slab-img-item {
    background: #fff;
}

.slab-img-item img {
    height: auto;
    object-fit: cover;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08); 
}

/* Thiết lập Grid 2 cột mặc định, khoảng cách chính xác 1rem */
.slab-grid-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem; 
    width: 100%;
}


/* =======================================================
   SLAB SYSTEM LAYOUT (2 CỘT + ẢNH XẾP CHỒNG)
   ======================================================= */

/* 1. KHUNG LƯỚI CHÍNH (Ép 2 cột, khoảng cách 1rem) */
.slab-grid-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 1rem; 
    width: 100%;
}
/* Force 1 column when wide slabs (Bookmatch/Multi) are present or on narrow screens */
.slab-grid-layout.layout-full-width {
    grid-template-columns: 1fr;
}
/* Switch to 2 columns ONLY on large PC screens (>1400px) to prevent overflow of wide slab patterns */
@media (min-width: 1400px) {
    .slab-grid-layout.layout-full-width {
        grid-template-columns: repeat(2, 1fr);
    }
}



/* 2. KHUNG MÀU XÁM BAO QUANH TỪNG OPTION */
.slab-colored-frame {
    background-color: #efefef !important; 
    display: flex;
    flex-direction: column;
    height: 100%; 
}

/* Tùy chỉnh Metadata */
.slab-metadata {
    font-weight: 500 !important;
}


/* 3. VÙNG HIỂN THỊ ẢNH ĐÁ (Được quy hoạch riêng) */
.slab-visual-grid {
    display: flex;
    justify-content: center;
    align-items: flex-end; 
    margin: 2rem auto 2rem auto !important;
    padding: 0 !important;
    width: 90%; 
    max-width: 452px; 
}

/* 4. TỪNG TẤM ĐÁ (Hiệu ứng mượt) */
.slab-item-img {
    transition: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ================================================= */
/* LOGIC CHIA BỐ CỤC (ĐIỀU KHIỂN TỪ MÃ PHP CỐT LÕI) */
/* ================================================= */

/* TRƯỜNG HỢP 1: DUY NHẤT 1 ẢNH */
.layout-single-slab .slab-item-img {
    width: 60%; 
    max-width: 300px;
}

/* TRƯỜNG HỢP 2: CÓ ĐÚNG 2 ẢNH (KIỂU TÁCH RÃNH BOOKMATCH) */
.layout-2-slabs {
    display: flex !important;
    justify-content: space-between; 
    gap: 12px; 
    width: 100%;
}
.layout-2-slabs .slab-item-img {
    width: calc((100% - 12px) / 2); 
    flex: 0 0 calc((100% - 12px) / 2);
}

/* TRƯỜNG HỢP 3: CÓ NHIỀU ẢNH TRỞ LÊN (KIỂU XẾP BÀI QUẠT FAN - KHỚP 100% TRANG AETERNA DEMO) */
.layout-multi-slabs {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    width: 100%;
    --slab-w: 49%;
    --slab-spread: 140%;
    overflow: hidden; /* Prevent fan layout from overflowing horizontally */
}
.layout-multi-slabs .slab-item-img {
    width: var(--slab-w); 
    flex: 0 0 var(--slab-w);
    min-width: 0; 
}
/* THUẬT TOÁN FANNED (XẾP QUẠT) - Cải tiến dùng --slab-spread để tùy chỉnh khoảng cách */
.slab-visual-grid[data-count="3"] .slab-item-img:not(:first-child) { margin-left: calc(-1 * (var(--slab-w) - (var(--slab-spread) - var(--slab-w)) / 2)); }
.slab-visual-grid[data-count="4"] .slab-item-img:not(:first-child) { margin-left: calc(-1 * (var(--slab-w) - (var(--slab-spread) - var(--slab-w)) / 3)); }
.slab-visual-grid[data-count="5"] .slab-item-img:not(:first-child) { margin-left: calc(-1 * (var(--slab-w) - (var(--slab-spread) - var(--slab-w)) / 4)); }
.slab-visual-grid[data-count="6"] .slab-item-img:not(:first-child) { margin-left: calc(-1 * (var(--slab-w) - (var(--slab-spread) - var(--slab-w)) / 5)); }
.slab-visual-grid[data-count="7"] .slab-item-img:not(:first-child) { margin-left: calc(-1 * (var(--slab-w) - (var(--slab-spread) - var(--slab-w)) / 6)); }
.slab-visual-grid[data-count="8"] .slab-item-img:not(:first-child) { margin-left: calc(-1 * (var(--slab-w) - (var(--slab-spread) - var(--slab-w)) / 7)); }

/* Dư phòng hờ mốc Default chèn vội */
.layout-multi-slabs:not([data-count]) .slab-item-img:not(:first-child) {
    margin-left: -20%;
}


/* Khung chứa slab */
.slab-colored-frame {
    width: 100%; 
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Ensure nothing spills out of the colored frame */
    /* GỠ BỎ ASPECT RATIO VÀ OVERFLOW: ĐỂ KHUNG XÁM TỰ NHIÊN ÔM TRỌN ẢNH, BAO NHIÊU CŨNG VỪA! */
    padding-bottom: 3rem !important; 
}

/* Fit ảnh slab trong khung */
.slab-img-fit {
    width: 100% !important; 
    height: auto !important; 
    display: block;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease; 
    
    /* ÉP BUỘC PHẦN CỨNG (GPU) KHÔNG LÀM NHÒE ẢNH KHI ÁP DỤNG HIỆU ỨNG 3D/SHADOW */
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
}
/* CHO RIÊNG 1 ẢNH HOẶC 2 ẢNH: Dùng Contain vì chúng có không gian nở bề ngang rộng rãi */
.layout-single-slab .slab-img-fit,
.layout-2-slabs .slab-img-fit {
    object-fit: contain !important; 
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block;
}
/* Explicit Bookmatch mirroring for the second slab */
.layout-2-slabs .slab-item-img:nth-child(2) img {
    transform: scaleX(-1) !important;
}
/* Visual Fix: Ensure no overflow/repetition even if container expands */
.slab-img-fit {
    background-repeat: no-repeat !important; /* Safety for any inherited backgrounds */
}

/* Hiệu ứng bóng nổi lên khi hover vào khung ảnh */
.slab-colored-frame:hover .slab-img-fit {
    box-shadow: 0 12px 30px rgba(0,0,0,0.15); 
    transform: translateY(-4px); 
}



/* Popup Wrapper */
.slab-system-popup-wrapper {
    border-radius: 0;
    background-color: #fff;
    width: 95vw; 
    max-width: 1200px; 
    height: 90vh; 
    max-height: 880px; 
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
}

.fancybox__content>.carousel__button.is-close {
    display: none !important; 
}
.ssp-close {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 50;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #444;
    cursor: pointer;
    transition: transform 0.3s;
    padding: 0 !important;
}
.ssp-close:hover {
    color: #000 !important;
    transform: scale(1.1);
}

/* Tabs */
.ssp-tabs {
    list-style: none;
    padding-left: 0;
    margin: 0 0 0rem 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.ssp-tabs li {
    margin-right: 24px;
}
.ssp-tab-link {
    background: transparent;
    border: none;
    text-align: left;
    display: block;
    padding: 12px 0;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 300;
    font-size: 15px;
    text-decoration: none;
    transition: color 0.3s ease;
    outline: none;
}
.ssp-tab-link.text-muted { color: #888; }
.ssp-tab-link.text-dark { color: #000; }
.ssp-tab-link:hover { color: #000 !important; }

.ssp-tab-line {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #000;
    height: 1px;
    width: 0;
    transition: width 0.3s ease;
}
.ssp-tab-link.active .ssp-tab-line {
    width: 100% !important;
}

/* Panels Container */
.ssp-panels-container {
    flex-grow: 1;
    position: relative;
    width: 100%;
    margin-top: 2rem;
}
.ssp-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.3s ease-in-out;
}
.ssp-panel.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1 !important;
}

/* Inner Panel Layout */
.ssp-panel-inner {
    display: flex;
    height: 100%;
    justify-content: space-between;
}

/* Panel Info (Left Column) */
.ssp-panel-info {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    max-width: 350px;
}

/* Thumbnails */
.ssp-thumbs-grid {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
    gap: 6px;
    max-width: 260px; 
}
.ssp-thumb-item {
    width: calc((100% - 18px) / 4); 
    height: auto;
    aspect-ratio: 2/3;
    opacity: 0.6;
    outline: none;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    margin: 0;
}
.ssp-thumb-item img,
.ssp-thumb-img {
    border: 1px solid transparent;
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.3s;
    display: block;
}

.ssp-thumb-item:hover { opacity: 0.8; }
.ssp-thumb-item.active { opacity: 1; border-color: #000; }

/* Metadata List */
.ssp-metadata-list {
    margin-top: auto; 
    margin-bottom: 1rem;
}
.ssp-dl {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}
.ssp-dl-row {
    display: flex;
    margin-bottom: 0;
}
.ssp-dl-row dt {
    text-transform: uppercase;
    font-weight: normal;
    width: 110px;
    flex-shrink: 0;
    color: #444;
}
.ssp-dl-row dd {
    margin-bottom: 0;
    color: #000;
}

/* Panel Text (Title & Desc) */
.ssp-panel-text {
    padding-bottom: 1.5rem;
}
.ssp-panel-text h3 {
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 0.5px;
    font-weight: 400;
    color: #000;
}
.ssp-desc {
    font-size: 15px;
    line-height: 1.8;
    color: #444;
}

/* Visual Column Box */
.ssp-panel-visual {
    flex-grow: 1;
    max-width: 650px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: center;
    justify-content: center;
}

/* Bookmatch View */
.ssp-bookmatch-view {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0;
}
.ssp-bm-slab {
    height: 100%;
    max-height: 100%;
    margin: 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ssp-main-img {
    height: 100%;
    width: auto;
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
}

/* Slider View */
.ssp-slider-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.ssp-slider-main {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.ssp-slider-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 15px;
    padding: 0;
    margin: 0;
    transition: transform 0.4s ease;
}
.ssp-slider-track::-webkit-scrollbar {
    display: none;
}
.ssp-slide {
    flex: 0 0 calc((100% - 30px) / 3);
    min-width: calc((100% - 30px) / 3);
    aspect-ratio: 1 / 2;
    opacity: 1;
    transition: opacity 0.4s ease;
    overflow: hidden;
    padding: 0;
}
/* Slider-specific image style (inside Random slider only) */
.ssp-slider-track .ssp-main-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Bookmatch-specific image style */
.ssp-bm-slab .ssp-main-img {
    height: 100%;
    width: auto;
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
}

/* Desktop Pagination Lines */
.ssp-pagination-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

.ssp-custom-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 400px; /* narrowed pagination */
}
.ssp-page-line-btn {
    background: transparent;
    border: none;
    flex-grow: 1;
    padding: 24px 0;
    outline: none;
    cursor: pointer;
    margin: 0 6px;
    display: flex;
    align-items: center;
}
.ssp-line-indicator {
    display: block;
    width: 100%;
    height: 2px;
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
    transition: all 0.3s;
}
.ssp-page-line-btn:hover .ssp-line-indicator {
    background: rgba(0,0,0,0.6);
    height: 3px;
}
.ssp-page-line-btn.active .ssp-line-indicator {
    background: #000;
    height: 3px;
}
/* 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: uppercase; }
.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: uppercase; }
.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: uppercase; }
.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: uppercase; }
.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: uppercase; }
.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: uppercase; 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: uppercase; 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: uppercase; 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: uppercase; 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-uppercase { text-transform: uppercase !important; }
.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; }