/* ============================================

   BANNER HEADER

   ============================================ */

.banner-header {

  min-height: 500px;

  background-size: cover;

  background-position: 50% 50%;

  background-repeat: no-repeat;

  position: relative;

  color: #fff;

  overflow: hidden;

}

.banner-header::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(135deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.35) 100%);

  z-index: 1;

}

.banner-header > * { position: relative; z-index: 2; }

.banner-header img { object-fit: cover; }



.banner-header .s-info { margin-top: 60px; }

.banner-header .s-info .title {

  font-size: 48px;

  font-family: "Roboto", sans-serif;

  color: var(--color-main);

  margin-bottom: 12px;

  text-transform: uppercase;

  line-height: 1.1;

}

.banner-header .s-info p {

  font-size: 16px;

  line-height: 1.7;

  color: rgba(255,255,255,0.9);

}



.s-block { padding: 60px 30px; }



/* ===== THUMB: 2 ảnh overlap mượt mà ===== */

.banner-header .s-thumb {

  position: relative;

  /* đủ cao để chứa cả 2 ảnh + phần overlap */

  padding-bottom: 100px;

}



.banner-header .thumb-1 {

  position: relative;

  width: 82%;

  height: 260px;

  margin-left: auto;

  border: 4px solid rgba(255,255,255,0.8);

  overflow: hidden;

  border-radius: 16px;

  box-shadow: 0 20px 60px rgba(0,0,0,0.4);

  transition: transform 0.4s ease;

}

.banner-header .thumb-1:hover { transform: translateY(-4px); }



.banner-header .thumb-2 {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 62%;

  height: 210px;

  border: 3px solid rgba(255,255,255,0.7);

  overflow: hidden;

  border-radius: 14px;

  box-shadow: 0 16px 48px rgba(0,0,0,0.35);

  z-index: 3;

  transition: transform 0.4s ease;

}

.banner-header .thumb-2:hover { transform: translateY(-4px); }



.banner-header .thumb-1 img,

.banner-header .thumb-2 img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.6s ease;

}

.banner-header .thumb-1:hover img,

.banner-header .thumb-2:hover img {

  transform: scale(1.05);

}



/* ============================================

   S-HOME-11

   ============================================ */

.s-home-11 { margin: 40px 0 30px; }

.s-home-11 .s_right .b-card-22 { margin-bottom: 22px; }

.s-home-11 .s_right .b-card-22 .b_title h3 {
  font-size: 24px;
  margin-bottom: 20px;
  font-weight: 700;
  line-height: 1.3;

  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s-home-11 .s_right .b-card-22 .b_title span { font-size: 14px; }



/* ============================================

   B-CARD-22

   ============================================ */

.b-card-22 {

  display: block;

  position: relative;

  border-radius: 18px;

  overflow: hidden;

  margin-bottom: 30px;

  /* shadow mặc định nhẹ */

  box-shadow: 0 4px 20px rgba(0,0,0,0.10);

  transition: box-shadow 0.35s ease, transform 0.35s ease;

}

/*.b-card-22:hover {*/

/*  box-shadow: 0 12px 36px rgba(0,0,0,0.18);*/

/*  transform: translateY(-3px);*/

/*}*/



.b-card-22 .b_thumb img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transform: scale(1);

  transition: transform 0.55s ease-in-out;

}

.b-card-22:hover .b_thumb img {

  transform: scale(1.08);

}



/* Title: ẩn mặc định, hiện khi hover (desktop) */

.b-card-22 .b_title {
  display: -webkit-flex;
  display: flex;

  -webkit-align-items: center;
  align-items: center;

  -webkit-justify-content: flex-end;
  justify-content: flex-end;

  flex-direction: column;

  position: absolute;
  bottom: 0;
  left: 0;

  width: 100%;
  height: auto;

  padding: 60px 40px 25px;

  color: #fff;
  text-align: center;


  opacity: 1;

  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;


}

.b-card-22 .b_title h2{
  font-size: 25px;
  margin: 0 0 10px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.2px;
}



.b-card-22 .b_title h3 {
  font-size: 25px;
  margin: 0 0 10px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.2px;
}

.b-card-22 .b_title span {

  margin: 0 auto;

  color: #fff;

  border-color: rgba(255,255,255,0.6);

  box-shadow: none;

  transition: background-color 0.25s ease;

}

