/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
/*************** ADD CUSTOM CSS HERE.   ***************/
body {
	font-family: "Inter", sans-serif;
}
.header-bottom {
	background-image: url(images/bottom-menu.png);
	background-repeat: no-repeat;
	background-position: center;
}
.shop-sidebar {
	padding-top: 30px;
}
.widget-related-products-custom > .row {
	padding: 10px 10px 0 !important;
}
.widget-related-products-custom .has-shadow>.col>.col-inner {
	box-shadow: none;
}
.col.post-item .col-inner:hover .post-title {
	color: var(--primary-color);
}
.archive .col.post-item .col-inner .post-title {
	font-size: 20px;
}
h1.entry-title {
	font-size: 33px;
	color: #000;
}
b, strong {
	font-weight: bold;
}
/* Lớp bao bọc (Parent) */
.hover-custom {
  position: relative;
  overflow: hidden; /* Cực kỳ quan trọng: Giấu vệt sáng khi nó ở ngoài vùng của phần tử */
  /* Các thuộc tính hiện có của bạn (ví dụ: display, padding, border-radius...) cứ giữ nguyên nhé */
}

/* Tạo vệt sáng tráng gương */
.hover-custom::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%; /* Bắt đầu từ bên trái, tít ở ngoài */
  width: 50%; /* Độ rộng của vệt sáng (có thể tăng giảm tùy ý) */
  height: 100%;
  
  /* Tạo màu trắng trong suốt mờ dần ra 2 bên để làm hiệu ứng sáng */
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  
  transform: skewX(-25deg); /* Làm nghiêng vệt sáng cho tự nhiên */
  transition: all 0.7s ease; /* Tốc độ lướt qua (0.7 giây) */
  z-index: 2; /* Đảm bảo vệt sáng nằm đè lên nội dung bên trong (ảnh, text) */
  pointer-events: none; /* Tránh việc vệt sáng chặn các thao tác click chuột */
}

