:root {

    /* ===== Layout ===== */

    --container-width: 1280px;

    /* ===== Typo ===== */

    --font-body-text: "Poppins", sans-serif;

    /* ===== Header ===== */

    --color-header-top-bg: #2e2e2e;
    --color-header-top-text: #ffffff;

    --color-header-bg: #ffffff;
    --color-header-border: #ececec;

    /* ===== Menu ===== */

    --color-menu-text: #3b3b3b;
    --color-header-text: #3b3b3b;
    --color-menu-text-hover: #333333;
    --color-menu-text-hover-1: #f0a778;
    --color-menu-text-hover-2: #5A7E64;

    --color-menu-bg: #ffffff;
    --color-menu-bg-hover: #f5f5f5;

    --color-menu-dropdown-bg: #ffffff;

    --shadow-menu-dropdown: 0 12px 30px rgba(0,0,0,.12);
    --shadow-menu: 0 10px 25px rgba(0,0,0,.08);

    --radius-menu: 6px;

    --transition-menu: .2s ease;

    /* ===== Buttons ===== */

    --color-button-primary-bg: #333333;
    --color-button-primary-text: #ffffff;
    --color-button-text-hover: #f0a778;

}

/* ==========================================================
   Reset
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.container{
    width:min(var(--container-width), calc(100% - 40px));
    margin:auto;
}

body{
    background: #ffffff;
}
body{
    font-family: var(--font-body-text);
}

/* Item có submenu */
.menu-style-normal > .menu-item-has-children > a{
    display:flex;
    align-items:center;
    gap:8px;
}

.menu-style-normal .menu-item-has-children .menu-item-has-children > a{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap:8px;
}

/* Arrow */
.menu-style-normal a {
    text-decoration: unset;
}
.menu-style-normal a:hover {
    color: var(--color-button-text-hover);
}
.menu-style-normal > .menu-item-has-children > a::after, .menu-style-normal .menu-item-has-children .menu-item-has-children > a::after{
    content:"";
    width:4px;
    height:4px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg) translateY(-2px);
    transition:transform .2s ease;
    display: inline-block;
}
.menu-style-normal > .menu-item-has-children:hover > a::after{
    transform:rotate(225deg) translateY(-1px);
}

/* ---------- Dropdown ---------- */

.menu-style-normal .sub-menu{
    position:absolute;
    top:100%;
    left:0;
    min-width:220px;
    margin:0;
    padding:8px 0;
    list-style:none;
    background:var(--color-menu-dropdown-bg);
    border-radius:var(--radius-menu);
    box-shadow:var(--shadow-menu-dropdown);
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:var(--transition-menu);
    z-index:100;
}

.menu-style-normal .sub-menu li{
    position:relative;
}

.menu-style-normal .sub-menu a{
    display:block;
    height:auto;
    padding:10px 18px;
    color:var(--color-menu-text);
    white-space:nowrap;
}

.menu-style-normal .sub-menu a:hover{
    color:var(--color-button-text-hover);
    background:var(--color-menu-bg-hover);
}

.menu-style-normal > li:hover > .sub-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.menu-style-normal .sub-menu .sub-menu{
    top:0;
    left:100%;
}

/* ==========================================================
   Header Top
========================================================== */

.header-top{
    background:var(--color-header-top-bg);
    color:var(--color-header-top-text);
}

.header-top .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:44px;

}

.header-top .container::before,
.header-top .container::after{
    display:none !important;
}
@media(max-width: 1024px){
    .header-top{
        display: none;
    }
}

/* ==========================================================
   Header Top - Trustpilot widget
========================================================== */
.header-trustbox {
	min-height: 44px;
}
.header-trustbox .trustpilot-widget {
    padding: 20px 20px 0px 20px;
}

/* ==========================================================
   Top Menu
========================================================== */

.top-menu{
    display:flex;
    align-items:center;
    gap:32px;
    margin:0;
    padding:0;
    list-style:none;
}

.top-menu > li{
    position:relative;
}

body .top-menu a{
    display:flex;
    align-items:center;
    height:44px;
    color:var(--color-header-top-text);
    text-decoration:none;
    font-size:14px;
}

