/*
Theme Name: Flatsome Child
Description: NamKiem developed for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.11.3
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
@keyframes scrollX {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

.bg-home .row-box-shadow-1-hover .col-inner:hover {
    transform: translateY(-5px);
    box-shadow: 0 1px 3px -2px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
}

.form-flat input:not([type="submit"]), .form-flat textarea, .form-flat select{
	background-color: rgba(255, 255, 255, 0.3);
	
}
.title-heading h2 {
	color : #1E73BE;
}
/*header*/
.icon-header h5{
	margin-bottom:0px;
	text-transform:uppercase;
	font-size:16px;
}

.icon-header span{
	font-size:14px;

}
.icon-header .col{
	padding:0px;
}
.logo-left .logo {
	margin-left: 0;
	margin-right: 100px;
}
/* Màu mặc định */
.nav > li > a {
    padding: 5px;
    font-size: 100%;
    color: #464444;
    text-decoration: none;
}

/* Hover */
.nav > li > a:hover {
    color: #1e73be;
}


/* Khi trang hiện tại được chọn */
.nav > li.active > a,
.nav > li.current > a {
    color: #464444;
    font-weight: bold;
}

/* Đảm bảo các mục con trong dropdown cũng được thay đổi màu */
.nav-dropdown li > a:hover,
.nav-dropdown li.active > a {
    color: #1e73be;
}


/*icon danh muc*/
.icon-dm{
	border:1px solid #1e73be;;
	padding: 10px 0;
	border-radius: 15px;
}
.icon-dm .col{
	/* padding:0px 15px 0px; */
	padding:0px ;
}
.icon-dm h5{
	font-size:13px !important;
	font-size:95%;
	color : #1e73b3;
}
.icon-dm .icon-box .icon-box-img {
	margin-bottom: 0.5em;
	max-width: 100%;
	position: relative;
}
.icon-dm-nam {
	border-left: 1px dashed #ddd;
} 
/* Viền trong danh mục */
.row-solid .col:before {
    border-left: none; /* Tắt viền */
    content: none; /* Loại bỏ nội dung */
    height: 0; /* Đặt chiều cao bằng 0 */
    position: static; /* Trả vị trí về mặc định */
}
@media screen and (max-width: 549px){
	.icon-dm h5{
		font-size:52%;
		font-weight:700;
	}
	.icon-dm .icon-box-img{
		width:40px !important;
	}
}
@media screen and (max-width: 549px){
	.icon-dm{border: none;}
	.icon-dm-left{
		border:1px solid #ddd;

	}
	.icon-dm-right{

		border:1px solid #ddd;
		border-top:none;
	}
	.icon-dm-center{
		
		border:1px solid #ddd !important;
		 border-bottom: 1px solid #ddd !important;
	}
}
@media screen and (max-width: 549px){
	.header.transparent {
		position:relative;
	}}
/* title */
.title_module {
    margin-bottom: 2rem;
    margin-top: 0rem;
    position: relative;
    text-align: center; /* Căn giữa toàn bộ tiêu đề */
}

.title_module h2 {
    display: inline-block;
    vertical-align: top;
    margin: 0;
    line-height: 1.5; /* Điều chỉnh khoảng cách dòng hợp lý */
    font-weight: 700;
    padding-bottom: 0;
    color: #1e73be; 
    font-size: 32px; /* Đảm bảo kích thước chữ lớn vừa phải */
    text-align: center; /* Căn giữa chữ */
}

.title_module h2 a, 
.title_module h2 p {
    font-size: 32px;
    margin: 0;
    color: #1e73be; 
    text-align: center; /* Căn giữa chữ nếu có liên kết hoặc đoạn văn */
}

.title_module h2 span {
    display: block;
    text-align: center; /* Căn giữa chữ */
    font-size: 14px;
    color: #464444; 
    font-weight: 400;
    font-family: "Roboto", sans-serif;
    line-height: 1.3; /* Điều chỉnh khoảng cách dòng cho span */
    margin-top: 0.5rem; /* Tạo khoảng cách nhỏ trên/dưới nếu cần */
}


/* Loại bỏ hiệu ứng hover cho tiêu đề */
.title_module h2 a:hover, 
.title_module h2:hover {
    color: #1e73be; 
    background: none; 
    text-decoration: none;
}

/*sanpham*/
/* Tên sản phẩm */
p.name.product-title a {
    color: #464444; 
    text-decoration: none; 
    display: -webkit-box; 
    -webkit-line-clamp: 1; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}
.has-hover:hover p.name.product-title a {
	color:#2659f3;
}

