/*
Theme Name: Eshop Elementor
Theme URI: https://anantsites.com/eshop
Author: Anantsites
Author URI: https://anantsites.com
Description: Eshop Elementor is a powerful and highly customizable WordPress theme designed exclusively for the Elementor page builder. It allows you to create a wide variety of layouts effortlessly —no coding required. Packed with advanced features, it offers an outstanding user experience. Its intuitive interface and robust flexibility make it the perfect option for both beginners and seasoned web creators.
Version: 1.0.3
Tested up to: 6.8
Requires at least: 6.7
Requires PHP: 7.4
Tags: one-column, two-columns ,right-sidebar, flexible-header, custom-background, custom-header, custom-menu, editor-style, featured-images, footer-widgets,  theme-options, threaded-comments, rtl-language-support, translation-ready, full-width-template, custom-logo, blog, news
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl.html
Text Domain: eshop-elementor
*/
/* ========= Blog ========= */
body {
  background-color: #efefef;
}

body,
button,
input,
select,
textarea {
	font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-weight: normal;
	text-transform: none;
	font-size: 17px;
	line-height: 1.5;
  padding: 0;
  margin: 0;
  color: #000;
  background-color: #fff;
}
textarea { 
	height: 200px;
}
a {
  background-color: transparent;
  color: #1151d3;
}