.b-card-22 .b_title span:hover {

  background-color: var(--color-main);

  border-color: var(--color-main);

}

/*.b-card-22:hover .b_title {*/

/*  opacity: 1;*/

/*  transform: translateY(0);*/

/*}*/



/* ============================================

   B-CARD-14

   ============================================ */

.b-card-14 {

  display: block;

  margin-bottom: 30px;

  transition: transform 0.3s ease;

}

.b-card-14:hover { transform: translateY(-3px); }



.b-card-14 .b_thumb {

  border-radius: 10px;

  overflow: hidden;

  box-shadow: 0 4px 16px rgba(0,0,0,0.10);

  transition: box-shadow 0.3s ease;

}

.b-card-14:hover .b_thumb {

  box-shadow: 0 10px 30px rgba(0,0,0,0.16);

}

.b-card-14 .b_thumb img {

  width: 100%;

  object-fit: cover;

  transition: transform 3.5s ease;

}

.b-card-14:hover .b_thumb img { transform: scale(1.06); }



.b-card-14 .b_title {

  font-size: 17px;

  line-height: 1.4;

  text-align: center;

  margin: 12px 0 4px;

  font-weight: 500;

  transition: color 0.25s ease;

}

.b-card-14:hover .b_title { color: var(--color-main); }



