/* Main Css */
.ekit-wid-con .ekit-unfold-raw-content li, .ekit-wid-con .ekit-unfold-raw-content p {
	font-size: 14px!important;
	line-height: 21px!important;
	color: var(--e-global-color-text)!important;
}
.ekit-wid-con .ekit-unfold-raw-content ul {
	margin: 0!important;
}
.woocommerce-mini-cart__empty-message {
	visibility:hidden;
	position:relative;
}
.woocommerce-mini-cart__empty-message:after {
	visibility: visible;
	position: absolute;
	top: 0;
	left: 0;
	white-space: pre;
	content: "Giỏ hàng của bạn đang trống.";
}
@keyframes sparkle{0%{background-position:0 0,0 0,0 0}to{background-position:-500px -1000px,-400px -400px,300px 300px}}
ins {
	text-decoration: none;
}
.elementor-posts-nothing-found {
    font-size: 16px;
    color: #000;
}
.elementor-posts-nothing-found::before {
    content: "Không tìm thấy bài viết nào!";
    display: block;
    font-weight: 400;
}
.input_number_product input::-webkit-outer-spin-button,
.input_number_product input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.input_number_product input[type=number] {
    -moz-appearance: textfield;
}
.input_number_product .btn_num:hover, .input_number_product .btn_num:focus  {
    background-color: transparent!important;
}
nav.rank-math-breadcrumb p {
	color: #000;
	font-family: var(--e-global-typography-primary-font-family), Sans-serif;
    font-size: 14px;
    font-weight: 400;
	line-height: 20px;
	margin-bottom: 0;
}
nav.rank-math-breadcrumb p a {
	color: #000;
}
@media (max-width: 767px) {
	nav.rank-math-breadcrumb p {
		font-size: 14px;
		line-height: 19px;
	}
}
.elementor-icon-box-title, .elementor-image-box-title {
	margin-top: 0;
}
ul.page-numbers {
	display: flex!important;
	gap: 15px;
    justify-content: center;
}
li .page-numbers {
	display: inline-flex!important;
    width: 35px;
    height: 35px;
    border-radius: 6px;
    align-items: center;
    justify-content: center;
	border: 1px solid #e9e9e9;
}
.blog-item .blog-excerpt p:last-child {
    margin-bottom: 0;
}
nav.elementor-pagination {
	text-align: center !important;
}
nav.elementor-pagination .page-numbers {
	display: inline-flex;
	justify-content: center;
    align-items: center;
	width: 35px;
	height: 35px;
	border: 1px solid #e9e9e9;
	border-radius: 6px;
}
nav.elementor-pagination .page-numbers:hover, nav.elementor-pagination .page-numbers.current  {
	background-color: var(--e-global-color-primary);
}
.woocommerce ul.products li.product a img {
	margin: 0;
}
.swiper-pagination {
	display: flex;
	gap: 8px;
	justify-content: center;
}
.swiper-pagination-bullet {
    cursor: pointer !important;
    border: 0;
    padding: 0;
    margin: 0 !important;
    width: 16px !important;
    height: 4px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 4px !important;
    background-color: var(--e-global-color-primary)!important;
}
.swiper-pagination-bullet {}
/* Sort Product Css */
.sort-wrap {
	position: relative;
	display: flex;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #00000008;
	padding: 8px 15px;
	width: 250px;
	height: 35px;
}
.sort-wrap .sort-list {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	transform: translateY(32px);
	flex-direction: column;
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
	list-style: none;
	padding: 0;
	width: 100%;
	z-index: 9;
	display: none;
}
.sort-wrap  ul.sort-list li+li {
	border-top: 1px solid rgba(0, 0, 0, .1);
}
.sort-wrap .sort-list .sort-item a {
	display: flex;
	transition: all .3s;
	cursor: pointer;
	padding: 8px 15px;
	font-size: 16px;
	font-weight: 400;
	line-height: 22px;
	color: #000;
}
.sort-wrap .sort-list .sort-item a:hover {
	background: var(--e-global-color-primary);
	color: #fff;
}
.sort-wrap:hover .sort-list {
	display: flex;
}
.sort-wrap .sort-current {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Home Page Css */
.home-blog-item .content-wrap {
	position: absolute;
	bottom: 0;
}
.home-blog-item .title .elementor-heading-title {
	min-height: 45px;
	overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
           line-clamp: 2; 
   -webkit-box-orient: vertical;
}
.product-item .title .elementor-heading-title {
	height: 50px;
	overflow: hidden;
    display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
           line-clamp: 2; 
   -webkit-box-orient: vertical;
}
.product-item a.woocommerce-review-link {
	display: none;
}

@media (max-width: 767px) {
	.home-blog-item .title .elementor-heading-title {
		min-height: 30px;
	}
	.product-item .title .elementor-heading-title {
		height: 30px;
	}
}
/* Single Product Css */
.single_variation_wrap .woocommerce-variation-availability, a.reset_variations {
	display: none!important;
}
p.quantity-label {
	font-size: 15px;
    font-weight: 500;
    line-height: 21px;
}
.input_number_product {
	display: inline-flex;
	border: 1px solid #ccc;
	border-radius: 5px;
}
.input_number_product input {
	height: 40px!important;
	border: 0;
}
.input_number_product input.btn_num {
	font-size: 15px;
	color: #000;
	font-weight: 500;
}
table.variations tr {
	display: flex;
	gap: 10px;
	align-items: center;
}
table.variations tr th.label, table.variations tr td.woo-variation-items-wrapper {
	padding: 0;
	background-color: transparent;
}
/* Post Content Css */
.post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5 {
    color: var(--e-global-color-primary)!important;
}
.post-content h2 {
	font-size: 1.45rem;
}
.post-content h3 {
	font-size: 1.4rem;
}
.post-content h4 {
	font-size: 1.35rem;
}
.post-content iframe {
	height: 300px;
}
.post-content h5 {
	font-size: 1.3rem;
}
/*Css cho trang chủ đẹp */
html, body{
	overflow-x: hidden !important;
	max-width: 100vw;
}
body{
	--lqd-cc-size-inner: 30px;
    --lqd-cc-size-outer: 40px;
    --lqd-cc-bg: rgb(255, 255, 255);
    --lqd-cc-bc: rgb(255, 255, 255);
    --lqd-cc-active-bw: 40px;
    --lqd-cc-active-bg: rgb(255, 255, 255);
    --lqd-cc-active-bc: rgb(255, 255, 255);
    --lqd-cc-active-circle-txt: rgb(0, 0, 0);
    --lqd-cc-active-circle-color: rgb(255, 255, 255);
    --lqd-cc-active-arrow-color: rgb(0, 0, 0);
    --lqd-cc-blend-mode: difference;
}
.drag-left ul, .drag-right ul{
	pointer-events: none !important;
}
.hidden-icon-list{
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s ease-in-out;
}
.elementor-location-header{
	height: 0 !important;
}
@media(min-width: 1025px){
	.header-nuta{
		top: 10px;
	}
}
.header-nuta.scrolled .hidden-icon-list{
	 opacity: 1;
	 pointer-events: auto;
}
/*Item loop sản phẩm*/
.pc-foot-product .elementor-widget-container::after {
      content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 30%;
    height: auto;
    aspect-ratio: 222 / 12;
    background: url('https://nuta.io/wp-content/uploads/2025/08/pc-foot-shadow.png') no-repeat center / contain;
    transform: translateX(-110%) scaleY(-1);
    opacity: 1;
    filter: blur(3px);
    z-index: -1
}
/* 1) Red dot: kết thúc vẫn thấy ở vị trí 0 */
@keyframes bounceCycle {
  0%   { opacity: 0; transform: translateY(-800%); }
  5%   { opacity: 1; transform: translateY(40px); }
  7%   { transform: translateY(-40px); }
  10%  { transform: translateY(0); }
  20%  { opacity: 0; }           /* nếu muốn nó ẩn giữa chừng thì giữ line này */
  100% { opacity: 0; transform: translateY(0); } /* giữ hiện ở cuối */
}
.red-dot { animation: bounceCycle 10s forwards 1; }

/* 2) Big red circle: kết thúc dừng ở -248px và còn hiện */
@keyframes fadeAndSlide {
  0%, 10%  { opacity: 0; transform: translateX(0); }
  15%      { opacity: 1; transform: translateX(0); }
  25%      { opacity: 1; transform: translateX(-248px); }
  100%     { opacity: 1; transform: translateX(-248px); } /* giữ nguyên */
}
.red-circle { animation: fadeAndSlide 10s forwards 1; }

/* 3) Viền đỏ-vàng: xuất hiện, xoay pop rồi giữ hiện */
@keyframes rotatePop {
  0%, 25%  { opacity: 0; transform: rotate(20deg); }
  35%, 46% { opacity: 1; transform: rotate(0deg); }
  49.5%    { transform: rotate(25deg); }
  53%      { transform: rotate(0deg); }
  100%     { opacity: 1; transform: rotate(0deg); } /* giữ hiện */
}
.red-yellow-border { animation: rotatePop 10s forwards 1; }

/* 4) Title: hiện và giữ nguyên */
@keyframes fadeInExact {
  0%, 25%  { opacity: 0; transform: none; }
  35%      { opacity: 1; transform: none; }
  100%     { opacity: 1; transform: none; } /* giữ hiện */
}
.nutaio-title { animation: fadeInExact 10s forwards 1; }

/* 5) Increase 1/2/3: mỗi cái hiện lên rồi giữ nguyên */
@keyframes increasefadeIn1 {
  0%, 35%  { opacity: 0; transform: none; }
  38.5%    { opacity: 1; transform: none; }
  100%     { opacity: 1; transform: none; }
}
.increase1 { animation: increasefadeIn1 10s forwards 1; }

@keyframes increasefadeIn2 {
  0%, 38.5% { opacity: 0; transform: none; }
  41.5%     { opacity: 1; transform: none; }
  100%      { opacity: 1; transform: none; }
}
.increase2 { animation: increasefadeIn2 10s forwards 1; }

@keyframes increasefadeIn3 {
  0%, 41.5% { opacity: 0; transform: none; }
  45%       { opacity: 1; transform: none; }
  100%      { opacity: 1; transform: none; }
}
.increase3 { animation: increasefadeIn3 10s forwards 1; }

/* 6) Last line: trượt lên và giữ hiện */
@keyframes fadeInlast {
  0%, 45% { opacity: 0; transform: translateY(10px); }
  46%     { opacity: 1; transform: translateY(0); }
  100%    { opacity: 1; transform: translateY(0); } /* giữ hiện */
}
.last-fade-in { animation: fadeInlast 10s forwards 1; }
.blend-mode{
    mix-blend-mode: difference;
}
.change-bg-color {
    transition: background-color 0.7s ease;
}
/* Trượt sản phẩm điện thoại */
.desktop-click-to-swipe .elementor-posts-container {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: inline proximity;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-behavior: smooth;
    }
.desktop-click-to-swipe .elementor-posts-container article > div, .desktop-click-to-swipe .elementor-posts-container article > div > div{
	height: 100%;
}
.desktop-click-to-swipe .elementor-posts-container::-webkit-scrollbar {
	display: none;
}
.desktop-click-to-swipe .elementor-posts-container article, .post-apply-products .elementor-posts-container article{
	flex-shrink: 0;
}
.desktop-click-to-swipe .elementor-posts-container article {
	width: calc(25% - 15px);
	scroll-snap-align: start;
	flex-shrink: 0;
}
.desktop-click-to-swipe .elementor-posts{
	padding: 5px 0;
}
.desktop-click-to-swipe .elementor-posts article{
	padding: 0 5px;
}
@media (max-width: 1200px) {
    .post-apply-products .elementor-posts-container {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: inline proximity;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-behavior: smooth;
    }
    .post-apply-products .elementor-posts-container article > div, .post-apply-products .elementor-posts-container article > div > div{
    height: 100%;
    }
    .post-apply-products .elementor-posts-container::-webkit-scrollbar {
        display: none;
    }
    .post-apply-products .elementor-posts{
        padding: 5px 0;
    }
    .post-apply-products .elementor-posts article{
        padding: 0 5px;
    }
    .post-apply-products .elementor-posts-container article, .desktop-click-to-swipe .elementor-posts-container article{
        width: calc((100% - 60px)/4.6);
    }
}
@media (max-width: 767px) {
    .post-apply-products .elementor-posts-container article, .desktop-click-to-swipe .elementor-posts-container article {
        width: calc((100% - 16px)/2.3);
    }
}
/*Chi tiết dự án tiêu biểu*/
.detail-du-an-noi-bat p:first-child img:first-child{
    margin-bottom: 56px !important;
}
.detail-du-an-noi-bat img{
    margin-bottom: 32px;
}
.detail-du-an-noi-bat h1{
	margin-bottom: 80px !important;
}
.detail-du-an-noi-bat h1,.detail-du-an-noi-bat h2{
    color: var(--e-global-color-0242eae);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2em;
}
.detail-du-an-noi-bat p{
    font-size: 15px;
    line-height: 1.2em;
}
.detail-du-an-noi-bat strong em{
	font-size: 24px;
	color: #D62021;
}
.detail-du-an-noi-bat strong em a{
	text-decoration: underline;
	color: #D62021;
}
@media(max-width: 767px){
    .detail-du-an-noi-bat h1,.detail-du-an-noi-bat h2{
    color: var(--e-global-color-0242eae);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2em;		
}
.detail-du-an-noi-bat p:first-child img:first-child{
    margin-bottom: 32px !important;
}
.detail-du-an-noi-bat img{
    margin-bottom: 16px;
}
	.detail-du-an-noi-bat h1{
	margin-bottom: 42px !important;
}
	.detail-du-an-noi-bat strong em{
	font-size: 16px;
}
}
/*Item cho danh mục tiêu biểu, dịch vụ hosting*/
.item-du-an-tieu-bieu{
  position: relative;
  overflow: hidden;          
  background: #fff;          
  border-radius: 10px;       
  transition: background 1s ease-out;
}
.item-du-an-tieu-bieu > * { position: relative; z-index: 1; }
.item-du-an-tieu-bieu::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 80%;
  aspect-ratio: 1 / 3;
  background: #ECF6FF;
  transform: scaleX(0);       
  transform-origin: left center;
  transition: transform 1s ease-out;
  z-index: 0;
}

