/*
Theme Name: CodoTech
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
.header-nav-main {
		justify-content:center!important;
}
.header-button .button.primary {
		background: url(/wp-content/themes/codotech/images/rightarrow.png) right center no-repeat;
		background-size: 15px;
		background-position: calc(100% - 25px) 50%;
		padding-right: 50px;
}

.header-full-width .container {
		max-width: 1400px!important;
}
h1, h2, h3, h4, h5 p {
    text-wrap: inherit;
}
.header-main .nav > li > ul {
    padding: 5px;
}
.header-main .nav > li > ul > li > a {
    color: #000;
}
.button.primary {
    padding: 5px 30px;
    border-radius: 99px;
    text-transform: none;
	margin-right: 5px!important;
}
.slider .flickity-button {
    background: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    opacity: 1!important;
}
.slider .flickity-button svg, .flickity-prev-next-button .arrow, .flickity-prev-next-button svg {
    fill: #3B82F6!important;
    padding: 12px;
}
.slider .dot {
    background: #000;
    border: none;
}
.slider .dot.is-selected {
    background: #3B82F6;
}
.hometitle {
    font-size: 36px;
		line-height:1.2;
}
.homeheader {
    background: linear-gradient(98.34deg, #F7FAFF 0%, #E4F1F8 40%, #EFFBEE 100%);
}
.homeheader .col-inner {
    float: right;
    max-width: 500px;
    padding: 20px;
}
.homeheader .title {
    font-size: 45px;
    color: #3B82F6;
    line-height: 1.2;
    font-weight: bold;
    margin-bottom: 20px;
}
.homeheader .subtitle {
    font-size: 110%;
}
.homeheader ul {
		margin-left: -18px;
}
.homeheader ul li {
		list-style-type: none;
		background: url(/wp-content/themes/codotech/images/listico.png) left top no-repeat;
		background-size: 25px;
		padding-left: 35px;
		background-position: 0px 5px;
}
.auto-slide-wrapper {
    display: flex;
    gap: 20px;
}
.auto-slide-wrapper.desk {
    margin-right: -150px;
}
.auto-slide-col {
    width: 33.33%;
    height: 500px; /* chỉnh chiều cao bạn muốn */
    overflow: hidden;
    position: relative;
}

.slide-item {
    display: block;
    margin-bottom: 20px;
}

