/*
Theme Name: BaDinh
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


.sp-single-wrap {
	margin-top: 32px;
    margin-bottom: 32px;
}

.page-content p {
    text-align: justify;
}
.entry-content p {
    text-align: justify;
}
.entry-content li {
    text-align: justify;
}
/* ===== ICON BOXES ===== */
.sp-icons{ display:flex; flex-direction:column; gap:16px; margin-top:10px; }
.sp-icon-item{ display:flex; align-items:flex-start; gap:14px; padding:10px 0; border-bottom:1px solid rgba(0,0,0,.06); }
.sp-icon-item:last-child{ border-bottom:0; }
.sp-icon-left{ flex:0 0 auto; }
.sp-icon-img{ width:56px; height:56px; object-fit:cover; display:block; }
.sp-icon-text{ flex:1 1 auto; }
.sp-icon-title{ font-weight:700; line-height:1.2; margin-bottom:4px; text-transform:uppercase; }
.sp-icon-subtitle{ color:rgba(0,0,0,.72); line-height:1.5; }

/******** BDX – RELATED (MATCHES PROVIDED MARKUP) ********/
/* Scope đúng block row liên quan */
.row.row-small.small-columns-2.medium-columns-3.large-columns-4 {
  --bdx-radius: 12px;            /* giống gallery */
}

/* Khung ảnh */
.row.row-small.small-columns-2.medium-columns-3.large-columns-4 .box-image{
  position: relative;
  overflow: hidden;
  border-radius: var(--bdx-radius);
  background: #eef1f6;
}

/* Khung 4:3 đã có inline padding-top:75% → giữ làm “tạo tỷ lệ” */
.row.row-small.small-columns-2.medium-columns-3.large-columns-4 .box-image .image-cover{
  position: relative;
  overflow: hidden;
  border-radius: inherit;
  /* nếu theme ghi đè, ta ép lại */
  padding-top: 75% !important;   /* 4:3 = 75% */
}

/* Ảnh phủ đầy khung, kế thừa bo góc – chống Flatsome ép kích thước */
.row.row-small.small-columns-2.medium-columns-3.large-columns-4 .box-image .image-cover img{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: inherit;
  transform: translateZ(0);
  transition: transform .25s ease;
}

/* Hiệu ứng nhẹ khi hover (tùy chọn) */
.row.row-small.small-columns-2.medium-columns-3.large-columns-4 .box-image:hover .image-cover img{
  transform: scale(1.03);
}

/* Đảm bảo thẻ a.plain bao full ô, tránh vỡ bo góc khi hover */
.row.row-small.small-columns-2.medium-columns-3.large-columns-4 a.plain{
  display: block;
}

/************ BDX – MENU ICON TUNING (Flatsome) ************/
/* Biến nhanh */
:root{
  --bdx-menu-icon-size: 18px;   /* kích thước icon desktop */
  --bdx-menu-icon-gap:  8px;    /* khoảng cách icon – chữ */
}

/* 1) Căn hàng & khoảng cách giữa icon và text */
.header-nav .menu-item > a{
  display:inline-flex; align-items:center; gap:var(--bdx-menu-icon-gap);
}

/* 2) Icon: dùng màu theo link, bỏ nền/ô vuông/padding của theme */
.header-nav .menu-item > a i.fa-solid,
.header-nav .menu-item > a i.fa-regular,
.header-nav .menu-item > a i.fa-brands{
  font-size: var(--bdx-menu-icon-size);
  line-height: 1;                       /* tránh cao bất thường */
  margin: 0; padding: 0 !important;     /* xoá padding của theme */
  border-radius: 0 !important;          /* bỏ bo nền */
  background: transparent !important;   /* xoá ô vuông vàng */
  color: currentColor !important;       /* icon theo màu chữ */
  box-shadow: none !important;
  vertical-align: -0.05em;              /* tinh chỉnh baseline */
}

/* 3) Hover/active: icon đổi màu theo link (không riêng rẽ) */
.header-nav .menu-item > a:hover i,
.header-nav .menu-item.active > a i{
  color: currentColor !important;
}

/* 4) Dropdown: icon nhỏ hơn chút, vẫn canh hàng */
.nav-dropdown .menu-item > a{
  display:flex; align-items:center; gap:6px;
}
.nav-dropdown .menu-item > a i{
  font-size: 16px;
}

/* 5) Trường hợp Flatsome/FA thêm lớp “fa-fw” gây thừa khoảng trống – thu gọn */
.header-nav .menu-item > a i.fa-fw{ width:auto; text-align:left; }

/* 6) Mobile header: thu nhỏ icon để không chiếm chỗ */
@media (max-width: 849px){
  :root{ --bdx-menu-icon-size: 16px; --bdx-menu-icon-gap: 6px; }
}


/* ===== MÔ TẢ NGẮN (ACF shortdescription) ===== */
.sp-shortdesc{ margin-top:8px; color:rgba(0,0,0,.78); line-height:1.6; }
.sp-shortdesc p{ margin:0 0 8px; text-align:justify; }

/* ===== ARCHIVE & TAXONOMY ===== */
.sp-archive-wrap{ margin-top:32px; margin-bottom:32px; }
@media (max-width:849px){ .sp-archive-wrap{ margin-top:20px; } }
.sp-archive-wrap .page-title{ margin:0 0 6px; }
.sp-archive-wrap .page-description{ margin:0 0 16px; color:rgba(0,0,0,.7); }