/* Hiển thị thông tin liên hệ nếu có */
p.product-contact {
    font-size: 20px;
    color: #1e73be; /* Màu cố định cho liên hệ */
    margin-top: 5px; /* Khoảng cách giữa tên và liên hệ */
    font-weight: bold;
}

span.amount {
    color: #1E73BE;
    font-weight: 700;
    white-space: nowrap;
	
}
span.amount :hover {
    color: #2659f3;
    font-weight: 700;
    white-space: nowrap;
}
bdi {
    line-height: 1.3;
    margin-bottom: .1em;
    margin-top: .1em;
}

a.icon-circle:hover, a.remove:hover, a:hover {
    color: #1E73BE;
}



.reversed-arrow {
	transform: translateY(calc(100% + 50px)) rotateY(180deg) !important;
    left: inherit !important;
    right: 50%;
}
.box-arow .box {
	position: absolute;
    left: 50%;
    transform: translateX(-100%);
}
.box-arow .col-inner .step {
	color: #007FC1;
    font-size: 50px;
    margin-bottom: 10px;
	font-weight: 500;
}
.box-arow .col-inner .step-content {
	color: #007FC1;
    font-size: 25px;
    margin-bottom: 10px;
    line-height: 1.2;
	font-weight: 500;
}
.box-arow .align-middle:not(:last-child){
	 margin-bottom: 170px;
}
.box-arow .arrows_steps {
	position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateY(calc(100% + 50px));
}
/* Kết thúc */
.anh-quy-trinh {
	background-size: cover; 
	border-radius: 20px;
	overflow: hidden; 
}





/*footer*/
.footer-wrapper li{
	list-style:circle;
}
.form-flat input:not([type="submit"]), .form-flat textarea, .form-flat select,.form-flat button, .form-flat input{
	border-radius: 5px;
}
.sago-footer h2 {
    font-size: 110%;
    color: #1e73be; /* Màu chữ mới */
}

.sago-footer li{
	margin-left:0px !important;
	list-style:none;
}

