.menu-image {
  margin-bottom: 20px !important; /* reduce space below image */
}
.about.section {
  padding-top: 32px !important; /* reduce space above section */
}
body.index-page .logo {
  margin-left: 2mm !important;
}
/* Consistent header font and size for all pages */
.site-header, .site-header .logo, .site-header .main-nav, .site-header .menu a {
  font-family: 'Be Vietnam Pro', Arial, Helvetica, sans-serif !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  color: #111 !important;
}
.processing-sub {
  text-transform: none !important;
  font-weight: 400 !important;
}
.processing-sub {
  text-transform: none !important;
}
/* Force partners slider to overflow and scroll horizontally */
.partners-slider {
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
}
.partners-slider .track {
  width: 100%;
  min-width: 0;
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  white-space: nowrap;
}
/* Ensure partners slider scrolls horizontally and logos overflow */
.partners-slider {
  width: 100%;
  overflow: hidden;
}
.partners-slider .track {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  white-space: nowrap;
  width: 100%;
}
.partner-card {
  flex: 0 0 auto;
  margin-right: 16px;
  width: 120px;
}
.partner-card img {
  width: 100%;
  height: auto;
  display: block;
}
/* Partners slider horizontal scroll fix */
.partners-slider .track {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  white-space: nowrap;
}
.partner-card {
  flex: 0 0 auto;
  margin-right: 16px;
}
/* Vietnamese font for divider title */
.center-title {
  font-family: 'Be Vietnam Pro', Arial, Helvetica, sans-serif;
}
body, .steel-rolls-caption {
  font-family: 'Be Vietnam Pro', Arial, Helvetica, sans-serif;
}

/* Caption overlay for steel-rolls.jpg */
.steel-rolls-caption {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  color: #111;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.3;
  letter-spacing: 1px;
  z-index: 2;
}
/* === Header balance fix === */
:root {
  --header-h: 110px;            /* chỉnh 100–140 tùy mắt */
}

/* Header khống chế bằng chiều cao cố định */
.site-header { border-bottom: none; }
.nav{
  display:flex;
  align-items:center;           /* logo & menu cùng một đường giữa */
  justify-content:space-between;
  height: var(--header-h);      /* không dùng padding để khỏi lệch */
  padding: 0;                   /* xoá padding cũ */
}

/* Logo */
.logo{ display:flex; align-items:center; height:100%; flex-shrink:0; margin-left: 0; padding-left: 0 !important; }

/* Only fix alignment for main page (index.html) */
body.index-page .container.nav,
body.index-page .menu-image {
  margin-left: 0 !important;
  padding-left: 0 !important;
}
body.index-page .menu-image img {
  margin-left: 0 !important;
  padding-left: 0 !important;
  display: block;
}
/* Align menu-image with logo on the left */
.menu-image {
  margin-left: 0 !important;
}
.logo img{
  height: calc(var(--header-h) - 30px);  /* ví dụ 80px khi header 110px */
  width:auto;
  display:block;
}

/* Menu */
/* mới – CHỈ áp cho header */
.site-header .nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height: var(--header-h);
  padding: 0;
}

.site-header .logo{
  display:flex; align-items:center; height:100%; flex-shrink:0; margin-left: -16px;
}
.site-header .logo img{
  height: calc(var(--header-h) - 30px);
  width:auto;
  display:block;
}

.site-header nav{
  display:flex; align-items:center; height:100%; gap:30px;
}
.site-header nav a{
  display:flex;
  align-items:center;
  height:100%;
  padding:0 6px;
  margin-left:0;
  text-decoration:none;
  color:#111;
  font-weight:500;
  font-size:20px;
}
.site-header nav a:hover{ color:var(--brand); }


/* Không cho hero đẩy xuống do margin */
.hero{ margin-top:0; }
/* hết phần section 1*/ 




/* ==== Section 2: About + Stats ==== */

.section { padding: 72px 0; }

.section-title{
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:700;
  font-size: clamp(24px, 3.6vw, 40px);
  color:#123;
  margin-bottom:10px;
}