.b-card-14 .b_area { color: #05a; font-size: 13px; }

.b-card-14 .b_area span.fa { padding-left: 13px; }

.b-card-14 .b_area span.fa::before { top: -1px; }



.s-list-project { margin: 30px 0; }



/* ============================================

   RESPONSIVE

   ============================================ */



/* --- Laptop nhỏ: 993px – 1259px --- */

@media (min-width: 993px) and (max-width: 1259px) {

  .banner-header { min-height: 440px; }

  .banner-header .s-info .title { font-size: 38px; }



  .banner-header .s-thumb { padding-bottom: 90px; }

  .banner-header .thumb-1 { height: 230px; }

  .banner-header .thumb-2 { height: 185px; }



  /* Tablet lớn: luôn hiện title card */

  .b-card-22 .b_title {

    opacity: 1;

    transform: translateY(0);

    padding: 14px 12px;

  }

  .b-card-22 .b_title h3 { font-size: 16px; margin: 0 0 6px; }

  .b-card-22 .b_title span { display: none; }

}



/* --- Tablet: 525px – 992px --- */

@media (min-width: 525px) and (max-width: 992px) {

  .banner-header { min-height: 380px; }

  .banner-header .s-info { margin-top: 25px; }

  .banner-header .s-info .title { font-size: 30px; }

  .banner-header .s-info p { font-size: 14px; }

  .s-block { padding: 30px 20px; }



  .banner-header .s-thumb {

    margin-top: 20px;

    padding-bottom: 80px;

  }

  .banner-header .thumb-1 {

    width: 75%;

    height: 190px;

    border-width: 3px;

    border-radius: 12px;

  }

  .banner-header .thumb-2 {

    width: 58%;

    height: 160px;

    border-width: 2px;

    border-radius: 10px;

  }



  .b-card-22 .b_title {

    opacity: 1;

    transform: translateY(0);

    padding: 10px 8px;

  }

  .b-card-22 .b_title h3 { font-size: 26px; margin: 0 0 10px; }
  .b-card-22 .b_title h2 {margin: 0 0 40px; }

  .b-card-22 .b_title span { display: none; }

  .b-card-22:hover { transform: none; }



  .b-card-14 .b_title { font-size: 15px; }

  .s-home-11 { margin: 20px 0 15px; }

  .s-home-11 .s_left .b-card-22 { margin-bottom: 15px; }

  .s-home-11 .s_right .b-card-22 { margin-bottom: 15px; }

}



/* --- Mobile vừa: 375px – 524px --- */

@media (min-width: 375px) and (max-width: 524px) {

  .banner-header {
    min-height: 300px;
  }

  .banner-header .s-info {
    margin-top: 16px;
  }

  .banner-header .s-info .title {
    font-size: 24px;
  }

  .banner-header .s-info p {
    font-size: 13px;
    line-height: 1.5;
  }

  .s-block {
    padding: 18px 14px 24px;
  }

  .banner-header .s-thumb {
    margin-top: 14px;
    padding-bottom: 68px;
  }

  .banner-header .thumb-1 {
    width: 70%;
    height: 150px;
    border-width: 3px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  }

  .banner-header .thumb-2 {
    width: 56%;
    height: 128px;
    border-width: 2px;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  }

  /* Tắt hover effect trên mobile */
  .banner-header .thumb-1:hover,
  .banner-header .thumb-2:hover {
    transform: none;
  }

  .b-card-22 .b_title {
    opacity: 1;
    transform: translateY(0);
    padding: 8px 6px;
  }

  .b-card-22 .b_title h3 {
    font-size: 13px;
    margin: 0 0 3px;
  }

  .b-card-22 .b_title span {
    display: none;
  }

  .b-card-22:hover {
    transform: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
  }

  .b-card-14 .b_title {
    font-size: 14px;
    line-height: 1.3;
    margin: 8px 0 3px;
  }

  .b-card-14:hover {
    transform: none;
  }

  .s-home-11 {
    margin: 14px 0;
  }

  .s-home-11 .s_right .b-card-22 .b_title h3 {
    font-size: 13px;
  }

  .s-home-11 .s_left .b-card-22,
  .s-home-11 .s_right .b-card-22 {
    margin-bottom: 10px;
  }

  /* Làm ảnh tối nhẹ trên mobile */
  .s-home-11 .b-card-22 img {
    filter: brightness(0.85);
  }

}



/* --- Mobile nhỏ: max 374px --- */

@media (max-width: 374px) {

  .banner-header { min-height: 260px; }

  .banner-header .s-info { margin-top: 10px; }

  .banner-header .s-info .title { font-size: 20px; }

  .banner-header .s-info p { font-size: 12px; line-height: 1.45; }

  .s-block { padding: 14px 10px 20px; }



  .banner-header .s-thumb {

    margin-top: 10px;

    padding-bottom: 58px;

  }

  .banner-header .thumb-1 {

    width: 67%;

    height: 128px;

    border-width: 2px;

    border-radius: 8px;

  }

  .banner-header .thumb-2 {

    width: 54%;

    height: 108px;

    border-width: 2px;

    border-radius: 7px;

  }

  .banner-header .thumb-1:hover,

  .banner-header .thumb-2:hover { transform: none; }



  .b-card-22 .b_title {

    opacity: 1;

    transform: translateY(0);

    padding: 6px 4px;

  }

  .b-card-22 .b_title h3 { font-size: 12px; margin: 0 0 2px; }

  .b-card-22 .b_title span { display: none; }

  .b-card-22:hover { transform: none; box-shadow: 0 4px 20px rgba(0,0,0,0.10); }



  .b-card-14 .b_title { font-size: 13px; line-height: 1.3; margin: 6px 0 3px; }

  .b-card-14:hover { transform: none; }



  .s-home-11 { margin: 10px 0; }

  .s-home-11 .s_right .b-card-22 .b_title h3 { font-size: 12px; }

  .s-home-11 .s_left .b-card-22 { padding: 6px; margin-bottom: 8px; }

  .s-home-11 .s_right .b-card-22 { margin-bottom: 8px; }

}



/* =========================

   BREADCRUMB

========================= */



.s-breadcrumb-wrap{

  position:relative;

  overflow:hidden;



  margin-bottom:20px;

}



/* fade bên phải */

.s-breadcrumb-wrap::after{

  content:"";

  position:absolute;

  top:0;

  right:0;



  width:45px;

  height:100%;



  pointer-events:none;



  background:linear-gradient(

          to right,

          rgba(255,255,255,0),

          rgba(255,255,255,.9) 75%

  );

}



.s-breadcrumb-1{

  display:flex;

  align-items:center;



  flex-wrap:nowrap;



  overflow-x:auto;

  overflow-y:hidden;



  white-space:nowrap;



  gap:8px;



  padding-bottom: 20px;

  margin:0;



  list-style:none;



  scrollbar-width:none;



  -webkit-overflow-scrolling:touch;



  scroll-behavior:smooth;

}



.s-breadcrumb-1::-webkit-scrollbar{

  display:none;

}



.s-breadcrumb-1 li{

  display:flex;

  align-items:center;



  flex-shrink:0;



  font-size:15px;

  line-height:1.4;

  font-weight:500;

}





.s-breadcrumb-1 a{

  color:#222;

  text-decoration:none;



  transition:.25s ease;

}



.s-breadcrumb-1 a:hover{

  color:var(--color-main);

}



.s-breadcrumb-1 span{

  color: #111111;

}



/* MOBILE */

@media(max-width:767px){



  .s-breadcrumb-wrap{

    margin-bottom:15px;

  }



  .s-breadcrumb-wrap::after{

    width:35px;

  }



  .s-breadcrumb-1{

    gap:5px;

  }



  .s-breadcrumb-1 li{

    font-size:13px;

  }



  .s-breadcrumb-1 li:not(:last-child)::after{

    margin-left:5px;

    font-size:10px;

  }



}



/* ==========================================================================

   1. BỐ CỤC KHỐI MEDIA BÊN PHẢI (VIDEO & GRID ALBUM)

   ========================================================================== */



/* Khung bọc tổng thể cột bên phải */

.media-right-block {

  display: flex;

  flex-direction: column;

  gap: 12px; /* Khoảng cách giữa khung video và lưới ảnh */

  width: 100%;

}



/* --- KHỐI VIDEO LỚN TRÊN GIAO DIỆN CHÍNH --- */

.video-container-box {

  width: 100%;

  margin-bottom: 15px;

}



.video-container-box .video-poster-wrapper {

  position: relative;

  width: 100%;

  aspect-ratio: 16 / 9; /* Tỉ lệ màn hình rộng chuẩn YouTube giúp video to và nét */

  overflow: hidden;

  border-radius: 6px; /* Bo tròn góc nhẹ cho video */

  background-color: #000000;

  cursor: pointer;

}



.video-container-box .main-video-img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover; /* Giúp ảnh đại diện lấp đầy toàn bộ diện tích khung video to */

  display: block;

}