.slide-item img {
    width: 100%;
    height: auto;
    display: block;
}
.homestats {
    padding-top: 50px;
    padding-bottom: 40px;
}
.homestats .hometitle {
    margin-bottom: 0;
    color: #3B82F6;
}
.homestats .subtitle {
    margin-bottom: 30px;
}
.homestats .number {
    color: #0070F4;
    font-size: 32px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0px;
}
.homestats .number span {
    font-weight: 700!important;
    display: inline-block;
}
.homestats .content {
    margin-bottom: 0;
}
.homefeatures {
    background: #F2F8FE;
    padding-top: 50px;
    padding-bottom: 20px;
}
.homefeatures .hometitle {
    margin: auto;
    max-width: 750px;
		margin-bottom: 10px;
}
.homefeatures .subtitle {
    margin: auto;
    max-width: 600px;
		margin-bottom: 50px;
}
.hometabs .nav > li, .acctabs .accordion-title {
    border: 1px solid #CCD0D6;
    border-radius: 16px;
    padding: 10px 15px;
    margin-bottom: 10px;
    background: #fff;
}
.tabmenu {
    display: flex;
    align-items: top;
}
.tabmenu .indiv  img {
    width: 28px!important;
    height: 28px!important;
    filter: grayscale(100%)!important;
    background: #CCD0D6!important;
    padding: 6px!important;
    border-radius: 50%!important;
}
.tabmenu .indiv {
    width: 40px!important;
    height: 40px!important;
    padding: 6px!important;
    border-radius: 50%!important;
    background: #ECECED!important;
    display: inline-block;
    margin-right: 10px!important;
}
.hometabs .nav > li.active .tabmenu .indiv  img, .hometabs .nav > li:hover .tabmenu .indiv  img {
    background: #CFE5FF!important;
    filter: grayscale(0%)!important;
}
.tabmenu .title {
    font-size: 110%;
    font-weight: bold;
    margin-bottom: 5px!important;
    color: #000;
    transition: .5s;
}
.tabmenu .content {
    font-weight: normal!important;
    color: #000;
    transition: .5s;
    font-size: 95%;
}
.hometabs .nav > li.active, .hometabs .nav > li:hover, .acctabs .accordion-title:hover, .acctabs .accordion-title.active {
    background: #3B82F6;
}
.hometabs .nav > li.active .tabmenu .title, .hometabs .nav > li:hover .tabmenu .title, .hometabs .nav > li.active .tabmenu .content, .hometabs .nav > li:hover .tabmenu .content, .acctabs .accordion-title:hover .tabmenu .title, .acctabs .accordion-title:hover .tabmenu .content, .acctabs .accordion-title.active .tabmenu .title, .acctabs .accordion-title.active .tabmenu .content {
    color: #fff!important;
    transition: .5s;
}
.hometabs {
    display: flex;
    align-items: center;
}
.hometabs .nav-vertical  {
    width: 35%!important;
}
.hometabs .nav-vertical+.tab-panels {
    border-left: none;
    padding: 40px;
}
.homecates {
    padding-top: 70px;
    padding-bottom: 0px;
}
.homecates .smalltitle {
    text-transform: uppercase;
    color: #3B82F6;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 110%;
}
.homecates .bigtitle {
    text-transform: uppercase;
    color: #3B82F6;
    font-weight: bold;
    font-size: 36px;
}
.homecates .image {
    margin: auto;
    width: 115px;
    height: 115px;
    margin-bottom: 20px;
}
.homecates .title {
    font-size: 16px;
    font-weight: bold;
    color: #000;
}
.hometemplates {
    background: linear-gradient(180deg, #FFFFFF 0%, #F2F8FE 100%);
    padding-bottom: 70px;
	padding-top: 30px;
}
.hometemplates .hometitle {
    margin-bottom: 5px;
}
.hometemplates .subcontent {
    margin-bottom: 40px;
}
.desktemplates {
    width: 140%!important;
    margin-left: -20%!important;
    margin-right: -20%!important;
}
.hometemplates .flickity-page-dots {
    bottom: -20px;
}
.homefaqs {
    padding-top: 70px;
}
.homeacc .accordion--item {
    border-top:1px solid #E7E7E7!important;
    margin-bottom: 0px;
}
.homeacc .accordion-title {
    border: none!important;
    padding: 10px;
    color: #000;
    font-weight: bold;
		background:transparent!important;
		padding-left: 20px;
}
.homeacc .accordion-title.active, .homeacc .accordion-title:hover {
    color: #000;
}
.homeacc .accordion-title .toggle {
    left: -15px;
    right: auto;
		top: 2px;
}
.homeacc .accordion-title .toggle:before {
		content: '+';
}
.homeacc .accordion-title.active .toggle:before {
		content: '-';
}
.active>.toggle {
		transform:rotate(0)!important;
}
.homeacc .accordion-inner {
    padding: 0;
}
.homecta .col-inner {
    background: url(/wp-content/themes/codotech/images/newsletterbg.png) right bottom no-repeat;
    background-size: cover!important;
    padding: 30px 20px;
    border-radius: 20px;
    margin: 40px 0 60px 0;
}
.homecta .hometitle {
    max-width: 750px;
    margin: auto;
    line-height: 1.2;
    font-weight: bold;
    padding-bottom: 30px;
}
.newsletter {
    max-width: 400px;
    margin: auto;
}
.newsletter p {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 4px;
    border-radius: 99px;
}
.newsletter .wpcf7-text {
    margin-bottom: 0;
    border: none!important;
    box-shadow: none!important;
    border-radius: 99px;
    padding: 20px!important;
}
.newsletter .wpcf7-submit {
    border-radius: 99px;
    padding: 10px 35px;
    text-transform: none;
}
.newsletter ::placeholder {
    color: #3B82F6!important;
}
.wpcf7-spinner, .shop-page-title, .category-page-title, .page-title {
    display: none!important;
}
.wpcf7-submit {
    margin-right: 0!important;
    margin-bottom: 0;
}
.catedesc .hometitle {
    color:#3B82F6;
    margin-bottom: 10px;
    font-weight: bold;
}
.catedesc .subtitle {
    max-width: 1100px;
    margin: auto;
    padding-bottom: 20px;
    color: #3B82F6;
}
.productmenu {
    margin: auto;
    max-width: 1050px;
}
.productmenu ul {
    text-align: center;
}
.productmenu ul li {
    display: inline;
    border:1px solid #3B82F6!important;
    font-weight: bold;
    border-radius: 99px;
    padding: 10px 25px;
    line-height: 50px;
    margin: 0 10px;
}
.productmenu ul li:hover, .productmenu ul li.current-menu-item {
    background: #3B82F6;
    color: #fff;
}
.productmenu ul li:hover a, .productmenu ul li.current-menu-item a {
    color: #fff;
}
.product-small .col-inner, .product-small.box {
    border-radius: 16px;
}
.product-small .box-image {
    border-radius: 16px 16px 0 0;
}
.woocommerce-loop-product__title {
    font-size: 16px;
    color: #000;
    margin-bottom: 10px!important;
    display: block!important;
}
.page-checkout {
    padding-top: 50px;
}
.quickform .row .col {
    padding-bottom: 0!important;
}
.quickform .wpcf7-text, .quickform select {
    border:1px solid #3B82F6!important;
		box-shadow: none!important;
    border-radius: 5px!important;
    color: #116BBC!important;
}
.quickform .wpcf7-text {
		padding-left: 50px!important;
}
.quickform select {
		padding-left: 20px!important;
}
.quickform ::placeholder {
    color: #A6B1BA!important;
}
.quickform label {
    color: #3B82F6;
}
.quickform .wpcf7-submit {
    padding: 2px 30px;
    border-radius: 99px;
    text-transform: none;
    text-transform: none;
    font-weight: normal;
}
.page-number {
    border-radius: 4px!important;
}
#product_preview, .product-image-preview {
    width: 100%!important;
    aspect-ratio: 1 / 1;     /* browser mới hỗ trợ rất tốt */
    object-fit: cover;
    border-radius: 16px;
	max-width:100%!important;
}
.product-image-preview {
    position: relative;
    display: inline-block;
	width: 100%;
}
.preview_button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 8px 16px;
    background: #ff5a00;
    color: #fff !important;
    font-size: 14px;
    border-radius: 6px;
    text-decoration: none;
    display: inline-block;
}
.customfooter .col {
	padding-bottom: 20px;
}
.customfooter p {
    margin-bottom: 5px;
}
.footercontact {
		max-width: 320px!important;
}
.footerlogo {
		max-width: 280px!important;
}
.footerlogo img {
    width: 80%;
    max-width: 150px;
    height: auto;
	margin-bottom:0!important!important;
}
.footercontact i {
    background: #E5E7E9;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin-right: 10px;
    text-align: center;
    border-radius: 50%;
}
.footercontact p a {
    color: #3B82F6!important;
}
.customfooter p a {
    color: #000;
}
.off-canvas-left , .off-canvas-right  {
		width: 100%;
		background: linear-gradient(98.34deg, #F7FAFF 0%, #E4F1F8 40%, #EFFBEE 100%);
		background-size: 100%!important;
	
}
.off-canvas-left .mfp-content, .off-canvas-right .mfp-content {
		width: 100%;
        background: linear-gradient(98.34deg, #F7FAFF 0%, #E4F1F8 40%, #EFFBEE 100%);
}
.off-canvas-left .mfp-content ul li a, .off-canvas-right .mfp-content ul li a {
		color: #3B82F6!important;
		font-size: 16px;
        text-transform: none!important;
}
.off-canvas-left .mfp-content ul li a:hover, .off-canvas-right .mfp-content ul li a:hover {
		text-decoration:none;
	color:#3B82F6 !important
     text-transform: none!important;
}
.product-small .title-wrapper {
		display: flex;
		align-items: center;
}
.product-small .title-wrapper {
		margin-bottom: 10px;
}
.product-small .title-wrapper h2 {
		margin-bottom: 0!important;
		margin-top:0;
		padding-bottom:0!important;
}
.product-small .title-wrapper span {
		background: url(/wp-content/themes/codotech/images/newlabel.png) center center no-repeat;
		display: inline-block;
		color: #fff;
		font-size: 12px;
		width: 42px;
		height: 25px;
		background-size: 100%;
		line-height: 25px;
		text-align: center;
		margin-right: 5px;
}
.ppb-wrapper {
		display: flex;
		align-items: center;
		gap: 10px;
		font-size: 14px;
}
.ppb-sale-price .amount {
		color: #3B82F6!important;
		font-weight: 700;
}
.ppb-regular-price .amount {
		color: #29353E;
		text-decoration: line-through;
		opacity: .8;
		font-weight: 300!important;
		font-style: italic;
}
.ppb-discount {
		background: #ff2d2d;
		color: #fff;
		padding: 2px 10px;
		border-radius: 20px;
		font-size: 11px;
		font-weight: 400;
}

.ppb-separator {
		color: #999;
}

.quickform .wpcf7-form-control-wrap:before {
		content: '';
		width: 39px;
		height: 39px;
		background:url(/wp-content/themes/codotech/images/userico.png) center center no-repeat;
		background-size: 15px!important;
		border-right: 1px solid #3b82f6;
		display: inline-block;
		position: absolute;
}
.quickform .formphone .wpcf7-form-control-wrap:before {
		background: url(/wp-content/themes/codotech/images/phoneico.png) center center no-repeat!important;
		background-size: 15px !important;
}
.quickform .formemail .wpcf7-form-control-wrap:before {
		background: url(/wp-content/themes/codotech/images/mailico.png) center center no-repeat!important;
		background-size: 15px !important;
}

.quickform .formdomain .wpcf7-form-control-wrap:before {
		background: url(/wp-content/themes/codotech/images/domainico.png) center center no-repeat!important;
		background-size: 15px !important;
}
.proselect {
    width: 39px;
    height: 39px;
    background: url(/wp-content/themes/codotech/images/tempico.png) center center no-repeat;
    background-size: 15px !important;
    border-right: 1px solid #3b82f6;
    display: inline-block;
}
.cateselect {
    width: 39px;
    height: 39px;
    background: url(/wp-content/themes/codotech/images/cateico.png) center center no-repeat;
    background-size: 15px !important;
    border-right: 1px solid #3b82f6;
    display: inline-block;
}
.mbcatemenu {
		padding: 10px 10px 1px 10px;
		margin-bottom: 30px;
}
.mbcatemenu .select2-selection {
		border:1px solid #3b82f6!important;
		min-height: 40px;
}
.mbcatemenu .select2-selection__rendered {
		line-height: 40px!important;
}
.select-icon-wrap {
    position: relative;
}

.select-icon-wrap select {
    padding-left: 15px; !important; /* tạo khoảng trống cho icon */
}

/* Icon chung */
.select-icon-wrap .icon-select {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #007bff;
    opacity: .9;
    pointer-events: none;
}
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
    .hometitle, .homeheader .title, .homecates .bigtitle {
		font-size: 24px!important;
			line-height: 1.2;
	}
	.auto-slide-col {
			height: 300px;
	}
	.auto-slide-wrapper {
			gap: 10px;
	}
	.slide-item {
			margin-bottom: 10px;
	}
	.homecates .image {
			width: 60px;
			height: 60px;
	}
	.homecates .title {
			font-size: 12px;
	}
	.tabmenu .content {
			font-size: 85%;
	}
	.header-button {
			text-align: center;
	}
	.header-button .button {
			background-color: #3b82f6!important;
			color: #fff!important;
	}
	.header-button .button span {
			color: #fff;
	}
	.header-button-1 {
			padding-top: 300px!important;
			border-top: none!important;
	}
	.off-canvas .sidebar-menu {
			padding: 0;
	}
	.html_topbar_left {
			padding: 0!important;
			border-bottom: 1px solid #3b82f6;
	}
	.footercontact {
			max-width: 100%!important;
	}
	.footerlogo {
			max-width: 100%!important;
	}
	.homecta .col-inner {
		background: url(/wp-content/themes/codotech/images/newsletterbg.png) left bottom no-repeat!important;
		background-size: cover!important;
		padding: 30px 20px;
		border-radius: 20px;
		margin: 40px 0 60px 0;
	}
}