.section-subtitle{
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.08em;
  color: var(--brand);
  font-weight:700;
  font-size: clamp(16px, 2.2vw, 22px);
  margin-bottom: 22px;
}

.section-lead{
  text-align:center;
  max-width: 1100px;
  margin: 0 auto 42px;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.9;
  color:#3b3b3b;
}

.stats-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #e6edf6;
  border-bottom: 1px solid #e6edf6;
}

.stat{
  text-align:center;
  padding: 34px 18px 40px;
  position: relative;
}

.stat:not(:last-child){
  border-right: 1px solid #e6edf6;   /* vạch ngăn dọc giữa các cột */
}

.stat .icon{
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.stat .value{
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  color: #1b3355;                     /* xanh đậm hơn cho số */
  margin-bottom: 6px;
}

.stat .label{
  font-size: 18px;
  color: #3a70a8;                     /* xanh nhạt kiểu mẫu */
}

/* Responsive */
@media (max-width: 992px){
  .stats-grid{ grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2n){ border-right: none; }
  .stat{ border-bottom: 1px solid #e6edf6; }
  .stat:nth-last-child(-n+2){ border-bottom: none; }
}

@media (max-width: 640px){
  .stats-grid{ grid-template-columns: 1fr; }
  .stat{ border-right: none; border-bottom: 1px solid #e6edf6; }
  .stat:last-child{ border-bottom: none; }
}


/* ==== Section 3: SẢN PHẨM ==== */


/* ===== Divider Title ===== */
.title-divider { padding: 36px 0 8px; }           /* khoảng cách trên/dưới */
.center-title{
  text-align: center;
  font-family: 'Be Vietnam Pro', Arial, Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: .08em;
  font-size: clamp(24px, 3.6vw, 40px);
  color: var(--brand);
  text-transform: uppercase;
  margin: 0 auto;
  position: relative;
}
.center-title::after{                             /* gạch nhấn nhỏ dưới tiêu đề */
  content:"";
  width: 72px; height: 3px;
  background: var(--brand);
  border-radius: 999px;
  display: block;
  margin: 12px auto 0;
}
/* === Tighten spacing: Section 2 -> Title "Sản Phẩm" -> Section 3 === */
.about.section{            /* Section 2 */
  padding-bottom: 10px;    /* trước là 72px */
}

.title-divider{            /* block có chữ "Sản Phẩm" giữa 2 section */
  padding: 6px 0 4px;     /* giảm padding trên/dưới */
}
.center-title{
  margin: 0;               /* bỏ margin mặc định của h2 */
}

.products.section{         /* Section 3 */
  padding-top: 10px;       /* trước là 72px */
}

/* Nếu Section 3 còn dùng ribbon tiêu đề, ẩn để tránh thêm khoảng cách */
.products .section-ribbon{ display: none; }

/* Khi click menu cuộn tới #san-pham không bị che bởi header sticky */
#san-pham{ scroll-margin-top: var(--header-h); }


.section { padding: 72px 0; }

/* Nhãn tiêu đề dạng "ribbon" như hình */
.section-ribbon{
  position: relative;
  margin-bottom: 28px;
  height: 48px;
}
.section-ribbon span{
  background: var(--brand);
  color: #fff;
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 18px 0 14px;
  font-weight: 700;
  letter-spacing: .06em;
}
.section-ribbon span::after{
  /* tam giác đuôi nhãn */
  content: "";
  position: absolute;
  left: calc(14px + 100%);
  top: 0;
  border-top: 24px solid transparent;
  border-bottom: 24px solid transparent;
  border-left: 22px solid var(--brand);
}

/* Lưới sản phẩm */
.product-grid{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}

.product-card a{
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: #eee;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}

/* Ảnh tỉ lệ 4:3, cắt tràn cho đồng đều */
.product-card .thumb{
  aspect-ratio: 4 / 3;
  width: 100%;
}
.product-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform .45s cubic-bezier(.2,.6,.2,1);
}

/* Overlay tiêu đề ở đáy */
.product-card .caption{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.55);
  color: #fff;
  padding: 14px 18px;
}
.product-card .caption span{
  font-size: clamp(16px, 2.2vw, 24px);
  font-weight: 700;
  letter-spacing: .02em;
}

/* Hover: ảnh zoom nhẹ & overlay đậm hơn */
.product-card:hover img{ transform: scale(1.05); }
.product-card:hover .caption{ background: rgba(0,0,0,.68); }

/* Responsive */
@media (max-width: 992px){
  .product-grid{ grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 640px){
  .product-grid{ grid-template-columns: 1fr; gap: 20px; }
  .section-ribbon{ margin-bottom: 18px; }
}

/* === Spacing controller giữa Section 2 -> "Sản Phẩm" -> Section 3 === */
:root{
  /* chỉ sửa các số px dưới đây */
  --gap-sec2-bottom: 50px;      /* khoảng cách dưới Section 2 (khối số liệu) */
  --gap-title-top: 20px;         /* padding trên của tiêu đề "Sản Phẩm" */
  --gap-title-bottom: 20px;      /* padding dưới của tiêu đề "Sản Phẩm" */
  --gap-grid-top: 18px;         /* khoảng cách trên của lưới sản phẩm */
  --title-underline-mt: 6px;    /* cách chữ -> gạch nhấn */
  --title-underline-w: 56px;    /* chiều rộng gạch nhấn */
  --title-underline-h: 2px;     /* độ dày gạch nhấn */
}

/* áp biến vào các block liên quan */
.about.section{                 /* Section 2 */
  padding-bottom: var(--gap-sec2-bottom) !important;
}
.title-divider.section{         /* tiêu đề "Sản Phẩm" giữa 2 section */
  padding: var(--gap-title-top) 0 var(--gap-title-bottom) !important;
}
.center-title::after{
  margin: var(--title-underline-mt) auto 0 !important;
  width: var(--title-underline-w); height: var(--title-underline-h);
}
.products.section{              /* Section 3 */
  padding-top: var(--gap-grid-top) !important;
}

/* đảm bảo UL grid không cộng thêm khoảng cách mặc định */
.products .product-grid{ margin:0 !important; padding:0 !important; }

/* (nếu có) ẩn ribbon trong Section 3 để không đội khoảng cách */
.products .section-ribbon{ display:none !important; }

/* cuộn tới #san-pham không bị header che */
#san-pham{ scroll-margin-top: var(--header-h); }

/* (tuỳ chọn) spacing khác cho mobile – chỉ đổi số ở đây khi cần */
@media (max-width: 768px){
  :root{
    --gap-sec2-bottom: 14px;
    --gap-title-top: 6px;
    --gap-title-bottom: 4px;
    --gap-grid-top: 14px;
    --title-underline-w: 44px;
  }
}


/* ==== SECTION 4: ĐẠI LÍ VÀ ĐỐI TÁC (carousel) ==== */
.partners .center-title{ margin-bottom: 16px; }

.partners-slider{
  position: relative;
}

.partners-slider .track{
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 8px 4px 4px;
  /* ẩn scrollbar */
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.partners-slider .track::-webkit-scrollbar{ display:none; }

.partner-card{
  position: relative;
  flex: 0 0 220px;           /* bề rộng mỗi logo card */
  height: 140px;            /* chiều cao card */
  border: 2px solid var(--brand);
  border-radius: 14px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 18px;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}
.partner-card img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  filter: saturate(100%);
  transition: transform .25s ease, filter .25s ease;
}
.partner-card:hover img{ transform: scale(1.03); }

/* dấu chấm dọc nhẹ giữa các card (desktop) */
@media (min-width: 992px){
  .partner-card{ overflow: visible; }
  .partner-card::after{
    content:"";
    position:absolute;
    right:-10px; top:12px; bottom:12px; width:1px;
    background: repeating-linear-gradient(to bottom, #e3e9f2 0 6px, transparent 6px 12px);
  }
  .partner-card:last-child::after{ display:none; }
}

/* Nút điều hướng */
.partners-slider .nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid #cfd7e3;
  background: #fff;
  color: #274a78;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.partners-slider .nav:hover{ transform: translateY(-50%) scale(1.05); }
.partners-slider .nav[disabled]{ opacity:.35; cursor: default; }

.partners-slider .prev{ left: -14px; }
.partners-slider .next{ right: -14px; }

@media (max-width: 768px){
  .partner-card{ flex-basis: 180px; height: 120px; }
  .partners-slider .prev{ left:-6px; } 
  .partners-slider .next{ right:-6px; }
}

/* Ensure arrows are above the track and clickable */
.partners-slider{ position: relative; isolation: isolate; }
.partners-slider .track{ position: relative; z-index: 1; overflow-x: auto; }
.partners-slider .nav{ position: absolute; z-index: 3; pointer-events: auto; }
.partners-slider .nav svg,
.partners-slider .nav path{ pointer-events: none; } /* click xuyên qua SVG tới <button> */


/* ==== SECTION 6: DỊCH VỤ GIA CÔNG ==== */
.processing { padding-top: 36px; padding-bottom: 36px; }
.processing-sub{
  text-align:center; max-width: 980px; margin: 8px auto 24px;
  font-size: 18px; color: #445; line-height: 1.6;
}

/* nền sóng nhẹ như mẫu (tuỳ chọn, bỏ nếu không cần) */
.processing{
  background:
    repeating-linear-gradient(
      to right,
      rgba(0,0,0,0) 0 24px,
      rgba(0,0,0,0) 24px 48px
    );
  background-image:
    radial-gradient(closest-side at 0 50%, rgba(0,0,0,0.03), rgba(0,0,0,0) 70%),
    radial-gradient(closest-side at 24px 50%, rgba(0,0,0,0.03), rgba(0,0,0,0) 70%);
  background-size: 48px 16px, 48px 16px;
  background-repeat: repeat-x;
}

.svc-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.svc-card{
  margin: 0;
  text-align: center;
}

.svc-thumb{
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
  background: #fff;
}

.svc-thumb img{
  width: 100%;
  height: 280px;         /* chỉnh theo ảnh của bạn */
  object-fit: cover;
  display: block;
}

.svc-caption{
  margin-top: 12px;
  font-size: 20px;
  font-weight: 700;
  color: #2b5aa1;        /* xanh nhấn */
}

/* Responsive */
@media (max-width: 992px){
  .svc-thumb img{ height: 220px; }
}
@media (max-width: 768px){
  .svc-grid{ grid-template-columns: 1fr; gap: 18px; }
  .svc-thumb img{ height: 200px; }
}


/* ==== SECTION 7: TIN MỚI CẬP NHẬT (light) ==== */
.news{
  background:#fff;                 /* nền trắng */
  padding-top:40px; 
  padding-bottom:40px;
}
.news .center-title{ 
  color:#111;                      /* tiêu đề đen */
  margin-bottom:28px; 
}

.news-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

.news-card{
  background:#fff;                 /* card trắng */
  border:1px solid #e6ecf3;        /* viền nhẹ */
  border-radius:14px;
  overflow:hidden;
  text-decoration:none;
  color:#111;                      /* chữ đen */
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.news-card:hover{
  transform:translateY(-6px);
  box-shadow:0 10px 24px rgba(0,0,0,.10);
  border-color:#d6dde8;
}

.news-thumb img{
  width:100%;
  height:240px;                    /* chỉnh tuỳ ảnh */
  object-fit:cover;
  display:block;
}

.news-title{
  font-size:18px;
  font-weight:700;
  line-height:1.45;
  padding:16px;
  color:#111;                      /* tiêu đề đen */
}

/* Responsive */
@media(max-width: 992px){
  .news-grid{ grid-template-columns:1fr 1fr; }
  .news-thumb img{ height:200px; }
}
@media(max-width: 768px){
  .news-grid{ grid-template-columns:1fr; }
  .news-thumb img{ height:180px; }
}


.news-list{
  display:flex;
  flex-direction:column;
  gap:40px;
}
.news-item{
  display:flex;
  gap:20px;
  border-bottom:1px solid #eaeaea;
  padding-bottom:24px;
}
.news-item .thumb img{
  width:280px;
  height:180px;
  object-fit:cover;
  border-radius:8px;
}
.news-item .content h2{
  font-size:20px;
  margin:0 0 8px;
}
.news-item .content .meta{
  color:#666;
  font-size:14px;
  margin-bottom:8px;
}
.news-item .readmore{
  color:#0066cc;
  font-weight:600;
  text-decoration:none;
}
.news-item .readmore:hover{ text-decoration:underline; }

@media(max-width:768px){
  .news-item{ flex-direction:column; }
  .news-item .thumb img{ width:100%; height:200px; }
}

/* NEWS DETAIL PAGE */
#news-detail {
  max-width: 800px;       /* chiều rộng nội dung cân đối với hình */
  margin: 0 auto;         /* căn giữa nội dung */
  line-height: 1.6;
}

#news-detail img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 20px auto;
  border-radius: 8px;     /* bo nhẹ góc hình giống giao diện mẫu */
}

#nd-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 16px;
  text-align: left;       /* chữ canh trái */
}

#nd-date {
  font-size: 14px;
  color: #777;
  margin-bottom: 24px;
}

#nd-body p {
  margin-bottom: 16px;
  font-size: 16px;
  color: #333;
}

