@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)
--------------------------------------------- */


html, body {
  overflow-x: hidden !important;
}

body {
  position: relative;
  width: 100%;
  max-width: 100vw;
}

/* Ngăn phần tử nào đó bị tràn ngang */
.container, .row, .section, .split, .product-highlight, footer {
  overflow-x: clip !important;
}
 
 
 .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: 300px !important;; /* 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 */
}

 .card-img-top{
  width: 100%;
  height: 300px !important;; /* chiều cao cố định */
}

@media (max-width: 768px) {
  .card-img-top {
    height: 220px !important; /* Giảm chiều cao để phù hợp màn hình nhỏ */
    object-fit: cover;
    border-radius: 6px;
  }
}

 .section{padding:60px 5%;text-align:center;}
.section.gray{background:#f9f9f9;}
.section h2{margin-bottom:35px;font-size:26px;font-weight:700;color:#222;}
.grid-4,.grid-3{display:grid;gap:25px;}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}

.btn-sm{display:inline-block;padding:8px 20px;background:#e53935;color:#fff;border-radius:4px;font-size:12px;text-transform:uppercase;}
.brands{display:flex;justify-content:center;flex-wrap:wrap;gap:40px;align-items:center;padding:40px 0;}
.pickleball{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:60px 5%;background:#e3f2fd;}
.pickleball .text-box{flex:1;min-width:280px;}
.pickleball .pickle-img img{max-width:300px;}
.news{text-align:left;}
.news h3{font-size:16px;margin:12px 0;}


.cat-card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.cat-card img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ảnh full khung */
  display: block;
  filter: brightness(70%); /* làm ảnh chìm tối nhẹ để chữ rõ hơn */
}

.cat-card h3,
.cat-card .btn-sm {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  z-index: 2;
}

.cat-card h3 {
  bottom: 70px;
  font-size: 20px;
  font-weight: 700;
}

.cat-card .btn-sm {
  bottom: 15px;
  background: #ff5722;
  padding: 6px 14px;
  border-radius: 4px;
  text-decoration: none;
}

.pg218x h3 { color: #fff; margin: 0 0 8px; }

.pg218x ul li a {
  color: #fff;
  text-decoration: none;
  transition: opacity .15s; font-size:14px !important; 
}

.pg218x ul li a:hover,
.pg218x ul li a:focus {
  text-decoration: none;
  opacity: 0.85;
  outline: none;
}

footer {
  position: relative; /* KHÔNG dùng absolute hay fixed nếu muốn footer luôn nằm dưới */
  bottom: 0;
  width: 100%;
  background: #0a47a9; /* màu nền */
  color: #fff;
  padding: 20px 0;
}

.cat-card .btn-sm {
  display: inline-block !important;  /* ép inline */
  width: auto !important;            /* chiều rộng tự động theo chữ */
  margin: 10px auto 15px;            /* căn giữa nút trong box */
  padding: 6px 16px;
  background-color: #e53935;
  color: #fff !important;
  border-radius: 6px;
  font-size: 14px;
  text-decoration: none !important;
  line-height: 1.4;
  white-space: nowrap;
  transition: background 0.3s;
}

.cat-card .btn-sm:hover {
  background-color: #c62828;
}


.section.gray {
  padding: 40px 20px;
  background: #f9f9f9;
}

.section.gray h2 {
  text-align: center;
  margin-bottom: 30px;
  font-size: 28px;
  font-weight: bold;
  color: #333;
}

/* Grid hiển thị 3 cột */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

/* Card box */
.card.news {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.card.news:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  transform: translateY(-3px);
}

/* Hình ảnh */
.card.news img {
  width: 100%;
  height: 300px;          /* chiều cao cố định */
  object-fit: cover;      /* cắt ảnh gọn, không méo */
  display: block;
}

/* Tiêu đề */
.card.news h3 {
  flex-grow: 1;
  padding: 15px;
  font-size: 18px;
  font-weight: 600;
  color: #222;
  margin: 0;
  line-height: 1.4em;
}

.card.news .btn-sm {
  display: inline-block !important;  /* ép inline */
  width: auto !important;            /* chiều rộng tự động theo chữ */
  margin: 10px auto 15px;            /* căn giữa nút trong box */
  padding: 6px 16px;
  background-color: #e53935;
  color: #fff !important;
  border-radius: 6px;
  font-size: 14px;
  text-decoration: none !important;
  line-height: 1.4;
  white-space: nowrap;
  transition: background 0.3s;
}

.card.news .btn-sm:hover {
  background-color: #c62828;
}

.card .news p{ padding-left:10px; }


.pricespmoi{ padding-left:15px; color:#e53935; font-weight:bold; }

.pricesptieubieu{  color:#e53935; font-weight:bold; }

 .footer{background:#1C4D77;color:#fff;padding:50px 5% 1px; font-size:14px !important; }
 
  .footer p{ font-size:14px !important; }
    .footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:25px;margin-bottom:25px;}
    .footer h3{margin-bottom:15px;font-size:18px;}
    .footer ul{list-style:none;}
	.footer ul li a{list-style:none;}
    .footer ul li{margin-bottom:10px;font-size:14px;}
	.footer ul li{margin-bottom:10px;font-size:14px;}
    .copyright{text-align:left;font-size:14px !important; }

.card-product{flex:1 1 auto;padding:1rem 1rem;height: 125px;}

.menu-sanpham a {
  text-decoration: none;  /* Bỏ gạch chân */
  color: #fff;            /* Màu chữ trắng */
}


.menu-sanpham ul li a {
  text-decoration: none; font-size:14px !important;  /* Bỏ gạch chân */
  color: #fff;             /* Màu chữ trắng */
  transition: color 0.3s ease;  /* Hiệu ứng mượt khi đổi màu */
}

.menu-sanpham ul li a:hover {
  color: #e53935;          /* Đổi màu đỏ khi hover */
}


.product-highlight .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

/* Banner bên trái */
.left-banner img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Cột sản phẩm bên phải */
.right-products {
  padding: 10px;
}

.right-products h2 {
  font-size: 22px;
  font-weight: bold;
  color: #d32f2f;
  margin-bottom: 20px;
  text-align: center;
  position: relative;
}

.right-products h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background: #d32f2f;
  margin: 8px auto 0;
}

/* Lưới sản phẩm */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.product-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.product-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.product-card .info {
  padding: 10px 12px;
}

.product-card .info p {
  font-size: 14px;
  margin: 0 0 8px;
  color: #333;
  line-height: 1.4;
}

.product-card .price {
  font-weight: bold; margin-left:10px;
  color: #000;
  font-size: 15px;
}


.title-section {
  position: relative;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase; /* Viết hoa toàn bộ */
  color: #e53935;            /* Màu đỏ giống ảnh */
  display: inline-block;
  margin-bottom: 15px;
  letter-spacing: 1px;
}

.title-section::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 70px;               /* Độ dài gạch ngang */
  height: 2px;               /* Độ dày gạch ngang */
  background-color: #e53935; /* Màu đỏ cùng tông */
  border-radius: 2px;
}



.product-section {
  background: #f4f4f4;
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.product-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
  gap: 40px;
}

.product-item.reverse {
  flex-direction: row-reverse;
}

.product-image img {
  width: 100%;
  max-width: 480px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.product-content {
  flex: 1;
}

.product-content h3 {
  font-size: 20px;
  font-weight: 700;
  color: #e53935;
  margin-bottom: 8px;
}

.product-content .line {
  width: 50px;
  height: 2px;
  background: #e53935;
  margin-bottom: 15px;
}

.product-content p {
  font-size: 16px;
  color: #333;
  margin-bottom: 8px;
  line-height: 1.6;
}

.btn-buy {
  display: inline-block;
  margin-top: 15px;
  background: #e53935;
  color: #fff;
  text-decoration: none;
  padding: 10px 25px;
  border-radius: 25px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-buy:hover {
  background: #c62828;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .product-item, .product-item.reverse {
    flex-direction: column;
  }
  .product-image img {
    max-width: 100%;
  }
  .product-content {
    text-align: center;
  }
  .product-content .line {
    margin: 0 auto 15px;
  }
}

/* Reset box-sizing */
* { box-sizing: border-box; }

/* Section full width */
.split-section {
  width: 100%;
  background: transparent;
}

/* Grid chia 2 cột full-bleed */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 50/50 */
  min-height: 520px;              /* độ cao mặc định (tùy chỉnh) */
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);    /* đảm bảo full-bleed trên layout có container */
}

/* Nếu bạn không dùng transform hack, thay bằng: width:100% và body margin 0 */

/* Bên trái: nền màu, nội dung căn giữa theo chiều dọc */
.split-left {
  background: #1f6a8a; /* đổi màu nếu cần */
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 60px;
}

/* Giữ nội dung trong khung nhỏ hơn (nên tùy chỉnh max-width) */
.split-left .split-inner {
  max-width: 600px;
}

/* Tiêu đề + văn bản */
.split-left h2 {
  font-size: 36px;
  margin: 0 0 18px;
  font-weight: 700;
}

.split-left p {
  color: rgba(255,255,255,0.92);
  line-height: 1.7;
  margin-bottom: 28px;
  font-size: 15px;
}

/* Nút */
.btn-primary {
  display: inline-block;
  background: #e94b3c;
  color: #fff;
  padding: 12px 22px;
  border-radius: 28px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .6px;
  box-shadow: 0 6px 18px rgba(233,75,60,0.18);
  transition: transform .14s ease, box-shadow .14s ease;
}

.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(233,75,60,0.2); }

/* Bên phải: ảnh full cover */
.split-right {
  position: relative;
  overflow: hidden;
}

.split-right img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;       /* cover -> ảnh phủ đầy, crop nếu cần */
  object-position: center right; /* điều chỉnh vị trí cắt ảnh */
}



