.header-banner{
	background-color:rgb(67,112,135);
}

.page-title-default{
	background-color:#0a0a0a;
	background-size:cover;
	background-position:center center;
}

.footer-container{
	background-color:#f4f4f4;
}

:root{
--wd-text-font:"Raleway", Arial, Helvetica, sans-serif;
--wd-text-font-weight:400;
--wd-text-color:rgb(0,0,0);
--wd-text-font-size:14px;
}
:root{
--wd-title-font:"Raleway", Arial, Helvetica, sans-serif;
--wd-title-font-weight:600;
--wd-title-color:rgb(45,97,96);
}
:root{
--wd-entities-title-font:"Raleway", Arial, Helvetica, sans-serif;
--wd-entities-title-font-weight:500;
--wd-entities-title-color:#666666;
--wd-entities-title-color-hover:rgb(45, 97, 96);
}
:root{
--wd-alternative-font:"Raleway", Arial, Helvetica, sans-serif;
}
:root{
--wd-widget-title-font:"Raleway", Arial, Helvetica, sans-serif;
--wd-widget-title-font-weight:600;
--wd-widget-title-transform:uppercase;
--wd-widget-title-color:rgb(0,0,0);
--wd-widget-title-font-size:16px;
}
:root{
--wd-header-el-font:"Raleway", Arial, Helvetica, sans-serif;
--wd-header-el-font-weight:400;
--wd-header-el-transform:uppercase;
--wd-header-el-font-size:12px;
}
html .product_title{
	font-family: "Raleway", Arial, Helvetica, sans-serif;font-weight: 600;text-transform: capitalize;
}

html .wd-nav.wd-nav-main > li > a{
	font-family: "Raleway", Arial, Helvetica, sans-serif;font-weight: 600;
}

:root{
--wd-primary-color:rgb(43,97,97);
}
:root{
--wd-alternative-color:#fbbc34;
}
:root{
--wd-link-color:#333333;
--wd-link-color-hover:#242424;
}
:root{
--btn-default-bgcolor:rgb(46,97,100);
}
:root{
--btn-default-bgcolor-hover:#efefef;
}
:root{
--btn-shop-bgcolor:rgb(46,97,100);
}
:root{
--btn-shop-bgcolor-hover:rgb(46,97,100);
}
:root{
--btn-accent-bgcolor:#83b735;
}
:root{
--btn-accent-bgcolor-hover:#6ca300;
}
:root{
--notices-success-bg:#459647;
}
:root{
--notices-success-color:#fff;
}
:root{
--notices-warning-bg:#E0B252;
}
:root{
--notices-warning-color:#fff;
}
	:root{
			--wd-form-brd-radius: 35px;
	
	
	
	--wd-form-brd-width: 2px;

	--btn-default-color: #333;
	--btn-default-color-hover: #333;

	--btn-shop-color: #fff;
	--btn-shop-color-hover: #fff;

	--btn-accent-color: #fff;
	--btn-accent-color-hover: #fff;
			--btn-default-brd-radius: 0px;
		--btn-default-box-shadow: none;
		--btn-default-box-shadow-hover: none;
		--btn-default-box-shadow-active: none;
		--btn-default-bottom: 0px;
	
	
			--btn-accent-brd-radius: 0px;
		--btn-accent-box-shadow: none;
		--btn-accent-box-shadow-hover: none;
		--btn-accent-box-shadow-active: none;
		--btn-accent-bottom: 0px;
	
	
			--btn-shop-bottom-active: -1px;
		--btn-shop-brd-radius: 0px;
		--btn-shop-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
		--btn-shop-box-shadow-hover: inset 0 -2px 0 rgba(0, 0, 0, .15);
	
	
	
	
	
	
	
		}

	/* Site width */
		/* Header Boxed */
	@media (min-width: 1025px) {
		.whb-boxed:not(.whb-sticked):not(.whb-full-width) .whb-main-header {
			max-width: 1192px;
		}
	}

	.container {
		max-width: 1222px;
	}
	
	
		.elementor-section.wd-section-stretch > .elementor-column-gap-no {
			max-width: 1192px;
		}

		.elementor-section.wd-section-stretch > .elementor-column-gap-narrow {
			max-width: 1202px;
		}

		.elementor-section.wd-section-stretch > .elementor-column-gap-default {
			max-width: 1212px;
		}

		.elementor-section.wd-section-stretch > .elementor-column-gap-extended {
			max-width: 1222px;
		}

		.elementor-section.wd-section-stretch > .elementor-column-gap-wide {
			max-width: 1232px;
		}

		.elementor-section.wd-section-stretch > .elementor-column-gap-wider {
			max-width: 1252px;
		}

		@media (min-width: 1239px) {

			.platform-Windows .wd-section-stretch > .elementor-container {
				margin-left: auto;
				margin-right: auto;
			}
		}

		@media (min-width: 1222px) {

			html:not(.platform-Windows) .wd-section-stretch > .elementor-container {
				margin-left: auto;
				margin-right: auto;
			}
		}

	
