@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

body {
  font-family:"Poppins", sans-serif;
  background:#f5f5f5;
}

html body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #0F3D3E;
  font-size: 16px;
  line-height: 1.5;
}
img {
  border: none;
  border-radius: 0;
  box-shadow: none;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}


.h1,
h1 {
  color: #2f7db3;
  font-size: 30px;
  font-weight: 600;
  line-height: 39px;
  text-align:center;
  margin-top:-10px;
  margin-bottom: 20px;
}

.h2,
/* Chỉnh phần dịch vụ header */
.sub-title{
display:inline-block;
padding:8px 18px;
background:#e3f2fd;
color:#1e88e5;
border-radius:25px;
font-size:16px;
font-weight:600;
margin:0 auto 12px auto;
letter-spacing:0.5px;
margin-top:30px;
}

/* Header */
.services-header{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
margin-bottom:20px;
}

/* Tiêu đề chính */
.services-title{
font-size:38px;
font-weight:700;
color:#2e7d32;
text-align:center;
letter-spacing:2px;
margin:30px 0;
position:relative;     /* rất quan trọng */
display:inline-block;  /* để line bám đúng chiều rộng chữ */
}

.section-subtitle .brand{
color:#1e73be;
font-weight:800;
background:none;
padding:0 4px;
font-size:21px;
letter-spacing:0.5px;
}
/* icon */
.services-title span{
display:inline-block;   /* bắt buộc để animation hoạt động */
font-size:20px;
margin:0 12px;
position:relative;
top:-2px;
}
/* hover */
.services-title:hover span{
animation:iconShake 0.5s ease;
}

/* hover rung */
i:hover{
animation:iconShake 0.5s ease;
transform:scale(1.15);
}

/* animation */
@keyframes iconShake{
0%{transform:rotate(0deg);}
25%{transform:rotate(10deg);}
50%{transform:rotate(-10deg);}
75%{transform:rotate(6deg);}
100%{transform:rotate(0deg);}
}

/* Line dưới tiêu đề */
/* line ban đầu ẩn */
.services-title::after{
content:"";
position:absolute;
left:50%;
transform:translateX(-50%);
bottom:-12px;

width:0;
height:3px;
background:#2e7d32;
transition:0.35s ease;
}

/* Chỉnh box phần dịch vụ */
.services-title:hover::after{
width:120px;
}

.services-box{
display:grid;
grid-template-columns:repeat(6,1fr);
max-width:1050px;
margin:auto;
gap:30px;
margin-top:40px;
}

/* 3 box trên */

.service-item:nth-child(1){
grid-column:1 / 3;
}

.service-item:nth-child(2){
grid-column:3 / 5;
}

.service-item:nth-child(3){
grid-column:5 / 7;
}

/* 2 box dưới */

.service-item:nth-child(4){
grid-column:2 / 4;
}

.service-item:nth-child(5){
grid-column:4 / 6;
}

/* BOX */

.service-item{
border:2px solid #e0e0e0;
text-decoration:none;
color:inherit;
display:block;
border-radius:12px;
overflow:hidden;
text-align:center;
background:#fff;
transition:all 0.35s ease;
position:relative;
background:linear-gradient(
to bottom,
#ffffff 0%,
#ffffff 65%,
#f3f4f6 65%,
#f3f4f6 100%
);
}

/* ẢNH */

.service-item img{
width:100%;
height:220px;
object-fit:cover;
border-radius: 0;
transition:0.5s;
overflow: hidden;
transition: all 0.3s ease;
}

/* ICON GÓC PHẢI */

.service-item i{
position:absolute;
top:8px;
right:8px;
width:26px;
height:26px;
background:#2e7d32;
color:#fff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:12px;
z-index:2;
border:2px solid #fff;
transition:all 0.4s ease;
}

/* HOVER ICON */

.service-item:hover i{
transform:rotate(15deg) scale(1.1);
background:#1b5e20;
}

/* TEXT */

.service-item h3{
background:#f3f4f6 !important;
border-top:2px solid #2e7d32;
padding:20px 12px;
margin:0;
width:100%;
box-sizing:border-box;
font-size:18px;
font-weight:600;
color:#1e88e5;
text-align:center;
line-height:1.5;
transition:0.3s;
}

.service-item:hover h3{
color:#0d47a1;
}

/* HOVER BOX */

.service-item:hover{
transform:translateY(-8px);
box-shadow:0 15px 35px rgba(0,0,0,0.15);
border-color:#2e7d32;
}

.service-item img{
transition:transform 0.6s ease;
will-change: transform;
}

.service-item:hover img{
transform:scale(1.08);
}

/* TEXT BOX */

.service-text{
border-top:2px solid #2e7d32;
background:#f3f4f6;
padding:18px 10px;
font-size:16px;
font-weight:600;
color:#2e7d32;
text-align:center;
min-height:60px;
display:flex;
align-items:center;
justify-content:center;
}

/* ICON ANIMATION */

@keyframes iconShake{
0%{transform:rotate(0deg);}
25%{transform:rotate(8deg);}
50%{transform:rotate(-8deg);}
75%{transform:rotate(6deg);}
100%{transform:rotate(0deg);}
}

/* MOBILE */

@media (max-width: 768px) {

  /* GRID 2 CỘT */
  .service-section {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  /* CARD */
  .service-item {
    border-radius: 10px;
    overflow: hidden;
  }

  /* ẢNH */
  .service-item img {
    width: 100%;
    height: 120px; /* giảm chiều cao */
    object-fit: cover;
  }

  /* TIÊU ĐỀ */
  .service-item h3,
  .service-item a {
    font-size: 13px;
    padding: 8px;
    text-align: center;
    line-height: 1.3;
  }

}


.h2,
.h3,
h2,
h3 {
  color: #4682B4;
  font-weight: 700;
}

.h3,
h3 {
  font-size: 18px;
  line-height: 24px;
}

.h4,
h4 {
  font-size: 16px;
  line-height: 24px;
}

.h4,
.h5,
h4,
h5 {
  color: #243238;
  font-weight: 400;
}

.h5,
h5 {
  font-size: 14px;
  line-height: 20px;
}

.h6,
h6 {
  color: #243238;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

a {
  text-decoration: none;
}

a:active,
a:focus {
  outline: none;
}

.h1 a,
.h2 a,
.h3 a,
.h4 a,
.h5 a,
.h6 a,
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: #2f7db3;
}

.h1 a:hover,
.h2 a:hover,
.h3 a:hover,
.h4 a:hover,
.h5 a:hover,
.h6 a:hover,
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
  color: #0d47a1;
}
.bp_news_info {
  display: none;
}

