/* =====================================================================
   CustomMenucss.css
   - Nền header 2 lớp
   - Header desktop 3 cột: [Logo] [Menu] [Search + Cờ]
   - Menu dạng pill, màu vàng, hover sáng
   - Menu trượt ngang với mũi tên trái / phải (CSS phần khung)
   ===================================================================== */




/* ------------------ Biến dùng chung ------------------ */
:root {
  --hdr-overlay-w: 620px;   /* bề rộng ảnh overlay bên phải */
  --hdr-gap: 15px;          /* khoảng cách giữa ô search và cờ */
  --menu-font: 18px;        /* cỡ chữ tối đa của menu */
}

/* ===================================================================== 
   HEADER Tanimex – cho cả #sp-header và #sp-header-sticky
   Logo: góc trái, bám đáy
   Menu: 1 hàng, bám đáy, nằm giữa
   Search + cờ: góc trên bên phải
   ===================================================================== */

/* Nền 2 lớp cho cả header thường & header sticky */
#sp-header,
#sp-header.header-sticky,
.sticky-header #sp-header,
.is-sticky #sp-header,
#sp-header-sticky {
  background-image:
    url("/images/headers/headbg1.png"),
    url("/images/headers/headbg.jpg") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: right center, center !important;
  background-size: 620px auto, cover !important;
  background-color: #0c6ea3 !important;
}

#sp-header::before,
#sp-header::after,
#sp-header-sticky::before,
#sp-header-sticky::after {
  background: transparent !important;
}

/* =====================================================================
   DESKTOP (>= 992px)
   ===================================================================== */