/* Nút Play SVG chuẩn biểu tượng YouTube */

.video-container-box .youtube-play-btn {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 68px;

  height: 48px;

  z-index: 2;

  transition: transform 0.3s ease, filter 0.3s ease;

}



/* Hiệu ứng phóng nhẹ nút play khi di chuột vào vùng video */

.video-container-box .video-poster-wrapper:hover .youtube-play-btn {

  transform: translate(-50%, -50%) scale(1.1);

  filter: drop-shadow(0px 4px 15px rgba(0, 0, 0, 0.6));

}





/* --- LƯỚI ALBUM 8 ẢNH NHỎ PHÍA DƯỚI --- */

.album-grid-container {

  display: grid;

  grid-template-columns: repeat(4, 1fr); /* Chia đều thành đúng 4 cột như Hình 1 */

  gap: 8px; /* Khoảng hở giữa các ô ảnh nhỏ */

  width: 100%;

}



.album-grid-item {

  position: relative;

  width: 100%;

  aspect-ratio: 4 / 3; /* Ép tỉ lệ ảnh chữ nhật nằm ngang đều tăm tắp */

  overflow: hidden;

  border-radius: 8px; /* Bo góc mạnh và mịn theo chuẩn thiết kế yêu cầu */

  background-color: #f5f5f5;

}



.album-grid-item a {

  display: block;

  width: 100%;

  height: 100%;

}



.album-grid-item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  transition: transform 0.4s ease;

}



/* Hiệu ứng zoom ảnh mượt mà khi hover */

.album-grid-item:hover img {

  transform: scale(1.08);

}





/* ==========================================================================

   2. CẬP NHẬT KÍCH THƯỚC MODAL VIDEO ĐỂ KHUNG TO BỰ RA CHUẨN ĐẸP

   ========================================================================== */



/* Phóng to khung bọc Modal chứa video (Ghi đè max-width cũ bị nhỏ) */

#myVideo .c-modal-box {

  width: 90% !important; /* Co giãn theo chiều rộng màn hình máy tính/điện thoại */

  max-width: 850px !important; /* Độ rộng tối đa để video bự ra sắc nét, không bị co cụm */

  margin: 30px auto !important;

}



/* Khung group chứa nội dung và viền trắng bao quanh video */

#myVideo .c-modal-group {

  background: #ffffff !important;

  padding: 10px !important; /* Độ dày của viền trắng xung quanh video giống mẫu */

  border-radius: 6px !important;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;

  position: relative !important;

  overflow: visible !important; /* Để lộ nút Close lệch hẳn ra ngoài góc */

}



/* Đưa vùng chứa Iframe về tỷ lệ màn hình rộng 16:9 */