/* Quick view */
div.wd-popup.popup-quick-view {
	max-width: 920px;
}

/* Shop popup */
div.wd-popup.wd-promo-popup {
	max-width: 600px;
}

/* Age verify */
div.wd-popup.wd-age-verify {
	max-width: 500px;
}

/* Header Banner */
.header-banner {
	height: 0px;
}

body.header-banner-display .website-wrapper {
	margin-top:0px;
}

/* Tablet */
@media (max-width: 1024px) {
	/* header Banner */
	.header-banner {
		height: 0px;
	}
	
	body.header-banner-display .website-wrapper {
		margin-top:0px;
	}
}

.woodmart-woocommerce-layered-nav .wd-scroll-content {
	max-height: 280px;
}
		
@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: "woodmart-font";
	src: url("//hibeauty.vn/wp-content/themes/woodmart/fonts/woodmart-font.woff2?v=6.1.4") format("woff2"),
	url("//hibeauty.vn/wp-content/themes/woodmart/fonts/woodmart-font.woff?v=6.1.4") format("woff");
}

.tagged_as {
	display: none!important;
}
/* Nhãn giảm giá -15% siêu to đỏ */
.single-product .product-labels .onsale {
    background-color: #ff0000 !important;
    font-size: 30px !important;
    font-weight: 900 !important;
    padding: 5px 5px !important;
}

/* Giá đang bán (số phía sau) màu đỏ */
.single-product p.price ins .woocommerce-Price-amount.amount bdi {
    color: #ff0000 !important;
}
/* Ký hiệu ₫ phía sau cũng màu đỏ */
.single-product p.price ins .woocommerce-Price-currencySymbol {
    color: #ff0000 !important;
}
/* menu cha */
.wd-header-nav .wd-nav-main > li > a {
    color: #fff !important;
}

/* submenu */
.wd-header-nav .wd-sub-menu a {
    color: #000 !important;
}