/* Card & thumbnail */
.sp-archive-card{ border-radius:12px; overflow:hidden; }
.sp-archive-thumb{ padding-top:75%; } /* 4:3 ngang */
.sp-thumb-placeholder{ width:100%; height:0; padding-top:75%; background:#eef1f6; border-radius:8px; }
.sp-archive-card .post-title{ margin:8px 0 6px; }
.sp-archive-card .from_the_blog_excerpt{ margin:0; color:rgba(0,0,0,.72); line-height:1.55; text-align: justify;}

/* 2 cột ở màn lớn */
@media (min-width:850px){
  .sp-archive-wrap .row > .col.medium-6,
  .sp-archive-wrap .row > .col.large-6{ flex-basis:50%; max-width:50%; }
}

/* Pagination */
.sp-archive-wrap .pagination-container{ margin-top:24px; }
.sp-archive-wrap .pagination-container .nav-links{
  display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap;
}
.sp-archive-wrap .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:40px; padding:0 12px;
  border:1px solid #e5e7eb; border-radius:9999px;
  background:#fff; color:#111827; font-weight:600; text-decoration:none; line-height:1;
  box-shadow:0 1px 1px rgba(0,0,0,.03);
  transition:all .2s ease;
}
.sp-archive-wrap .page-numbers:hover{
  background:#f8fafc; border-color:#cbd5e1; box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.sp-archive-wrap .page-numbers.current{
  background:#111827; color:#fff; border-color:#111827; box-shadow:0 2px 6px rgba(17,24,39,.25); cursor:default;
}
.sp-archive-wrap .page-numbers.prev,
.sp-archive-wrap .page-numbers.next{ padding:0 14px; }
.sp-archive-wrap .page-numbers:focus{ outline:none; box-shadow:0 0 0 2px rgba(17,24,39,.12); }
@media (max-width:549px){
  .sp-archive-wrap .page-numbers{ min-width:36px; height:36px; padding:0 10px; font-size:14px; }
  .sp-archive-wrap .pagination-container .nav-links{ gap:6px; }
}

/*********************** BDX PRODUCTS – GRID + 3:4 THUMBS ***********************/

.bdx-products-grid{
  display:grid; grid-template-columns: repeat(var(--cols,4), minmax(0, 1fr));
  gap: var(--gap, 16px); align-items:start;
}
.bdx-product{ display:flex; flex-direction:column; gap:10px; }

/* Thumbnail 3:4 (rộng:cao) */
.bdx-product .bdx-thumb{
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: #eef1f6;
  aspect-ratio: 4 / 3;                    /* ← 4:3 */
}

/* Ảnh phủ đều khung, không méo */
.bdx-product .bdx-thumb img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  object-fit: cover; object-position: center;
  transform: translateZ(0);
  transition: transform .25s ease;
}
.bdx-product .bdx-thumb:hover img{ transform: scale(1.03); }

/* Fallback cho trình duyệt chưa hỗ trợ aspect-ratio */
@supports not (aspect-ratio: 3 / 4){
  .bdx-product .bdx-thumb{ height: 0; padding-top: calc(4 / 3 * 100%); } /* 133.333% */
  .bdx-product .bdx-thumb img{ position: absolute; inset: 0; }
}

/* Tiêu đề giữ nguyên */
.bdx-product .bdx-title{
  margin:0; font-size:15px; line-height:1.4; text-align:center; font-weight:600;
}
.bdx-product .bdx-title a{ text-decoration:none; }

/* Breakpoints như cũ */
@media (max-width:1200px){
  .bdx-products-grid{ grid-template-columns: repeat(min(var(--cols,4), 3), minmax(0,1fr)); }
}
@media (max-width:992px){
  .bdx-products-grid{ grid-template-columns: repeat(min(var(--cols,4), 2), minmax(0,1fr)); }
}
@media (max-width:600px){
  .bdx-products-grid{ grid-template-columns: repeat(1, minmax(0,1fr)); }
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}

/* ===== BDX Solutions Grid ===== */
.bdx-solutions-wrap { width: 100%; }
.bdx-solutions-wrap .bdx-grid{
  display: grid;
  grid-template-columns: repeat(var(--bdx-cols,3), 1fr);
  gap: var(--bdx-gap,16px);
}

@media (max-width: 849px){
  .bdx-solutions-wrap .bdx-grid{
    grid-template-columns: repeat(var(--bdx-cols-md,3), 1fr);
  }
}
@media (max-width: 549px){
  .bdx-solutions-wrap .bdx-grid{
    grid-template-columns: repeat(var(--bdx-cols-sm,2), 1fr);
  }
}
@media (max-width: 374px){
  .bdx-solutions-wrap .bdx-grid{
    grid-template-columns: repeat(var(--bdx-cols-xs,1), 1fr);
  }
}

.bdx-card{
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none !important;
  background: #fff;
  box-shadow: 0 4px 16px rgba(18,38,63,.04);
  transition: transform .18s ease, box-shadow .18s ease;
  min-height: 100%;
}

.bdx-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(18,38,63,.10);
}

.bdx-thumb{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;            /* ÉP 4:3 (ngang) */
  background: #f4f6fb;
}

.bdx-thumb img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;              /* phủ đều; muốn "contain" thì đổi */
}

/* Shade overlay */
.bdx-thumb .bdx-overlay{
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.25), rgba(0,0,0,.0) 55%);
  opacity: .0;
  transition: opacity .18s ease;
  pointer-events: none;
}
.bdx-card:hover .bdx-thumb .bdx-overlay{ opacity: 1; }

.bdx-thumb__placeholder{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:#b6c0d3; font-weight:600;
  font-size:12px; letter-spacing:.06em; text-transform:uppercase;
}

.bdx-card-body{
  padding: 14px 14px 16px;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
}

.bdx-title{
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.35;
  font-weight: 600;
  color: #0e1b2c;
}