a:active {
  outline: 0;
}
a:hover, a:active {
  color: #000;
}
select {
	background-clip: padding-box;
	background-color: #fff;
	border: 2px solid #ccc;
	border-radius: 0;
	color: #444;
	display: block;
	font-weight: 400;
	overflow: hidden;
	padding: 6px 12px;
	position: relative;
	text-decoration: none;
	white-space: nowrap;
	width: 100%;
}
input:not([type]), input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="url"], input[type="text"],textarea {
	border-radius: 0;
  margin-bottom: 20px;
  box-shadow: inherit;
  padding: 6px 12px;
  line-height: 40px;
  border-width: 2px;
  border-style: solid;
  width: 100%;
}
input[type="submit"], button {
	padding: 5px 35px;
	line-height: 30px;
	border-radius: 4px;
	font-weight: bold;
	font-size: 14px;
	border-width: 1px;
	border-style: solid;
	transition: all 0.4s ease-in-out 0s;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  color: #1151d3;
  border-color: #1151d3;
}
input[type="submit"]:hover, button:hover, input[type="submit"]:focus, button:focus {
	transition: all 0.3s ease 0s;
	outline: none;
  background-color: #1151d3;
  color: #fff;
}
img, svg {
  vertical-align: middle;
}
@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}
/*---------------------------------------
	2.2.Typography        
-----------------------------------------*/
h1, .h1 {
	font-size: 34px;
	line-height: 1.3;
}
h2, .h2 {
	font-size: 32px;
	line-height: 1.3;
}
h3, .h3 {
	font-size: 28px;
	line-height: 1.3;
}
h4, .h4 {
	font-size: 24px;
	line-height: 1.3;
}
h5, .h5 {
	font-size: 20px;
	line-height: 1.3;
}
h6, .h6 {
	font-size: 16px;
	line-height: 1.3;
}
img.alignnone {
	width: 100%;
	height: auto;
}
img.size-large {
	width: 100%;
	height: auto;
}
.wpcf7-form label {
	display: inherit;
}
mark, .mark {
	padding: 2px 5px;
	border-radius: 3px;
}
.alignright {
	text-align: right;
}
.alignleft {
	text-align: left;
}
.aligncenter {
	text-align: center;
}
blockquote {
	position: relative;
	width: 100%;
	border-width: 0 0 0 5px;
	border-style: solid;
	padding: 20px;
}
blockquote::before {
	content: "\f122";
	display: table;
	float: left;
	font-family: "dashicons";
	font-size: 28px;
	margin-top: 6px;
	font-weight: normal;
	width: 6%;
}
blockquote p {
	font-style: italic;
	width: 94%;
	display: table;
	font-weight: normal;
	line-height: 1.5;
	font-size: 20px;
}
img {
  height: auto;
  max-width: 100%;
}
.comment-meta .avatar {
  float: left;
  margin-right: 10px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
ol.comment-list {
	list-style: none;
}
footer .copyright p, footer .copyright a {
	font-size: 15px;
	line-height: 20px;
}
/*** WordPress ****/
.bypostauthor {}
.sticky {}
.wp-caption {
  margin-bottom: calc(1.5 * 1rem);
}
.wp-caption img[class*="wp-image-"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.wp-caption-text {
  font-size: 13px;
  font-style: italic;
  line-height: 1.6;
  margin: 0;
  padding: 0.5rem !important;
  text-align: center;
}
.wp-caption-text a:hover { color: #01012f; }
.wp-caption, .gallery-caption { max-width: 100%; }
/*------- Gallery ------*/
.gallery-item {
  display: block;
}
.gallery-columns-2 .gallery-item {
  max-width: calc((100% - 16px * 1) / 2);
}
.gallery-columns-2 .gallery-item:nth-of-type(2n+2) {
  margin-right: 0;
}
.gallery-columns-3 .gallery-item {
  max-width: calc((100% - 16px * 2) / 3);
}
.gallery-columns-3 .gallery-item:nth-of-type(3n+3) {
  margin-right: 0;
}
.gallery-columns-4 .gallery-item {
  max-width: calc((100% - 16px * 3) / 4);
}
.gallery-columns-4 .gallery-item:nth-of-type(4n+4) {
  margin-right: 0;
}
.gallery-columns-5 .gallery-item {
  max-width: calc((100% - 16px * 4) / 5);
}
.gallery-columns-5 .gallery-item:nth-of-type(5n+5) {
  margin-right: 0;
}
.gallery-columns-6 .gallery-item {
  max-width: calc((100% - 16px * 5) / 6);
}
.gallery-columns-6 .gallery-item:nth-of-type(6n+6) {
  margin-right: 0;
}
.gallery-columns-7 .gallery-item {
  max-width: calc((100% - 16px * 6) / 7);
}
.gallery-columns-7 .gallery-item:nth-of-type(7n+7) {
  margin-right: 0;
}
.gallery-columns-8 .gallery-item {
  max-width: calc((100% - 16px * 7) / 8);
}
.gallery-columns-8 .gallery-item:nth-of-type(8n+8) {
  margin-right: 0;
}
.gallery-columns-9 .gallery-item {
  max-width: calc((100% - 16px * 8) / 9);
}
.gallery-columns-9 .gallery-item:nth-of-type(9n+9) {
  margin-right: 0;
}
.gallery-item:last-of-type {
  padding-right: 0;
}
.gallery-caption {
  display: block;
  font-size: 0.71111rem;
  line-height: 1.6;
  margin: 0;
  padding: 0.5rem;
}
.gallery-item > div > a {
  display: block;
  line-height: 0;
  box-shadow: 0 0 0 0 transparent;
}
.gallery-item > div > a:focus {
  box-shadow: 0 0 0 2px #e9e9e9;
}
.gallery .gallery-item {
	margin-top: 0 !important;
}
.gallery .gallery-item img {
	border: 2px solid #e9e9e9 !important;
}
.wp-block-gallery {
  margin: 0;
}
.blocks-gallery-item figure { position: relative; overflow: hidden; margin: 0; }
/*Address*/
address i { 
	width: 1.563rem;
  height: auto;
  margin-right: 0.438rem;
  font-size: 1.25rem !important;
}
/*** WordPress ****/
.mg-widget .mg-author .img-circle{
	width: 180px;
	height: 180px;
	padding: 6px;
	border: 4px solid #1151d3;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
/*** WordPress ****/
.wp-caption {
  margin-bottom: calc(1.5 * 1rem);
}
.wp-caption img[class*="wp-image-"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.wp-caption-text {
  font-size: 0.8125rem;
  font-style: italic;
  line-height: 1.6;
  margin: 0;
  padding: 0.5rem !important;
  text-align: center;
}
.wp-caption-text a:hover { color: #01012f; }
.wp-caption, .gallery-caption { max-width: 100%; }
/* Text meant only for screen readers. */
.screen-reader-text {
  position: absolute;
  margin: -1px;
  padding: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  word-wrap: normal !important;
}
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.no-js .some-element .screen-reader-text {
  position: static;
  -webkit-clip-path: none;
  clip-path: none;
  width: auto;
  height: auto;
  margin: 0;
}
.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar. */
}
/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
  outline: 0;
}
.wrapper { 
  margin: 0 auto;
}
.main_nav div ul {
  display: flex;
  padding: 0;
  list-style-type: none;
  justify-content: flex-end;
  gap: 15px;
}
/* -------------------------- Main Header -------------------------- */
.esh-el-header-main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-block-start: 1rem;
  padding-block-end: 1rem;
  position: relative;
}
.esh-el-header-logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.esh-el-header-menu {
  display: flex;
  align-items: center;
  flex-grow: 1;
}
.esh-el-header-menu ul.esh-el-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.esh-el-header-menu ul.esh-el-menu li {
  position: relative;
  display: flex;
}
.esh-el-header-menu ul.esh-el-menu li a {
  display: block;
  padding: 8px 15px;
  width: 100%;
  font-weight: 500;
  color: #111;
}
.esh-el-header-menu ul.esh-el-menu li ul {
  background: #fff;
  display: none;
  min-width: 150px;
  position: absolute;
  z-index: 2;
  left: 0;
  top: 100%;
}
.esh-el-header-menu ul.esh-el-menu li.menu-item-has-children:after {
  display: block;
  content: "▾";
  font-size: 1.2rem;
  align-items: center;
  color: #666;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-decoration: none;
}
.esh-el-header-menu ul.esh-el-menu li ul li.menu-item-has-children:after {
  transform: translateY(-50%) rotate(-90deg);
  right: 10px;
}
.esh-el-header-menu ul.esh-el-menu li.menu-item-has-children {
  padding-inline-end: 10px;
}
.esh-el-header-menu ul.esh-el-menu li:hover>ul {
  display: block;
}
.esh-el-header-menu ul.esh-el-menu li:focus-within>ul {
  display: block;
}
.esh-el-header .esh-el-header-menu {
  justify-content: flex-end;
}
.esh-el-header-menu ul.esh-el-menu li ul ul {
  left: 100%;
  top: 0;
}
/* ----- Blog Post ----- */
.esh-el-blog-post{
  margin-bottom: 50px;
}
.esh-el-blog-category{
  margin-top: 15px;
}
.esh-el-blog-post .esh-el-title{
  margin-bottom: 1.5rem;
  margin-top: 0.25rem;
}
.esh-el-blog-navigation{
  text-align: center;
}
.esh-el-footer{
  text-align: center;
  padding: 15px 0;
}
.esh-el-blog-post .post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
}
.esh-el-blog-post .read-more {
  display: inline-block;
  padding: 5px 15px;
  border: 1px solid #1151d3;
  text-transform: capitalize;
}
.site-logo a,
.esh-el-blog-post .read-more a,
.esh-el-blog-post .esh-el-title a {
	text-decoration: none;
}
/* Width All Devices like Container */
.esh-el-footer:not(.dynamic-footer),body:not([class*=elementor-page-]) .main-section {
  margin-inline-start:auto;margin-inline-end:auto;width: 100%
}
/* word break */
article.esh-el-blog-post-inner {
  word-break: break-all;
}
/* Single page */
.comments-area.mg-card-box {
  word-break: break-all;
}

@media (max-width: 575px) {
  .esh-el-footer:not(.dynamic-footer),body:not([class*=elementor-page-]) .main-section {
    padding-inline-start:10px;
    padding-inline-end:10px
  }
  .esh-el-blog-post .post-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .esh-el-blog-post .read-more{
    margin-top: 20px;
  }
}

/* @media (min-width: 576px) {
  .esh-el-footer:not(.dynamic-footer),body:not([class*=elementor-page-]) .main-section {
    max-width:500px
  }
  .site-footer.footer-full-width .footer-inner,.site-header.header-full-width .header-inner {
    max-width: 100%
  }
}

@media (min-width: 768px) {
  .esh-el-footer:not(.dynamic-footer),body:not([class*=elementor-page-]) .main-section {
    max-width:600px
  }
  .site-footer.footer-full-width,.site-header.header-full-width {
    max-width: 100%
  }
}

@media (min-width: 992px) {
  .esh-el-footer:not(.dynamic-footer),body:not([class*=elementor-page-]) .main-section {
    max-width:800px
  }
  .site-footer.footer-full-width,.site-header.header-full-width {
    max-width: 100%
  }
}

@media (min-width: 1200px) {
  .esh-el-footer:not(.dynamic-footer),body:not([class*=elementor-page-]) .main-section {
    max-width:1140px;
  }
  .site-footer.footer-full-width,.site-header.header-full-width {
    max-width: 100%
  }
} */
/* Common class container */
.esh-el-container {
  width: 100%;
  padding-right: 12px;
  padding-left: 12px;
  margin-right: auto;
  margin-left: auto;
  max-width: 576px;
}

@media (min-width: 768px) {
  .esh-el-container {
    max-width: 992px;
  }
}

@media (min-width: 992px) {
  .esh-el-container {
    max-width: 1140px;
  }
}

@media (min-width: 992px) and (max-width:1659.98px) {
  .esh-el-container {
    padding-right: 15px;
    padding-left: 15px
  }
}
.new-header {
    background-color: #333;
    color: #fff;
    padding: 20px;
}

.new-header .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.new-header .logo h1 {
    font-size: 24px;
    margin: 0;
}

.main-navigation {
    font-size: 18px;
}

.main-navigation .menu-item {
    display: inline-block;
    margin-right: 20px;
}
/* Cấu trúc của header */
.custom-header {
    background-color: #fff;
    /* Nền trắng */
    padding: 20px 40px;
    /* Khoảng cách bên trong header */
    border-bottom: 1px solid #ddd;
    /* Đường viền dưới nhẹ */
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    /* Giới hạn chiều rộng của header */
    margin: 0 auto;
    /* Căn giữa */
}

.logo img {
    max-width: 180px;
    /* Điều chỉnh kích thước logo */
    height: auto;
}

.header-links {
    display: flex;
    gap: 30px;
    /* Khoảng cách giữa các liên kết */
    justify-content: center;
    /* Căn giữa các liên kết */
    flex-grow: 1;
    /* Để phần này chiếm không gian giữa logo và giỏ hàng */
}

.header-links a {
    text-decoration: none;
    color: #333;
    /* Màu chữ */
    font-size: 16px;
    /* Kích thước chữ */
    font-weight: 600;
    /* Làm đậm chữ */
    padding: 5px 10px;
    /* Khoảng cách xung quanh liên kết */
    transition: color 0.3s ease, background-color 0.3s ease;
    /* Hiệu ứng chuyển màu */
}

.header-links a:hover {
    color: #fff;
    /* Màu chữ khi hover */
    background-color: #0073e6;
    /* Màu nền khi hover */
    border-radius: 5px;
    /* Bo góc cho liên kết khi hover */
}

.cart {
    font-size: 18px;
    color: #333;
    /* Màu giỏ hàng */
    display: flex;
    align-items: center;
}

.cart .cart-link {
    text-decoration: none;
    color: #333;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    /* Khoảng cách giữa icon và số giỏ hàng */
}

.cart .cart-count {
    font-weight: bold;
    color: #ff0000;
    /* Màu đỏ cho số lượng giỏ hàng */
    margin-left: 5px;
}

/* Thêm hiệu ứng cho giỏ hàng */
.cart .cart-link:hover {
    color: #0073e6;
    /* Màu chữ khi hover */
    transition: color 0.3s ease;
}