.absolute-footer{
	display:none;
}
.sago-footer i{
	font-size:90%;
	color:#082148 !important;
	width:15px;
	height:15px;
}
/*chi tiet sp*/
.add-border-top {
	border-top:1px solid #dedede;
}
.add-padding{
	padding:10px 0px;
}
.woo-variation-swatches-stylesheet-enabled .variable-items-wrapper .variable-item:not(.radio-variable-item).selected, .woo-variation-swatches-stylesheet-enabled .variable-items-wrapper .variable-item:not(.radio-variable-item).selected:hover {
	box-shadow: 0 0 0 2px rgb(205, 24, 24,.5);
	background: url(http://demo17.43web.xyz/wp-content/uploads/2019/08/bg-variant-checked.png) no-repeat right bottom #fff;
	z-index:1;
	position:relative ;
}

/* Kích thước ảnh trong phần chi tiết sản phẩm */
.product-details img {
    width: 500px;
    height: 497px;
    object-fit: cover; /* Đảm bảo hình ảnh giữ đúng tỷ lệ */
}

/*Bộ lọc sản phẩm*/
.woof label {
	margin-top: 10px;

	margin-left: 12px;
}
.woof_container_inner h4 {
	border-left: 8px solid #ff2a2d;
	background: #f5f5f5;
	padding: 3px 8px;
}

.chosen-container-single .chosen-single{
	background:#fff;
	border-radius:0px;
	height:28px !important; 
}
.woof_container_inner_size li,.woof_container_pa_mau-sac li {
	display: inline-table;
}
/*page-title*/
.shop-page-title{
	background:#f5f5f5;
}
.page-title-inner{
	padding-top:0px;
}
.page-wrapper{
	padding-top:0px !important;
}

/* Toàn bộ nội dung */
.content-son {
    display: flex; /* Dùng flexbox */
    flex-direction: column; /* Căn theo chiều dọc */
    align-items: center; /* Căn giữa theo chiều ngang */
    justify-content: center; /* Căn giữa theo chiều dọc */
    text-align: center; /* Chữ nằm ở giữa */
    height: 100vh; /* Chiều cao bao phủ toàn màn hình */
    background-color: #007bff; /* Màu nền xanh */
    padding: 20px; /* Khoảng cách nội dung */
}

/* Tiêu đề chính */
.title-son {
    font-size: 200%; /* Kích thước chữ lớn */
    color: white; /* Màu chữ */
    margin-bottom: 10px; /* Khoảng cách dưới */
}

/* Phụ đề */
.subtitle-son {
    font-size: 120%; /* Kích thước chữ phụ đề */
    color: white; /* Màu chữ */
    margin-bottom: 20px; /* Khoảng cách dưới */
}

/* Nút bấm */
.custom-button-son {
    background-color: #fcf8ad; /* Màu nền trong */
    color: black; /* Màu chữ */
    font-size: 12px; /* Kích thước chữ */
    font-weight: bold; /* Đậm chữ */
    border: 2px solid white; /* Viền trắng */
    border-radius: 20px; /* Góc bo tròn */
    padding: 8px 15px; /* Khoảng cách trong, nút nhỏ lại */
    text-align: center; /* Căn giữa chữ */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Đổ bóng nhẹ */
    cursor: pointer; /* Hiệu ứng con trỏ */
    transition: all 0.3s ease; /* Hiệu ứng khi hover */
}

.custom-button-son:hover {
    background-color: white; /* Màu nền khi hover */
    color: black; /* Màu chữ khi hover */
    border-color: white; /* Viền giữ nguyên màu trắng */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* Tăng đổ bóng */
    transform: scale(1.05); /* Phóng to nhẹ khi hover */
}

/*
Css menu đa cấp cho Flatsome
*/
@media (min-width: 850px) {
    header#header .nav-dropdown {
        display: block;
    }
    header#header .nav-dropdown ul.sub-menu {
        position: absolute;
        left: 100%;
        top: 0;
        background: #fff;
        width: 250px;
		height: auto;
        padding: 0;
        display: none !important;
        border-radius: 5px;
        -webkit-box-shadow: 1px 1px 15px rgb(0 0 0 / 15%);
        box-shadow: 1px 1px 15px rgb(0 0 0 / 15%);
    }
    header#header .nav-dropdown ul.sub-menu a {
        white-space: normal;
        margin: 0;
        padding: 10px 15px;
        border: 0;
        font-weight: 400;
        font-size: 14px; /* Chỉnh kích thước font chữ của danh mục con */
    }
    header#header .nav-dropdown li:hover > ul.sub-menu {
        display: block !important;
    }
    header#header .nav-dropdown li {
        border-right: 0;
        white-space: normal;
        width: 100%;
        display: block;
        position: relative;
    }
    header#header .nav-dropdown li.menu-item-has-children > a {
        font-weight: 400;
        text-transform: none;
        color: rgba(102, 102, 102, .85);
		 font-size: 13px !important;
		font-family: 'Roboto', sans-serif;
    }
    header#header .nav-dropdown li.active > a {
        color: #e82c2a;
    }
}
/* Nút trên banner */
.btn-trang {
		font-weight: bolder !important;
    line-height: 55px;
    color: #007fc1 !important;
    overflow: hidden;
    position: relative;
    display: inline-block;
	
}
/* footer */
.col-footer {
  padding: 0; /* Xóa padding mặc định */
  list-style-type: none; /* Loại bỏ các dấu chấm đầu dòng */
}

.col-footer li {
  margin-bottom: 10px; /* Tạo khoảng cách giữa các dòng */
}

.col-footer a {
  text-decoration: none; /* Loại bỏ gạch chân liên kết */
  color: #ffffff; /* Màu chữ */
  font-size: 16px; /* Kích thước chữ */
}

.col-footer a:hover {
  color: #007BFF; /* Thay đổi màu chữ khi hover */
}
/* button test cho banner */
.fixed-button {
  color: #000; /* Màu chữ đen */
  background-color: #f0f0f0; /* Màu nền nhạt để nổi bật chữ (có thể thay đổi) */
  border: 1px solid #ccc; /* Đường viền xám nhạt */
  font-size: 16px; /* Kích thước chữ cố định */
  padding: 10px 20px; /* Khoảng cách bên trong nút (top-bottom: 10px, left-right: 20px) */
  display: inline-block; /* Đảm bảo button không bị co */
  text-align: center; /* Canh giữa văn bản */
  cursor: pointer; /* Hiển thị con trỏ dạng pointer khi di chuột qua */
  width: 150px; /* Độ rộng cố định */
  height: 50px; /* Độ cao cố định */
  white-space: nowrap; /* Ngăn văn bản xuống dòng */
}

.fixed-button:hover {
  background-color: #e0e0e0; /* Màu nền khi hover */
}

/* Tăng kích thước chữ cho nút "Liên hệ / Contact Us" */
.lien-he-price {  
    font-weight: bold; /* Làm chữ đậm hơn (tùy chọn) */
}
/* Slider container */
.swiper-container {
    width: 100%;
    max-width: 1920px; /* Đảm bảo chiều rộng tối đa là 1920px */
    height: auto; /* Tự động điều chỉnh chiều cao */
    aspect-ratio: 1920 / 600 !important; /* Đảm bảo tỷ lệ khung hình là 1920:800 */
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

/* Slide images */
.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Đảm bảo ảnh lấp đầy toàn bộ khung mà không bị méo */
    display: block;
}