/* Bố cục chung */

/* Tiêu đề trang */
.title-page {  padding: 20px 0;
  font-size: 28px;
  font-weight: 700;
  color: #222;
  margin-bottom: 20px;
  line-height: 1.3;
}

/* Nội dung chính */
.tintuc-danhsach h3 {
  font-size: 14px;
  color: #777;
  margin-bottom: 20px;
}
.tintuc-danhsach h3 i {
  margin-right: 6px;
  color: #999;
}
.fix-content {
  font-size: 16px; text-align:justify;
  line-height: 1.7;
  color: #444;
}
.fix-content b {
  display: block;
  margin-bottom: 12px;
  color: #000;
}

/* Sidebar */
.product-menu {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
}
.product-menu .title-page {
  font-size: 20px;
  margin-bottom: 20px;
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
}

/* Tin liên quan */
.tintuc-danhsach .row {
  align-items: center;
}
.tintuc-danhsach-img img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  transition: transform .3s;
}
.tintuc-danhsach-img img:hover {
  transform: scale(1.05);
}
.tintuc-danhsach h4 a {
  font-size: 15px;
  font-weight: 600;
  color: #222;
  transition: color .3s;
}
.tintuc-danhsach h4 a:hover {
  color: #007BFF;
}
.tintuc-danhsach time {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: #888;
}