@media (min-width: 992px) {

  /* Khung tổng thể header */
  #sp-header,
  #sp-header-sticky {
    padding: 0 !important;
    height: 150px !important;          /* chiều cao vùng nền xanh */
  }

  #sp-header .container-inner,
  #sp-header-sticky .container-inner,
  #sp-header .container-fluid,
  #sp-header-sticky .container-fluid {
    width: 100%;
    max-width: 100%;
  }

  /* Dùng container-inner làm khung tham chiếu cho absolute */
  #sp-header .container-inner,
  #sp-header-sticky .container-inner {
    position: relative !important;
    height: 150px !important;
  }

  /* Vô hiệu hoá bố cục flex mặc định của Helix */
  #sp-header .row.align-items-center,
  #sp-header-sticky .row.align-items-center {
    display: block !important;
  }

  /* ---------------- 1. LOGO – góc trái, bám đáy ---------------- */

  #sp-header #sp-logo,
  #sp-header-sticky #sp-logo {
    position: absolute !important;
    left: 20px;
    bottom: 3px;
    margin: 0;
  }

  #sp-header #sp-logo .sp-column,
  #sp-header-sticky #sp-logo .sp-column {
    margin: 0;
    padding: 0;
  }

  #sp-header #sp-logo img,
  #sp-header-sticky #sp-logo img {
    height: 140px;
    width: auto;
    display: block;
  }

  /* ---------------- 2. MENU – 1 hàng, bám đáy, giữa ---------------- */

  #sp-header #sp-menu,
  #sp-header-sticky #sp-menu {
    position: absolute !important;
    left: 50%;
    bottom: 8px;        /* nếu vẫn lòi xuống thì giảm còn 4px hoặc 0 */
    transform: translateX(-50%);
    margin: 0;
    padding: 0;
    white-space: nowrap;
  }

  #sp-header #sp-menu .sp-column,
  #sp-header-sticky #sp-menu .sp-column {
    margin: 0;
    padding: 0;
  }

  #sp-header #sp-menu nav.sp-megamenu-wrapper,
  #sp-header-sticky #sp-menu nav.sp-megamenu-wrapper {
    margin: 0;
    padding: 0;
  }

  /* UL menu: luôn 1 dòng */
  #sp-header #sp-menu .sp-megamenu-parent,
  #sp-header-sticky #sp-menu .sp-megamenu-parent {
    display: flex !important;
    flex-wrap: nowrap !important;
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap !important;
  }

  #sp-header #sp-menu .sp-megamenu-parent > li,
  #sp-header-sticky #sp-menu .sp-megamenu-parent > li {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  #sp-header #sp-menu .sp-megamenu-parent > li > a,
  #sp-header-sticky #sp-menu .sp-megamenu-parent > li > a {
    color: #f0dd0e !important;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.3;
    padding: 4px 14px;          /* giảm chiều cao pill để không tràn */
    border-radius: 999px;
    background: transparent !important;
    display: inline-block;
    white-space: nowrap !important;
    transition:
      background 0.2s ease,
      color 0.2s ease,
      box-shadow 0.2s ease;
  }

  #sp-header #sp-menu .sp-megamenu-parent > li:hover > a,
  #sp-header #sp-menu .sp-megamenu-parent > li.active > a,
  #sp-header #sp-menu .sp-megamenu-parent > li.current-item > a,
  #sp-header-sticky #sp-menu .sp-megamenu-parent > li:hover > a,
  #sp-header-sticky #sp-menu .sp-megamenu-parent > li.active > a,
  #sp-header-sticky #sp-menu .sp-megamenu-parent > li.current-item > a {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.22) !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.25) inset,
      0 1px 3px rgba(0, 0, 0, 0.15);
  }

  /* Ẩn offcanvas trên desktop */
  #sp-header #offcanvas-toggler,
  #sp-header-sticky #offcanvas-toggler {
    display: none !important;
  }

  /* ---------------- 3. SEARCH + CỜ – góc trên phải ---------------- */

  #sp-header #menu-right,
  #sp-header-sticky #menu-right {
    position: absolute !important;
    top: 12px;
    right: 20px;
    margin: 0;
    padding: 0;
  }

  #sp-header #menu-right .header-modules,
  #sp-header-sticky #menu-right .header-modules {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  #sp-header #menu-right .sp-module,
  #sp-header-sticky #menu-right .sp-module {
    margin: 0;
    padding: 0;
  }

  #sp-header #menu-right .mod-finder,
  #sp-header #menu-right .mod-search,
  #sp-header-sticky #menu-right .mod-finder,
  #sp-header-sticky #menu-right .mod-search {
    max-width: 260px;
  }

  #sp-header #menu-right .mod-finder form,
  #sp-header #menu-right .mod-search form,
  #sp-header-sticky #menu-right .mod-finder form,
  #sp-header-sticky #menu-right .mod-search form {
    margin: 0;
  }

  #sp-header #menu-right input[type="search"],
  #sp-header #menu-right input.js-finder-search-query,
  #sp-header-sticky #menu-right input[type="search"],
  #sp-header-sticky #menu-right input.js-finder-search-query {
    height: 32px;
  }

  #sp-header #menu-right .mod-languages,
  #sp-header-sticky #menu-right .mod-languages {
    display: flex;
    align-items: center;
  }

  #sp-header #menu-right .mod-languages ul,
  #sp-header-sticky #menu-right .mod-languages ul {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #sp-header #menu-right .mod-languages img,
  #sp-header-sticky #menu-right .mod-languages img {
    display: block;
    border-radius: 2px;
  }



  /* Ẩn offcanvas-toggler bên phải nếu có */
  #menu-right #offcanvas-toggler {
    display: none !important;
  }
}



/* =====================================================================
   Kết thúc CustomMenucss.css
   ===================================================================== */

/*Tab-homes */

#sp-tab-homes {
	display:flex;
	width:100%;
	align-text: center;
	align-content:center;
}



#body-all
{
	width: 100%;
	float: left;
	position: relative;
	border-radius:10px;
	height: auto;
	

}


#sp-main-bodybo .container .container-inner
{
	float: left;
	width: auto;
	position: relative;
	margin-top: 20px;	
	margin-bottom: 10px;
	box-shadow:0px 5px 10px gray;
	background: url(../images/rightmenu.png);
	background-position: right bottom;
	background-repeat: no-repeat;no-repeat;
	background: #fff; 
   	
}
/* Body-left*/

.article-ratings-social-share {
    display: none !important;
}

#sp-body-left 
{
	float: left; margin-left:20px;
	width: 25%;
	text-align:left;
	height:400px;
	position: relative;
	padding-top: 10px;
}
#sp-body-left .moduletable
{
	width: 100%
	
}
#sp-body-left ul.menu
{
	width:100%!important;
	position:relative;
	padding: 0;
	margin: 0;
}
#sp-body-left ul.menu li
{
	list-style-type: none; margin: 3px 0;	
	position: relative;
	float: left;
	width: 90%;
	padding-left:20px;
	background: url(../images/menuli.png) no-repeat left top;
	
}
#sp-body-left ul.menu li.active
{
	background: url(../images/menu.png) no-repeat left top;
}
#sp-body-left ul.menu li.active a
{
	font-weight:bold;
}
#sp-body-left ul.menu li a
{
	width: 100%;
	line-height: 30px;
	color: #000;
	font-weight: bold;
	float: left;
}