/* Optional: Adjust padding or margin for better design */
.banner-wrapper {
    padding: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 1920px;
    overflow: hidden;
}

/*
Css menu đa cấp cho Flatsome
Author: levantoan.com
*/
@media (min-width: 850px) {
	
	}
	header#header .nav-dropdown {
		padding: 0;
		min-width: 280px;
		left: 0px;
	
	}

	header#header .nav-dropdown ul.sub-menu {
		position: absolute;
        left: 100%;
        top: 0;
        background: #fff;
        width: 300px;
        border-radius: 5px;
        box-shadow: 1px 1px 15px rgb(0 0 0 / 15%);
        min-width: 260px;
        padding: 20px 0;
        text-align: left;
        transition: opacity .25s, visibility .25s;
		display: none !important;
		
	}

	header#header .nav-dropdown ul.sub-menu a {
		border-bottom: 1px solid #ececec;
    margin: 0 10px;
    padding-left: 0;
    padding-right: 0;
		display: block;
		transition: all .2s;
		line-height: 1.3;
    width: auto;
	}
	header#header .nav-dropdown ul.sub-menu a:before {
		content: "\f061";
        font-family: "FontAwesome";
        font-weight: 900;
        position: absolute;
        top: 50%;
        left: 20px;
        transform: translate(0, -50%);
        font-size: 12px;
        transition: all 200ms linear;
        opacity: 0;
	}
	header#header .nav-dropdown ul.sub-menu a:hover:before  {
		opacity: 1;
	}
	header#header .nav-dropdown ul.sub-menu :hover a {
		transition: all 200ms linear 0ms;
		padding-left: 15px;
		color: #1e73be;
	}

	header#header .nav-dropdown li:hover>ul.sub-menu {
		display: block !important;
	}

	header#header .nav-dropdown li {
		border-right: 0;
		white-space: normal;
		width: 100%;
		display: block;
		position: relative;
		padding: 0 15px;
	}

	header#header .nav-dropdown li.menu-item-has-children>a {
		font-weight: 400;
		font-size: 100%;
		text-transform: none;
		color: rgba(102, 102, 102, .85);

	}

	header#header .nav-dropdown li.active>a {
		color: #1e73be;
	}

	header#header .nav-dropdown li.menu-item-has-children:hover>a {
		color: #1e73be;
		padding-left: 15px;
	}

	.nav-dropdown.nav-dropdown-default>li:hover>a {
		transition: all 200ms linear 0ms;
		padding-left: 15px;
		color: #d22e25;/*Tết */
	}

	.nav-dropdown.nav-dropdown-default > li > a:before {
    content: "\f061";
    font-family: "FontAwesome";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translate(0, -50%);
    font-size: 12px;
    transition: all 200ms linear;
    opacity: 0;
}

.nav-dropdown.nav-dropdown-default > li > a:hover:before {
    opacity: 1;
}

	/* Thêm mũi tên Font Awesome cho menu cha */
	header#header .nav-dropdown li.menu-item-has-children>a::after {
		font-family: "FontAwesome";
		content: "\f0da";
		font-weight: 900;
		font-size: 12px;
		position: absolute;
		right: 20px;
		color: rgba(102, 102, 102, .85);
		margin-left: 5px;
		top: 50%;
		transform: translateY(-50%);
	}

	/* Đổi màu mũi tên khi hover */
	header#header .nav-dropdown li.menu-item-has-children:hover>a::after {
		color: #1e73be;
	}
/* Màu giá và liên hệ cho sản phẩm mới và sản phẩm bán cháy */
p.product-price,
p.product-contact {
    color: #464444 !important; /* Màu cố định là #1e73be */
}
.swiper-slide {
    background-color: #ffffff; 
    display: block;
}
.swiper-layout {
    background-color: #ffffff; 
    display: block;
}



