/* here you can put your own css to customize and override the theme */
.breadcrumb .active a{color: #8e663f;}
.front-team h3, .ecommerce .front-team h3{ line-height:20px;}
.hide-0 { display:none!important;}
#fb-root { display: none;}
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style],#___page_0,#___page_0 iframe[style],.fb_iframe_widget span iframe[style] #feedback_1MXsy7YnpvpvUDrDD {
	width: 100% !important;
}
.page-footer-fixed .footer {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    z-index: 10000;
}
.sp{padding-right: 5px;}
.list-group-item-heading a{ color: #ffffff !important;}
.left{float: left !important;}
.right{float: right !important;}
span a:hover{text-decoration: none !important;}
.additional-shop-info{float: left;}
.topmtp {
    font-weight: bold;
    font-size: 16px; -webkit-animation: my 700ms infinite;
    -moz-animation: my 700ms infinite;
    -o-animation: my 700ms infinite;
    animation: my 700ms infinite;
    padding-left: 10px;
}
@-webkit-keyframes my {
	 0% { color: #835b34; }
	 50% { color: #a97c50;  }
	 100% { color: #835b34;  }
 }
 @-moz-keyframes my {
	 0% { color: #835b34;  }
	 50% { color: #a97c50;  }
	 100% { color: #835b34;  }
 }
 @-o-keyframes my {
	 0% { color: #835b34; }
	 50% { color: #a97c50; }
	 100% { color: #835b34;  }
 }
 @keyframes my {
	 0% { color: #835b34;  }
	 50% { color: #a97c50;  }
	 100% { color: #835b34;  }
 }
/* Custom */

/* The Lightbox */
 .lightbox{
    position: fixed;
    z-index: 15;
    top:90%;
	margin-left:10px;
	color: #9e4a33;
	font-size: 20px;
}

.lightbox a{
	color: #fff;
	font-size: 20px;
	background:#9e4a33;
	border-radius: 3px;

}
.lightbox :hover{
	background: #fff;
	color: #9e4a33;
	border: 1px solid #9e4a33;
	border-radius: 3px;
	cursor: pointer;
}

.client{font-size: 20px!important; text-align: center;margin-bottom: -5px;}

.slick-slide {
    margin: 0px 20px;
}

.slick-slide img {
    width: 50%;
}

.slick-slider
{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;
    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

.nav-side-menu {
  overflow: auto;
  margin-top: 11px;
  font-family: verdana;
  font-size: 12px;
  font-weight: 200;
  background-color: #3b3025;
  /*position: fixed;*/
  top: 0px;
  width: 100%;
  height: 100%;
  color: #efe3d2;
}
.nav-side-menu .brand {
  background-color: #2b2119;
  line-height: 50px;
  display: block;
  text-align: center;
  font-size: 14px;
}
.nav-side-menu .toggle-btn {
  display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
  list-style: none;
  padding: 0px;
  margin: 0px;
  line-height: 35px;
  cursor: pointer;
  /*    
    .collapsed{
       .arrow:before{
                 font-family: FontAwesome;
                 content: "\f053";
                 display: inline-block;
                 padding-left:10px;
                 padding-right: 10px;
                 vertical-align: middle;
                 float:right;
            }
     }
*/
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
  font-family: FontAwesome;
  content: "\f078";
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
  float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
  border-left: 3px solid #a97c50;
  background-color: #4a3b2e;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
  color: #c79a6b;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
  color: #c79a6b;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
  background-color: #181c20;
  border: none;
  line-height: 28px;
  border-bottom: 1px solid #23282e;
  margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
  background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
  font-family: FontAwesome;
  content: "\f105";
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
}
.nav-side-menu li {
  padding-left: 0px;
  border-left: 3px solid transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-side-menu li a {
  display: block;
  padding: 0 14px;
  text-decoration: none;
  color: #efe3d2;
}
.nav-side-menu li a i {
  padding-left: 0;
  width: auto;
  padding-right: 8px;
}
.nav-side-menu li:hover {
  border-left: 3px solid #a97c50;
  background-color: #a97c50;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
@media (max-width: 767px) {
  .nav-side-menu {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
  }
  .nav-side-menu .toggle-btn {
    display: block;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 10 !important;
    padding: 3px;
    /*background-color: #ffffff;*/
    color: #ffffff;
    width: 40px;
    text-align: center;
  }
  .brand {
    text-align: left !important;
    font-size: 22px;
    padding-left: 20px;
    line-height: 50px !important;
  }
}
@media (min-width: 767px) {
  .nav-side-menu .menu-list .menu-content {
    display: block;
  }
}
body {
  margin: 0px;
  padding: 0px;
}

/* Wider layout on desktop, centered with white space on very large screens */
@media (min-width: 992px) and (max-width: 1199px) {
  .container {
    width: 94%;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 94%;
    max-width: 1600px;
  }
}

/* Home page: the slider + 3-column row are injected straight into .main
   (no .container wrapper), so box .main itself to match header/footer. */
@media (min-width: 992px) and (max-width: 1199px) {
  .main:has(> .page-slider) {
    width: 94%;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 1200px) {
  .main:has(> .page-slider) {
    width: 94%;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
  }
}
.main > .page-slider {
  text-align: center;
}
.main > .page-slider .fullwidthbanner-container {
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================================
   Phương án A — Đồng / Than. Overrides for colours that live outside
   green.css (hacked bootstrap.min.css, style-shop.css, base style.css).
   custom.css loads last, so these win without !important.
   ========================================================================= */

/* Product caption bar on the home page (rule was injected into bootstrap.min.css) */
.thumbnail .caption {
  background: #8e663f;
}

/* Product title bar on category / listing pages (style-shop.css) */
.product-item h3 {
  background-color: #8e663f;
  min-height: 34px;
}
.product-item h3:hover {
  background-color: #a97c50;
}
.product-item .btn:hover,
.product-item .add2cart:hover {
  background-color: #8e663f;
  border-color: #8e663f;
}

/* Footer strip (GIAO HÀNG / KHUYẾN MÃI / CSKH) — espresso, not bronze */
.steps-block-red {
  background: #2b2119;
}

/* Leftover orange-red accents in the base theme */
.quote-v1 a.btn-transparent:hover {
  background: #a97c50;
}
.color-mode li.color-green {
  background: #8e663f;
}

/* "Đang mở cửa" hours badge in the footer — terracotta, not pink-red */
.pre-footer .badge-danger {
  background-color: #9e4a33;
}

/* =========================================================================
   Fix: product grid on category / listing pages.
   The tiles were floated Bootstrap columns with wildly varying heights, so
   they caught on each other and left big gaps / a staggered layout.
   Flex + wrap forces clean rows of 3; a fixed image box makes every tile
   the same height so the title bars line up.
   ========================================================================= */
.shop-items .row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.shop-items .row > .col-xs-4,
.shop-items .row > .col-xs-6 {
  margin-bottom: 22px;
}
.shop-items .row > .paging_meneame {
  width: 100%;
}
.shop-items .pi-img-wrapper {
  height: 200px;
  overflow: hidden;
}
/* Fill the box edge-to-edge like the homepage category tiles, instead of
   floating a small, letterboxed photo in a sea of white -- same fixed-height
   box, denser photo. */
.shop-items .pi-img-wrapper > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}

/* =========================================================================
   Fix: homepage "DANH MỤC IN ẤN" tile grid -- same crash as the product
   listing grid above (see .shop-items). Floated columns of uneven photo
   and caption height caught on each other and staggered on small screens.
   Same remedy: flex + wrap, fixed-height image box. Two tiles per row on
   phones (was always 3 -> cramped and broken), three from tablet up.
   ========================================================================= */
.home-cat-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
/*.home-cat-grid > .home-cat-grid-item {*/
/*  margin-bottom: 22px;*/
/*}*/
.home-cat-grid .thumbnail {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.home-cat-grid .thumbnail > a {
  display: block;
  height: 180px;
  overflow: hidden;
}
.home-cat-grid .thumbnail > a > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-cat-grid .thumbnail .caption {
  flex: 1 0 auto;
  min-height: 44px;
}

/* Right-hand category / tag sidebar — roomier rows */
.ecommerce .sidebar .list-group-item {
  padding: 12px 16px;
  margin-bottom: 4px;
}
.ecommerce .sidebar .list-group-item a i {
  margin-right: 6px;
}
.sidebar .blog-tags ul li a {
  padding: 6px 12px;
}

/* Empty-state message for pages with no data yet */
.no-data,
.blog-posts p.no-data,
.content-page p.no-data,
.shop-items p.no-data {
  margin: 0;
  padding: 48px 15px;
  text-align: center;
  font-style: italic;
  font-size: 15px;
  color: #8a8177;
}

/* =========================================================================
   Sửa giao diện 05/09/2026
   ========================================================================= */

/* 1) Top bar: cột ngôn ngữ (phải) bị lệch lên trên so với cột số điện thoại
   (trái) trên di động, do style-responsive.css đẩy .additional-nav lên
   "top:-15px" ở @media (max-width:480px). Vô hiệu hoá để hai cột thẳng hàng. */
@media (max-width: 480px) {
  .pre-header .additional-nav {
    top: 0;
  }
}

/* 2) Scroll ngang trên di động: layout.tpl bọc mọi trang trong
   ".main.container.no-padding" rồi đặt ".row.margin-bottom-10" ngay bên
   trong -- row có margin âm mặc định của Bootstrap (-15px hai bên) nhưng
   container không có padding để bù lại, khiến trang bị tràn ngang một chút
   trên mọi kích thước màn hình. Bỏ margin âm đúng chỗ này (không ảnh hưởng
   các .row khác), kèm lớp chặn an toàn overflow-x cho toàn trang. */
.main.container.no-padding > .row.margin-bottom-10 {
  margin-left: 0;
  margin-right: 0;
}
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* 3) Trang danh mục in ấn (.shop-items): màn hình lớn hiển thị 3 sản phẩm
   mỗi dòng, màn hình nhỏ hiển thị 2 sản phẩm mỗi dòng (trước đây luôn cố
   định 3 dòng ở mọi kích thước vì dùng col-xs-4). Đi cùng thay đổi class
   col-xs-6/col-sm-4/col-md-4/col-lg-4 ở center.tpl. */