.navbar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.navbar-nav li {
  position: relative;
}

.navbar-nav a {
  display: block;
  padding: 10px 15px;
  color: #222;
  text-decoration: none;
  font-weight: 500;
}

.navbar-nav a:hover {
  color: #c00;
}

/* ====== MENU CẤP 2 ====== */
.is-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.1);
  z-index: 999;
}

.is-dropdown a {
  padding: 10px 15px;
  color: #333;
  white-space: nowrap;
}

.is-dropdown a:hover {
  background: #f5f5f5;
  color: #d00;
}

/* ====== MENU CẤP 3 ====== */
.bar-dropdown-level-3 {
  position: relative;
}

.bar-dropdown-level-3 .is-dropdown.level-3 {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.1);
  min-width: 200px;
}

/* Hover trên PC */
.bar-dropdown:hover > .is-dropdown {
  display: block;
}
.bar-dropdown-level-3:hover > .is-dropdown.level-3 {
  display: block;
}

/* ====== ICON TOGGLE CHO MOBILE ====== */
.toggle-dropdown {
  display: none;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 25px;
  height: 25px;
  cursor: pointer;
}
.toggle-dropdown::after {
  content: "▼";
  font-size: 12px;
  color: #666;
  transition: transform 0.3s;
}
.bar-dropdown.active > .toggle-dropdown::after {
  transform: rotate(180deg);
}