.header-logo {
  max-width: 80px;
  flex: 0 0 auto;
  margin-left: 250px; /* 👉 dịch sang phải */
}
.bp_menu_active {
  border: none;
}
.header{
position: fixed;
top:0;
left:0;
width:100%;
z-index:999;
background:#fff;
box-shadow:0 2px 10px rgba(0,0,0,0.08);
}
body{
padding-top:120px;

}
.header:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  right: 0;
  background-color: #287ec2;
  border-bottom: 1px solid #ca373c;
  height: 30px;
  align-items: center;
  justify-content: space-between;
}
.header .bp_nav_link {
  justify-content: start;
}

header i,
nav i,
.menu i{
width:auto;
height:auto;
font-size:16px;
background:none;
border-radius:0;
box-shadow:none;
display:inline-block;
}
.menu i,
nav i{
font-size:16px;
margin-right:6px;
color:#2c4a8a;
display:inline-block;
width:auto;
height:auto;
background:none;
border-radius:0;
box-shadow:none;
}

/* ===== SEARCH ===== */
.search-box {
    flex: 0 0 auto;
    position: relative;
    width: 150px;
    margin-right: 30px;
    top: 25%;
}

.search-box input {
    width: 80%;
    height: 25px;
    padding: 0 28px 0 10px;
    border: 1px solid #ccc;
    border-radius: 20px;
    outline: none;
    font-size: 13px;
}

/* ICON SEARCH */
.btn-search {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: #0095cc;
    cursor: pointer;
}
.search-icon:hover{
  transform:scale(1.1);
  transition:0.3s;
}
.btn-search i {
    font-size: 14px;
    color: #fff;
    animation: pulseSearch 2s infinite;
}
.search-box input {
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.search-box button.btn-search {
    background: #0095cc !important;
    border: none;
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer;
}

.header .navbar .dropdown-toggle::after,
.header .navbar .menu-item-has-children > a::after{
  display:none !important;
}

/* ANIMATION */
@keyframes pulseSearch {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.15); opacity: 1; }
}

/* Topbar full width, liền mạch */
.topbar {
  width: 100%;           /* full màn hình */
  max-width: 100%;       /* bỏ giới hạn container */
  margin: 0;             /* loại bỏ margin */
  padding: 8px 10px;     /* padding nội dung */
  display: flex;
  justify-content: center;
  gap: 40px;
  font-size: 14px;
  background: #2c6ea4;
  color: white;
  box-sizing: border-box;
  border: none;           /* xóa border */
  box-shadow: none;       /* xóa shadow */
}

/* icon trong topbar */
.topbar i {
  margin-right: 6px;
  color: #8b5cf6;
}
.header #navbarsMenu {
  justify-content: center;
  margin-top:8px;
}
.header .navbar ul.navbar-nav > li {
  padding: 10px 14px; /* giảm khoảng cách */
}
.header .navbar ul.navbar-nav > li a {
  text-transform: none;
  color: #1f3f8b;
  font-family:'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.3;
  transition: 0.3s ease;
}
.header .navbar ul.navbar-nav > li > a:hover {
    color: #4ea3d8;
}

.header .button-contact {
  text-align: right;
}
.header .button-contact a {
  background: #67dfc1;
  border: 1px solid #67dfc1;
  color: #fff;
  position: relative;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 400;
  padding: 8px 18px;
  line-height: 1;
  display: inline-block;
  text-align: center;
  border-radius: 20px;
  transition: all 0.4s linear 0s;
  z-index: 1;
}
.top-info {
  font-weight: 300;
  font-size: 12px;
  height: 30px;
  color: #dfdfdf;
  background-color: #287ec2;
  position: relative;
  border-bottom: 1px solid #ca373c;
  padding-top: 4px;
}
.top-info .square {
  position: absolute;
  width: 38px;
  height: 30px;
  background-color: #ca373c;
  left: -38px;
}

.top-info:before {
  border-width: 30px 0 0 30px;
  border-color: transparent transparent transparent #fff;
  left: -38px;
  z-index: 2;
}

.top-info:after,
.top-info:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
}

.top-info:after {
  border-width: 0 30px 30px 0;
  border-color: transparent #287ec2 transparent transparent;
  left: -30px;
  top: -1px;
}

/* Icon contact-card */

.f-top{
  background:rgba(0, 170, 255, 0.12);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
   border:1px solid rgba(0,0,0,0.15);
  font-size:20px;
}

.f-top::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:50%;
  border:2px solid transparent;
  border-top:2px solid #00c6ff;
  animation:spin 2s linear infinite;
}

@keyframes spin{
  to{transform:rotate(360deg);}
}

.fixed-social-sidebar{
position:fixed;
right:30px;
bottom:95px;
display:flex;
flex-direction:column;
gap:14px;
z-index:9999;
}

.f-btn{
position:relative;
overflow:visible;
width:50px;
height:50px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
box-shadow:0 10px 25px rgba(0,0,0,0.35);
transition:.3s;
}

.f-btn i{
color:#fff;
font-size:22px;
}

.f-btn img{
width:26px;
height:26px;
}