/* hover submenu */
.wd-header-nav .wd-sub-menu a:hover {
    color: #2d6160 !important;
}
/**/
/* 1. KHUNG CHỨA TRƯỢT NGANG */
.topbar-slider {
    width: 350px !important; /* Độ rộng khung hiển thị */
    height: 35px !important;
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

/* 2. ĐƯỜNG RAY TRƯỢT NẤC - NHỊP VỤT NHANH, DỪNG LÂU */
.slider-track {
    display: flex !important;
    flex-direction: row !important;
    /* 25 giây cho vòng lặp, nhịp vụt nhanh và dừng hẳn để đọc */
    animation: smoothSlide 25s cubic-bezier(0.65, 0, 0.35, 1) infinite !important;
}

/* 3. FONT CHỮ VÀ STYLE MỚI (SANG TRỌNG) */
.slide-item {
    min-width: 350px !important; /* Bằng với chiều rộng khung chứa */
    flex-shrink: 0 !important;
    /* Font Inter hiện đại, bạn có thể thay bằng Montserrat nếu thích */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: flex !important;
    align-items: center !important;
    
    /* Màu Gradient đỏ đô quý phái */
    background: linear-gradient(135deg, #11886b, #2d6160) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    position: relative !important;
}



/* 5. ANIMATION TRƯỢT NGANG 10 BƯỚC */
@keyframes smoothSlide {
    0%, 9% { transform: translateX(0); }
    10%, 19% { transform: translateX(-350px); }
    20%, 29% { transform: translateX(-700px); }
    30%, 39% { transform: translateX(-1050px); }
    40%, 49% { transform: translateX(-1400px); }
    50%, 59% { transform: translateX(-1750px); }
    60%, 69% { transform: translateX(-2100px); }
    70%, 79% { transform: translateX(-2450px); }
    80%, 89% { transform: translateX(-2800px); }
    90%, 99% { transform: translateX(-3150px); }
    100% { transform: translateX(-3500px); }
}

/* ANIMATION VỆT SÁNG QUÉT MẶT CHỮ */
@keyframes shineSweep {
    0% { left: -150%; }
    15% { left: 150%; }
    100% { left: 150%; }
}
/* 1. CĂN CHỈNH TỔNG THỂ KHUNG CHỨA */
.topbar-slider {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important; /* Khoảng cách giữa icon và chữ */
    position: relative !important;
}

/* 2. ĐỊNH DẠNG LẠI ICON (IMAGE) */
.top-icon {
    width: 22px !important;  /* Chỉnh kích thước icon vừa vặn */
    height: auto !important;
    object-fit: contain !important;
    flex-shrink: 0 !important; /* Không cho icon bị bóp méo */
    z-index: 10 !important;    /* Nằm trên cùng */
    
    /* Hiệu ứng nhún nhảy nhẹ cho sinh động (tùy chọn) */
    animation: giftBounce 2s ease-in-out infinite;
}

/* 3. HIỆU ỨNG NHÚN NHẢY CHO ICON */
@keyframes giftBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
@keyframes marqueeStep {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Chỉ chạy đến 50% là tự reset về 0 */
}
/**/
/* 1. ĐỊNH VỊ CỘT CHỨA SEARCH */
/* Ép cột chứa Search phải làm chuẩn để bảng con bám theo */
.whb-col-center, .whb-col-left, .whb-col-right {
    position: relative !important;
}

/* 2. THIẾT KẾ BẢNG GỢI Ý (DỌC) */
.custom-search-suggestions {
    display: none; 
    position: absolute;
    top: 100%; /* Dính sát dưới thanh search */
    left: -790px;
    width: 100%; /* Rộng bằng thanh search */
    min-width: 725px; /* Không quá nhỏ */
    background: #fff;
    z-index: 9999;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    padding: 15px;
    border: 1px solid #eee;
    margin-top: 25px;
    flex-direction: column !important;
		border-radius: 25px
}

/* 3. HIỆU ỨNG HIỂN THỊ KHI CLICK (FOCUS) */
/* Khi nhấn vào ô input thì hiện bảng gợi ý */
.wd-search-form:focus-within ~ .custom-search-suggestions {
    display: flex !important;
}

/* 4. TỰ ĐỘNG ẨN KHI GÕ CHỮ (HIỆN KẾT QUẢ THẬT) */
/* Khi Woodmart bắt đầu hiện kết quả AJAX, nó thêm class .wd-search-results-display */
.wd-search-results-display .custom-search-suggestions,
.wd-search-results-display ~ .custom-search-suggestions {
    display: none !important;
}

/* 5. DECOR NỘI DUNG BÊN TRONG CHO ĐẸP */
.suggestion-column {
    padding: 10px 0;
}
.suggestion-column:not(:last-child) {
    border-bottom: 1px dashed #eee;
}
.suggestion-column h4 {
    font-size: 14px;
    color: #222;
    margin-bottom: 8px;
    font-weight: 700;
}
.suggestion-column h4 i {
    color: #fb0202; /* Màu icon đỏ cho nổi */
    margin-right: 5px;
}
.suggestion-column ul {
    list-style: none !important;
    padding: 0 !important;
}
.suggestion-column ul li a {
    font-size: 14px;
    color: #666;
    padding: 3px 0;
    display: block;
}
.suggestion-column ul li a:hover {
    color: #83b735;
    padding-left: 5px;
}
/**/
.wd-search-cat.wd-scroll {
    display: none !important;
}
/**/
/* Style cho danh sách từ khóa */
.popular-keywords {
    list-style: none !important;
    padding: 10px 0 !important;
    margin: 0 !important;
		display: flex !important;
		flex-wrap: wrap;
	  gap: 15px;
		align-items: center; 
}

/* Style mặc định của từ khóa */
.popular-keywords li span.fill-search {
    cursor: pointer;
    display: inline-flex;
    padding: 6px 15px;
    background: #f8f8f8; /* Màu nền xám nhạt */
    color: #333;
    border-radius: 20px; /* Bo tròn kiểu tag */
    font-size: 13px;
    font-weight: 500;
    border: 1px solid #eee;
    position: relative;
		backface-visibility: hidden; 
    will-change: transform;
}
.popular-keywords li {
    margin: 0 !important;
    padding: 0 !important;
}

.popular-keywords li a {
    text-decoration: none !important;
    display: inline-block !important;
    line-height: 1 !important;
}

/* HIỆU ỨNG HOVER */
.popular-keywords li span.fill-search:hover {
    background: #2d6160;
    color: #fff !important; 
}
/**/
/* Dàn hàng ngang cho Hot Brand */
.brand-horizontal {
    display: flex !important;
    flex-wrap: wrap;
    gap: 20px; /* Khoảng cách giữa các logo */
    align-items: center;
}

.brand-horizontal li {
		 flex: 0 0 calc(25% - 15px) !important; /* 🔥 ép 4 cột */
    max-width: calc(25% - 15px) !important;
    display: flex;
    justify-content: center;
}

/* Chỉnh kích thước logo to hơn */
.brand-logo {
    width: 120px !important; /* Tăng độ rộng logo lên 80px */
    height: 80px !important; /* Độ cao cố định để đều hàng */
    object-fit: contain; /* Giữ đúng tỷ lệ ảnh không bị móp */
    transition: all 0.3s ease;
    opacity: 0.7;
}

/* Hover cho logo Brand */
.brand-logo:hover {
    opacity: 1;
    transform: scale(1.1); /* Phóng to nhẹ */
}
/* ❗ override thằng theme */
.hot-deals-list.brand-horizontal {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px;
}

/* ❗ ép 4 cột */
.hot-deals-list.brand-horizontal li {
    flex: 0 0 calc(25% - 15px) !important;
    max-width: calc(25% - 15px) !important;
    width: calc(25% - 15px) !important;
    
    display: flex !important;
    justify-content: center;
}
/**/
/* Sửa lỗi hover làm giãn khung cho phần Keywords */
.popular-keywords {
    padding: 10px 0 !important;
    min-height: 50px;
}
/**/
.wd-dropdown-results {
    width: 725px !important;
    
    left: -0px !important; 
    border-radius: 25px !important;
    background: #fff !important;
    padding: 20px !important; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
    transform: none !important;
    overflow-y: auto !important;
}

.autocomplete-suggestion {
    padding: 15px 10px !important; 
    margin: 0 5px !important; 
    border-bottom: 1px dashed #eee !important;
}

/* 3. LÀM ĐẸP THANH CUỘN (SCROLLBAR) */
.wd-dropdown-results::-webkit-scrollbar {
    width: 5px;
}
.wd-dropdown-results::-webkit-scrollbar-thumb {
    background: #83b735; /* Màu xanh Woodmart */
    border-radius: 10px;
}
/* Hot deal */
/* 1. THIẾT LẬP KHUNG TỔNG CHO CỘT HOT DEAL */
.suggestion-column:nth-child(2) {
    background: linear-gradient(135deg, #11886b, #2d6160) !important;
    border-radius: 15px !important;
    padding: 15px !important;
    margin: 10px 0 !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(204, 0, 0, 0.15) !important;
}

/* 2. CHỈNH TIÊU ĐỀ TRẮNG CHO NỔI */
.suggestion-column:nth-child(2) h4 {
    color: #fff !important;
    margin-bottom: 15px !important;
    font-size: 15px !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.suggestion-column:nth-child(2) h4 i {
    color: #ffeb3b !important; /* Icon tia sét màu vàng */
}

/* 3. ÉP 3 DEAL DÀN HÀNG NGANG */
.hot-deals-list {
    display: flex !important;
    flex-direction: row !important; /* Dàn hàng ngang */
    gap: 10px !important;           /* Khoảng cách giữa 3 nút */
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

.hot-deals-list li {
    flex: 1 !important;             /* Chia đều 3 cột bằng nhau */
    margin: 0 !important;
    min-width: 0;                   /* Để flex không bị vỡ */
}

.hot-deals-list li a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    padding: 8px 5px !important;
    border-radius: 8px !important;
    font-size: 12px !important;     /* Chỉnh cỡ chữ nhỏ lại để vừa hàng ngang */
    font-weight: 700 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important; /* Chặn rớt dòng */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s ease !important;
    height: 100% !important;        /* Cho 3 cái cao bằng nhau */
}

/* 4. HIỆU ỨNG HOVER */
.hot-deals-list li a:hover {
    background: #ffffff !important;
    color: #cc0000 !important;
    transform: translateY(-3px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
@media (min-width: 577px) and (max-width: 767px) {
	.woodmart-hover-quick .woodmart-add-btn {
	display:none;
}
}

@media (max-width: 576px) {
	.woodmart-hover-quick .woodmart-add-btn {
	display:none;
}
}