#sp-body-left ul.menu li:hover
{
	background: url(../images/menu.png) no-repeat left top;
}
/* ====== Banner ====== */
.mod-homeblocks .hb-title{font-size:11.25rem;font-weight:700}

/* ====== TAB HOMES CARDS ====== */
#sp-tab-homes .mod-articles-item { margin-bottom: 18px; }

#sp-tab-homes .mod-articles-item .mod-articles-item-content{
  position: relative;
  background: #D4C1CC;/* #ffffff;*/
  border: 1px solid #dfe6ef;
  border-radius: 12px;
  padding: 16px 18px;
  min-height: 180px;
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;

		/*background: none no-repeat scroll 0 0 transparent;*/
		transition: background-color 500ms ease-out 0s;
		-webkit-transition:background-color 500ms ease-out 0s;
}

/* Tiêu đề căn giữa, đậm, giữ màu theo trạng thái khối */
#sp-tab-homes .mod-articles-title{
  margin: 0 0 10px 0;
  
  text-align: center;
  font-weight: 700;
  font-size: 18px;


}
#sp-tab-homes .mod-articles-title a{
  text-decoration: none;
  color: #0c6ea3;
}

/* Hiệu ứng khi rê chuột vào TOÀN KHỐI */
#sp-tab-homes .mod-articles-item .mod-articles-item-content:hover{
  background: #1271B1;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  transform: translateY(-2px);
  cursor: pointer;
}

/* Đổi màu chữ/liên kết khi hover khối */
#sp-tab-homes .mod-articles-item .mod-articles-item-content:hover,
#sp-tab-homes .mod-articles-item .mod-articles-item-content:hover *{
  color: #ffffff !important;
}

/* Ẩn dòng "Đọc thêm" riêng lẻ trong khu vực này (không cần nữa) 
#sp-tab-homes .mod-articles-item .readmore{
  display: none;
}
*/
/* Khoảng cách 3 cột đẹp hơn ở desktop */
@media (min-width: 992px){
  #sp-tab-homes .sp-column .sp-module-content { margin: 0 6px; }
}


/* ---------------------------------------//----------------------------------------------------- */
/* --- Category Blog kiểu Joomla 2.5 --- */
/* ====== Category Blog Tanimex kiểu Joomla 2.5 ====== */

.tanimex-blog-item {
    display: flex;
    align-items: flex-start;
    padding: 5px 0;
    margin: 0 !important;        
    border-bottom: 1px solid #e5e5e5;
}

.view-category .article {
    margin-bottom: 0 !important;   /* bỏ khoảng trống lớn giữa các bài */
    padding-bottom: 0 !important;
}

/* Cột ảnh bên trái */
.tanimex-blog-thumb {
    flex: 0 0 150px;   /* độ rộng thumbnail */
    margin-right: 15px;
}

.tanimex-blog-thumb img {
    display: block;
    width: 150px;
    height: 110px;
    object-fit: cover;  /* cắt cho vừa khung */
    border: 1px solid #ccc;
}

/* Cột nội dung bên phải */
.tanimex-blog-body {
    flex: 1 1 auto;
}

.tanimex-blog-title {
    font-size: 15px;
    font-weight: bold;
    margin: 0 0 4px;
}

.tanimex-blog-title a {
    color: #0054a6;
    text-decoration: none;
}

.tanimex-blog-title a:hover {
    text-decoration: underline;
}

.tanimex-blog-meta {
    font-size: 11px;
    color: #888;
    margin-bottom: 4px;
}

/* Canh trái toàn bộ nội dung intro, kể cả bài đang bị align center */


/* 1. Bỏ toàn bộ căn giữa của bài lỗi */
.tanimex-blog-intro,
.tanimex-blog-intro p,
.tanimex-blog-intro span,
.tanimex-blog-intro div {
    text-align: left !important;
}

/* 2. Gộp các dòng bị tách thành 1 đoạn văn */
.tanimex-blog-intro p {
    display: inline;          /* gộp lại */
    margin: 0 !important;     /* loại margin gây ngắt dòng */
    padding: 0 !important;
}