/* CSS thanh menu logo cách điệu */
.header-logo {
    position: relative;
    z-index: 10; /* (Hoặc bất kỳ số nào lớn hơn 0) */
}
@media (min-width: 769px), print {
	.header-main:before{
		content: "";
		display: block;
		position: absolute;
		/* 		width: calc(200px + 246px); */
		width: calc((100% - 1375px) / 2 + 20px + 246px);
		height: 100%;
		top: 0;
		left: 0;
		border-right: 1.5px solid #fde4ce;
		/* 		background: #1e73be linear-gradient(135deg, #1e73be 0%, #1e73be 59.9%, #1c7bbf 100%); */
		background: #fff;
		-webkit-border-radius: 0 60px 60px 0;
		-moz-border-radius: 0 60px 60px 0;
		-ms-border-radius: 0 60px 60px 0;
		border-radius: 0 60px 60px 0;
	}



/* CSS máy tính bảng ( table ) */
@media only screen and (max-width: 768px) {
    /* Thay đổi cho logo trên máy tính bảng */
    .logo-left .logo {
        margin-right: 0;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
	.qt-thiet-keson {
    width: 100%; /* Độ ngang full row */
	height : 250px;
    background-color: white; /* Màu nền */
    color: #464444; /* Màu chữ mặc định */
    display: block; /* Đảm bảo class chiếm toàn bộ hàng */
    margin: 0; /* Loại bỏ khoảng cách bên ngoài nếu cần */
    padding: 0 20px; /* Cách trái và phải 20px */
    border: 2px solid #D3D3D3; /* Bo viền màu đen dày 2px */
    box-sizing: border-box; /* Đảm bảo padding không ảnh hưởng đến kích thước */
    transition: background-color 0.3s, color 0.3s
 }
}

.qt-thiet-keson:hover {
    background-color: #1e73be; /* Màu nền khi chạm vào */
    color: #fffeaa; /* Màu chữ mặc định của lớp chính */
}
}

    /* Điều chỉnh kích thước menu */
    .nav > li > a {
        font-size: 14px;
        padding: 10px;
    }

    /* Thay đổi tiêu đề */
    .title_module h2 {
        font-size: 24px;
    }

    /* Nút tùy chỉnh nhỏ hơn */
    .custom-button-son {
        font-size: 10px;
        padding: 6px 12px;
        border-radius: 15px;
    }

    /* Ẩn hoặc điều chỉnh các phần tử không cần thiết trên điện thoại */
    .absolute-footer {
        display: none;
    }

    /* Chỉnh sửa thông tin sản phẩm */
    p.name.product-title a {
        font-size: 14px;
        -webkit-line-clamp: 1; /* Hiển thị tối đa 1 dòng trên máy tính bảng */
    }

    /* Chỉnh sửa menu đa cấp */
    header#header .nav-dropdown ul.sub-menu {
        width: 100%; /* Menu chiếm toàn bộ màn hình */
        padding: 10px;
        box-shadow: none; /* Xóa đổ bóng */
    }

    /* Footer nhỏ hơn */
    .col-footer a {
        font-size: 14px;
    }

}
/* CSS moblie */
@media only screen and (max-width: 640px) { 
 /* Chỉnh sửa thông tin sản phẩm */
    p.name.product-title a {
        font-size: 14px;
        -webkit-line-clamp: 1; /* Hiển thị tối đa 2 dòng trên điện thoại */
    }
	.qt-thiet-keson {
    width: 100%; /* Độ ngang full row */
	height : 250px;
    background-color: white; /* Màu nền */
    color: #464444; /* Màu chữ mặc định */
    display: block; /* Đảm bảo class chiếm toàn bộ hàng */
    margin: 0; /* Loại bỏ khoảng cách bên ngoài nếu cần */
    padding: 0 20px; /* Cách trái và phải 20px */
    border: 2px solid #D3D3D3; /* Bo viền màu đen dày 2px */
    box-sizing: border-box; /* Đảm bảo padding không ảnh hưởng đến kích thước */
    transition: background-color 0.3s, color 0.3s
 }

}

/* bread tin tức */
.breadcrumbson {
    background-color: #f5f5f5; /* Màu nền */
    height: 60px; /* Chiều cao của khung */
    display: flex; /* Dùng flexbox để căn chỉnh nội dung */
    align-items: center; /* Căn chỉnh nội dung theo chiều dọc */	
	
}
.breadcrumbson a {
	 font-family: 'Roboto', sans-serif; /* Sử dụng font Roboto */
    font-size: 18px; /* Cỡ chữ 18px */
    color: #666; /* Màu ghi cho chữ liên kết "Trang chủ" */
    text-decoration: none; /* Bỏ gạch chân */
    transition: color 0.3s ease; /* Hiệu ứng mượt khi hover */
}

.breadcrumbson a:hover {
    color: #1e73be; /* Màu xanh khi hover */
}

.breadcrumbson .divider {
    margin: 0 5px; /* Khoảng cách giữa các phần */
    color: #999; /* Màu ghi nhạt cho ký tự phân cách */
}
.breadcrumbson span {
	 font-family: 'Roboto', sans-serif; /* Sử dụng font Roboto */
    font-size: 18px; /* Cỡ chữ 18px */
	margin: 0 5px; /* Khoảng cách giữa các phần */
    color: #666; /* Màu ghi nhạt cho ký tự phân cách */
     font-weight: bold; /* Làm chữ phân cách đậm */
}
.page-title.light.simple-title {
    background-color: #f5f5f5;
}
.product-thumbnails {
    display: none !important;
}