.f-wechat{background:#07C160;}
.f-viber{background:#7360F2;}
.f-zalo{background:#0068ff;}
.f-phone{background:#ff3b30;}

.f-btn:hover{
transform:scale(1.2);
filter:brightness(1.2);
}

.f-btn span{
position:absolute;
right:85px;
background:#333;
color:#fff;
padding:6px 12px;
border-radius:6px;
font-size:13px;
opacity:0;
white-space:nowrap;
transition:0.3s;
transform:translateX(20px);
}

.f-btn:hover span{
opacity:1;
}

@keyframes pulse{
0%{box-shadow:0 0 0 0 rgba(255,0,0,.7);}
70%{box-shadow:0 0 0 15px rgba(255,0,0,0);}
100%{box-shadow:0 0 0 0 rgba(255,0,0,0);}
}

@keyframes pulse{
0%{transform:scale(.95);}
50%{transform:scale(1.1);}
100%{transform:scale(.95);}
}

/* Zalo nhấp nháy */
.f-zalo{
animation:zaloGlow 1.2s infinite alternate;}

@keyframes zaloGlow{

0%{
box-shadow:0 0 8px 2px rgba(0,104,255,0.6);}

100%{
box-shadow:0 0 25px 10px rgba(0,104,255,1);}

}

/* WeChat rung nhẹ */
.f-wechat{
animation:wechatShake 4s infinite;
}

@keyframes wechatShake{

0%,90%,100%{transform:translate(0,0);}
92%{transform:translate(-2px,1px);}
94%{transform:translate(2px,-1px);}
96%{transform:translate(-1px,2px);}
98%{transform:translate(1px,-2px);}

}

/* Viber rung nhẹ */
.f-viber{
animation:viberShake 5s infinite;
}

@keyframes viberShake{

0%,90%,100%{transform:translate(0,0);}
92%{transform:translate(-1px,1px);}
94%{transform:translate(1px,-1px);}
96%{transform:translate(-1px,1px);}
98%{transform:translate(1px,-1px);}

}

/* Phone sóng lan */
.f-phone{
animation:phoneRipple 1.6s infinite;
}

@keyframes phoneRipple{

0%{
box-shadow:0 0 0 0 rgba(255,0,0,0.7);
}

70%{
box-shadow:0 0 0 15px rgba(255,0,0,0);
}

100%{
box-shadow:0 0 0 0 rgba(255,0,0,0);
}

}
.f-wechat span{
background:#07C160;
color:#fff;
}

.f-viber span{
background:#7360F2;
color:#fff;
}

.f-zalo span{
background:#0068ff;
color:#fff;
}

.f-phone span{
background:#ff3b30;
color:#fff;
}
.contact-card {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
  z-index: 1;
}

.contact-item:last-child {
  border-right: none;
}

.contact-icon {
  color: white;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-content {
  color: white;
}

.contact-label {
  font-size: 14px;
  font-weight: 400;
}

.contact-value {
  font-size: 16px;
  font-weight: 600;
}

.footer .contact-icon{
width:24px;
height:24px;
background:#ffffff20;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin-right:8px;
transition:0.3s;
}

.footer .contact-icon i{
color:#fff;
font-size:14px;
}

.footer .contact-item{
display:flex;
align-items:center;
gap:12px;
margin-bottom:16px;
}

.footer .contact-btn img{
width:22px;
height:22px;
object-fit:contain;
}

.footer .contact-btn i{
color:white;
font-size:22px;
}

.footer-text{
max-width:700px;
margin:20px auto 0;
font-size:14px;
line-height:1.7;
opacity:0.9;
margin-top:20px;
}

/* ===== FIX FOOTER MOBILE CHUẨN ===== */
@media (max-width:768px){

  /* CHUYỂN 1 CỘT */
  .footer-content{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 25px;
  }

  /* TEXT KHÔNG BỊ NGẮT */
  .footer,
  .footer *{
    word-break: normal !important;
    white-space: normal !important;
  }

  /* TITLE */
  .footer-section > h3{
    font-size:16px;
    margin-bottom:10px;
  }

  /* TEXT */
  .footer-text,
  .footer p{
    font-size:14px;
    line-height:1.6;
  }

  /* CONTACT ITEM */
  .footer-item{
    flex-direction: row;
    align-items: flex-start;
  }

}

/* ===== ICON LIÊN HỆ MOBILE ===== */
@media (max-width:768px){

  .fixed-social-sidebar{
    right:10px !important;
    bottom:90px !important;
    transform:scale(0.85);
  }

  .fixed-social-sidebar a{
    margin:8px 0;
    
  }
  .f-btn{
  width:48px;
  height:48px;
}
}
/* Phần nội lí do chọn tín thành */
 /* Phần đầu nội dung Tín Thành */
.about-section{
text-align:center;
padding:60px 20px 30px;
background:#f6f8fb;
border-radius:12px;
max-width:1200px;   /* chiều rộng giống khu vực 4 box */
margin:0 auto;      /* căn giữa */
}

.about-logo{
width:100px;
margin-bottom:20px;
display:block;
margin-left:auto;
margin-right:auto;
}

.about-text{
max-width:720px;
margin:0 auto 30px auto;
font-size:17px;
line-height:1.7;
color:#333;
font-family: 'Poppins', sans-serif;
}

.about-text strong{
color:#0b6cb8;
font-weight:700;
font-size:18px;
}

.about-btn{
display:inline-block;
padding:8px 22px;   /* giảm kích thước */
background:#59b368;
color:#fff;
text-decoration:none;
border-radius:25px;
font-weight:600;
font-size:14px;     /* chữ nhỏ lại */
transition:all 0.3s ease
}

/* nút nổi lên */
.about-btn:hover{
transform:translateY(-5px);
box-shadow:0 10px 25px rgba(0,0,0,0.25);
}

/* ánh sáng chạy ngang */
.about-btn::after{
content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.6),
transparent
);
transition:0.6s;
}

.about-btn:hover::after{
left:100%;
}

.features-title{
text-align:center;
font-size:36px;
font-weight:700;
color:#2e7d32;
margin:50px auto 40px;
letter-spacing:2px;
text-transform:uppercase;
position:relative;
display:inline-block;
left:50%;
transform:translateX(-50%);
}

.title-icon{
font-size:20px;
margin:0 12px;
}

.features-title::after{
content:"";
position:absolute;
left:50%;
bottom:-10px;
width:120px;
height:3px;
background:#2e7d32;
transform:translateX(-50%) scaleX(0);
transform-origin:center;
transition:0.4s;
border-radius:3px;
}

.features-title:hover::after{
transform:translateX(-50%) scaleX(1);
}

.feature-text h3{
font-size:18px;
color:#2e7d32;
margin:0;
line-height:1.4;
}

.long-text{
white-space:nowrap;
}

/* Tiêu đề giá trị cốt lõi */

.features{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
max-width:1100px;
margin:40px auto 60px;
}

.feature-box{
width:100%;
border:2px solid #2e7d32;
border-radius:12px;
overflow:hidden;
text-align:center;
transition:all 0.35s ease;
cursor:pointer;
background:white;
display:flex;
flex-direction:column;
}

.feature-box.show{
opacity:1;
transform:translateY(0);
}

.feature-box:hover{
transform:translateY(-10px);
box-shadow:0 12px 25px rgba(0,0,0,0.15);
border-color:#1b5e20;
}

.feature-icon-box{
height:120px;
display:flex;
align-items:center;
justify-content:center;
}

.feature-icon-box a{
color:#2e7d32;
text-decoration:none;
pointer-events:none; /* nhấp đường link vào icon */
}

.feature-icon{
width:55px;
height:55px;
object-fit:contain;
}

.feature-icon-box i{
font-size:45px;
color:#2e7d32;
cursor:pointer;
transition:0.3s;
}

.feature-icon-box i:hover{
transform:scale(1.05);
color:#1b5e20;
}

.feature-text{
background:#eef2ee;
padding:20px 10px;
min-height:70px;
display:flex;
align-items:center;
justify-content:center;
width:100%;
box-sizing:border-box;
flex:1;
}

.feature-text h3{
font-size:18px;
color:#2e7d32;
margin:0;
width: 100%;
}

.feature-box{
display:flex;
flex-direction:column;
justify-content:space-between;
width:220px;
}

.feature-line{
width:100%;
height:2px;
background:#2e7d32;
}

/* viền chạy */
.feature-box::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:3px;
border:2px solid transparent;
background:linear-gradient(white,white) padding-box,
linear-gradient(90deg,#2e7d32,#66bb6a) border-box;
transition:all 0.35s ease;
}

.feature-box:hover::before{
left:100%;
}

.feature-box{
border:2px solid #e5e5e5;
}

.feature-box{
min-height:200px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}

.feature-box i{
font-size:60px;
margin-bottom:15px;
}

.feature-icon-box i,
.feature-icon{
transition:all 0.35s ease;
}

.feature-box:hover .feature-icon-box i,
.feature-box:hover .feature-icon{
transform:scale(1.15);
}

.feature-box:hover h3{
color:#0d47a1;
transition:0.3s;
}


/* MOBILE FEATURES */
@media(max-width:768px){

  .features{
    grid-template-columns: 1fr 1fr;
    gap:12px;
  }

  .feature-box{
    width:100% !important;
    min-height:160px;
    padding:10px;
  }

  .feature-box i{
    font-size:40px;
  }

  .feature-text h3{
    font-size:14px;
    line-height:1.4;
    text-align:center;
  }

}

/* banner tín thành chỉnh chữ */

.banner-text{
max-width:360px;
text-align:left;
line-height:1.7;
font-size:18px;
color:#0f3f57;
}

.banner-text .brand{
font-size:28px;
font-weight:700;
color:#1f6fb2;
}

.banner{
display:flex;
align-items:center;
position:relative;
z-index:1;
}

.banner-section{
padding:10px 20px 60px;
}

/* BANNER TÍN THÀNH */

#m_9276{
background:url("/files_upload/banner.png") center/cover no-repeat;
height:250px;
max-width:1200px;
margin:auto;
display:flex;
align-items:center;
padding-left:80px;
position:relative;
margin-top:-50px;
border-radius:20px;
overflow:hidden;
}

/* lớp phủ màu */

#m_9276::before{
content:"";
position:absolute;
left:0;
top:0;
width:60%;
height:100%;
background:linear-gradient(
to right,
rgba(0,120,170,0.75),
rgba(0,120,170,0.45),
rgba(0,0,0,0)
);
}

/* hiệu ứng nổi cho banner */

#m_9276{
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

/* khung chữ */

#m_9276 .banner-text{
max-width:440px;
line-height:1.7;
font-size:16px;
position:relative;
z-index:2;
color:#ffffff;
backdrop-filter:blur(2px);
}