/* News list title links */
.news-list h2 a,
.news-item h2 a {
  color: #0f3b82;              /* màu bạn muốn */
  text-decoration: none;
  font-weight: 700;
}

/* Giữ nguyên 1 màu cho cả visited */
.news-list h2 a:visited,
.news-item h2 a:visited {
  color: #0f3b82;
}

/* Hover state */
.news-list h2 a:hover,
.news-item h2 a:hover {
  color: #0b2e66;
  text-decoration: underline;
}

/* ==== SECTION 8: QUICK CONTACT ==== */
:root{
  --qc-red: #C62828;        /* đỏ chủ đạo */
  --qc-red-weak: #fde8e8;   /* nền nhạt cho bóng/viền */
  --qc-text: #0e1222;       /* màu chữ trên nền sáng */
}

.quick-contact .container { padding-top: 24px; padding-bottom: 24px; }

.qc-grid{
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 24px rgba(198,40,40,0.15);
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  overflow: hidden;
}

/* đường chia cột như ảnh mẫu */
.qc-card{ display:flex; gap:18px; padding:28px 28px 32px; align-items:center; }
.qc-card:not(:last-child){ border-right: 1px solid #e8ecf2; }

.qc-icon{
  width: 72px; height: 72px; min-width:72px;
  border-radius: 50%;
  background: var(--qc-red);
  color: #fff;
  display:grid; place-items:center;
  box-shadow: 0 6px 16px rgba(198,40,40,0.35);
}
.qc-icon svg{ width: 40px; height: 40px; }

.qc-content{ flex:1; }
.qc-title{
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 700;
  color: var(--qc-text);
}
.qc-sub{
  margin: 0 0 14px;
  font-size: 18px;
  color: #4a5568;
}

.qc-btns{ display:flex; flex-wrap:wrap; gap:10px; }

.qc-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 18px;
  border-radius: 999px;
  background: #0b74c9; /* xanh nút như hình mẫu – đổi nếu muốn */
  color:#fff; text-decoration:none; font-weight:700;
  box-shadow: 0 6px 14px rgba(11,116,201,0.25);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  white-space: nowrap;
}
.qc-btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 18px rgba(11,116,201,0.28); }
.qc-btn:active{ transform: translateY(0); opacity:.9; }