body .header-top__right a {
    color: var(--color-header-top-text);
}

/* ==========================================================
   Branding
========================================================== */

.header-branding{
    border-bottom:1px solid var(--color-header-border);
    background:var(--color-header-bg);
}

.header-branding .container{
    display:grid;
    grid-template-columns:220px 1fr;
    align-items:center;
    height:88px;
}

.header-branding .container::before, .header-branding .container::after {
    display: none !important;
}

.header-logo {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
}

.header-logo .main-logo-wrapper a, .header-logo .main-logo-wrapper a img {
    display: block;
}
.mobile-menu-header .main-logo-wrapper * {
    display: block;
}
@media(max-width: 767px){
    .header-logo .main-logo-wrapper img {
        width: 119px !important;
        height: auto !important;
    }
}

.header-actions{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:24px;
}
@media(max-width: 767px) {
    .header-actions {
        gap:12px;
    }
}

.header-actions * {
    color: var(--color-header-text);
    text-decoration: unset !important;
}

.header-actions .account-link > *, .header-actions .cart-link > * {
    vertical-align: middle;
    display: inline-block;
}
body .header-actions .cart-link:hover .cart-count {
    color: #5A7E64;
}
.header-actions .cart-link .cart-count {
    aspect-ratio: 1 / 1;
    background: #f0a778;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    text-align: center;
    position: absolute;
    right: -4px;
    top: -8px;
}
.header-actions .cart-link {
    position: relative;
    transform: translateY(2px);
}
@media(max-width: 1024px){
    .header-actions .account-text{
        display: none;
    }
}
.header-actions a:hover, .header-actions a:hover * {
    color: var(--color-button-text-hover);
}

body header .quote-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 26px;
    background:var(--color-button-primary-bg);
    color:var(--color-button-primary-text);
    text-decoration:none;
}
@media (max-width: 1024px){
    body header .quote-button {
/*         display: none; */
    }
}
@media (max-width: 778px){
    body header .quote-button {
        display: none;
    }
}

/* ==========================================================
   Desktop Navigation
========================================================== */

.desktop-navigation{
    height:64px;
    border-bottom:1px solid var(--color-header-border);
    background:var(--color-header-bg);
}

.primary-menu{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:64px;
    list-style:none;
}

body .primary-menu > li > .sub-menu {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
}

.primary-menu > li{
    position:relative;
}

.primary-menu > li > a{
    display:block;
    padding:22px 0;
    color:var(--color-menu-text);
    text-decoration:none;
    font-size: 14px;
}

.primary-menu > li > a:hover{
    color: var(--color-menu-text-hover-2);
}
.primary-menu .sub-menu a:hover {
    color: var(--color-menu-text-hover-2);
}

/* ---------- Dropdown ---------- */

.primary-menu .sub-menu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    min-width:240px;
    list-style:none;
    background:var(--color-menu-bg);
    box-shadow:var(--shadow-menu);
}

.primary-menu li:hover > .sub-menu{
    display:block;
    color:var(--color-menu-text);
    opacity: 1;
    visibility: visible;
}

.primary-menu .sub-menu li{
    position:relative;
}

.primary-menu .sub-menu .sub-menu{
    top:0;
    left:100%;
}

/* ==========================================================
   Mobile
========================================================== */

/* ==========================================================
  Mobile Menu
========================================================== */
/* ---------- Responsive ---------- */
.mobile-navigation{
    display:none;
}
@media (max-width:1024px){

    .desktop-navigation{
        display:none;
    }

    .mobile-navigation{
        display:block;
    }
    .header-branding .container{
        grid-template-columns:1fr auto;
    }

}

/* ==========================================================
   Mobile Close
========================================================== */

.mobile-close{
    display:flex;
    justify-content:center;
    align-items:center;
    width:18px;
    height:44px;
    padding:0;
    border:0;
    border-radius:50%;
    background:transparent;
    color:var(--color-menu-text);
    font-size:28px;
    line-height:1;
    cursor:pointer;
    transition:all .25s ease;
}