/* chữ Tín Thành */

#m_9276 .banner-text strong{
font-size:28px;
font-weight:700;
text-shadow:0 2px 6px rgba(0,0,0,0.25);
}

/* MOBILE BANNER */
@media (max-width:768px){

  #m_9276{
    height:auto;                 /* tự co theo nội dung */
    min-height:220px;            /* giữ form đẹp */
    padding:20px 15px;
    margin-top:0;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
  }

  /* lớp phủ */
  #m_9276::before{
    width:100%;
    background:linear-gradient(
      to bottom,
      rgba(0,120,170,0.75),
      rgba(0,120,170,0.35),
      rgba(0,0,0,0)
    );
  }

  /* chữ */
  #m_9276 .banner-text{
    max-width:95%;
    font-size:14px;
    line-height:1.5;
    margin:0 auto;
  }

  #m_9276 .banner-text strong{
    font-size:22px;
    display:block;
    margin-bottom:6px;
  }

}
/* ===== BREADCRUMB BANNER XỊN ===== */
.breadcrumb{
  position: relative;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: url(/files_upload/crumb2.jpg); /* đổi ảnh tại đây */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 10px;
  overflow: hidden;
}

.breadcrumb::before{
  content: "";
  position: absolute;
  inset: 0;
  background: inherit; /* lấy ảnh từ .breadcrumb */
  background-size: cover;
  background-position: center;
  transform: scale(1.2); /* zoom */
  transition: transform 6s ease;
  z-index: 0;
  animation: zoomBg 10s infinite alternate;
}

@keyframes zoomBg{
  0%{ transform: scale(1.1); }
  100%{ transform: scale(1.25); }
}

/* Dự án (100) */
.bp_category_100 .breadcrumb{
  background: url(/files_upload/crumb3.jpg) center/cover no-repeat !important;
}