#myVideo .c_body {

  position: relative !important;

  width: 100% !important;

  aspect-ratio: 16 / 9 !important; /* Ép khung video sang chuẩn tỷ lệ YouTube lớn */

  background-color: #000000 !important;

}



/* Ép thẻ iframe phát YouTube phải lấp đầy toàn bộ khung to bự */

#myVideo .c_body iframe {

  position: absolute !important;

  top: 0 !important;

  left: 0 !important;

  width: 100% !important;

  height: 100% !important;

  display: block !important;

  border: none !important;

}



/* Chỉnh lại vị trí nút Đóng (Close) hình tròn đen dấu X trắng ở góc ngoài */

#myVideo .c_close {

  position: absolute !important;

  top: -16px !important;

  right: -16px !important;

  background: #000000 !important;

  color: #ffffff !important;

  border: 2px solid #ffffff !important;

  border-radius: 50% !important;

  width: 32px !important;

  height: 32px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  cursor: pointer !important;

  z-index: 9999 !important;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;

}



/* Căn giữa icon chữ X (FontAwesome) bên trong nút close tròn */

#myVideo .c_close i {

  font-size: 14px !important;

  line-height: 1 !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

}





/* ==========================================================================

   3. TÙY CHỈNH GIAO DIỆN PHÓNG TO CỦA FANCYBOX V2 CŨ (ALBUM ẢNH PHÍA DƯỚI)

   ========================================================================== */



/* Độ mờ và màu sắc lớp nền tối phía sau khi phóng to ảnh */

.fancybox-overlay {

  background: rgba(30, 30, 30, 0.75) !important;

}



/* Tạo khung viền trắng dày xung quanh ảnh */

.fancybox-skin {

  background: #ffffff !important;

  padding: 8px !important; /* Độ dày viền trắng bao quanh ảnh */

  border-radius: 4px !important;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;

  position: relative;

}



/* Đưa nút đóng (dấu X) lệch ra ngoài góc trên bên phải của Fancybox ảnh */

/* ==========================================================================

   SỬA LỖI NÚT ĐÓNG FANCYBOX BỊ NHÂN ĐÔI (BÓNG MA)

   ========================================================================== */



/* Thao túng trực tiếp khung nút đóng của Fancybox v2 */

.fancybox-close {

  top: -16px !important;

  right: -16px !important;

  background-color: #000000 !important;



  /* QUAN TRỌNG: Ẩn triệt để ảnh sprite hoặc icon gốc của thư viện cũ để không bị nhân đôi */

  background-image: none !important;

  text-indent: 0 !important;



  border: 2px solid #ffffff !important;

  border-radius: 50% !important;

  width: 32px !important;

  height: 32px !important;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;



  /* Sử dụng flex để đưa dấu X tự tạo vào chuẩn chính giữa */

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  cursor: pointer !important;

}







/* Khung chứa phần Tiêu đề/Chú thích dưới ảnh */

.fancybox-title-inside-wrap {

  padding-top: 15px !important;

  background: transparent !important;

  text-align: center !important;

  width: 100% !important;

}



/* Biến chữ mặc định thành dạng viên thuốc nền đen chữ trắng bo góc */

.fancybox-title-inside-wrap {

  display: inline-block !important;

  background: #000000 !important;

  color: #ffffff !important;

  padding: 6px 18px !important;

  font-size: 13px !important;

  font-weight: bold !important;

  border-radius: 20px !important; /* Tạo hình viên thuốc tròn trịa */

  margin: 10px auto 0 auto !important;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;

}



.s_chi-tiet{

  padding: 20px 0;

}



/* ==========================================================================

   CSS CHỈ SỬA RUỘT BÊN TRONG (GIỮ NGUYÊN CẤU TRÚC ROW / COL BOOTSTRAP)

   ========================================================================== */



.s_lien-he{

  padding: 40px 0;

}



/* --- TẠO KHUNG VIỀN, BO GÓC VÀ ĐỔ BÓNG VÀNG CHO 2 KHỐI --- */

.s_lien-he .form-tuvan,

.s_lien-he .contact-sidebar {

  background: #ffffff !important;

  border-radius: 12px !important; /* Bo góc khối trắng */

  padding: 40px 45px !important; /* Khoảng cách đệm bên trong */

  box-shadow: 0 8px 30px rgba(215, 185, 140, 0.3) !important; /* Đổ bóng vàng nhẹ */

  border: 1px solid rgba(230, 205, 170, 0.5) !important; /* Viền vàng nhạt quanh hộp */

  min-height: 360px !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: center !important;

  box-sizing: border-box !important;

}