/* ====== MOBILE STYLE ====== */
@media (max-width: 992px) {
  .navbar-nav {
    flex-direction: column;
    align-items: stretch;
  }

  .nav-item {
    width: 100%;
    border-bottom: 1px solid #eee;
  }

  .is-dropdown {
    position: static;
    display: none;
    border: none;
    box-shadow: none;
    background: #f9f9f9;
    margin-left: 10px;
  }

  .bar-dropdown.active > .is-dropdown {
    display: block;
  }

  .bar-dropdown-level-3 .is-dropdown.level-3 {
    position: static;
    display: none;
    background: #f1f1f1;
    margin-left: 20px;
  }

  .bar-dropdown-level-3.active .is-dropdown.level-3 {
    display: block;
  }

  .toggle-dropdown {
    display: block;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .title-page {
    font-size: 22px;
  }
  .product-menu {
    margin-top: 30px;
  }
}
/* ========================= */
/* Responsive: tablet -> xếp 1 cột, banner trên, ảnh dưới */
/* ========================= */
@media (max-width: 992px) {
  .split {
    grid-template-columns: 1fr;
    min-height: auto;
    transform: none;
    width: 100%;
    margin: 0;
  }

  .split-left {
    padding: 40px 24px;
  }

  .split-left h2 { font-size: 28px; }
  .split-left p { font-size: 15px; }
  .split-right img { height: 320px; object-position: center; }
}

/* Mobile: tối ưu chữ và ảnh */
@media (max-width: 576px) {
  .split-left {
    padding: 28px 18px;
  }
  .split-left h2 { font-size: 20px; margin-bottom: 12px; }
  .split-left p { font-size: 14px; margin-bottom: 18px; line-height: 1.6; }
  .btn-primary { padding: 10px 16px; font-size: 14px; }
  .split-right img { height: 260px; }
}

/* ========================= */
/* 🔹 Responsive chỉnh cho mobile & tablet */
/* ========================= */

/* Tablet (≤ 991px): banner trên - sản phẩm dưới */
@media (max-width: 991px) {
  .product-highlight .container {
    grid-template-columns: 1fr;
  }

  .left-banner {
    order: 1;
  }

  .right-products {
    order: 2;
  }

  .product-grid {
    grid-template-columns: repeat(2, 1fr); /* vẫn 2 cột */
  }
}

/* Mobile (≤ 576px): sản phẩm 1 cột */
@media (max-width: 576px) {
  .product-grid {
    grid-template-columns: 1fr; /* mỗi sản phẩm chiếm nguyên hàng */
  }

  .product-card img {
    height: 180px; /* giảm chiều cao hình cho gọn */
  }

  .right-products h2 {
    font-size: 18px;
  }

  .product-card .info p {
    font-size: 13px;
  }

  .product-card .price {
    font-size: 14px;
  }
}


.brand-logos {
  background: #f5f5f5;   /* nền xám nhạt */
  padding: 30px 0;
}

.brand-logos .container {
  max-width: 1200px;
  margin: 0 auto;
}

.logo-list {
  list-style: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;   /* tự xuống hàng khi màn nhỏ */
}

.logo-list li {
  flex: 1 1 20%;   /* desktop: 5 logo / hàng */
  text-align: center;
  padding: 10px;
}

.logo-list img {
  max-width: 250px;
  height: auto;
  display: inline-block;
  transition: transform 0.3s ease;
}

.logo-list img:hover {
  transform: scale(1.1);   /* hover phóng nhẹ */
}



.newsletter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 32px;
}

.newsletter .title {
  flex: 1 1 40%;
  min-width: 250px;
}

.newsletter h2 {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 600;
}

.newsletter p {
  margin: 0;
  color: var(--muted-2);
}

.newsletter-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 50%;
  min-width: 280px;
}

.newsletter-form input[type="email"] {
  padding: 12px 14px;
  border: none;
  border-radius: 4px;
  flex: 1;
  font-size: 15px;
}

.newsletter-form button{
padding:12px 20px;
background:#e53935;
border:none;
color:#fff;
font-weight:600;
cursor:pointer;
font-size:15px;
border-radius:0 4px 4px 0;
transition:background 0.3s;
}


.divider{height:1px; background:rgba(255,255,255,0.15); margin:28px 0;}



.page-banner {
  width: 100%;
  height: 550px; /* chiều cao banner */
 
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.page-banner .overlay {
  width: 700px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-box {
  background: rgba(255, 255, 255, 0.9);
  padding: 40px 60px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  text-align: center;  width: 700px;
}

.banner-box h1 {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 12px;
  color: #333;
}

.banner-box .breadcrumb {
  font-size: 15px;
  color: #555;
}

.banner-box .breadcrumb a {
  text-decoration: none;
  color: #007bff;
}

.banner-box .breadcrumb span {
  margin: 0 6px;
  color: #999;
}

/* ========================= */

/* Tablet (≤ 991px): 3-4 logo / hàng */
@media (max-width: 991px) {
  .logo-list li {
    flex: 1 1 25%;   /* 4 logo mỗi hàng */
  }
  .logo-list img {
    max-width: 120px;
  }
}

/* Mobile (≤ 576px): 2 logo / hàng */
@media (max-width: 576px) {
  .logo-list li {
    flex: 1 1 50%;   /* 2 logo mỗi hàng */
  }
  .logo-list img {
    max-width: 100px;
  }
}

@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 ;
   
	}
	
	.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: 16px !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 ;
 
}
.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: #e53935 !important; font-weight:bold; padding-bottom:5px; padding-top:10px;}
.text-success { color: #59ab6e !important;}
.text-light { color: #cfd6e1 !important;}
.bg-dark { background-color: #e53935 !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 * { }
#templatemo_main_nav a { color: #212934; font-weight:bold;}
#templatemo_main_nav a:hover { color: #e53935 ;}
#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 { }
.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 {
  
  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: 830px;}
  #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) {}