/* 3. Xuống dòng MỀM theo vị trí từ, không cứng */
.tanimex-blog-intro {
    white-space: normal !important; 
    line-height: 1.35;        /* cho đọc đẹp */
}

/* 4. Nếu text quá dài, tự wrap hợp lý */
.tanimex-blog-intro {
    word-break: break-word;
}

/* 5. Nếu vẫn muốn xuống dòng nhẹ giữa các đoạn, dùng: */
.tanimex-blog-intro br {
    display: block;
    margin-bottom: 3px;
}

/* Nếu trong intro còn ảnh khác thì để full chiều rộng nội dung */
.tanimex-blog-intro img {
     max-width: 100%;
    height: auto;
}

/* Mobile: xếp dọc */
@media (max-width: 768px) {
    .tanimex-blog-item {
        flex-direction: column;
    }

    .tanimex-blog-thumb {
        margin-right: 0;
        margin-bottom: 10px;
        flex-basis: auto;
    }

    .tanimex-blog-thumb img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
}

/* hiển thị dạng bài dịch vụ tiện ích - hạ tầng... */

#show_animate {
    column-count: 3;
    column-gap: 15px;
    width: 900px;
    margin: 0 auto;
}
#show_animate .box_image {
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
#show_animate .box_image {
    break-inside: avoid;
    margin-bottom: 15px;
    background: #fff;    	
    padding: 5px;
    border-radius: 8px;
    box-shadow: 0 0 6px rgba(0,0,0,0.2);
}

#show_animate img {
    width: 100%;
    height: auto;
    display: block;
}
/* ********************** Canh ảnh bài viết **************************** */
/* 1. Căn giữa ảnh đầu tiên trong nội dung bài viết
   (p đầu tiên chỉ chứa mỗi img) – giống Joomla 2.5.7 */
[itemprop="articleBody"] > p:first-child > img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;     /* khoảng cách ảnh với đoạn văn dưới, có thể chỉnh */
}

/* Tất cả ảnh trong bài đều giữ khoảng cách 20% hai bên */
[itemprop="articleBody"] img.article-image  {
    display: block;
    width: 85%;            /* hoặc 70–90% tùy muốn */
    margin-left: auto;
    margin-right: auto;
    height: auto;
    float: none !important;   /* bỏ mọi float của template */
}

/* 2. Phòng trường hợp có bài mà ảnh không nằm ở p đầu tiên,
   thì mọi img trong articleBody cũng được canh giữa cho đẹp, không lệch trái */
/*[itemprop="articleBody"] img {
    max-width: 100%;
   
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}*/

/* Nếu template nào có float:left cho img thì bỏ luôn */
/*[itemprop="articleBody"] img {
    float: none !important;
}*/

/* ===================================Copyright=========================== */
/* ==============================
   FIX MENU FOOTER – sp-copyright
   ============================== */

/* ép đúng ul menu */
#sp-copyright nav ul.mod-menu.nav{
    display: flex !important;
    flex-wrap: wrap;
    gap: 16px 22px !important;   /* khoảng cách ngang – dọc */
}

/* reset li */
#sp-copyright nav ul.mod-menu.nav > li{
    margin: 0 !important;
    padding: 0 !important;
}

/* style link */
#sp-copyright nav ul.mod-menu.nav > li > a{
    color: #ffffff !important;    
    font-size: 18px !important;  /* tăng cỡ chữ */
    font-weight: 600;
    line-height: 1.3;
    padding: 6px 10px;
    display: inline-block;
    white-space: nowrap;         /* không bể chữ */
    background: rgba(255,255,255,0.08);
    border-radius: 10px;
}

/* hover cho rõ */
#sp-copyright nav ul.mod-menu.nav > li > a:hover{
    text-decoration: underline;
}


/* ==================== MOBILE (< 992px): KHÔNG ĐỔI ==================== */
/* Mobile vẫn dùng offcanvas như mặc định Helix */


/* Căn giữa các ảnh trong nội dung bài viết (view article) */
.view-article .item-page img:not(.float-start):not(.float-end):not(.float-left):not(.float-right) {
    display: block;
    margin-left: auto;
    margin-right: auto;
    /* tuỳ chọn: thêm khoảng cách trên dưới cho đẹp */
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Nếu ảnh có caption kiểu figure.img_caption của Joomla */
.view-article .item-page figure.img_caption,
.view-article .item-page .img_caption {
    text-align: center;
}
.view-article .item-page figure.img_caption img {
    display: inline-block;
}