/* blog */
.page-wrapper {
    padding-top: 10px !important;
}

/*đổi màu các h5...*/
h5 .heading-font {
    color: #1e73be !important;
}
h1, h4, h6 .heading-font {
    color: #464444 !important;
}
p {
    color: #464444;  /* Đặt màu mặc định cho thẻ p */
}
/* màu nút search form */
.form-flat .button.icon {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none;
    color: #1b5ca4 !important;
}

/* Ẩn placeholder khi có giá trị nhập vào */
.fl-input:not(:placeholder-shown) {
    color: #000; /* Màu chữ rõ hơn */
}

/* Đưa label lên trên nếu input có giá trị */
.fl-wrap-input.fl-is-active label {
    transform: translateY(-20px);
    font-size: 12px;
    opacity: 1;
    transition: all 0.3s ease;
}

/* Đảm bảo label không đè lên chữ khi nhập */
.fl-input:focus + .fl-label,
.fl-input:not(:placeholder-shown) + .fl-label {
    transform: translateY(-20px);
    font-size: 12px;
    opacity: 1;
}

/* Nếu có vấn đề với vị trí, thêm dòng này */
.fl-wrap-input {
    position: relative;
}

.fl-label {
    position: absolute;
    top: 10px;
    left: 10px;
    transition: 0.3s;
    background: white;
    padding: 0 5px;
}
.fl-input {
    width: 200%; /* Tăng chiều rộng tối đa */
    max-width: 700px; /* Hoặc đặt kích thước cụ thể */
    padding: 15px 20px; /* Tăng khoảng cách bên trong */
    font-size: 2cpx; /* Làm chữ dễ đọc hơn */
}
.fl-wrap-input {
    margin-bottom: 15px; /* Tăng khoảng cách giữa các ô */
}

.woocommerce-error {
    display: block  !important;
	 visibility: visible;
    opacity: 1;
}

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


}
/*nút css*/
.button--piyo{
    --main_color : #f4cf47 ;
    --sub_color1 : #f4e19c ;
    --sub_color2 : #ff8108 ;
    --base_color : #000 ;
    --border_radius1 : 60px 60px 40px 40px / 48px 48px 30px 30px ;
    --border_radius2 : 70px 70px 40px 40px / 48px 48px 30px 30px ;
    --border_radius3 : 40px 40px 40px 40px / 48px 48px 30px 30px ;
}
.button-ga{
    position : relative ;
    display : flex ;
    justify-content : center ;
    align-items : center ;
    width : 280px ;
    height : 80px ;
    box-sizing : border-box ;
    text-decoration : none ;
    border : solid 3px #000 ;
    border-radius : 40px ;
    background : var(--main_color) ;
    
}
.button-ga::before{
    content : '' ;
    position : absolute ;
    z-index : 2 ;
    top : 0 ;
    right : 20px ;
    bottom : 0 ;
    margin : auto 0 ;
    width : 24px ;
    height : 24px ;
    background : var(--base_color) ; 
    transition : all ease .2s ;
}
.button__wrapper{
    display : flex ;
    justify-content : center ;
    align-items : center ;
    position : relative ;
    z-index : 1 ; 
    width : 100% ;
    height : 100% ;
    border-radius : 40px ;
    overflow : hidden ;
}
.button__wrapper::before,
.button__wrapper::after{
    transition : all .5s ease ;
}
.characterBox{
    position : absolute ;
    top : -54px ;
    left : 0 ;
    right : 0 ;
    margin : 0 auto ;
    display : flex ;
    justify-content : space-between ;
    align-items : flex-end ;
    width : 180px ;
    height : 56px ;
}
.button__text{
    position : relative ;
    z-index : 3 ;
    font-size : 32px ;
    letter-spacing : 4px ;
    color : var(--base_color) ;
    transition : all .3s ease ;
}
.character{
    position : relative ;
    width : 56px ;
    height : 36px ;
    box-sizing : border-box ;
    border : solid 3px #000 ;
    background : var(--main_color) ;
    border-radius : var(--border_radius1) ;
    animation : sleep 1s ease infinite alternate ;
}
.character::before{
    content : '' ;
    position : absolute ;
    top : -12px ;
    left : 22px ;
    width : 12px ;
    height : 12px ;
    background : #000 ;
    clip-path : path('M10.23,3.32c-3.54,.63-5.72,2.51-7.02,4.23-.33-1.58-.34-3.54,.93-5.12,.52-.65,.41-1.59-.24-2.11C3.24-.19,2.29-.08,1.77,.57c-3.82,4.77-.31,11.11-.13,11.42,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0-.01-.02,2.49,.04,2.52,0,.1-.14,1.54-4.82,6.59-5.71,.82-.14,1.37-.92,1.22-1.74s-.94-1.36-1.75-1.21Z') ;
}
.character__face{
    position : absolute ;
    z-index : 2 ;
    top : 15px ;
    left : 0 ;
    right : 0 ;
    margin : 0 auto ;
    width : 12px ;
    height : 6px ;
    background : var(--sub_color2) ;
    border-radius : 50% 50% 50% 50% / 78% 78% 22% 22% ;
    transition : .2s ;
}
.character__face::before,
.character__face::after{
    content : '' ;
    position : absolute ;
    top : -4px ;
    width : 8px ;
    height : 2px ;
    border-radius : 4px ;
    background : #000 ;
}
.character__face::before{
    left : -5px ;
}
.character__face::after{
    right : -5px ;
}