@media (max-width: 1000px){
  .qc-grid{ grid-template-columns: 1fr; }
  .qc-card{ border-right: none; border-bottom: 1px solid #e8ecf2; }
  .qc-card:last-child{ border-bottom:none; }
  .qc-title{ font-size: 22px; }
  .qc-sub{ font-size: 16px; }
}
/* --- Sửa căn hàng cho tiêu đề ở Section 8 --- */

/* 1) Các cột đứng cùng mép trên (không bị căn giữa theo icon) */
.qc-card{
  display: grid;                    /* đổi từ flex -> grid cho ổn định */
  grid-template-columns: 86px 1fr;  /* cột 1: icon, cột 2: nội dung */
  align-items: start;               /* CHỐT: tiêu đề nằm trên cùng một hàng */
  column-gap: 20px;
  padding: 30px 28px 34px;
}

/* Nếu trước đó bạn còn rule .qc-card { display:flex; align-items:center; } 
   hãy xóa hoặc để rule grid này nằm SAU để override. */

/* 2) Icon giữ kích thước cố định, không đẩy tiêu đề xuống */
.qc-icon{
  width: 86px; height: 86px; min-width: 86px;
  border-radius: 50%;
  display: grid; place-items: center;
}

/* 3) Bỏ khoảng trống thừa trước tiêu đề */
.qc-content{ padding-top: 0; }
.qc-title{ margin-top: 0; }

/* 4) Trên mobile vẫn thẳng hàng */
@media (max-width: 900px){
  .qc-card{
    grid-template-columns: 72px 1fr;
    row-gap: 0;
  }
}
/* ---- FIX Section 8: 3 cột đều & không tràn ---- */

/* Căn nội dung theo đỉnh, 2 cột: icon | nội dung */
.qc-card{
  display: grid !important;
  grid-template-columns: 86px 1fr;
  align-items: start;
  column-gap: 20px;
}

/* Nút không bị tràn khi text quá dài (email) */
.qc-btn{
  max-width: 100%;
  white-space: normal;          /* cho phép xuống dòng */
  overflow-wrap: anywhere;      /* ngắt chữ ở bất kỳ điểm nào nếu cần */
  word-break: break-word;       /* fallback */
  text-align: center;
  line-height: 1.25;
}

/* Nhóm nút không đẩy rộng cột */
.qc-btns{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 100%;
}

/* Đảm bảo 3 ô cao bằng nhau trong một hàng grid */
.qc-grid{ align-items: stretch; }
.qc-card{ height: 100%; }

/* Responsive nhỏ hơn: thu icon và cột cho gọn */
@media (max-width: 900px){
  .qc-card{ grid-template-columns: 72px 1fr; }
  .qc-icon{ width:72px; height:72px; }
}

/* (tuỳ chọn) thu chữ nút chút trên màn hình hẹp đ*
/* Nhỏ font cho nút Email (cột 1) để không xuống dòng */
.qc-grid .qc-card:nth-child(1) .qc-btn{
  font-size: 15px;     /* trước là ~16–18px */
  padding: 12px 16px;  /* thu padding ngang cho gọn */
  white-space: nowrap; /* giữ 1 dòng */
}


/* ===== SECTION 9: FOOTER INFO ===== */
.footer-wrap{
  display: grid;
  grid-template-columns: 2fr 1.1fr;    /* trái rộng, phải hẹp như hình */
  gap: 48px;
}

.footer-col{ color: #e8f0ff; }
.footer-heading{
  font-size: 32px;
  font-weight: 800;
  letter-spacing: .5px;
  margin: 0 0 10px;
  color: #fff;
  text-transform: uppercase;
}
.footer-hr{
  display: block;
  width: 180px;
  height: 2px;
  background: rgba(255,255,255,0.25);
  margin-bottom: 20px;
}

/* Liên hệ (trái) */
.contact-list{
  list-style: disc;
  padding-left: 22px;
  display: grid;
  gap: 14px;
  font-size: 20px;
  line-height: 1.5;
}
.contact-list li strong{ color:#fff; }

/* Tin mới (phải) */
.footer-news-list{
  display: grid;
  gap: 22px;
}
.footer-news-item{
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 16px;
  align-items: center;
  text-decoration: none;
  color: #fff;
}
.footer-news-thumb{
  width: 128px; height: 78px;
  border-radius: 8px; overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.footer-news-thumb img{
  width: 100%; height: 100%; object-fit: cover; display:block;
}
.footer-news-title{
  font-size: 22px; line-height: 1.35; margin: 0;
  color: #e9f2ff;
}
.footer-news-item:hover .footer-news-title{ text-decoration: underline; }

/* Mobile */
@media (max-width: 1024px){
  .footer-wrap{ grid-template-columns: 1fr; gap: 36px; }
  .footer-heading{ font-size: 28px; }
  .contact-list{ font-size: 18px; }
  .footer-news-title{ font-size: 20px; }
}
/* SECTION 9 nền trắng + chữ đậm */
#thong-tin-cuoi-trang{ background:#fff; padding: 48px 0; }
#thong-tin-cuoi-trang .footer-heading{ color:#173251 !important; }
#thong-tin-cuoi-trang .footer-hr{ background:#cfd8e3 !important; }
#thong-tin-cuoi-trang .footer-col,
#thong-tin-cuoi-trang .contact-list li,
#thong-tin-cuoi-trang .footer-news-title,
#thong-tin-cuoi-trang a{ color:#0e1222 !important; }

/* Section 9 – thu nhỏ tiêu đề tin bên phải */
#thong-tin-cuoi-trang .footer-news-title{
  font-size: 18px !important;   /* trước đang quá to */
  line-height: 1.35;
  font-weight: 700;
}

/* nhỏ hơn nữa trên màn hình lớn/nhỏ tùy ý */
@media (min-width: 1280px){
  #thong-tin-cuoi-trang .footer-news-title{ font-size: 17px !important; }
}
@media (max-width: 768px){
  #thong-tin-cuoi-trang .footer-news-title{ font-size: 16px !important; }
}

/* (tuỳ chọn) giới hạn hiển thị 2 dòng để gọn */
#thong-tin-cuoi-trang .footer-news-title{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Không underline cho link FB ở Section 9 */
#thong-tin-cuoi-trang .contact-list a.fb-link{
  color: inherit;
  text-decoration: none;
}
#thong-tin-cuoi-trang .contact-list a.fb-link:hover,
#thong-tin-cuoi-trang .contact-list a.fb-link:focus{
  text-decoration: none;
  opacity: .95; /* hiệu ứng nhẹ khi hover, có thể bỏ */
}

/* ===== GIOI-THIEU: 1 cột giữa, kiểu bài viết ===== */

/* Áp dụng cho trang giới thiệu: main có class about HOẶC id=about */
main.about, #about{
  max-width: 920px !important;   /* 840–980 tuỳ ý */
  margin: 0 auto !important;     /* canh giữa toàn khối */
  padding: 0 16px;               /* viền 2 bên cho mobile */
  display: block;
  font-size: 18px;
  line-height: 1.75;
  color: #0e1222;
  text-align: left;              /* chữ canh trái trong khối giữa */
}