/* Dịch vụ (77) */
.bp_category_77 .breadcrumb{
  background: url(/files_upload/crumb4.jpg) center/cover no-repeat !important;
}

/* Giới thiệu (76) */
.bp_category_76 .breadcrumb{
  background: url(/files_upload/crumb2.jpg) center/cover no-repeat !important;
}

/* BANNER Liên Hệ 24/7 */
.contact-banner{
    margin-top:50px;
}

/* Ẩn Tên Tiêu Đề Trong Phần Dịch Vụ - Dự Án */
.bp-category-title{ 
    display:none; 
}   
.breadcrumb-item + .breadcrumb-item::before{ 
    color:#fff; 
}


/* Footer phần cuối trang web */

.footer {
  background: #1c79be;
  color: white;
  padding: 60px 0 30px;
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="1.5" fill="rgba(255,255,255,0.08)"/><circle cx="40" cy="70" r="1" fill="rgba(255,255,255,0.06)"/></svg>');
  pointer-events: none;
}

.footer-content {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1fr 1fr;
  gap: 50px;
  margin-bottom: 40px;
}

.footer-section > h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 25px;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
}

.footer-section > h3::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 40px;
  height: 3px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 2px;
}

.company-info h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
  color: white;
  line-height: 1.3;
}

.footer-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
  padding: 8px 0;
}

.footer-icon {
  width: 20px;
  height: 20px;
  margin-right: 12px;
  margin-top: 2px;
  opacity: 0.8;
  flex-shrink: 0;
}

.footer-text {
  line-height: 1.6;
  font-size: 14px;
}

.footer-text strong {
  display: block;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.9);
}

.footer .bp_category_option li {
  margin-bottom: 12px;
}

.footer .bp_category_option a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.5;
  transition: all 0.3s ease;
  position: relative;
  padding-left: 0;
  display: flex;
  align-items: center;
}

.footer .bp_category_option a:hover {
  color: rgba(255, 255, 255, 1);
}

.footer .bp_category_option a::before {
  content: "?";
  position: absolute;
  left: -15px;
  opacity: 0;
  transition: all 0.3s ease;
  font-size: 10px;
}

.footer .bp_category_option a:hover::before {
  opacity: 1;
  left: -12px;
}

.footer .bp_category_option a h3 {
  color: #fff;
  margin: 0;
  transition: all 0.3s ease;
}
.footer .bp_category_option a:hover h3 {
  padding-left: 8px;
}
.footer .address-item {
  margin-bottom: 18px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer .address-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.footer .address-label {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  margin-bottom: 5px;
}

.footer .address-text {
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  line-height: 1.5;
}
.footer .bp_form_data {
  width: 100%;
  padding: 12px 15px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: white;
  font-size: 14px;
  transition: all 0.3s ease;
}
.footer .bp_form_data::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.footer .bp_form_data::placeholder {
  outline: none;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.15);
}
.footer .bp-btn-send {
  width: 100%;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer .bp-btn-send:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.footer .bp-btn-send:active {
  transform: translateY(0);
}
.footer .social-links {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.footer .social-link {
  width: 45px;
  height: 45px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.footer .social-link:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Phần chỉnh Header Menu Trang Chủ */

@media only screen and (min-width: 600px) {
  .header .dropdown:hover > .dropdown-menu {
    margin-top: 0;
    opacity: 1;
    visibility: visible;
    border-radius: 10px;
  }
  .header .navbar-nav > .nav-item > a {
    position: relative;
    padding: 0;
    padding-bottom: 10px !important;
  }
  .header .navbar-nav > .nav-item > a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    border-radius: 50px;
    background-color: #000000;
    transition: width 0.8s ease-in-out;
  }
  .header .bp_toggle_arrow {
    padding-bottom: 10px;
    padding-left: 0;
    color: black;
    font-size: 13px;
  }
  .header .navbar-nav > .nav-item.active > a::after {
    transition: unset;
  }
  .header .navbar-nav li:hover > a,
  .header .navbar-nav .nav-item.active > a {
    color: #7ec8e3;
  }

  .header .navbar-nav > .nav-item:hover a::after,
  .header .navbar-nav > .nav-item > .bp_menu_active::after {
    width: 100%;
  }
  .header .navbar ul.navbar-nav > li:hover > a {
    color: #4ea3d8;
  }
  .header .bp_sub_menu {
    width: auto;
    display: block;
    opacity: 0;
    visibility: hidden;
    margin-top: 10px;
    padding: 0;
    border: none;
    border-radius: 0;
    transition: all 0.3s linear;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px,
      rgba(0, 0, 0, 0.07) 0px 16px 16px;
  }

  .header .navbar ul.dropdown-menu li {
    padding: 0;
  }
  .header .navbar ul.dropdown-menu li a {
    transition: all 0.3s ease;
    font-family:'Poppins', sans-serif;
    padding: 14px 20px;
    color: #1f3f8b;
    font-size: 15px;
    font-weight: 500;
    background: #ffffff;
  }
  .header .navbar ul.dropdown-menu li:hover {
    background-color: transparent;
  }
  .header .navbar ul.dropdown-menu li a:hover {
    padding-left: 20px;
    color: #1f3f8b;
    background-color: #f3f7fb;
  }
.header .navbar ul.dropdown-menu li:first-child a:hover {
    background: #1f3f8b;
    color: #ffffff;
}
/* Hover dropdown item */
.header .navbar ul.dropdown-menu li a:hover {
    background-color: #1f3f8b !important;
    color: #ffffff !important;
}
/* Giữ active dropdown luôn xanh đậm */
.header .navbar ul.dropdown-menu li.active > a {
    background-color: #1f3f8b !important;
    color: #ffffff !important;
}
.dropdown-menu{
    border-radius:0!important;
    box-shadow:0 4px 10px rgba(0,0,0,0.1);
}

/* ===== FIX MENU MOBILE ===== */
@media (max-width:768px){

/* Ẩn menu desktop */
.header .navbar-nav{
    display:none !important;
}

/* Hiện nút menu (3 gạch) */
.navbar-toggler{
    display:block !important;
    border:none;
    outline:none;
}

/* Header gọn lại */
.header{
    padding:10px 15px !important;
}

/* Logo căn giữa */
.header .logo{
    text-align:center;
    width:100%;
}

/* Thanh xanh lỗi phía trên */
.header::before,
.header::after{
    display:none !important;
}

/* Fix dropdown mobile */
.header .dropdown-menu{
    position:relative !important;
    opacity:1 !important;
    visibility:visible !important;
    display:none;
}

/* Khi mở menu */
.header .dropdown.open .dropdown-menu{
    display:block;
}

/* Menu mobile full width */
.header .navbar-collapse{
    background:#fff;
    padding:10px;
    border-radius:10px;
}

}

/* ===== ẨN SEARCH MOBILE ===== */
@media (max-width:768px){

/* input tìm kiếm */
input[type="search"],
input[placeholder*="Tìm"]{
    display:none !important;
}

/* nút kính lúp */
button[type="submit"],
.header .search-btn,
.header .fa-search{
    display:none !important;
}

/* nếu có khung search riêng */
.search-box,
.header .search,
.header .search-form{
    display:none !important;
}

}


/* Phần chỉnh nội dung bên trong dự án */

.project-category {
  max-width: 1400px;
  margin: 40px auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 cột, chỉnh thành 3 nếu muốn */
  gap: 20px;
  padding: 0 15px;
}

@media(max-width:768px){
  .project-category {
    grid-template-columns: 1fr; /* 1 cột trên mobile */
  }
}

#m_4350{
  flex: 0 0 75%;
  max-width:75%;
}

#m_84715{
  flex: 0 0 25%;
  max-width:25%;
}

/* ===== BOX DỰ ÁN ===== */

.project-title{
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 25px;
  color: #2f7db3; /* xanh thương hiệu */
  text-transform: uppercase;
  letter-spacing: 1px;
}

.project-item a {
  display: block;
  position: relative;
  height: 320px;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
}

.section-title{
  font-size: 28px;
  font-weight: 700;
  color: #2f7db3;
  margin-bottom: 30px;
  text-align: center;
}

.section-title i{
  margin: 0 10px;
  font-size: 18px;
}

/* ẢNH */
.project-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

/* OVERLAY LỚP KÍNH */
.project-item .overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 22px;
  background: rgba(0,0,0,0.2);
  backdrop-filter: blur(2px);
  transition: background 0.4s ease;
  height: 20%;
}