/* --- PHẦN KHỐI BÊN TRÁI: FORM ĐĂNG KÝ --- */

.s_lien-he .form-tuvan form#form_s-form-1 {

  max-width: 100% !important;

  width: 100% !important;

  margin: 0 auto !important;

}



.s_lien-he .form-tuvan .headline-99 {

  font-size: 28px !important;

  font-weight: 700 !important;

  color: #4a3319 !important; /* Màu nâu chữ ĐĂNG KÝ TƯ VẤN */

  text-transform: uppercase !important;

  margin-bottom: 35px !important;

  text-align: center !important;

}



/* Căn chỉnh lại dòng gạch chân */

.s_lien-he .form-tuvan .form-group.c-form.c-form--icon {

  position: relative !important;

  margin-bottom: 25px !important;

  border-bottom: 1px solid #dcdcdc !important; /* Đường kẻ dưới input */

  padding: 0 !important;

  background: transparent !important;

}



/* Khóa vị trí icon góc trái */

.s_lien-he .form-tuvan .form-group.c-form.c-form--icon .c_icon {

  position: absolute !important;

  left: 0 !important;

  bottom: 8px !important;

  color: #7b7b7b !important;

  font-size: 16px !important;

}



/* Xóa bỏ hoàn toàn ô vuông thô của input cũ */

.s_lien-he .form-tuvan .form-group.c-form.c-form--icon .c_input {

  width: 100% !important;

  height: 40px !important;

  border: none !important;

  border-radius: 0 !important;

  background: transparent !important;

  padding: 0 0 8px 30px !important; /* Đẩy chữ placeholder sang phải 30px tránh đè icon */

  font-size: 15px !important;

  color: #333333 !important;

  box-shadow: none !important;

  outline: none !important;

}



/* Nút gửi 2 màu đen - nâu */

.s_lien-he .form-tuvan .c-button-8 {

  background: linear-gradient(to right, #242424 0%, #242424 45%, #a35c37 55%, #a35c37 100%) !important;

  color: #ffffff !important;

  border: none !important;

  padding: 10px 42px !important;

  font-size: 15px !important;

  font-weight: 600 !important;

  border-radius: 25px !important;

  cursor: pointer !important;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;

  text-transform: uppercase !important;

}





/* --- PHẦN KHỐI BÊN PHẢI: KHÔI PHỤC VÒNG TRÒN ICON --- */

.s_lien-he .contact-sidebar .info-contact .name {

  font-size: 26px !important;

  font-weight: 700 !important;

  color: #111111 !important;

  margin-bottom: 12px !important;

}



.s_lien-he .contact-sidebar .info-contact p {

  font-size: 15px !important;

  color: #555555 !important;

  line-height: 1.6 !important;

  margin-bottom: 30px !important;

}



.s_lien-he .contact-sidebar .info-contact ul {

  list-style: none !important;

  padding: 0 !important;

  margin: 0 !important;

}



.s_lien-he .contact-sidebar .info-contact ul li {

  margin-bottom: 22px !important;

}



.s_lien-he .contact-sidebar .info-contact ul li a {

  display: flex !important;

  align-items: center !important;

  text-decoration: none !important;

  color: #111111 !important;

  font-size: 16px !important;

  font-weight: 500 !important;

}



/* SỬA LỖI: Tạo lại vòng tròn xám nhạt đổ xanh bao quanh icon */

.s_lien-he .contact-sidebar .info-contact .icon {

  width: 48px !important;

  height: 48px !important;

  background-color: #edf2f0 !important; /* Màu xám nhạt như hình 2 */

  border-radius: 50% !important; /* Ép thành hình tròn */

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  margin-right: 20px !important;

  color: #111111 !important;

  font-size: 16px !important;

  flex-shrink: 0 !important;

}



/* Responsive cho mobile */

@media (max-width: 768px) {

  .s_lien-he .form-tuvan,

  .s_lien-he .contact-sidebar {

    padding: 30px 20px !important;

    min-height: auto !important;

  }

}

#text-crd{
  font-size: 20px;
}

@media (max-width: 768px) {
  #text-crd{
    font-size: 14px;
  }
}