/* Tiêu đề đoạn (20 Năm…, Nhà phân phối…, Sứ mệnh…) */
main.about h4, #about h4{
  font-size: 32px;
  font-weight: 800;
  line-height: 1.25;
  margin: 18px 0 10px;
  color:#0e1222;
}

/* Khoảng cách đoạn & danh sách */
main.about p, #about p{ margin: 12px 0; }
main.about ul, #about ul{ margin: 8px 0 0 22px; }
main.about li, #about li{ margin: 6px 0; }

/* Canh GIỮA dòng tiêu đề đầu tiên (dù là H3 hay P > STRONG) */
main.about > :is(h1,h2,h3,h4,h5,h6):first-of-type,
#about       > :is(h1,h2,h3,h4,h5,h6):first-of-type{
  text-align:center; font-weight:800; margin-bottom:14px;
}
main.about > p:first-of-type strong,
#about       > p:first-of-type strong{
  display:block; text-align:center; font-size:26px; font-weight:800; margin-bottom:14px;
}

/* Responsive */
@media (max-width: 1024px){
  main.about, #about{ max-width: 760px !important; }
  main.about h4,  #about h4{ font-size: 28px; }
}
@media (max-width: 640px){
  main.about, #about{ max-width: 100% !important; font-size:16.5px; }
  main.about h4,  #about h4{ font-size: 24px; }
}