/* TEXT */
.project-item h3 {
  color: #2f7db3;
  font-size: 8px;
  font-weight: 400;
  margin-bottom: 4px;
  transition: color 0.3s;
  margin-top: -15px;
}

.project-item p {
  font-size: 6px;
  color: #fff;
  margin-bottom: 4px;
  opacity: 0.9;
}


/* HOVER CARD */
.project-item:hover img {
  transform: scale(1.08);
}

.project-item:hover .overlay {
  background: rgba(0,0,0,0.6);
}

.project-item:hover h3 {
  color: #0aa04f;
}

/* HOVER NÚT GLOW */
.project-item:hover .btn-view {
  box-shadow: 0 0 12px rgba(21,101,192,0.7),
              0 0 25px rgba(21,101,192,0.5);
}

.project-item .btn-view:hover {
  background: #1e88e5;
  box-shadow: 0 0 15px rgba(30,136,229,0.9),
              0 0 30px rgba(30,136,229,0.7),
              0 0 40px rgba(30,136,229,0.5);
}

/* MOBILE HEIGHT */
@media(max-width:768px){
  .project-item a {
    height: 260px;
  }
}


/* Phần chỉnh nội dung dự án */
/* Dự án nước thải sinh hoạt*/
#m_7155 {
  width: 100%;
  float: none;
  padding-right: 0;
}

/* ===== GRID ===== */
#m_7155 .bp_block{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap: 25px;
}

/* ===== CARD ===== */
#m_7155 .bp_block_item {
  border-radius: 14px;
  border: 1px solid #f1f1f1; /* thêm viền nhẹ */
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
  transition: 0.35s;
  display:flex;
  flex-direction:column;
  max-width:1200px;
}

/* ===== HOVER ===== */
#m_7155 .bp_block_item:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 50px rgba(0,0,0,0.18);
}

/* ===== ẢNH ===== */
#m_7155 .bp_hot_news_img {
  height: 260px;
  overflow: hidden;
  position: relative;
}

#m_7155 .bp_hot_news_img::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.25), transparent);
  opacity:0;
  transition:0.4s;
}

#m_7155 .bp_block_item:hover .bp_hot_news_img::after{
  opacity:1;
}

#m_7155 .bp_hot_news_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.4s;
}

#m_7155 .bp_block_item:hover img {
  transform: scale(1.08);
}

/* ===== CONTENT ===== */
#m_7155 .bp_content_news_main {
  position: relative;
  background: #fff;
  padding:8px 10px;
  text-align:center;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:60px;
}

/* ===== TEXT ===== */
#m_7155 .bp_content_news_main p{
   font-size:13px;
  margin-top:8px;
  margin-bottom:0;
  line-height:1.5;
}

/* ===== TIÊU ĐỀ (XANH DƯƠNG LOGO) ===== */
#m_7155 .bp_content_news_main a{
  display:inline-block;
  color:#1e73be;
  font-size:14px;
  text-decoration:none;
  transition:0.3s;
  margin:0 auto;
  line-height:1.4;
}

#m_7155 .bp_news_more{
   display:none !important;
}

#m_3350 strong{
  display:block;
  margin-top:25px;
  margin-bottom:25px;
}

#m_3350 strong i{
  margin: 0 12px;
  font-size:16px;
}

@media(max-width: 1024px){
  #m_7155 .bp_block{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width: 768px){
  #m_7155 .bp_block{
    grid-template-columns: 1fr;
  }
}


/* Phần Chỉnh Tab dự án nước thải sản xuất */

/* ===== WRAPPER ===== */
.duan-wrapper{
    max-width:1200px;
    margin:40px auto;
    padding:0 15px;
    margin-top:-10px;
}