.button--piyo::before{
    clip-path : path('M24,12.02c0-1.09-.75-1.71-.81-1.77L11.17,.45c-.91-.74-2.21-.56-2.91,.42-.69,.97-.52,2.37,.39,3.11l7.12,5.81-13.7-.02h0C.93,9.77,0,10.76,0,11.99c0,1.23,.93,2.22,2.07,2.22l13.7,.02-7.13,5.78c-.91,.74-1.09,2.13-.4,3.11,.41,.58,1.03,.88,1.65,.88,.44,0,.88-.15,1.25-.45l12.04-9.76c.07-.06,.82-.67,.82-1.77Z') ;
}

.button--piyo .button__wrapper::before,
.button--piyo .button__wrapper::after{
    content : '' ;
    position : absolute ;
    bottom : 0 ;
    width : 130px ;
    height : 38px ;
    background : var(--sub_color1) ;
    clip-path : path('M13.77,37.35L.25,16.6c-.87-1.33,.69-2.91,2-2.02l12.67,8.59c.81,.55,1.91,.14,2.18-.81l2.62-9.33c.39-1.4,2.34-1.42,2.76-.02l3.6,11.99c.33,1.11,1.74,1.4,2.47,.52L49.38,.52c.87-1.04,2.53-.42,2.53,.95V23.7c0,1.13,1.2,1.83,2.16,1.26l12.75-7.51c.85-.5,1.94,0,2.13,.98l1.5,7.6c.2,1.03,1.37,1.51,2.22,.92l17.74-12.3c1.09-.75,2.52,.25,2.21,1.55l-2.44,10.2c-.26,1.09,.74,2.06,1.8,1.75l30.8-9.04c1.37-.4,2.42,1.26,1.49,2.36l-9.07,10.66c-.83,.98-.1,2.49,1.17,2.42l12.12-.68c1.6-.09,2.12,2.15,.65,2.8l-2.73,1.21c-.18,.08-.38,.12-.58,.12H14.97c-.48,0-.93-.25-1.2-.65Z') ;
}
.button--piyo .button__wrapper::before{
    left : 0 ;
}
.button--piyo .button__wrapper::after{
    right : 0 ;
    transform : rotateY(180deg) ;
}