/* Ảnh hero dưới tiêu đề trong trang/section Giới Thiệu */
.about .about-hero{
  margin: 14px 0 22px;      /* cách tiêu đề & nội dung */
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(16,24,40,.16);
}
.about .about-hero img{
  width: 100%;
  height: 420px;            /* có thể chỉnh 320–500px */
  display: block;
  object-fit: cover;        /* cắt vừa khung, không méo ảnh */
}
@media (max-width: 768px){
  .about .about-hero img{ height: 260px; }
}

/* Chỉ tiêu đề đầu (đã thêm class about-lead) canh giữa + to */
.about .about-content .about-lead{
  text-align: center !important;
  font-size: 42px !important;   /* chỉnh 38–46 tuỳ ý */
  line-height: 1.15;
  font-weight: 800;
  margin: 0 0 16px;
}

/* Mọi heading KHÁC trong bài viết: lề trái + nhỏ hơn */
.about .about-content h1:not(.about-lead),
.about .about-content h2:not(.about-lead),
.about .about-content h3,
.about .about-content h4,
.about .about-content h5,
.about .about-content h6{
  text-align: left !important;
  font-size: 28px !important;   /* cỡ nhỏ hơn cho “20 Năm…”, “Nhà Phân Phối…” */
  line-height: 1.3;
  font-weight: 800;
  margin: 22px 0 10px;
}