/* ===== TITLE ===== */
.duan-box h3{
   text-align:center;
    font-size:26px;
    font-weight:600;
    color:#1f7a3f; /* xanh đậm */
    margin-bottom:25px;
    letter-spacing:1px;
}
.duan-box i{
    font-size:16px;
    margin: 0 12px;
}
/* ===== TAB ===== */
.duan-tabs{
    display:flex;
    justify-content:center;
    align-items:center; /* 🔥 căn giữa dọc */
    gap:25px;
    margin-top:25px;
}

.duan-tabs .tab{
    position:relative;
    padding:6px 12px;
    font-size:15px;
    font-weight:600;
    color:#555;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:all 0.3s ease;
    border-radius:6px; /* bo tròn đẹp */
}

/* ===== HOVER chữ ===== */
.duan-tabs .tab:hover{
    color:#1f7a3f;
    transform:translateY(-1px); /* 🔥 nhẹ lên tí */
}

/* ===== ACTIVE (nền xanh) ===== */
.duan-tabs .tab.active{
    background:#1f7a3f;
    color:#fff;
}

/* ===== GRID ===== */
.bp_category_117 .bp_block {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap:30px;
}

/* ===== CARD ===== */
.bp_category_117 .bp_block_item {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  transition: 0.3s;
}

/* ===== ẢNH ===== */
.bp_category_117 .bp_img_news img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  transition: 0.4s;
}

/* ===== OVERLAY GRADIENT (GIỐNG HÌNH) ===== */
.bp_category_117 .bp_block_item::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.4), rgba(0,0,0,0.2));
  z-index:1;
}

/* ===== KHUNG CHỮ ===== */
.bp_category_117 .bp_content_news_main{
  position: absolute;
  bottom: 15px;
  left: 15px;
  right: 15px;
  padding: 0;
  background: transparent; /* bỏ nền đen cũ */
  z-index: 2;
}

/* ===== TIÊU ĐỀ ===== */
.bp_category_117 .news_title,
.bp_category_117 .news_title a,
.bp_category_117 .news_title span{
  color:#fff !important;
  font-size:14px;
  font-weight:600;
  margin-bottom:4px;
  text-decoration:none;
  text-shadow:0 2px 6px rgba(0,0,0,0.6);
}

/* ===== TEXT ===== */
.bp_category_117 .bp_content_news_main p{
  font-size:13px;
  margin-bottom:8px;
  color:#fff !important;
  opacity:0.9;
}

/* ===== NÚT ===== */
.bp_category_117 .bp_news_more{
  display:inline-block;
  padding:4px 5px;
  background:#2e7d32;
  border-radius:4px;
  font-size:10px;
  color:#fff !important;
  text-decoration:none;
  transition:0.3s;
}

/* ===== HOVER ===== */
.bp_category_117 .bp_block_item:hover img {
  transform: scale(1.08);
}

.bp_category_117 .bp_block_item:hover{
  transform:translateY(-5px);
  box-shadow:0 10px 25px rgba(0,0,0,0.2);
}

.bp_category_117 .bp_news_more:hover{
  background:#1b5e20;
}

/* ===== GRID ===== */
.bp_category_100 .bp_block {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap:30px;
}

/* Chỉnh phần nội dung nước sông/ tái sử dụng */
/* ===== CARD ===== */
.bp_category_124 .bp_block_item {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  transition: 0.3s;
}

/* ===== ẢNH ===== */
.bp_category_124 .bp_img_news img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  transition: 0.4s;
}

/* ===== OVERLAY GRADIENT ===== */
.bp_category_124 .bp_block_item::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.4), rgba(0,0,0,0.2));
  z-index:1;
}

/* ===== KHUNG CHỮ ===== */
.bp_category_124 .bp_content_news_main{
  position: absolute;
  bottom: 15px;
  left: 15px;
  right: 15px;
  padding: 0;
  background: transparent;
  z-index: 2;
}

/* ===== TIÊU ĐỀ ===== */
.bp_category_124 .news_title,
.bp_category_124 .news_title a,
.bp_category_124 .news_title span{
  color:#fff !important;
  font-size:14px;
  font-weight:600;
  margin-bottom:4px;
  text-decoration:none;
  text-shadow:0 2px 6px rgba(0,0,0,0.6);
}

/* ===== TEXT ===== */
.bp_category_124 .bp_content_news_main p{
  font-size:13px;
  margin-bottom:8px;
  color:#fff !important;
  opacity:0.9;
}

/* ===== NÚT ===== */
.bp_category_124 .bp_news_more{
  display:inline-block;
  padding:4px 5px;
  background:#2e7d32;
  border-radius:4px;
  font-size:10px;
  color:#fff !important;
  text-decoration:none;
  transition:0.3s;
}

/* ===== HOVER ===== */
.bp_category_124 .bp_block_item:hover img {
  transform: scale(1.08);
}

.bp_category_124 .bp_block_item:hover{
  transform:translateY(-5px);
  box-shadow:0 10px 25px rgba(0,0,0,0.2);
}

.bp_category_124 .bp_news_more:hover{
  background:#1b5e20;
}


/* ===== PAGINATION CHUẨN ===== */
.phan_trang{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:10px;
    margin:40px 0;
}

/* nút số + nút next */
.phan_trang a,
.phan_trang span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:42px;
    height:42px;
    padding:0 14px;
    border-radius:10px;
    background:#fff;
    border:1px solid #d9e2ec;
    color:#2f7db3 !important;
    font-size:15px;
    font-weight:600;
    text-decoration:none;
    box-shadow:0 4px 12px rgba(0,0,0,0.06);
    transition:all 0.3s ease;
}

/* hover */
.phan_trang a:hover{
    background:#2e7d32;
    color:#fff !important;
    border-color:#2e7d32;
    transform:translateY(-2px);
    box-shadow:0 8px 18px rgba(46,125,50,0.25);
}

/* trang hiện tại */
.phan_trang span{
    background:#2e7d32;
    color:#fff !important;
    border-color:#2e7d32;
}

/* nút next riêng */
.phan_trang .bp_cls_next{
    min-width:46px;
    font-size:18px;
    font-weight:700;
}

/* hover next */
.phan_trang .bp_cls_next:hover{
    background:#1e73be;
    border-color:#1e73be;
}