/* Hành động khi Hover */
.hover-custom:hover::before {
  left: 150%; /* Vệt sáng chạy một mạch sang bên phải và biến mất */
}
@media (min-width: 850px) {
	.header-main .header-inner .flex-col.flex-right {
		min-width: 720px;
	}
	.logo {
		position: absolute;
		top: 15px;
	}
	.section-title-bold span {
		height: 40px;
	}
	.section-title-bold span:after {
		content: '';
		display: block;
		height: 40px;
		width: 60px;
		background-image: url(images/right.png);
		background-position: right center;
		position: absolute;
		right: -50px;
		top: 0;
	}
	.col-banner {
		flex-basis: 32.555555%;
		max-width: 32.555555%;
	}
	.col-product-custom {
		flex-basis: 66.555555%;
		max-width: 66.555555%;
	}
}
.widget .widget-title {
    background-color: #0073B7;
    color: #ffffff;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    padding: 14px 10px;
    font-size: 16px;
    display: block;
}
.widget .is-divider {
	display: none;
}
.widget {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.widget ul.menu>li {
	padding: 0 15px;
}
.widget ul.menu>li > a {
	font-size: 14px;
	padding: 6.5px 0;
}

.col-category .col-inner:hover {
	background-color: #01458E !important;
}
.col-category .col-inner:hover * {
	color: #fff;
}

.section-title-bold {
	background-color: #fff;
}
.section-title-bold span {
	border: none;
	background-color: #0078C1;
	color: #fff;
	font-size: 16px;
	background-repeat: no-repeat;
	padding: 10px 15px;
	position: relative;
}
.section-title a {
	font-size: 12px;
	color: #01458E;
	font-weight: normal;
	padding-right: 10px;
}
.section-title-bold b {
	display: none;
}

.product-small.box {
	border: 1px solid #EAEAEA;
	border-radius: 8px;
	background-color: #fff;
}
.product-small.box .box-image {
	border-radius: 8px 8px 0 0;
}
.product-small.box img {
	border-radius: 8px 8px 0 0;
}
.product-small.box .product-title {
	margin-bottom: 10px;
}
.product-small.box .product-title a{
	text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 14px;
    transition: all .2s;
}
.product-small.box:hover .product-title a {
	font-weight: bold;
	color: #01458E;
}
.product-small.box .price del {
	text-decoration: none;
}
.product-small.box .price del .amount {
	text-decoration: line-through;
	font-size: 14px;
	color: #333;
	opacity: .8;
}
.product-small.box .price ins .amount, 
.product-small.box .price .amount {
	color: #EB0000;
	font-size: 16px;
}
.product-small.box .add-to-cart-button {
	margin: 0;
}
.product-small.box .add-to-cart-button a {
	background-color: #0078C1;
	text-transform: none;
	font-size: 14px;
	font-weight: normal;
	border-radius: 8px;
	margin-top: 0;
}

.product-small.box .box-cart {
	display: flex;
	align-items: center;
	margin-top: 10px;
	justify-content: center;
}
.product-small.box .box-cart .read-more-button {
	background-color: #E3E3E3;
	color: #333;
	border-radius: 8px;
	padding: 5px 10px;
}
.product-small.box .box-cart a {
	margin: 2px 10px;
	height: 36px;
	line-height: 36px;
	width: 92px;
	padding: 0 5px !important;
	min-height: auto;
	border: none !important;
}
.icon-box.ckbh .icon-inner {
	background-color: #0078C1;
	border-radius: 99px;
	padding: 20px;
}
.icon-box.ckbh:hover .icon-inner {
	background-color: #01458E;
}

.absolute-footer {
	display: none;
}

.header-button .button.primary:not(.is-outline) {
	background-color: #FF8D00;
	text-transform: none;
	font-weight: normal;
}
.nav-spacing-xlarge>li {
    margin: 0 20px;
}

.support-item {
	background-image: url(images/Layer_1.png);
	background-repeat: no-repeat;
	background-position: top 5px left;
}
.support-item-2 {
	background-image: url(images/Layer_2.png);
	background-repeat: no-repeat;
	background-position: top 5px left;
}

/* Container chính của Widget */
.custom-support-widget {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Phần Tiêu đề */
.custom-support-widget .support-header {
    background-color: #0073B7; /* Màu xanh nước biển */
    color: #ffffff;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    padding: 9px 10px;
    font-size: 16px;
}

/* Phần Ảnh đại diện */
.custom-support-widget .support-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Phần Thân chứa Hotline */
.custom-support-widget .support-body {
    padding: 20px 15px;
}

/* Từng block nhân viên */
.custom-support-widget .support-item {
    display: flex;
    align-items: flex-start;
}

/* Tái tạo Icon Nam/Nữ bằng CSS (Thay thế bằng ảnh SVG base64 cho tiện) */


/* Các đoạn Text bên trong */
.custom-support-widget .support-info {
    display: flex;
    flex-direction: column;
}

.custom-support-widget .support-label {
    color: #666;
    font-size: 14px;
    padding-left: 50px;
}

.custom-support-widget .support-phone {
    color: #333;
    font-size: 18px;
    margin-bottom: 8px;
    padding-left: 50px;
    font-weight: bold;
}

.custom-support-widget .support-email {
    color: #555;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.custom-support-widget .support-email svg {
    color: #666;
    position: relative;
    top: -2px;
}

/* Đường kẻ ngang chia cách */
.custom-support-widget .support-divider {
    border: 0;
    border-top: 1px solid #D3D3D3;
    margin: 15px 0;
    opacity: 1;
}

.blog-custom .box-image,
.blog-custom .box-image img {
	border-radius: 10px 10px 0 0;
}
.blog-custom .custom-loop-meta {
	position: absolute;
    top: -17px;
    right: 0;
    background-color: #0078C1;
    color: #fff;
    padding: 7px 10px;
    border-radius: 6px 0px 0px 6px;
    font-size: 12px;
}
.blog-custom .post-title {
	font-size: 18px;
}
.blog-custom .from_the_blog_excerpt {
	font-size: 14px;
	color: #333;
}
.blog-custom:hover .from_the_blog_excerpt {
	color: #0078C1;
}

.product-info del {
	text-decoration: none;
}
.product-info del .amount {
	font-size: 16px;
	color: #333;
	opacity: .8;
	text-decoration: line-through;
}
.product-info ins .amount, 
.product-info .amount {
	font-size: 28px;
	color: #EB0000;
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}