*{
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}
ul{
  margin: 0;
  padding: 0;
}
/* ====== Header style ====== */
:root{
  --green:#0a7a33;
  --green-700:#0b6a2d;
  --text:#1f2a37;
}

.site-header{
  padding:10px 0;
  color:var(--text);
  background-size: cover;   
}
.site-header h2{
  color: var(--tcg-text-secondary-color);
  margin-bottom: 0;
}

.site-header .container{
  margin:0 auto; 
  display:flex; 
  align-items:center; 
  gap:18px;
}
.site-header .search { position: relative;flex:1 1 225px; }
.site-header .search input {
  padding-right: 56px; 
  width:100%; height:44px; 
  padding:0 48px 0 16px;
  border:1px solid #d1e7d8; border-radius:24px;
  outline:none; box-shadow:0 1px 2px rgba(0,0,0,.03) inset;       
}
.search input:focus{border-color:var(--green); box-shadow:0 0 0 3px rgba(10,122,51,.12)}
.site-header .search .btn-search {
  position: absolute;
  right:5px; 
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: 0;
  border-radius:20px;
  color: #fff;
  background:var(--green); 
  display: grid;
  place-items: center;
  line-height: 0;
  cursor:pointer;
}
.site-header .search .btn-search svg { display:block; }

.btn-search:hover{background:#fff600 !important;}
.btn-search:hover svg{color: #05a742 !important;}
.suggest{
  font-size:12px; color:#657780; padding:6px 8px 0 8px;
}
.suggest a{color:var(--green); text-decoration:none}
.suggest a:hover{text-decoration:underline}

.hotline, .email{
  display:flex; 
  align-items:center; 
  gap:5px; 
  color:var(--green); 
  text-decoration:none;
  padding:5px 8px;
  border-radius:999px; 
  transition:.2s;
}
.hotline:hover,
a.email:hover
{
  background:#bce2c9; 
}

.hl-text small{
  display:block; 
  line-height:1; 
  color:#6b7280
}
.hl-text strong{
  display:block; 
  line-height:1; 
  color:var(--green)
}
/* an toàn cho ảnh */
img{max-width:100%; height:auto;}
/* Logo + chữ công ty ngang hàng */
.header-left {display:flex; align-items:center; gap:12px; width: 72%;}
.header-left img {width:120px; height:auto; border-radius:8px;}
.header-left h2 {margin:0;color:#159047;}
.header-left p {margin:0;color:#555;}
.header-right{width: 28%;}
/* Hotline + Email trên cùng một hàng */
.contact-line {gap:20px; margin-bottom:4px;}
.contact-line a {display:flex; align-items:center; 
  gap:6px; text-decoration:none; color:#159047;}
.contact-line small {display:block; font-size:10px; opacity:.7;}
.contact-line strong {display:block; font-size:12px;}


/* ====== Responsive ====== */
@media (max-width: 992px){
  .site-header .container{gap:12px}
}

@media (max-width: 768px){
  .site-header .container{flex-wrap:wrap}
  .brand{order:1}
  .search{order:3; flex-basis:100%}
  .suggest{display:none} 
}

/* ===== NAVBAR ===== */
#navBar .navbar{background:#05a742;}
#navBar .nav-link{color:#fff !important; font-weight:600;}
#navBar .nav-link.active{color: var(--tcg-text-primary-color) !important;}
#navBar .navbar-toggler{border-color:#fff;}
#navBar .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='white' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  filter:none;
}

/* khi thu gọn, cho menu full-width, dễ bấm */
@media (max-width:991.98px){
  #navBar .collapse{background:#05a742; border-radius:8px; padding:6px;}
  #navBar .navbar-nav .nav-link{padding:.55rem .9rem; border-radius:6px;}
}

/* ===== BREAKPOINTS ===== */
/* ≤ 1199: thu chữ, thu logo */
@media (max-width:1199.98px){
  .brand img{width:84px;}
  .site-header h2{font-size:28px;}
  .site-header .font15r{font-size:16px;}
  .actions .hl-text strong{font-size:12px;}
}

/* ≤ 991: xếp theo cột, search 100% */
@media (max-width:991.98px){
  .header-left, .header-right{flex:1 1 100%;}
  .header-left{order:1;}
  .header-right{order:3;}
  .brand img{width:72px;}
  .site-header h2{font-size:24px;}
  .site-header .font15r{font-size:15px;}
  .actions{gap:8px; margin-top:4px; flex-wrap:wrap;}
  .search{max-width:none;}        
}

/* ≤ 575: tối giản, ẩn gợi ý tìm kiếm */
@media (max-width:575.98px){
  .brand img{width:60px; border-radius:10px;}
  .site-header h2{font-size:20px;}
  .site-header .font15r{font-size:14px;}
  .search input{height:42px;}
  .search .btn-search{width:34px; height:34px;}
  .search .suggest{display:none;}
}

/* Responsive */
@media (max-width:768px){
  .header-left img {width:75px;}
  .header-left h2 {font-size:18px;}
  .header-left p {font-size:13px;}
  .contact-line {gap:8px; flex-wrap:wrap;}  
}


/* Mobile ≤ 575px: thu gọn hơn vẫn căn giữa */
@media (max-width: 575.98px){
  .site-header .search input{
    height: 42px;
    padding-right: 52px;      
  }
  .site-header .search .btn-search{
    width: 34px;
    height: 34px;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
  }
}