.button-ga:hover .button__wrapper::before{
    transform : translateX(-12px) ;
}
.button-ga:hover .button__wrapper::after{
    transform : rotateY(180deg) translateX(-12px) ;
}
.button-ga:hover .button__text{
    letter-spacing : 6px ;
}
.button-ga:hover::before{
    right : 14px ;
}
.button-ga:hover .wakeup{
    animation : wakeup .2s ease ;
    animation-fill-mode : forwards ;
}
.button-ga:hover .wakeup .character__face{
    top : 20px ;
}
.button-ga:hover .wakeup .character__face::before,
.button-ga:hover .wakeup .character__face::after{
    animation : eye 5s linear infinite ;
}
.button-ga:hover .wakeup:nth-child(2) .character__face::before,
.button-ga:hover .wakeup:nth-child(2) .character__face::after{
    animation : eye_2 5s linear infinite ;
}
@keyframes sleep{
    0%  {
        height : 36px ;
        border-radius : var(--border_radius1) ;
    }
    100%{
        height : 32px ;
        border-radius : var(--border_radius2) ;
    }
}
@keyframes wakeup{
    0%  {
        height : 32px ;
        border-radius : var(--border_radius2) ;
    }
    100%{
        height : 56px ;
        border-radius : var(--border_radius3) ;
    }
}
@keyframes eye {
    0%{
        top : -6px ;
        width : 6px ;
        height : 6px ;
    }
    30%{
        top : -6px ;
        width : 6px ;
        height : 6px ;
    }
    32%{
        top : -4px ;
        width : 8px ;
        height : 2px ;
    }
    34%{
        top : -6px ;
        width : 6px ;
        height : 6px ;
    }
    70%{
        top : -6px ;
        width : 6px ;
        height : 6px ;
    }
    72%{
        top : -4px ;
        width : 8px ;
        height : 2px ;
    }
    74%{
        top : -6px ;
        width : 6px ;
        height : 6px ;
    }
    76%{
        top : -4px ;
        width : 8px ;
        height : 2px ;
    }
    78%{
        top : -6px ;
        width : 6px ;
        height : 6px ;
    }
    100%{
        top : -6px ;
        width : 6px ;
        height : 6px ;
    }
}
@keyframes eye_2 {
    0%{
        top : -6px ;
        width : 6px ;
        height : 6px ;
    }
    10%{
        transform : translateX(0);
    }
    12%{
        transform : translateX(3px);
    }
    20%{
        top : -6px ;
        width : 6px ;
        height : 6px ;
    }
    22%{
        top : -4px ;
        width : 8px ;
        height : 2px ;
    }
    24%{
        top : -6px ;
        width : 6px ;
        height : 6px ;
    }
    25%{
        transform : translateX(3px);
    }
    27%{
        transform : translateX(0);
    }
    74%{
        top : -6px ;
        width : 6px ;
        height : 6px ;
        transform : translateX(0);
    }
    76%{
        top : -4px ;
        width : 8px ;
        height : 2px ;
        transform : translateX(3px);
    }
    78%{
        top : -6px ;
        width : 6px ;
        height : 6px ;
    }
    80%{
        top : -4px ;
        width : 8px ;
        height : 2px ;
    }
    82%{
        top : -6px ;
        width : 6px ;
        height : 6px ;
    }
    85%{
        transform : translateX(3px);
    }
    87%{
        transform : translateX(0);
    }
    100%{
        top : -6px ;
        width : 6px ;
        height : 6px ;
        transform : translateX(0);
    }
}
@keyframes body_hoo{
    0%  {
        bottom : 2px ;
    }
    100%{
        bottom : 0 ;
    }
}
@keyframes body_hoo_wakeup{
    0%  {
        bottom : 2px ;
    }
    100%{
        bottom : 6px ;
    }
}
@keyframes face_pen{
    0%  {
        height : 14px ;
    }
    100%{
        height : 10px ;
    }
}
@keyframes face_pen_wakeup{
    0%  {
        height : 14px ;
    }
    100%{
        height : 28px ;
    }
}
.container-ga{
    display : flex ;
    flex-direction : column ;
    justify-content : center ;
    align-items : center ;
    background : #fff6e5 ;
	margin-top: 30px;
	margin-bottom: 20px;
}


/*end*/
.scroll-to-bullets a.active,.scroll-to-bullets a:hover {
    background-color: #1E73BE !important;
    
}

.box-van-phong{
  background: #fff;
  color: #009688;
  padding: 40px;
  box-shadow:
  inset #2C5EA5 0 0 0 5px,
  inset #3A6EB8 0 0 0 6px,
  inset #4B7FCC 0 0 0 10px,
  inset #5C90E0 0 0 0 11px,
  inset #A2C3F1 0 0 0 16px,
  inset #B5D1F5 0 0 0 17px,
  inset #DDE9FB 0 0 0 21px,
  inset #EEF4FD 0 0 0 22px;
  text-shadow: 3px 3px 1px #bfecf7;
}
/*chatbox*/
.chatbot-popup{
	border-radius: 32px !important;
	  border: 5px solid #2C5EA5;

}
/*end*/

.fancy-border .col-inner{
  position: relative;
  display: inline-block;
  color: #2C5EA5;
  background-color: #fff;
  border-radius: 12px;
  cursor: pointer;
  overflow: hidden;
  z-index: 0;
  border: 1px solid #d7e5ff; /* Thêm border đơn giản */
  transition: color 0.3s ease, transform 0.3s ease;
}

.section-title::after {
            
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background-color: #3498db;
	margin-bottom: 5px;
        }

        /* Tùy chọn thêm biểu tượng bút */
        .section-title.pen-icon::before {
            content: '✎';
            margin-right: 12px;
            color: #2c5ea5;
            font-size: 32px;
            vertical-align: middle;
			margin-bottom: 20px;
        }
.section-title{
	justify-content: center !important;
}
/* Bot Chat AI */