.mobile-close:hover{
    background:rgba(0,0,0,.06);
    transform:rotate(90deg);
}

.mobile-close:active{
    transform:scale(.9) rotate(90deg);
}

.mobile-close:focus-visible{
    outline:2px solid var(--color-menu-text);
    outline-offset:2px;
}

.mobile-menu-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.5);
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:9999;
}

/* ==========================================================
   Mobile Toggle
========================================================== */

.mobile-toggle{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:6px;
    width:32px;
    height:32px;
    padding:0;
    border:0;
    background:none;
    cursor:pointer;
    transition:.2s;
}

.mobile-toggle:hover{
    opacity:.8;
}

.mobile-toggle span{
    width:28px;
    height:2px;
    background:var(--color-menu-text);
    border-radius:999px;
    transition:all .25s ease;
}


.mobile-toggle.is-active span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
}

.mobile-toggle.is-active span:nth-child(2){
    opacity:0;
}

.mobile-toggle.is-active span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
}

.mobile-menu-overlay.is-open{
    opacity:1;
    visibility:visible;
}

.mobile-menu{
    width:520px;
    max-width:100%;
    height:100%;
    background:#fff;
    transform:translateX(-100%);
    transition:transform .3s ease;
    overflow-y:auto;
}

.mobile-menu-overlay.is-open .mobile-menu{
    transform:translateX(0);
}

/* ---------- Header ---------- */

.mobile-menu-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px;
    border-bottom:1px solid var(--color-header-border);
}

/* ---------- Menu ---------- */

.mobile-menu-list,
.mobile-menu-list ul{
    margin:0;
    padding:0;
    list-style:none;
}

.mobile-menu-list li{
    position:relative;
    border-bottom:1px solid var(--color-header-border);
}

.mobile-menu-list a{
    display:flex;
    align-items:center;
    min-height:44px;
    padding:0 20px;
    color:var(--color-menu-text);
    text-decoration:none;
}

/* ---------- Accordion ---------- */

.mobile-menu-list .sub-menu{
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
    background:#fafafa;
}

.mobile-menu-list .menu-item-has-children.is-open > .sub-menu{
    max-height:1140px;
}
.mobile-menu-list .menu-item-has-children{
    position:relative;
}

.mobile-menu-list .submenu-toggle span{
    display:block;
    width:8px;
    height:8px;
    margin:auto;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg);
    transition:.25s;
}

.menu-item-has-children.is-open > .submenu-toggle > span{
    transform:rotate(225deg);
}
.mobile-menu-list .submenu-toggle{
    position:absolute;
    top:0;
    right:0;
    width:52px;
    height:52px;
    border:0;
    background:none;
    cursor:pointer;
}
.mobile-menu-list .menu-item-has-children .submenu-toggle{
    /*width:56px;*/
    /*height:100%;*/
    display:flex;
    align-items:center;
    justify-content:center;

}
.mobile-menu-list > li{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
}

.mobile-menu-list > li > a{
    flex:1;
}

.mobile-menu-list > li > .sub-menu{
    width:100%;
}
/* ---------- Level ---------- */

.mobile-menu-list .sub-menu a{
    padding-left:40px;
}

.mobile-menu-list .sub-menu .sub-menu a{
    padding-left:60px;
}






/* ==========================================================================
   Zoho Popup
========================================================================== */

.overlay-full-screen-popup-zoho {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .8);
}

.container-zoho {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    overflow: scroll;
    align-items: center;
    justify-content: center;
}

.container-inner-zoho {
    position: relative;
    z-index: 1;
    height: auto;
}

.inner-zoho {
    position: absolute;
    top: 100px;
    width: 70vw;
    max-width: 1200px;
    padding: 20px;
    background: #fff;
    opacity: 1;
    border-radius: 18px;
}

.close-popup-zoho-form {
    position: absolute;
    top: -13px;
    right: -13px;
    z-index: 999;
    width: 26px;
    height: 26px;
    padding: 0;
    font-size: 24px;
    font-weight: 100;
    line-height: 24px;
    color: #fff;
    background: #000;
    border: 2px solid #fff;
    border-radius: 26px;
    box-shadow: 0 0 15px 1px rgba(2, 2, 2, .75);
    text-shadow: 0 0 0 rgba(0, 0, 0, .23);
}