/* ===== CONTENT (bên trái) ===== */
#m_901 .col-lg-8 {
  flex: unset !important;
  max-width: fit-content !important;
}

/* ===== SIDEBAR (bên phải) ===== */
#m_901 .col-lg-4 {
  flex: 0 0 25%;
  max-width: fit-content !important;
}

/* ===== GRID TIN TỨC ===== */
.news-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 900px;   /* BỎ giới hạn */
  margin: 0 auto;
}

/* ===== CARD ===== */
.news-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
}

/* ===== ẢNH ===== */
.news-card img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  transition: 0.4s;
}

.news-card:hover img {
  transform: scale(1.05);
}

/* ===== OVERLAY ===== */
.overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 18px;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.2), transparent);
}

/* Tiêu đề nhỏ (Tin môi trường, Hoạt động...) */
.overlay span,
.overlay .category {
  font-size: 13px;
  font-weight: 600;
  color: #4dabf7; /* xanh sáng dễ nhìn */
  display: block;
  margin-bottom: 4px;
}

/* Tiêu đề chính */
.overlay h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 1.4;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6); /* giúp nổi chữ */
}

/* Mô tả */
.overlay p {
  font-size: 14px;
  margin-bottom: 10px;
  color: #eaeaea;
}

/* Nút */
.overlay a {
  display: inline-block;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
  background: #2b6cb0;
  border-radius: 20px;
  color: #fff;
  text-decoration: none;
  transition: 0.3s;
}

.overlay a:hover {
  background: #1e4e8c;
}

/* ===== BOX FULL (tin dưới) ===== */
.news-card.full {
  grid-column: span 2;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
  #m_901 .col-lg-8,
  #m_901 .col-lg-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .news-section {
    grid-template-columns: 1fr;
  }

  .news-card.full {
    grid-column: span 1;
  }
}

/* ITEM SIDEBAR */
#m_8412 .service-item,
#m_8412 ul li {
  display: flex !important;
  align-items: center !important;
}

#m_8412 ul li img {
  width: 60px !important;
  margin-right: 10px;
}

#m_8412 ul li a {
  flex: 1;
}

/* Chỉnh Sidebar Dịch vụ */

.box-dich-vu{
    width: 300px;
    margin: auto;
}

.box-dich-vu h2{
    text-align: center;
    color: #1f7a63;
    margin-bottom: 15px;
}

/* ITEM */
.box-dich-vu .item{
    border-bottom: 1px solid #ddd;
}

/* LINK (QUAN TRỌNG) */
.box-dich-vu .item a{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    text-decoration: none;
    color: #333;
    border-radius: 6px;
    transition: all 0.3s ease;
}

/* ẢNH */
.box-dich-vu img{
    width: 70px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

/* CHỮ */
.box-dich-vu p{
    margin: 0;
    font-size: 15px;
    transition: 0.3s;
}

/* ===== HOVER ===== */
.box-dich-vu .item a:hover{
    background: #f2f2f2;
    transform: translateX(5px);
}

/* ĐỔI MÀU CHỮ */
.box-dich-vu .item a:hover p{
    color: #1f7a63;
}

/* HIỆU ỨNG ẢNH */
.box-dich-vu .item a:hover img{
    transform: scale(1.05);
}

/* MƯỢT */
.box-dich-vu img{
    transition: 0.3s;
}

.box-du-an h2,
.box-dich-vu h2{
    font-size: 20px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Chỉnh sidebar cho phần dự án */

/* ===== SIDEBAR DỰ ÁN ===== */

.box-du-an{
    width: 300px;
    margin: auto;
}

.box-du-an h2{
    text-align: center;
    color: #1f7a63;
    margin-bottom: 15px;
}

/* ===== ITEM ===== */
.box-du-an .item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px;
    border-bottom:1px solid #ddd;
    transition: all 0.3s ease;
}

/* ===== LINK ẢNH ===== */
.box-du-an .item > a:first-child{
    display:block;
}

/* ===== ẢNH ===== */
.box-du-an img{
    width:70px;
    height:60px;
    object-fit:cover;
    border-radius:6px;
    transition:0.3s;
}

/* ===== TEXT ===== */
.box-du-an p{
    margin:0;
    font-size:15px;
}

/* ===== LINK CHỮ ===== */
.box-du-an p a{
    color:#333;
    text-decoration:none;
    display:block;
}

/* ===== HOVER ===== */
.box-du-an .item:hover{
    background:#e8f5e9;
    transform:translateX(5px);
    border-radius:6px;
}

.box-du-an .item:hover p a{
    color:#1f7a63;
}

.box-du-an .item:hover img{
    transform:scale(1.03);
}


/* Chỉnh chi tiết bài phần dự án */

.project-detail-box{
    max-width:900px;
    margin:auto;
}

.project-info-title{
    color:#2E7D32;
    font-size:24px;
    font-weight:600;
    margin-bottom:18px;
    display:flex;
    align-items:center;
    gap:10px;
    border-bottom:2px solid #ddd; /* gạch chân full box */
    padding-bottom:20px;
}

.factory-icon{
    font-size:20px;
    color:#1B5E20;
    display:inline-block;
    animation: factoryBounce 1.8s infinite ease-in-out;
}

@keyframes factoryBounce{
    0%,100%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-4px);
    }
}

.project-main-img{
    width:100%;
    height:460px;
    object-fit:cover;
    border-radius:8px;
    margin-bottom:20px;
}

.project-thumb-list{
   display:flex;
    gap:15px;
    overflow-x:auto; /* nếu nhiều ảnh sẽ kéo ngang */
    margin-bottom:25px;
    justify-content:center; 
}

.project-thumb-list img{
    width:160px;
    height:100px;
    object-fit:cover;
    border-radius:8px;
    flex-shrink:0; /* không bị co lại */
}

.project-thumb-list img.active{
    border:3px solid #2f7db3;
    box-shadow:0 2px 8px rgba(0,0,0,0.15);
}

.project-content{
    font-size:16px;
    line-height:1.8;
    margin-top:25px;
}

.project-content strong{
    display:inline-block;
    width:120px;
}