/* Thân bài */
.about .about-content p{ font-size: 18px; line-height: 1.75; }


/* Bảo đảm panel không bị cắt */
.site-header{ overflow: visible; }

/* Khung nav cơ bản (nếu đã có thì bỏ phần này) */
.main-nav .menu{ display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0; }
.main-nav .menu > li{ position:relative; }
.main-nav a{ text-decoration:none; color:#0e1222; font-weight:600; font-size:18px; padding:12px 2px; display:inline-block; }

/* ===================== DROPDOWN 1 CỘT (FINAL) ===================== */
/* đảm bảo header không cắt panel */
.site-header{ overflow: visible; }

/* li chứa dropdown phải relative để định vị panel */
.main-nav .has-sub{ position: relative; }

/* Cầu nối vô hình giữa nút và panel để không rơi khỏi :hover */
.main-nav .has-sub::after{
  content:"";
  position:absolute;
  left:0;
  top:100%;
  width:250px;          /* bằng với chiều rộng panel ở dưới */
  height:12px;          /* khoảng cách mong muốn giữa nút và panel */
  pointer-events:none;  /* không chặn click */
}

/* Panel dropdown */
.main-nav .has-sub > .sub{
  position:absolute;
  left:0;
  top:calc(100% + 2px);    /* cách nhẹ 2px, không dùng margin để tránh khe hở */
  margin:0;
  width:250px;             /* khung hẹp như yêu cầu */
  min-width:0;
  background:#fff;
  border-radius:12px;
  box-shadow:0 24px 60px rgba(16,24,40,.18);
  padding:6px 0;           /* khung mỏng */
  list-style:none;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  pointer-events:none;
  z-index:60;
}

/* item */
.main-nav .has-sub > .sub li{ list-style:none; }
.main-nav .has-sub > .sub a{
  display:block;
  padding:14px 16px;
  font-size:15px;
  font-weight:500;
  letter-spacing:.2px;
  color:#0e1222;
  white-space:nowrap;
  border-radius:8px;
  text-decoration:none;
}
.main-nav .has-sub > .sub a:hover{ background:#f4f6fa; }

/* Hiện dropdown khi hover/focus */
.main-nav .has-sub:hover > .sub,
.main-nav .has-sub:focus-within > .sub{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}

/* Responsive */
@media (max-width: 768px){
  .main-nav .has-sub::after{ width:220px; }
  .main-nav .has-sub > .sub{ width:220px; }
  .main-nav .has-sub > .sub a{ font-size:14.5px; padding:12px 14px; }
}
/* =================== END DROPDOWN 1 CỘT (FINAL) =================== */


/* dán vào style.css */
#thong-tin-cuoi-trang { scroll-margin-top: var(--header-h); }
html { scroll-behavior: smooth; }

/* Khung video responsive 16:9 */
.yt-wrap{
  position: relative;
  width: 100%;
  padding-top: 56.25%;        /* 16:9 */
  margin: 18px 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(16,24,40,.12);
}
.yt-wrap iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}