/* ==========================================================================
   Zoho Popup - FORM
========================================================================== */

.container-zoho form input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), .container-zoho form textarea{
    border-radius: 0px !important;
    border: 2px solid #E9A37F !important;
    border: 2px solid #5A7E64 !important;
    padding: 8px 16px;
}

.container-zoho form input[type=submit] {
    background: #E9A37F;
    border: 0px solid #E9A37F;
    padding: 20px 40px;
    font-size: 18px;
    font-weight: 500;
}
.container-zoho form input[type=submit]:hover {
    background: #5A7E64;
    color: #ffffff;
}

/* ==========================================================================
   END - Zoho Popup
========================================================================== */

/* ==========================================================================
   YSM Search
========================================================================== */
.ysm-search-link {
    width: 100%;
    max-width: 500px;
    margin: auto;
}
body .ysm-search-widget-2 .search-field[type="search"] {
    background: #F3F3F3;
    border: 0px !important;
    color: #3b3b3b;
    font-style: normal;
    font-size: 16px;
    line-height: 1.5;
    padding: 8px 16px;
    height: 44px;
}
.ysm-search-widget-2 .search-field[type="search"]::placeholder {
    color: #3b3b3b;
    font-style: normal;
    font-size: 16px;
    line-height: 1.5;
}
.ysm-search-widget-2 .smart-search-popup.has-viewall-button {
    width: 100% !important;
}

.ysm-search-widget-2 .smart-search-results .smart-search-post-title {
    font-size: 16px;
    margin-bottom: 0px;
}
@media(max-width: 767px){
    .ysm-search-widget-2 .smart-search-results .smart-search-post-title {
        font-size: 14px;
    }
}
.ysm-search-widget-2 .smart-search-results .smart-search-post-sku {
    margin-top: 4px;
}
.ysm-search-widget-2 .smart-search-post-price {
    display: none !important;
}
.ysm-search-widget-2 .smart-search-results .smart-search-post-icon {
    margin-bottom: 0px;
}
.ysm-search-widget-2 .smart-search-view-all {

}
.ysm-search-link {
    transition:
            opacity .25s ease,
            transform .25s ease,
            visibility .25s ease;
}
.ysm-search-link.active {
    width: 100%;
    position: fixed;
    box-sizing: border-box;
    z-index: 1;
    margin: -20px;
    padding: 40px;
    background: #ffffff;
    transition:
            opacity .25s ease,
            transform .25s ease,
            visibility .25s ease;
}
.ysm-search-link .smart-search-post {
    padding: 0px;
}
.ysm-search-link .autocomplete-suggestion {
    padding: 8px 18px !important;
    border: 0px !important;
}

.ysm-search-link .smart-search-popup {
    background: #f3f3f3;
    border: 0px !important;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    padding-bottom: 12px;
    box-shadow: 0px 8px 16px rgb(0 0 0 / 52%);
}

.ysm-search-link .smart-search-popup .smart-search-view-all {
    text-transform: capitalize;
}
.ysm-search-widget .search-submit:before {
    font-size: 0px !important;
    width: 26px;
    height: 26px;
    background-image: url(https://www.onlineflooringstore.com.au/wp-content/themes/kallyas-child/assets/images/search-icon.svg);
    background-position: center;
    background-size: cover;
}
@media(max-width: 420px){
    .ysm-search-link:not(.active) .ysm-smart-search-input-holder .search-field {
        padding: 0px !important;
        width: 0px !important;
        opacity: 0;
    }
    .ysm-search-link:not(.active) .ysm-smart-search-input-holder .search-submit::before {
        font-size: 22px;
        transform: translate(8px, -2px);
    }
}
@media(max-width: 1024px){
    .ysm-search-link.active {
        height: 100vh;
        top: 20px;
        left: 20px;
        width: 100vw;
        min-width: 100vw;
    }
}

/* ==========================================================================
   END - YSM Search
========================================================================== */