/* Khi hover: tràn full */
.item-du-an-tieu-bieu:hover::before,
.item-du-an-tieu-bieu:focus-visible::before,
.item-du-an-tieu-bieu:hover .post-excerpt .elementor-widget-container::after
{
  transform: scaleX(1);
}
.post-excerpt .elementor-widget-container::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    opacity: 0.5;
    background: var(--e-global-color-secondary);
    transform: scaleX(0);       
      transform-origin: left center;
      transition: transform 1s ease-out;
      z-index: 0;
}
.post-excerpt .elementor-heading-title{
	overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
/*Menu Mobile*/
.menu-mobile li a {
	padding-left: 64px !important;
}
.menu-mobile li.menu-item-domain-name>a::before, .menu-mobile li.menu-item-website-design>a::before, .menu-mobile li.menu-item-hosting>a::before, .menu-mobile li.menu-item-business-email>a::before, .menu-mobile li.menu-item-success-story>a::before, .menu-mobile li.menu-item-web-warehouse>a::before, .menu-mobile li.menu-item-recruitment>a::before, .menu-mobile li.menu-item-services>a::before, .menu-mobile li.menu-item-contact>a::before{
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
	background-position: center;
	left: 22px;
	opacity: 1 !important;
}
.menu-mobile li.menu-item-domain-name>a::before{
    background-image: url('https://nuta.io/wp-content/uploads/2025/08/icon-ten-mien.svg');
}
.menu-mobile li.menu-item-website-design>a::before{
    background-image: url('https://nuta.io/wp-content/uploads/2025/08/icon-thiet-ke-website.svg');
}
.menu-mobile li.menu-item-hosting>a::before{
    background-image: url('https://nuta.io/wp-content/uploads/2025/08/icon-hosting.svg');
}
.menu-mobile li.menu-item-business-email>a::before{
    background-image: url('https://nuta.io/wp-content/uploads/2025/08/icon-email-doanh-nghiep.svg');
}
.menu-mobile li.menu-item-success-story>a::before{
    background-image: url('https://nuta.io/wp-content/uploads/2025/08/icon-cau-chuyen-thanh-cong.svg');
}
.menu-mobile li.menu-item-web-warehouse>a::before{
    background-image: url('https://nuta.io/wp-content/uploads/2025/08/icon-kho-web.svg');
}
.menu-mobile li.menu-item-recruitment>a::before{
    background-image: url('https://nuta.io/wp-content/uploads/2025/08/icon-tuyen-dung.svg');
}
.menu-mobile li.menu-item-services>a::before{
    background-image: url('https://nuta.io/wp-content/uploads/2025/08/icon-dich-vu.svg');
}
.menu-mobile li.menu-item-contact>a::before{
    background-image: url('https://nuta.io/wp-content/uploads/2025/08/icon-lien-he.svg');
}