@charset "utf-8";
/*

TemplateMo 559 Zay Shop

https://templatemo.com/tm-559-zay-shop

---------------------------------------------
Table of contents
------------------------------------------------
1. Typography
2. General
3. Nav
4. Hero Carousel
5. Accordion
6. Shop
7. Product
8. Carousel Hero
9. Carousel Brand
10. Services
11. Contact map
12. Footer
13. Small devices (landscape phones, 576px and up)
14. Medium devices (tablets, 768px and up)
15. Large devices (desktops, 992px and up)
16. Extra large devices (large desktops, 1200px and up)
--------------------------------------------- */
 .img-fluid-slide{ height:600px !important; width:100%}
 .img-fluid-other{ width:100%; padding-bottom:10px;}
.title_cat100 {
	text-align:center;
  margin: 3px;
  border: 1px solid #f6821f;
  border-radius: 15px 15px 15px 15px;
}

.title_cat100 a {
  font-size: 1.25rem;
  font-family: 'Oswald', sans-serif;
  color: #f6821f;
  text-align:center;
  font-weight: 400; text-decoration:none;

 
 
}



.boxcenter{
 padding-bottom: 60px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.cart {
    margin-top:0px;
	font-size: 15px;
	text-align: right;
}
.cart a { color: #268212; font-weight:bold}
.cart img { width:40px;}

.km {
    background: url(../images/bg_sale.png) no-repeat;
    height: 40px;
    width: 40px;
    position: absolute;
    left: 5px;
    top: 5px;
    color: #fff;
    line-height: 40px;
    text-align: center;
}

.uk-list {
    padding: 0;
    list-style: none;
}
.payment{
	
	margin-top: 20px;
width: 100%;
margin-bottom: 20px;
float: left;
	
}
.payment .step .item {
    float: left;
    width: 33.33%;
}

.payment .step .item:first-child .link {
    padding-left: 20px;
}
.payment .step .link {
    display: block;
    padding: 8px 35px 8px 30px;
    padding-left: 30px;
    font-size: 13px;
    line-height: 20px;
    color: #333;
    font-weight: bold;
    background: #f0f0f0;
    position: relative;
}
.payment .step .complete .number {
    text-indent: -999px;
    background: url(../images/icon-checked.png) 0% 0% no-repeat;
}
.payment .step .number {
    display: inline-block;
    margin-right: 5px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #999;
    color: #fff;
    text-align: center;
    font-size: 12px;
    line-height: 24px;
}
 .payment .step .active .number {
    background: #0492d5;
}
 .payment .step .active .link {
    background: #f4f9fd;
}
button{
	cursor:pointer
}
 .count .abate {
    left: -30px;
	top: 20px;
    border-right: none;
}
 .count .btn {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 1px solid #dfdfdf;
    border-right-color: rgb(223, 223, 223);
    border-right-style: solid;
    border-right-width: 1px;
    top: 0;
    cursor: pointer;
	padding:0;
}
 .count .augment {
    right: -30px;
    border-left: none;
}
 .count .quantity {
    width: 30px;
    height: 30px;
    text-align: center;
    border: 1px solid #dfdfdf;
}
.uk-position-relative {
    position: relative !important;
}
.count > * {
    display: inline-block;
}
.count {
    text-align: center;
}
.count .abate::before {
    background: #ccc;
}
 .count .augment::before {
    background: #288ad6;
}
 .count .abate::before{
    width: 8px;
    height: 2px;
    margin: 8px auto;
    content: "";
    display: block;
}
.count .augment::before {
    width: 8px;
    height: 2px;
    margin: 8px auto;
    content: "";
    display: block;
}
.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
 .count .augment::after {
    content: "";
    width: 2px;
    height: 8px;
    background: #288ad6;
    display: block;
    margin: 0 auto;
    position: absolute;
    top: 5px;
    left: 0px;
    right: 0;
}


.title_thongtin{
	background:green;
	color:#FFF;
	font-weight:bold;
	padding:5px 15px;
}
.uk-width-medium-1-1 td{
	padding:3px;
}
#frmorder2 .col-md-6{
	float:left;
	
}
.uk-width-medium-7-10 input{
	border:1px solid #eee;
	padding:3px;
	min-width:100%;
}
.uk-width-medium-7-10 textarea{
	border:1px solid #eee;
	padding:3px;
	min-width:100%;
}

.uk-width-medium-3-10{
	font-weight:bold;
	width: 25%;
}
.uk-width-medium-7-10{
	width:70%;
	float:left;
}

.uk-grid div{
	margin-bottom:10px;
}
.dvv img{
	float:left;
	margin-right:10px;
	width:80px;
}
.nnn{
	text-transform:uppercase;
}

.uk-width-medium-1-1 {
    width: 100%;
    float: left;
}


navbar {
  z-index: 999;
  position: relative;
  top: 0;
  left: 0;
  width: 100%; }
  
  
/* Điều chỉnh đôi chút vào khoảng cách chung */
.products-list,
.product-grid,
.category-products,
ul.products {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Áp dụng độ rộng tương ứng cho sản phẩm */
.products-list .product,
.product-grid .item,
.category-products .product,
ul.products li {
  width: calc(50% - 8px);
  box-sizing: border-box;
}

h3.text-center.mt-3.mb-3 a {
  font-weight: bold;       /* Chữ đậm */
  color: orange;          /* Màu cam */
  font-size: 1.5rem;      /* Cỡ chữ vừa phải, khoảng 24px */
  text-decoration: none;  /* Bỏ gạch chân nếu có */
}

h3.text-center.mt-3.mb-3 a:hover {
  color: darkorange;      /* Màu cam đậm khi hover */
}

.card-img-top {
  width: 100%;
  height: 250px; /* chiều cao cố định */
  object-fit: cover; /* ảnh sẽ cover vùng, không bị méo */
  object-position: center center; /* căn giữa ảnh */
}


@media (max-width:767px){
  /* Container */
  .[container-selector] {
    display: flex;
    flex-wrap: wrap;
    gap:8px;
  }
  /* Mỗi sản phẩm */
  .[container-selector] > .[item-selector] {
    width: calc(50% - 8px);
    box-sizing: border-box;
  }
  .fix_an { display:none !important;}
  .h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 17px ;
    font-weight: 300;
	}
	
	.h-100 {
    height: 100% !important;
    padding-bottom: 0px;
	}

}
@media (max-width: 767px) {
  /* Mỗi sản phẩm chiếm 50% chiều rộng trên mobile */
  .col-12.col-md-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (max-width: 767px) {
  /* Ẩn menu con mặc định */
  .nav-item .is-dropdown.level-3 {
    display: none;
    position: static;
    box-shadow: none;
    background: #f8f9fa;
    padding: 10px 0;
  }

  /* Hiển thị menu con khi nav-item có class 'show' (hoặc active) */
  .nav-item.bar-dropdown.show .is-dropdown.level-3 {
    display: block;
  }
}
/* Khi màn hình lớn hơn desktop: trả lại 4 sản phẩm/1 hàng (nếu có rule cũ) */
@media (min-width: 768px) {
  .products-list .product,
  .product-grid .item,
  .category-products .product,
  ul.products li {
    width: calc(25% - 12px);
  }
  
  .fix_an_full{ display:none !important;}
}

/* Nếu web đang dùng hình ảnh hoặc nội dung liên kết thuộc sản phẩm nằm ở dạng grid mặc định, bạn có thể bỏ qua @media thứ 2 nếu không cần */
@media (max-width: 767px) {
  .products-list,
  .product-grid,
  .category-products,
  ul.products {
    display: flex;
    flex-wrap: wrap;
  }

  .products-list .product,
  .product-grid .item,
  .category-products .product,
  ul.products li {
    width: calc(50% - 8px);
    margin: 0;
  }
}  
  @media (min-width: 992px) {
    navbar {
      position: fixed; } }
  navbar.minimal {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); }
    @media (max-width: 1199px) {
      navbar.minimal {
        position: fixed; }
        navbar.minimal .top-header {
          height: 0;
          visibility: hidden;
          padding: 0;
          border: none; }
          navbar.minimal .top-header > .container {
            display: none; }
        navbar.minimal .main-header {
          background: #ffffff; } }
    @media (max-width: 991px) {
      navbar.minimal .header-content {
        top: 85px; } }
		
.bar-dropdown {
  cursor: pointer;
  position: relative;
  display: inline-block;
  vertical-align: top; }
  @media (max-width: 991px) {
    .bar-dropdown {
      display: block;
      vertical-align: middle; } }
  .bar-dropdown .is-dropdown {
    font-weight: 400;
    line-height: 1.2;
    left: 0;
    top: 100%;
    z-index: -1;
    visibility: hidden;
    transition: all .35s .1s;
    opacity: 0; }
    @media (min-width: 992px) {
      .bar-dropdown .is-dropdown {
        will-change: transform;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        min-width: 290px;
        -webkit-transform: translateY(11%);
        transform: translateY(11%);
        position: absolute;
        padding: 15px;
        background: #ffffff; }
        .bar-dropdown .is-dropdown::before, .bar-dropdown .is-dropdown::after {
          bottom: 100%;
          left: 30px;
          border: solid transparent;
          content: " ";
          height: 0;
          width: 0;
          position: absolute;
          pointer-events: none;
          -webkit-transform: scale(-1, -1);
          -khtml-transform: scale(-1, -1);
          -moz-transform: scale(-1, -1);
          -ms-transform: scale(-1, -1);
          -o-transform: scale(-1, -1);
          transform: scale(-1, -1);
          -webkit-transition: all 0.6s;
          -moz-transition: all 0.6s;
          -ms-transition: all 0.6s;
          -o-transition: all 0.6s;
          transition: all 0.6s; }
        .bar-dropdown .is-dropdown::before {
          border-color: rgba(136, 183, 213, 0);
          border-bottom-color: #ffffff;
          border-width: 5px;
          margin-left: 0px; }
        .bar-dropdown .is-dropdown::after {
          border-color: rgba(194, 225, 245, 0);
          border-bottom-color: #ffffff;
          border-width: 10px;
          margin-left: -5px; } }
    @media (max-width: 991px) {
      .bar-dropdown .is-dropdown {
        position: relative;
        width: 100%;
        height: 0;
        overflow: hidden;
        background-color: #f2f2f2; } }
    .bar-dropdown .is-dropdown a {
      display: block; text-decoration:none; text-transform:none;
      color: #000000;
      -webkit-transition: all 0s;
      -moz-transition: all 0s;
      -ms-transition: all 0s;
      -o-transition: all 0s;
      transition: all 0s;
      font-size: 0.9375rem;
      white-space: nowrap;
      text-align: left;
      padding: 10px 5px;
      border-bottom: 1px solid #ededed; }
      .bar-dropdown .is-dropdown a .fa-long-arrow-alt-right {
        font-size: 0;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
        color: #ffffff; }
      @media (max-width: 991px) {
        .bar-dropdown .is-dropdown a {
          padding: 10px 20px;
          margin: 0; } }
      .bar-dropdown .is-dropdown a:hover, .bar-dropdown .is-dropdown a.active {
        color: #ffffff;
        background: #0973ba;
        background: linear-gradient(270deg, #27295a 0%, #1e62a1 35%, #0973ba 100%); }
        .bar-dropdown .is-dropdown a:hover .fa-long-arrow-alt-right, .bar-dropdown .is-dropdown a.active .fa-long-arrow-alt-right {
          font-size: 0.875rem;
          margin: 0 3px 0 10px; }
    .bar-dropdown .is-dropdown.is-wide {
      width: 370px; }
      @media (max-width: 991px) {
        .bar-dropdown .is-dropdown.is-wide {
          width: 100%; } }
  .bar-dropdown.isfull {
    position: static; }
    .bar-dropdown.isfull .is-dropdown {
      width: 100%;
      padding-top: 20px;
      padding-bottom: 20px; }
  .bar-dropdown:nth-last-child(2) .is-dropdown {
    left: auto;
    right: 0; }
    @media (min-width: 992px) {
      .bar-dropdown:nth-last-child(2) .is-dropdown::before, .bar-dropdown:nth-last-child(2) .is-dropdown::after {
        left: auto;
        right: 30px; } }
  .bar-dropdown:hover .is-dropdown {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    visibility: visible;
    z-index: 10;
    opacity: 1; }
    @media (min-width: 992px) {
      .bar-dropdown:hover .is-dropdown::before, .bar-dropdown:hover .is-dropdown::after {
        -webkit-transform: scale(1, 1);
        -khtml-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1); } }
  @media (max-width: 991px) {
    .bar-dropdown.active .is-dropdown {
      height: auto;
      visibility: visible;
      opacity: 1; } }

.btn-showsub-level-3 {
  display: flex;
  width: 20px;
  height: 20px;
  position: absolute;
  top: calc(34% - 4px);
  right: 0;
  z-index: 50;
  justify-content: center;
  align-items: center;
  color: #24184a; }
  @media (max-width: 991px) {
    .btn-showsub-level-3 {
      width: 40px;
      height: 40px;
      top: 0; } }

.bar-dropdown-level-3 {
  cursor: pointer;
  position: relative; }
  @media (max-width: 991px) {
    .bar-dropdown-level-3 {
      display: block;
      vertical-align: middle;
      width: 100%; } }
  .bar-dropdown-level-3 .is-dropdown-level-3 {
    font-weight: 400;
    line-height: 1.2;
    top: 0;
    display: none;
    box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.5);
    background-color: #ffffff;
    position: absolute;
    text-align: left;
    padding: 15px; }
    .bar-dropdown-level-3 .is-dropdown-level-3 > a {
      color: #333333;
      padding: 10px 0;
      font-size: 0.9375rem;
      text-decoration: none;
      display: flex;
      align-items: center; }
      .bar-dropdown-level-3 .is-dropdown-level-3 > a .fas {
        font-size: 0;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
        color: #ffffff; }
        @media (max-width: 991px) {
          .bar-dropdown-level-3 .is-dropdown-level-3 > a .fas {
            font-size: 0.875rem;
            margin: 0 7px 0 10px;
            color: #24184a; } }
      .bar-dropdown-level-3 .is-dropdown-level-3 > a:hover .fas {
        margin: 0 7px 0 10px; }
      .bar-dropdown-level-3 .is-dropdown-level-3 > a.active, .bar-dropdown-level-3 .is-dropdown-level-3 > a:hover {
        color: #ffffff;
        background: #24184a;
        background: linear-gradient(270deg, #24184a 0%, #3a9a48 35%, #6ab74f 100%); }
    @media (min-width: 992px) {
      .bar-dropdown-level-3 .is-dropdown-level-3 {
        width: 260px;
        left: 100%; } }
    @media (max-width: 991px) {
      .bar-dropdown-level-3 .is-dropdown-level-3 {
        position: relative;
        width: 100%;
        height: 0;
        overflow: hidden;
        background-color: #e6e6e6; } }
  .bar-dropdown-level-3.open .is-dropdown-level-3 {
    display: block;
    z-index: 999; }
    @media (max-width: 991px) {
      .bar-dropdown-level-3.open .is-dropdown-level-3 {
        height: auto;
        padding-left: 17px;
        box-shadow: none; } }
  @media (min-width: 992px) {
    .bar-dropdown-level-3:hover .is-dropdown-level-3 {
      display: block; }
    .bar-dropdown-level-3:hover .btn-showsub-level-3 {
      color: #ffffff; } }
  @media (max-width: 991px) {
    .bar-dropdown-level-3.active .is-dropdown-level-3 {
      height: auto;
      visibility: visible; } }
  @media (min-width: 992px) {
    .bar-dropdown-level-3.active .btn-showsub-level-3 {
      color: #ffffff; } }
  .bar-dropdown-level-3.active > a, .bar-dropdown-level-3.open > a, .bar-dropdown-level-3:hover > a {
    color: #ffffff;
    background: #24184a;
    background: linear-gradient(270deg, #24184a 0%, #3a9a48 35%, #6ab74f 100%); }
    .bar-dropdown-level-3.active > a .fa-long-arrow-alt-right, .bar-dropdown-level-3.open > a .fa-long-arrow-alt-right, .bar-dropdown-level-3:hover > a .fa-long-arrow-alt-right {
      font-size: 0.875rem;
      margin: 0 3px 0 10px; }

.title-page8 {
  position: relative;
  display: inline-block; /* Để đường kẻ theo đúng chiều rộng text */
  margin-bottom: 30px;   /* Khoảng cách dưới tiêu đề */
}

.title-page8::after {
  content: '';
  display: block;
  background: darkorange;
  width: 120px;        /* Độ dài đường kẻ */
  height: 2px;        /* Độ dày đường kẻ */
  margin: 8px auto 0; /* Cách text 8px, căn giữa (auto 2 bên) */
}

/* Typography */
body, ul, li, p, a, label, input, div {
  font-family: 'Roboto', sans-serif;
  font-size: 18px !important;
  font-weight: 300 !important;
}
.h1 {
  font-family: 'Roboto', sans-serif;
  font-size: 48px !important;
  font-weight: 200 !important; color:darkorange; font-weight:bold;
}
.h2 {
  font-family: 'Roboto', sans-serif;
  font-size: 22px ;
  font-weight: 300;
}
.h3 {
  font-family: 'Roboto', sans-serif;
  font-size: 22px !important;
}
/* General */
.logo { font-weight: 500 !important;}
.logo img { max-width:75%;}
.text-warning {  color: #ede861 !important;}
.text-muted { color: #bcbcbc !important;}
.text-muted-price { color: #f6821f !important; font-weight:bold; padding-bottom:10px;}
.text-success { color: #59ab6e !important;}
.text-light { color: #cfd6e1 !important;}
.bg-dark { background-color: #212934 !important;}
.bg-light { background-color: #e9eef5 !important;}
.bg-black { background-color: #1d242d !important;}
.bg-success { background-color: #f6821f !important;}
.btn-success {
  background-color: #f6821f !important;
  border-color: #f6821f !important;
}
.pagination .page-link:hover {color: #000;}
.pagination .page-link:hover, .pagination .page-link.active {
  background-color: #69bb7e;
  color: #fff;
}
/* Nav */
#templatemo_nav_top { min-height: 40px;}
#templatemo_nav_top * { font-size: .9em !important;}
#templatemo_main_nav a { color: #212934;}
#templatemo_main_nav a:hover { color: #69bb7e;}
#templatemo_main_nav .navbar .nav-icon { margin-right: 20px;}

/* Hero Carousel */
#template-mo-zay-hero-carousel { background: #efefef !important;}
/* Accordion */
.templatemo-accordion a { color: #000;}
.templatemo-accordion a:hover { color: #333d4a;}
/* Shop */
.shop-top-menu a:hover { color: #69bb7e !important;}
/* Product */
.product-wap { box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.10);}
.product-wap .product-color-dot.color-dot-red { background:#f71515;}
.product-wap .product-color-dot.color-dot-blue { background:#6db4fe;}
.product-wap .product-color-dot.color-dot-black { background:#000000;}
.product-wap .product-color-dot.color-dot-light { background:#e0e0e0;}
.product-wap .product-color-dot.color-dot-green { background:#0bff7e;}
.card.product-wap .card .product-overlay {
  background: rgba(0,0,0,.2);
  visibility: hidden;
  opacity: 0;
  transition: .3s;
}
.card.product-wap:hover .card .product-overlay {
  visibility: visible;
  opacity: 1;
}
.card.product-wap a { color: #000;}
#carousel-related-product .slick-slide:focus { outline: none !important;}
#carousel-related-product .slick-dots li button:before {
  font-size: 15px;
  margin-top: 20px;
}
/* Brand */
.brand-img {
  filter: grayscale(100%);
  opacity: 0.5;
  transition: .5s;
}
.brand-img:hover {
  filter: grayscale(0%);
  opacity: 1;
}
/* Carousel Hero */
#template-mo-zay-hero-carousel .carousel-indicators li {
  margin-top: -50px;
  background-color: #59ab6e;
}
#template-mo-zay-hero-carousel .carousel-control-next i,
#template-mo-zay-hero-carousel .carousel-control-prev i {
  color: #59ab6e !important;
  font-size: 2.8em !important;
}
/* Carousel Brand */
.tempaltemo-carousel .h1 {
  font-size: .5em !important;
  color: #000 !important;
}
/* Services */
.services-icon-wap {transition: .3s;}
.services-icon-wap:hover, .services-icon-wap:hover i {color: #fff;}
.services-icon-wap:hover {background: #69bb7e;}
/* Contact map */
.leaflet-control a, .leaflet-control { font-size: 10px !important;}
.form-control { border: 1px solid #e8e8e8;}
/* Footer */
#tempaltemo_footer a { color: #dcdde1;}
#tempaltemo_footer a:hover { color: #68bb7d;}
#tempaltemo_footer ul.footer-link-list li { padding-top: 10px;}
#tempaltemo_footer ul.footer-icons li {
  width: 2.6em;
  height: 2.6em;
  line-height: 2.6em;
}
#tempaltemo_footer ul.footer-icons li:hover {
  background-color: #cfd6e1;
  transition: .5s;
}
#tempaltemo_footer ul.footer-icons li:hover i {
  color: #212934;
  transition: .5s;
}
#tempaltemo_footer .border-light { border-color: #2d343f !important;}
/*
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
*/
/* Small devices (landscape phones, 576px and up)*/
.product-wap .h3, .product-wap li, .product-wap i, .product-wap p {
  font-size: 12px !important;
}
.product-wap .product-color-dot {
  width: 6px;
  height: 6px;
}

@media (min-width: 576px) {
  .tempaltemo-carousel .h1 { font-size: 1em !important;}
}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  #templatemo_main_nav .navbar-nav {max-width: 450px;}
 }

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  #templatemo_main_nav .navbar-nav {max-width: 650px;}
  #template-mo-zay-hero-carousel .carousel-item {/*min-height: 30rem !important;*/}
  .product-wap .h3, .product-wap li, .product-wap i, .product-wap p {font-size: 18px !important;}
  .product-wap .product-color-dot {
    width: 12px;
    height: 12px;
  }
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {}