/* ==========================================================================
   giacong.vn — hệ thiết kế
   Gia công OEM nông sản · thực phẩm · dược liệu
   Nạp bởi functions.php của theme con (số hiệu bản = filemtime).

   MỤC LỤC
     1. Biến thiết kế
     2. Chữ và nhịp chung
     3. Nút
     4. Đầu khối (nhãn / tiêu đề / dẫn nhập)
     5. Thẻ dùng chung
     6. Biểu mẫu
     7. Trang chủ — từng khối
     8. Trang lưu trữ & bài viết
     9. Chân trang
    10. Màn hình hẹp (gom hết media query xuống cuối)
   ========================================================================== */

/* Flatsome ghi thẳng background-color:#666 vào thuộc tính style của MỌI
   [section dark="true"] không khai bg_color. Style nội tuyến thắng mọi luật
   ngoài, nên khối nền tối nào dùng MÀU PHẲNG (không phải gradient) đều ra xám
   #666 — chữ trắng trên đó chỉ còn khoảng 4:1. Chỉ chỗ này mới cần !important. */
section.gc-vi-sao,
section.gc-gt-tam-nhin,
section.gc-chan{background-color:var(--gc-ru-900)!important}

/* ============================ 1. BIẾN THIẾT KẾ ============================ */
/* CẢ THANG MÀU SINH TỪ LOGO, không lấy số áng chừng.
   Đo trên tệp logo gốc: xanh dương #124E9D (sắc 214,2°, bão hoà 99%) và
   xanh lá #83D83E (sắc 93,0°, bão hoà 72%). Navy, các bậc xám và nền sáng
   đều dựng ở ĐÚNG sắc 214,2° chỉ đổi độ sáng và độ bão hoà — nhờ vậy không
   bậc nào lệch tông khi đặt cạnh logo. */
:root{
  /* THAN CHÌ — mọi mảng nền tối: dải tiêu đề, khối năng lực, chân trang.
     Bỏ navy vì navy cùng HỌ SẮC với xanh dương thương hiệu: dải tối và nút bấm
     đứng cạnh nhau thì lẫn vào nhau, mắt không tách được đâu là kết cấu đâu là
     hành động. Than chì gần đen (bão hoà 13%) tách bạch hẳn — tối là kết cấu,
     xanh là hành động — và còn nâng tương phản: xanh lá trên nền tối 8.61 → 9.03.
     Thay thang than chì cũ. Navy đọc ra "nhà máy, kỹ thuật, đáng tin" đúng
     ngành B2B, trong khi than chì ngả lam đọc ra công nghệ chung chung. */
  --gc-ru-900:#1E2227;   /* navy — 15.6:1 với chữ trắng */
  --gc-ru-800:#2D3239;

  /* XANH DƯƠNG THƯƠNG HIỆU — MÀU HÀNH ĐỘNG DUY NHẤT.
     Đo từ logo giacong.vn. Dùng cho liên kết, nút chính, tiêu đề nhấn, trang
     hiện tại, biểu tượng. Hai bậc dưới đây đều đạt AA với chữ trắng nên dùng
     làm nền nút được, khác hẳn xanh lá cũ (2.85:1, từng là cái bẫy). */
  --gc-ru-700:#124E9D;   /* 6.78:1 với chữ trắng */
  --gc-ru-600:#1C60BA;   /* 5.40:1 với chữ trắng — bậc phụ, hover */

  /* TRUNG TÍNH LẠNH — ngả xanh rất nhẹ để ăn với navy, không xám chì */
  --gc-ru-500:#6D7988;   /* 4.64:1 nền trắng */
  --gc-ru-200:#CBD2DC;   /* 9.87:1 trên navy */
  --gc-ru-150:#DBE1E8;   /* 11.6:1 trên navy — bậc nhãn trên nền tối */
  --gc-ru-100:#E8EBF0;
  --gc-ru-050:#F7F9FB;   /* nền sáng của hệ */

  /* Bí danh nói rõ vai trò, dùng cho luật viết mới */
  --gc-xd-800:#0A3266;   /* nút đang bấm — 11.7:1 với chữ trắng */
  --gc-xd-700:#0E3E7E;   /* hover của nút chính — 9.07:1 */
  --gc-xd-600:#124E9D;   /* nút chính — ĐÚNG mã đo từ logo */
  --gc-xd-500:#1C60BA;   /* hover */
  --gc-xd-100:#E0EAF8;   /* nền xanh rất nhạt */
  --gc-xd-050:#F2F6FB;   /* nền xanh gần trắng */

  /* XANH LÁ — CHỈ LÀM ĐIỂM NHẤN, không bao giờ là màu nền chính.
     Lý do giữ hẹp: trải rộng thì site đọc ra nông sản, mất chất nhà máy.
     BẪY: #83D83E chỉ 1.70:1 với chữ trắng — KHÔNG dùng làm nền nút chữ trắng.
     Nền xanh lá thì chữ phải là navy (8.39:1). */
  --gc-la-500:#83D83E;   /* ĐÚNG mã đo từ logo — 9.45:1 trên navy */
  --gc-la-700:#4E8D1B;   /* xanh lá đậm — dùng làm HÌNH trên nền sáng, 4.08:1 */
  --gc-la-600:#64B224;   /* hover của nút xanh lá */
  --gc-la-400:#9AE160;   /* bậc sáng trên nền navy */

  /* Chữ */
  --gc-muc:#1E2227;      /* tiêu đề — navy, 15.6:1 nền trắng */
  --gc-chu:#252D37;      /* thân bài — 14.5:1 nền trắng */
  --gc-mo:#58626F;       /* 6.50:1 nền trắng, 6.11:1 trên --gc-ru-050 */
  --gc-vien:#E0E5EB;     /* viền trang trí, không phải thành phần tương tác */
  --gc-vien-nhap:#8995A4;/* viền ô nhập liệu — 3.17:1 với nền trắng */
  --gc-nen:#F7F9FB;

  /* Hình khối */
  --gc-bo:16px;
  --gc-bo-lon:24px;
  --gc-bong:0 8px 26px rgba(30,34,39,.08);
  --gc-bong-cao:0 20px 52px rgba(30,34,39,.16);

  /* Thang khoảng cách */
  --gc-k1:8px;  --gc-k2:14px; --gc-k3:22px;
  --gc-k4:32px; --gc-k5:48px; --gc-k6:72px;
}

/* ========================= 2. CHỮ VÀ NHỊP CHUNG ========================== */
body,
.gc h1,.gc h2,.gc h3,.gc h4,.gc h5,.gc h6{
  font-family:"Be Vietnam Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
}
body{color:var(--gc-chu);-webkit-font-smoothing:antialiased}

.gc{position:relative}
.gc .section-content{position:relative;z-index:1}
.gc h1,.gc h2,.gc h3,.gc h4{color:var(--gc-muc);text-wrap:balance;letter-spacing:-.015em}
.gc.dark h1,.gc.dark h2,.gc.dark h3,.gc.dark h4{color:#fff}
.gc p{color:inherit}

/* Trang dựng bằng khối không cần khung .row.page-wrapper của Flatsome bó thêm 15px */
.page-template-default .gc .section-content{max-width:none}

/* ================================ 3. NÚT ================================= */
.gc a.gc-nut,.gc .gc-nut,.gc button.gc-nut{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:52px;padding:0 30px;border-radius:999px;
  font-size:16px;font-weight:600;line-height:1.2;letter-spacing:0;
  text-transform:none;text-decoration:none;border:2px solid transparent;
  transition:background-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease;
}
/* Nút hành động dùng XANH LÁ thương hiệu, không dùng thang trung tính: trên nền
   than chì thì xanh lá là thứ duy nhất có màu, nên nó vừa dẫn mắt tới hành động
   vừa mang tín hiệu nông sản/thực phẩm cho cả trang.
   Nền nút phải là --gc-xd-600 (7.29:1 với chữ trắng). Xanh lá --gc-la-500
   chỉ 1.65:1 với chữ trắng — nếu dùng làm nền thì chữ phải là navy. */
.gc a.gc-nut--chinh,.gc button.gc-nut--chinh,.gc input[type=submit].gc-nut--chinh{background:var(--gc-xd-600);color:#fff;box-shadow:0 8px 22px rgba(31,122,6,.30)}
.gc a.gc-nut--chinh:hover,.gc button.gc-nut--chinh:hover,.gc input[type=submit].gc-nut--chinh:hover{background:var(--gc-xd-700);color:#fff;transform:translateY(-2px)}
.gc a.gc-nut--luc,.gc button.gc-nut--luc{background:var(--gc-ru-600);color:#fff}
.gc a.gc-nut--luc:hover,.gc button.gc-nut--luc:hover{background:var(--gc-ru-700);color:#fff;transform:translateY(-2px)}
.gc a.gc-nut--vien,.gc button.gc-nut--vien{border-color:var(--gc-xd-600);color:var(--gc-xd-600);background:transparent}
.gc a.gc-nut--vien:hover,.gc button.gc-nut--vien:hover{background:var(--gc-xd-600);color:#fff}
/* Trên nền tối phải đảo màu, nếu không chữ xanh trên nền xanh gần như tàng hình */
.gc.dark a.gc-nut--vien{border-color:rgba(255,255,255,.7);color:#fff}
.gc.dark a.gc-nut--vien:hover{background:#fff;color:var(--gc-ru-800)}

.gc a.gc-lien{display:inline-flex;align-items:center;gap:6px;font-weight:600;
  font-size:15px;color:var(--gc-ru-700);text-decoration:none}
.gc a.gc-lien:after{content:"→";transition:transform .2s ease}
.gc a.gc-lien:hover:after{transform:translateX(4px)}

/* ============================= 4. ĐẦU KHỐI ============================== */
.gc .gc-nhan{display:inline-block;margin:0 0 var(--gc-k2);
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gc-ru-700)}
.gc.dark .gc-nhan{color:var(--gc-ru-150)}
.gc .gc-h2{margin:0 0 var(--gc-k2);font-size:40px;line-height:1.18;color:var(--gc-muc)}
.gc.dark .gc-h2{color:#fff}
.gc .gc-h2 em{font-style:normal;color:var(--gc-ru-600)}
.gc.dark .gc-h2 em{color:var(--gc-ru-200)}
.gc .gc-dan{margin:0;font-size:17px;line-height:1.68;color:var(--gc-mo);max-width:740px}
.gc.dark .gc-dan{color:rgba(255,255,255,.88)}
.gc .gc-giua{text-align:center}
.gc .gc-giua .gc-dan{margin-left:auto;margin-right:auto}
.gc .gc-giua .gc-h2{margin-left:auto;margin-right:auto}

/* =========================== 5. THẺ DÙNG CHUNG =========================== */
/* Cột phải là flex hai tầng thì thẻ trong lưới mới cao bằng nhau */
.gc-luoi .row>.col{display:flex;flex-direction:column;padding-bottom:var(--gc-k3)}
.gc-luoi .col-inner{flex:1 1 auto;display:flex;flex-direction:column}
.gc-luoi .box{height:100%;display:block}
/* .box thành flex item sẽ bóp .box-image về 0 vì .image-cover dùng padding-top phần trăm */
.gc-luoi .box-image{width:100%!important;flex:0 0 auto;align-self:stretch}

/* ============================== 6. BIỂU MẪU ============================= */
.gc-mau input[type=text],.gc-mau input[type=tel],.gc-mau input[type=email],
.gc-mau select,.gc-mau textarea{
  width:100%;height:50px;margin:0 0 12px;padding:0 16px;
  border:1px solid var(--gc-vien);border-radius:12px;background:#fff;
  box-shadow:none;font-size:15px;color:var(--gc-chu)}
.gc-mau select{padding-right:38px}
.gc-mau textarea{height:104px;padding:14px 16px;line-height:1.55}
.gc-mau input:focus,.gc-mau select:focus,.gc-mau textarea:focus{
  border-color:var(--gc-ru-600);outline:2px solid rgba(18,78,157,.30);outline-offset:1px}
.gc-mau input[type=submit]{
  width:100%;height:56px;margin:6px 0 0;border:0;border-radius:999px;
  background:var(--gc-ru-600);color:#fff;font-size:16.5px;font-weight:600;
  letter-spacing:0;text-transform:none;box-shadow:0 8px 22px rgba(31,122,6,.28);
  transition:background-color .2s ease,transform .2s ease}
.gc-mau input[type=submit]:hover{background:var(--gc-ru-700);transform:translateY(-2px)}
.gc-mau .wpcf7-not-valid-tip{font-size:13px;margin:-8px 0 10px}
.gc-mau .wpcf7-response-output{margin:14px 0 0;border-radius:12px;font-size:14.5px}
.gc-mau .gc-mau__doi{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.gc-mau .gc-mau__doi p{margin:0}
.gc-mau .gc-mau__ghi{margin:12px 0 0;font-size:13px;line-height:1.55;color:var(--gc-mo)}

/* Nhãn trường: đứng trên ô nhập, luôn hiện — nhãn chỉ nằm ở placeholder thì
   biến mất ngay khi người dùng gõ, và trình đọc màn hình không đọc được. */
.gc-mau .gc-mau__nhan{display:block;margin:0 0 6px;
  font-size:14px;font-weight:600;line-height:1.4;color:var(--gc-muc)}
.gc-mau .gc-mau__nhan abbr{margin-left:2px;border:0;text-decoration:none;color:var(--gc-ru-600)}
.gc-mau .gc-mau__doi p{margin:0 0 2px}
.gc-mau ::placeholder{color:var(--gc-mo);opacity:1}

/* Dòng đồng ý. LƯU Ý: [acceptance]…[/acceptance] của CF7 đặt chữ BÊN TRONG
   thẻ <label>, trong span .wpcf7-list-item-label — ẩn span đó đi là mất luôn
   câu đồng ý, khách chỉ còn thấy ô tích trống. Để nguyên và bố trí <label>
   thành hàng ngang, nhờ đó bấm vào chữ cũng tích được và vùng chạm đủ 44px. */
.gc-mau .gc-mau__dongy{margin:6px 0 14px;font-size:14px;line-height:1.6;color:var(--gc-chu)}
.gc-mau .gc-mau__dongy .wpcf7-list-item{margin:0}
.gc-mau .gc-mau__dongy label{display:flex;align-items:flex-start;gap:10px;
  min-height:44px;padding:6px 0;cursor:pointer}
.gc-mau .gc-mau__dongy input[type=checkbox]{flex:0 0 auto;width:20px;height:20px;
  margin:2px 0 0;accent-color:var(--gc-ru-600)}
/* Khung form nằm trong [section dark="true"] ở trang chủ và trang giới thiệu:
   luật .dark của Flatsome nhuộm trắng mọi chữ con, mà khung form lại nền TRẮNG
   -> chữ đồng ý trắng trên trắng, tương phản 1.00. Ép màu và cỡ chữ ở đây; CF7
   còn tự đặt cỡ 0.9em nên phải khai lại cả font-size. */
.gc-mau .gc-mau__dongy .wpcf7-list-item-label{display:block;
  font-size:14px!important;line-height:1.6;color:var(--gc-chu)!important}
.gc-mau .gc-mau__dongy .wpcf7-list-item-label a{color:var(--gc-ru-700)!important}
.gc-mau .gc-mau__dongy a{color:var(--gc-ru-700);text-decoration:underline}

/* ========================== 7. TRANG CHỦ — KHỐI ========================== */

/* --- 7.1 Hero --- */
/* HERO NỀN TRẮNG.
   Brief: "Hero trắng + ảnh nhà máy", và tỷ lệ 70% trắng chỉ đạt được khi khối
   lớn nhất trên màn hình đầu tiên là nền sáng. Trước đây hero là mảng navy
   chiếm gần hết màn đầu, kéo cả trang về phía tối.
   Ảnh nhà máy giờ là thứ mang màu cho khối này — chữ và nút nhường chỗ. */
.gc-hero{background:#fff}
/* Vệt sáng cũ là rgba xanh đậm 42% — trên nền trắng sẽ thành mảng xám bẩn.
   Hạ xuống 6% màu thương hiệu: đủ tạo chiều sâu sau lưới ảnh, không đụng chữ. */
.gc-hero:before{content:"";position:absolute;inset:0;
  background:radial-gradient(62% 82% at 86% 12%,rgba(18,78,157,.07),transparent 72%);
  pointer-events:none}
.gc-hero .gc-nhan{color:var(--gc-xd-600)}
.gc-hero .gc-hero__h1{margin:0 0 18px;font-size:54px;line-height:1.1;font-weight:700;
  color:var(--gc-muc)}
.gc-hero .gc-hero__h1 em{font-style:normal;color:var(--gc-xd-600)}
.gc-hero .gc-hero__dan{margin:0 0 26px;max-width:620px;
  font-size:18px;line-height:1.7;color:var(--gc-mo)}
.gc-hero .gc-hero__nut{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 34px}
.gc-hero .gc-hero__cn{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;padding:0;list-style:none}
/* Chip chứng nhận: nền sáng có viền thật, không dùng nền trắng mờ như bản tối */
.gc-hero .gc-hero__cn li{margin:0;padding:6px 14px;border-radius:999px;
  background:var(--gc-ru-050);border:1px solid var(--gc-vien);
  font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--gc-muc)}
.gc-hero .gc-hero__tin{display:flex;flex-wrap:wrap;gap:14px 36px;margin:0;padding:26px 0 0;
  list-style:none;border-top:1px solid var(--gc-vien)}
.gc-hero .gc-hero__tin li{margin:0;font-size:14.5px;line-height:1.35;color:var(--gc-mo)}
.gc-hero .gc-hero__tin b{display:block;font-size:28px;font-weight:700;
  color:var(--gc-muc);letter-spacing:-.02em}
.gc-hero .gc-hero__anh img{border-radius:var(--gc-bo-lon);box-shadow:var(--gc-bong-cao)}

/* Lưới 4 ảnh nhà máy trong hero — bốn trụ: nông sản, thực phẩm, dược liệu, đóng gói.
   Ảnh đặt sẵn width/height để trình duyệt giữ chỗ, không nhảy bố cục khi tải. */
.gc-hero__anh4{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gc-hero__anh4 figure{position:relative;margin:0;overflow:hidden;
  border-radius:var(--gc-bo);box-shadow:0 14px 34px rgba(30,34,39,.14);
  border:1px solid var(--gc-vien)}
.gc-hero__anh4 img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.gc-hero__anh4 figcaption{position:absolute;left:10px;bottom:10px;
  padding:5px 12px;border-radius:999px;
  background:rgba(30,34,39,.84);backdrop-filter:blur(3px);
  font-size:12.5px;font-weight:600;letter-spacing:.01em;color:#fff}
/* So le nhẹ cho có nhịp, chỉ ở màn rộng — dưới đó bỏ để lưới thẳng hàng. */
@media (min-width:1000px){
  .gc-hero__anh4 figure:nth-child(2),
  .gc-hero__anh4 figure:nth-child(4){transform:translateY(24px)}
  .gc-hero__anh4{margin-bottom:24px}
}

/* Header trong suốt cao 118px (thanh trên 38 + hàng chính 80) nằm ĐÈ lên hero.
   Chỗ chừa cho nó đặt bằng thuộc tính padding của chính [section], KHÔNG bằng
   CSS: Flatsome ghi padding của section vào thuộc tính style nội tuyến nên luật
   ngoài không thắng. Xem dung-trang/04-trang-chu.php. */

/* --- 7.2 Dải cam kết đè lên hero --- */
.gc-cam-ket{padding-top:0!important;padding-bottom:0!important;margin-top:-58px}
.gc-cam-ket .gc-ck-hop{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  padding:32px 18px;background:#fff;border-radius:var(--gc-bo-lon);box-shadow:var(--gc-bong-cao)}
.gc-cam-ket .gc-ck{padding:4px 24px;border-left:1px solid var(--gc-vien)}
.gc-cam-ket .gc-ck:first-child{border-left:0}
.gc-cam-ket .gc-ck b{display:block;margin-bottom:5px;font-size:17px;line-height:1.3;color:var(--gc-muc)}
.gc-cam-ket .gc-ck span{display:block;font-size:14.5px;line-height:1.55;color:var(--gc-mo)}

/* --- 7.3 Lưới ngành hàng (đỉnh silo) --- */
.gc-nganh{background:#fff}
.gc-nganh .gc-the{position:relative;height:100%;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--gc-vien);border-radius:var(--gc-bo);
  overflow:hidden;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
/* Cả thẻ là vùng bấm, nhưng chữ neo vẫn là tiêu đề — vừa dễ chạm trên điện
   thoại (trước chỉ cao 20px), vừa giữ đúng chữ neo cho bộ máy tìm kiếm.
   Chip chuyên mục con phải nổi lên trên lớp phủ này mới bấm được. */
.gc-nganh .gc-the__than h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.gc-nganh .gc-the__con{position:relative;z-index:2}
.gc-nganh .gc-the__anh{position:relative;z-index:0}
.gc-nganh .gc-the:hover{border-color:var(--gc-ru-500);box-shadow:var(--gc-bong);transform:translateY(-4px)}
.gc-nganh .gc-the__anh{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--gc-ru-050)}
.gc-nganh .gc-the__anh img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s ease}
.gc-nganh .gc-the:hover .gc-the__anh img{transform:scale(1.05)}
.gc-nganh .gc-the__than{display:flex;flex-direction:column;flex:1 1 auto;padding:20px 22px 22px}
.gc-nganh .gc-the__than h3{margin:0 0 8px;font-size:19px;line-height:1.3}
.gc-nganh .gc-the__than h3 a{color:var(--gc-muc);text-decoration:none}
.gc-nganh .gc-the:hover .gc-the__than h3 a{color:var(--gc-ru-700)}
.gc-nganh .gc-the__mo{margin:0 0 14px;font-size:14.5px;line-height:1.6;color:var(--gc-mo)}
.gc-nganh .gc-the__con{display:flex;flex-wrap:wrap;gap:6px;margin:auto 0 0;padding:0;list-style:none}
.gc-nganh .gc-the__con li{margin:0}
.gc-nganh .gc-the__con a{display:inline-block;padding:5px 12px;border-radius:999px;
  background:var(--gc-ru-050);border:1px solid var(--gc-ru-100);
  font-size:13px;line-height:1.3;color:var(--gc-ru-700);text-decoration:none}
.gc-nganh .gc-the__con a:hover{background:var(--gc-ru-600);border-color:var(--gc-ru-600);color:#fff}

/* --- 7.4 Quy trình --- */
.gc-quy-trinh{background:var(--gc-ru-050)}
.gc-quy-trinh .row>.col{padding-bottom:var(--gc-k3)}
.gc-quy-trinh .gc-qt{position:relative;height:100%;padding:30px 26px 26px;
  background:#fff;border-radius:var(--gc-bo);box-shadow:0 2px 10px rgba(21,25,31,.05)}
.gc-quy-trinh .gc-qt__so{display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;margin:0 0 16px;border-radius:14px;
  background:var(--gc-ru-600);color:#fff;font-size:19px;font-weight:700}
.gc-quy-trinh .gc-qt h3{margin:0 0 8px;font-size:19px}
.gc-quy-trinh .gc-qt p{margin:0;font-size:15px;line-height:1.62;color:var(--gc-mo)}

/* --- 7.5 Đóng gói --- */
.gc-dong-goi{background:#fff}
.gc-dong-goi .gc-bb{display:block;border-radius:14px;overflow:hidden;
  background:var(--gc-ru-050);border:1px solid var(--gc-vien);text-decoration:none;
  transition:border-color .2s ease,transform .2s ease}
.gc-dong-goi .gc-bb:hover{border-color:var(--gc-ru-500);transform:translateY(-3px)}
.gc-dong-goi .gc-bb img{width:100%;aspect-ratio:1/1;object-fit:contain;display:block;background:var(--gc-ru-050)}
.gc-dong-goi .gc-bb span{display:block;padding:11px 8px 13px;
  font-size:14px;font-weight:600;line-height:1.35;text-align:center;color:var(--gc-muc)}

/* --- 7.6 Vì sao chọn --- */
.gc-vi-sao{background:var(--gc-ru-900)}
.gc-vi-sao .row>.col{padding-bottom:var(--gc-k3)}
.gc-vi-sao .gc-vs{height:100%;padding:28px 26px;border-radius:var(--gc-bo);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16)}
.gc-vi-sao .gc-vs h3{margin:0 0 9px;font-size:18px;color:#fff}
.gc-vi-sao .gc-vs p{margin:0;font-size:15px;line-height:1.64;color:rgba(255,255,255,.84)}

/* --- 7.7 Số liệu --- */
.gc-so-lieu .row>.col{padding-bottom:var(--gc-k2)}
.gc-so-lieu .gc-sl{text-align:center}
.gc-so-lieu .gc-sl b{display:block;font-size:46px;font-weight:700;line-height:1.05;
  letter-spacing:-.03em;color:#fff}
.gc-so-lieu .gc-sl span{display:block;margin-top:5px;font-size:15px;color:rgba(255,255,255,.9)}

/* --- 7.8 Đối tác --- */
.gc-doi-tac{background:#fff}
.gc-logo{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:14px;margin:32px 0 0;padding:0;list-style:none}
.gc-logo li{margin:0;display:flex;align-items:center;justify-content:center;
  width:150px;height:76px;padding:10px 14px;
  background:#fff;border:1px solid var(--gc-vien);border-radius:12px;
  transition:border-color .2s ease,box-shadow .2s ease}
.gc-logo li:hover{border-color:var(--gc-ru-200);box-shadow:var(--gc-bong)}
.gc-logo img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;
  object-fit:contain;filter:grayscale(1);opacity:.66;
  transition:filter .25s ease,opacity .25s ease}
.gc-logo li:hover img{filter:none;opacity:1}

/* --- 7.9 Cảm nhận --- */
.gc-cam-nhan{background:var(--gc-ru-050)}
.gc-cam-nhan .row>.col{padding-bottom:var(--gc-k3)}
.gc-cam-nhan .gc-cn{height:100%;padding:30px 28px;background:#fff;
  border-radius:var(--gc-bo);box-shadow:0 2px 12px rgba(21,25,31,.06)}
.gc-cam-nhan .gc-cn__nd{margin:0 0 20px;padding:0;border:0;background:none;
  font-size:16px;font-style:normal;line-height:1.72;color:var(--gc-chu);quotes:none}
.gc-cam-nhan .gc-cn__nd:before{content:"“";display:block;margin-bottom:8px;
  font-family:Georgia,serif;font-size:56px;line-height:.6;color:var(--gc-ru-500)}
.gc-cam-nhan .gc-cn__ten{margin:0;font-size:16px;font-weight:700;color:var(--gc-muc)}
.gc-cam-nhan .gc-cn__chuc{margin:2px 0 0;font-size:14px;color:var(--gc-mo)}

/* --- 7.10 Tin tức --- */
.gc-tin-tuc{background:var(--gc-ru-050)}
.gc-tin-tuc .post-item .box-image img{border-radius:14px}
.gc-tin-tuc .post-item .box-text{padding:14px 0 0}
.gc-tin-tuc .post-item h5{font-size:17px;line-height:1.42}

/* --- 7.11 Kêu gọi cuối trang --- */
.gc-keu-goi{background:var(--gc-ru-050)}
.gc-keu-goi .gc-kg__lh{margin:24px 0 0;padding:0;list-style:none}
.gc-keu-goi .gc-kg__lh li{margin:0 0 12px;font-size:16px;line-height:1.6;color:rgba(255,255,255,.9)}
.gc-keu-goi .gc-kg__lh b{color:#fff}
.gc-keu-goi .gc-kg__lh a{color:var(--gc-ru-200);text-decoration:none}
.gc-keu-goi .gc-kg__lh a:hover{text-decoration:underline}
.gc-keu-goi .gc-kg__hop{padding:32px 30px;background:#fff;
  border-radius:var(--gc-bo-lon);box-shadow:var(--gc-bong-cao)}
.gc-keu-goi .gc-kg__hop h3{margin:0 0 6px;font-size:22px;color:var(--gc-muc)}
.gc-keu-goi .gc-kg__hop .gc-kg__phu{margin:0 0 18px;font-size:14.5px;color:var(--gc-mo)}

/* ====================== 8. LƯU TRỮ & BÀI VIẾT ========================== */
/* --- Bài chuyên sâu dưới danh sách bài --- */
.gc-chuyen-sau{padding:0 0 72px;background:#fff}
.gc-chuyen-sau__khung{display:grid;grid-template-columns:minmax(0,1fr) 336px;
  gap:52px;align-items:start}
.gc-chuyen-sau__cot{min-width:0}
.gc-chuyen-sau__tieu{margin:0 0 22px;font-size:27px;line-height:1.25;color:var(--gc-muc)}
.gc-chuyen-sau__ben{position:sticky;top:132px;display:flex;flex-direction:column;gap:20px;
  max-height:calc(100vh - 152px);overflow-y:auto;overscroll-behavior-y:auto}
.gc-chuyen-sau__noi{font-size:16.5px;line-height:1.78;color:var(--gc-chu)}
.gc-chuyen-sau__noi h2{margin:1.9em 0 .55em;font-size:25px;line-height:1.3;color:var(--gc-muc)}
.gc-chuyen-sau__noi h2:first-child{margin-top:0}
.gc-chuyen-sau__noi h3{margin:1.5em 0 .45em;font-size:19.5px;color:var(--gc-muc)}
.gc-chuyen-sau__noi p{margin:0 0 1.05em}
.gc-chuyen-sau__noi ul,.gc-chuyen-sau__noi ol{margin:0 0 1.2em 1.2em}
.gc-chuyen-sau__noi li{margin:0 0 .45em}
.gc-chuyen-sau__noi strong{color:var(--gc-muc)}
.gc-chuyen-sau__noi a{color:var(--gc-ru-700);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:2px}
.gc-chuyen-sau__noi table{width:100%;border-collapse:collapse;font-size:15.5px;margin:0 0 1.4em}
.gc-chuyen-sau__noi th,.gc-chuyen-sau__noi td{padding:11px 13px;border:1px solid var(--gc-vien);
  text-align:left;text-transform:none!important}
.gc-chuyen-sau__noi th{background:var(--gc-ru-050);font-weight:700;color:var(--gc-muc)}

/* Thu gọn: che bằng mặt nạ chuyển dần thay vì cắt cụt, để người đọc thấy rõ
   là còn nội dung phía dưới chứ không phải bài viết hết ở đó. */
/* Kẹp 520px hợp với thân bài 800 từ của bản cũ. Với bài chuyên mục 2.500–
   3.800 từ, 520px là lỗ khoá: người đọc thấy chưa tới một phần mười rồi gặp
   nút. Nới lên còn giữ được ý đồ "không đổ tường chữ" mà vẫn đọc được ba mục
   đầu — đủ để biết bài có đáng bấm tiếp hay không. */
.gc-chuyen-sau__noi.gc-gon{max-height:1180px;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 68%,transparent);
  mask-image:linear-gradient(#000 68%,transparent)}
.gc-nut-gon{display:inline-flex;align-items:center;gap:8px;
  margin:18px 0 0;min-height:46px;padding:0 26px;
  border:1px solid var(--gc-ru-600);border-radius:999px;background:#fff;
  font-size:15px;font-weight:600;color:var(--gc-ru-700);cursor:pointer;
  transition:background-color .2s ease,color .2s ease}
.gc-nut-gon:hover{background:var(--gc-ru-600);color:#fff}
.gc-nut-gon:after{content:"⌄";font-size:17px;line-height:1}
.gc-nut-gon[aria-expanded="true"]:after{content:"⌃"}

/* --- Hộp chịu trách nhiệm nội dung (E-E-A-T) --- */
.gc-ctn{margin:40px 0 0;padding:24px 26px;
  background:var(--gc-ru-050);border:1px solid var(--gc-vien);border-radius:var(--gc-bo)}
.gc-ctn__tieu{margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gc-mo)}
/* Tên người rà soát đặt nổi lên trên, có chữ cái đầu làm dấu nhận diện —
   nội dung có người đứng tên đọc khác hẳn nội dung ẩn danh. */
.gc-ctn__nguoi{display:flex;align-items:center;gap:12px;margin:0 0 14px;flex-wrap:wrap;
  padding:0 0 14px;border-bottom:1px solid var(--gc-vien)}
.gc-ctn__nguoi:before{content:"QK";flex:0 0 auto;display:inline-flex;
  align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;
  background:var(--gc-ru-700);color:#fff;font-size:15px;font-weight:700;letter-spacing:.02em}
.gc-ctn__ten{display:block;font-size:16.5px;font-weight:700;line-height:1.3;color:var(--gc-muc)}
.gc-ctn__chuc{display:block;margin-top:2px;font-size:14px;line-height:1.4;color:var(--gc-mo)}
.gc-ctn__nd{margin:0 0 10px;font-size:15px;line-height:1.68;color:var(--gc-chu)}
.gc-ctn__nd strong{color:var(--gc-muc)}
.gc-ctn__nd a{color:var(--gc-ru-700);text-decoration:underline;text-underline-offset:2px}
.gc-ctn__meta{margin:14px 0 0;padding-top:13px;border-top:1px solid var(--gc-vien);
  font-size:14px;color:var(--gc-mo)}
.gc-ctn__meta a{color:var(--gc-ru-700)}

/* ============================= 9. CHÂN TRANG ============================ */
/* mục 14 gộp vào đây */
.gc-chan .gc-chan__tieu{margin:0 0 14px;font-size:16px;font-weight:700;color:#fff}

/* ==================== 11. LIÊN HỆ NỔI & THANH ĐÁY ====================== */
/* Máy tính: dải biểu tượng gọn bên phải. Nút gọi nở ra khi rê chuột. */
.gc-lh{position:fixed;right:16px;bottom:104px;z-index:64;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px}

/* Nút gọi — hành động chính, là thứ duy nhất tô đặc màu thương hiệu.
   Rê chuột thì nở ra hiện số, nên lúc nghỉ nó vẫn gọn bằng một vòng tròn. */
.gc-lh__nut--goi{display:inline-flex;align-items:center;justify-content:center;gap:0;
  width:52px;height:52px;padding:0;border-radius:999px;overflow:hidden;
  background:var(--gc-ru-600);color:#fff;text-decoration:none;
  box-shadow:0 10px 24px rgba(31,122,6,.34);
  transition:width .25s ease,gap .25s ease,background-color .2s ease,transform .2s ease}
.gc-lh__nut--goi:hover{background:var(--gc-ru-700);width:218px;gap:10px;padding:0 20px;
  transform:translateY(-2px);color:#fff}
.gc-lh__chu{max-width:0;overflow:hidden;white-space:nowrap;
  font-size:15px;font-weight:600;transition:max-width .25s ease}
.gc-lh__nut--goi:hover .gc-lh__chu{max-width:160px}

/* Ba kênh nhắn tin — MỘT thẻ trắng, chia bằng đường kẻ mảnh.
   Trước đây là bốn khối tròn tô đặc rời nhau: bốn bóng đổ, bốn mảng màu, và
   không có gì nói cho người dùng biết nên bấm cái nào. Gom lại còn một bóng
   và một mảng, hành động chính tự nổi lên. */
.gc-lh__nhom{display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--gc-vien);border-radius:14px;
  box-shadow:0 8px 22px rgba(21,25,31,.14)}
.gc-lh__nhom .gc-lh__nut{position:relative;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;background:transparent;color:var(--gc-ru-600);
  text-decoration:none;transition:background-color .18s ease,color .18s ease}
.gc-lh__nhom .gc-lh__nut + .gc-lh__nut{border-top:1px solid var(--gc-vien)}
.gc-lh__nhom .gc-lh__nut:hover{background:var(--gc-ru-050);color:var(--gc-ru-700)}
.gc-lh__nut svg{width:21px;height:21px;flex:0 0 auto}

/* Nhãn kênh: ẩn hẳn khỏi bố cục, chỉ trượt ra khi rê chuột.
   Dùng clip thay vì display:none để trình đọc màn hình vẫn đọc được. */
.gc-lh__nhan{position:absolute;right:calc(100% + 10px);
  padding:5px 11px;border-radius:8px;white-space:nowrap;
  background:var(--gc-ru-900);color:#fff;font-size:13px;font-weight:600;
  opacity:0;transform:translateX(6px);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease}
.gc-lh__nut:hover .gc-lh__nhan{opacity:1;transform:translateX(0)}

/* Nút "về đầu trang" của Flatsome cố định ở đúng chỗ này, đẩy nó lên trên dải */
#top-link{bottom:calc(104px + 52px + 12px + 140px + 14px)!important}

/* Điện thoại: bỏ dải nổi, thay bằng thanh hành động dưới đáy — chỗ ngón tay với tới */
.gc-thanh-day{display:none}

/* ==================== 12. ĐẦU TRANG & ĐIỀU HƯỚNG ====================== */
.header-main .nav>li>a{font-weight:600;letter-spacing:0}

/* Icon menu chính. Là thẻ <svg> thật trong <a>, không phải ::before/::after —
   :after của link đang là gạch chân khi rê chuột. Icon dùng currentColor nên
   tự đổi màu theo trạng thái link, khỏi khai màu riêng cho từng trạng thái. */
/* flex-wrap là BẮT BUỘC: gạch chân dưới đây là ::after dạng block, khi link
   thành flex thì nó biến thành phần tử flex nằm CẠNH chữ thay vì dưới chữ.
   Cho nó chiếm trọn một hàng riêng để giữ nguyên hành vi cũ. */
.header-main .nav>li>a{display:flex;flex-wrap:wrap;align-items:center}
/* 16px chứ không 18px, lề 6px chứ không 7px: cột chứa menu chính bị chặn cứng
   ở 530px, mà icon 18+7 làm tổng bề rộng các mục đúng 530 khiến mục "Liên hệ"
   rớt xuống hàng hai ở MỌI bề rộng màn hình. Đo được: không icon 405px,
   icon 18px 530px, icon 16px + giãn cách hẹp lại còn ~485px. */
.gc-nav-icon{flex:0 0 auto;width:16px;height:16px;margin-right:6px;
  opacity:.72;transition:opacity .2s ease,transform .2s ease}
.header-main .nav>li>a:hover .gc-nav-icon,
.header-main .nav>li.current-menu-item>a .gc-nav-icon,
.header-main .nav>li.current-menu-ancestor>a .gc-nav-icon{opacity:1}
.header-main .nav>li>a:hover .gc-nav-icon{transform:translateY(-1px)}
/* Mũi tên xổ xuống của mục có dropdown nằm sau chữ, giữ nguyên khoảng cách. */
.header-main .nav>li>a .gc-nav-icon+span{display:inline}

/* ---- Menu điện thoại (off-canvas) ----
   Đo được ở 375px trước khi sửa: link cấp 1 cao 50px nhưng cấp 2 chỉ 30-36px
   (dưới ngưỡng chạm 44px), chữ 12.8px (dưới ngưỡng đọc 13px), và cấp 2 KHÔNG
   thụt lề so với cấp 1 nên nhìn vào không phân biệt được hub với chuyên mục
   con — mất hẳn tín hiệu phân cấp của silo.
   Dùng #main-menu (độ ưu tiên ID) để thắng luật .nav-sidebar của theme cha. */
/* Bỏ chữ in hoa. Flatsome đặt .nav-uppercase cho ngăn kéo; tiếng Việt viết hoa
   toàn bộ thì dấu chồng lên nhau và mắt phải đọc từng chữ cái thay vì nhận
   dạng cả từ — đúng chỗ tệ nhất để tiết kiệm, vì đây là danh sách dài. */
#main-menu .nav-uppercase>li>a{text-transform:none;letter-spacing:0}

/* Flatsome còn một lớp luật RIÊNG cho mục có con ở cấp sâu:
   `.nav-vertical li li.menu-item-has-children > a` ép in hoa, 0.8em, đậm hơn
   và màu đen; kèm `margin: 1em 0` trên chính thẻ <li>. Hậu quả: sáu ngành ở
   cấp 2 hiện thành "GIA CÔNG THỰC PHẨM" chữ hoa đen, to nhỏ lộn xộn so với
   cấp 3, và mỗi mục thừa 32px khoảng trắng. Phải hoá giải cả bốn thuộc tính,
   không chỉ text-transform. */
#main-menu .nav-vertical li li.menu-item-has-children>a,
#main-menu .nav li li.menu-item-has-children>a{
  text-transform:none;letter-spacing:0;font-size:14.8px;font-weight:600;
  color:var(--gc-chu)}
#main-menu .nav li li li.menu-item-has-children>a{font-size:14.3px;font-weight:500;
  color:var(--gc-mo)}
#main-menu .nav-vertical li li.menu-item-has-children,
#main-menu .nav-vertical li li.menu-item-has-children:not(:first-child){
  margin-top:0;margin-bottom:0}
/* Cùng lý do: `.nav-vertical > li > ul` gắn `margin-bottom:2em; padding-left:1em`
   — thụt lề và khoảng cách của nhánh do §menu quyết, không phải theme cha. */
#main-menu .nav-vertical>li>ul{margin:0;padding-left:0}

/* Ngăn kéo mặc định của Flatsome rộng 260px. Menu này sâu ba cấp: cấp 3 thụt
   44px và nút gập chiếm 48px bên phải, chỉ còn ~168px cho chữ — "Gia công thực
   phẩm ăn liền" xuống ba dòng. Nới theo bề ngang máy, chặn trên để trên máy
   tính bảng nó không choán hết màn hình. */
/* Phải nới CẢ .mfp-content bọc ngoài. Nới mỗi .mobile-sidebar thì nó rộng ra
   335px bên trong một khung 260px và bị cắt cụt — không nhìn ra vì phần thừa
   chỉ là khoảng trắng bên phải. Giới hạn trong .off-canvas để không đụng tới
   hộp thoại Magnific khác (lightbox ảnh cũng dùng .mfp-content). */
.off-canvas .mfp-content,
.off-canvas .mfp-content .mobile-sidebar{width:min(86vw,340px);max-width:340px}

#main-menu .nav li{position:relative}
#main-menu .nav li>a{display:flex;align-items:center;min-height:50px;
  padding:7px 52px 7px 18px;font-size:15.5px;font-weight:700;line-height:1.35;
  color:var(--gc-muc)}
/* Vạch ngăn chỉ giữa các mục CẤP 1. Kẻ cả ở cấp sâu thì 72 dòng thành 72 ô,
   không còn nhìn ra đâu là một nhánh. */
#main-menu .nav-sidebar>li+li{border-top:1px solid var(--gc-vien)}

/* Cấp 2 — sáu ngành. Nhẹ hơn cấp 1 một bậc, vẫn đủ đậm để đọc như đầu nhánh. */
#main-menu .nav li li>a{min-height:46px;padding-left:32px;
  font-size:14.8px;font-weight:600;color:var(--gc-chu)}
/* Cấp 3 — chuyên mục con. Đây mới là phần "danh sách", nên nhẹ nhất. */
#main-menu .nav li li li>a{min-height:44px;padding-left:44px;
  font-size:14.3px;font-weight:500;color:var(--gc-mo)}

/* MỘT đường ray liền cho cả nhánh, đặt trên <ul> — không phải một vạch rời cho
   mỗi mục. Bản cũ vẽ 60 gạch ngắn rời nhau, nhìn ra thành lỗi căn lề chứ không
   ra phân cấp. */
#main-menu .nav li>ul{margin:0;padding:0;list-style:none}
/* Theme cha có luật display cho danh sách con; [hidden] của trình duyệt thua
   bất kỳ luật display nào nên phải ghi đè thẳng, nếu không nhánh "gập" vẫn hiện. */
#main-menu .nav li>ul[hidden]{display:none}

/* Kéo danh sách con VỀ LẠI dòng chảy.
   Flatsome dùng chung `.nav .children` cho menu thả xuống ở desktop:
   `position:fixed; left:-99999px; opacity:0` — tức là đẩy hẳn ra ngoài màn
   hình. Trước đây JS của theme cha tự gỡ khi mở nhánh; từ lúc mình thay nút
   gập của nó bằng nút riêng thì không còn ai gỡ, nên bấm mở nhánh là danh
   sách con bung ra ở toạ độ -99999px: DOM báo đã mở, aria-expanded="true",
   mà trên màn hình không thấy gì. Trong ngăn kéo điện thoại, danh sách con
   phải nằm thẳng trong dòng chảy. */
#main-menu .nav .children,
#main-menu .nav li>ul{position:static;left:auto;right:auto;top:auto;bottom:auto;
  opacity:1;transform:none;width:auto;min-width:0;
  background:none;border:0;box-shadow:none;transition:none}
#main-menu .nav li li>ul{margin-left:32px;padding-left:12px;
  border-left:1px solid var(--gc-vien)}

/* Nút gập: đặt tuyệt đối bên phải nên không đẩy chữ, và vùng chạm 48×48 tách
   hẳn khỏi liên kết — bấm vào chữ là ĐI tới trang đó, bấm mũi tên mới là mở
   nhánh. Gộp hai hành vi vào một chỗ là bẫy kinh điển của menu nhiều cấp. */
#main-menu .gc-mn__nut{position:absolute;top:0;right:0;width:48px;height:50px;
  display:flex;align-items:center;justify-content:center;
  padding:0;margin:0;border:0;background:none;cursor:pointer;
  color:var(--gc-vien-nhap);border-radius:10px}
#main-menu li li>.gc-mn__nut{height:46px}
#main-menu li li li>.gc-mn__nut{height:44px}
#main-menu .gc-mn__nut:hover{color:var(--gc-ru-700);background:var(--gc-ru-050)}
#main-menu .gc-mn__nut:focus-visible{outline:2px solid var(--gc-ru-600);outline-offset:-3px}
#main-menu .gc-mn__mt{transition:transform .18s ease}
#main-menu .gc-mn--mo>.gc-mn__nut .gc-mn__mt{transform:rotate(180deg)}
#main-menu .gc-mn--mo>.gc-mn__nut{color:var(--gc-ru-700)}
@media (prefers-reduced-motion:reduce){#main-menu .gc-mn__mt{transition:none}}

/* Trang đang xem. Đây là chỗ DUY NHẤT trong menu dùng màu xanh lá: nó trả lời
   "tôi đang ở đâu" giữa 72 dòng — đúng việc của một màu nhấn. Dùng nó cho
   trạng thái di chuột thì mỗi lần lướt tay lại nháy xanh vô nghĩa. */
#main-menu .nav .current-menu-item>a{color:var(--gc-ru-700);font-weight:700}
#main-menu .nav .current-menu-item>a:before{content:"";position:absolute;
  left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;
  background:var(--gc-la-600)}
#main-menu .nav .current-menu-ancestor>a,
#main-menu .nav .current-menu-parent>a{color:var(--gc-ru-700)}

#main-menu .nav li>a:hover{background:var(--gc-ru-050);color:var(--gc-ru-700)}

/* Menu điện thoại: icon to hơn một chút vì hàng cao hơn và ngón tay to hơn con trỏ. */
.off-canvas .nav-sidebar>li>a .gc-nav-icon,
.mobile-sidebar .nav>li>a .gc-nav-icon{width:20px;height:20px;margin-right:11px;opacity:.8}
.off-canvas .nav-sidebar>li>a{display:flex;align-items:center}
.nav-dropdown{border:1px solid var(--gc-vien);border-radius:14px;
  box-shadow:var(--gc-bong);padding:10px 6px}
.nav-dropdown.nav-dropdown-default>li>a{border-radius:9px;padding:9px 14px;
  font-size:14.5px;color:var(--gc-chu)}
.nav-dropdown.nav-dropdown-default>li>a:hover{background:var(--gc-ru-050);color:var(--gc-ru-700)}
.nav-dropdown-default>li.nav-dropdown-col{border:0}
/* Nút kêu gọi trên thanh điều hướng */
.header .nav li.gc-nav-cta>a{margin-left:8px;padding:0 20px;height:42px;
  border-radius:999px;background:var(--gc-la-500);color:var(--gc-ru-900)!important;
  font-weight:600;transition:background-color .2s ease}
.header .nav li.gc-nav-cta>a:hover{background:var(--gc-la-400);color:var(--gc-ru-900)!important}
.header-main .nav>li.gc-nav-cta>a:before{display:none}

/* Mega menu "Ngành gia công".
   Tiêu đề cột là <p>, KHÔNG phải <h4>: thẻ tiêu đề trong điều hướng nằm trước
   <h1> làm hỏng dàn ý cả trang.
   Mọi luật đều neo vào .nav-dropdown vì luật màu chữ của theme cha
   (.nav-dropdown a, độ ưu tiên 0,1,1) hoà với lớp đơn và thắng theo thứ tự. */
/* Dropdown trải hết bề ngang, nội dung bên trong tự căn giữa theo container.
   Flatsome dựng dropdown bằng display:table, min-width:260px, left:-99999px và
   trông chờ JS của nó tính lại bề ngang cho kiểu full-width. JS đó không phải
   lúc nào cũng chạy (và không chạy trong khung xem trước), nên ghim thẳng bằng
   CSS: cho <li> thành position:static để dropdown bám vào .header-main. */
/* Chuỗi neo: ul.header-nav là position:relative nên dropdown bám vào cột menu
   chứ không bám vào .header-inner. Hạ cả ul lẫn li về static để nó bám đúng
   khung container của đầu trang. */
.header-main ul.header-nav:has(li.menu-item-design-full-width){position:static}
.header-main li.menu-item-design-full-width{position:static}
.header-main li.menu-item-design-full-width>.nav-dropdown{
  /* top:100% = mép dưới của .header-inner. Không khai thì bảng đè lên chính
     hàng header, che mất số điện thoại với nút báo giá.
     Bảng rộng đúng bằng container của đầu trang, bo tròn hai góc dưới. */
  border-radius:0 0 18px 18px;overflow:hidden;
  display:block;top:100%;left:0;right:0;width:100%;min-width:0;max-width:none;
  /* KHÔNG khai lại border-radius ở đây: dòng trên đã đặt 0 0 18px 18px, khai
     border-radius:0 lần nữa trong cùng khối là tự xoá bo góc của chính mình. */
  padding:0;border-top:1px solid var(--gc-vien);
  background-color:#fff;color:var(--gc-chu);
  box-shadow:0 18px 40px rgba(21,25,31,.16);
  /* KHÔNG dùng max-height để đóng/mở.
     Flatsome đóng dropdown bằng ba thứ cùng lúc: opacity:0, visibility:hidden
     và max-height:0 — nhưng overflow vẫn là visible. Với display:block thì
     max-height:0 ép riêng HỘP NỀN về 0px trong khi chữ và biểu tượng vẫn tràn
     ra ngoài: mở menu ra thấy đúng nội dung nhưng không có nền, chữ của khối
     bên dưới xuyên thẳng qua.
     Cố sửa bằng cách nới max-height ở trạng thái mở thì lại phải đoán đúng tên
     lớp Flatsome gắn khi mở — đoán sai là không ăn gì. Ở đây bỏ hẳn max-height
     ra khỏi cơ chế: nới sẵn, để chính opacity/visibility của theme cha lo phần
     ẩn hiện.

     KHÔNG chặn bằng pointer-events:none lúc đóng. visibility:hidden vốn đã
     không nhận chuột rồi, mà thêm pointer-events lại sinh vòng luẩn quẩn: rê
     chuột từ mục menu xuống bảng con thì bảng không nhận được chuột, li mất
     trạng thái :hover, bảng đóng ngay — bấm mục cấp 2 không bao giờ trúng. */
  max-height:none;overflow:visible}
.header-main .header-inner{position:relative}
/* Nền trắng đặt lên CHÍNH khối của mình, không đặt lên .nav-dropdown.
   .nav-dropdown là của theme cha: nó có max-height, display:table, và JS riêng
   — mọi thứ mình khai lên đó đều có thể bị vô hiệu theo cách khó lường. Khối
   .gc-mega thì mình toàn quyền, nền của nó luôn vẽ ra.
   Tràn hết bề ngang bằng padding co giãn, nội dung vẫn căn giữa 1220px. */
/* Căn đúng trục nội dung của đầu trang.
   Đo ở 1440px: .header-inner là 85..1355, logo bắt đầu ở 100 — trục nội dung
   là 100..1340 (container + 15px đệm mỗi bên).

   Phải viết tới năm lớp mới thắng được. Đầu trang có lớp .container nên khối
   mega dính hai luật của theme cha:
     .container .row:not(.row-collapse)       margin: 0 -15px
     .container .row-small:not(.row-collapse) margin: 0 -10px
   Cả hai đều (0,3,0), cao hơn .nav-dropdown .gc-mega (0,2,0) — nên nền thì ăn
   mà lề với đệm thì không. Ngoài ra Flatsome còn in nội tuyến
   .row.row-small{max-width:1262.5px} nằm sau file này nên thắng cả khi hoà.

   Chuỗi đệm được ghim để mép trái biểu tượng đầu tiên trùng đúng mép trái logo:
   hộp trong của bảng (87, đã trừ viền 2px) + 3px (hàng) + 0 (cột) + 10px (thẻ)
   = 100. Mép phải cột cuối cũng ra đúng 1340. */
.header-main .nav-dropdown .gc-mega.row.row-small{
  margin:0;max-width:none;width:100%;background:#fff;
  padding:26px 3px 10px}
/* Đệm ngang dồn hết vào thẻ để nền lúc rê chuột ôm sát chữ mà vẫn đúng trục */
.nav-dropdown .gc-mega>.col{padding-left:0;padding-right:0;padding-bottom:6px}
.nav-dropdown .gc-mega .col-inner{height:100%}

.nav-dropdown .gc-mega__o{height:100%;padding:8px 10px 6px;border-radius:14px;
  transition:background-color .2s ease}
.nav-dropdown .gc-mega__o:hover{background:var(--gc-ru-050)}

.nav-dropdown a.gc-mega__dau{display:flex;align-items:center;gap:12px;min-height:44px;
  padding:0 0 10px;margin:0;text-decoration:none;color:var(--gc-muc)}
.nav-dropdown .gc-mega__anh{flex:0 0 auto;width:44px;height:44px;border-radius:11px;
  overflow:hidden;background:var(--gc-ru-100)}
.nav-dropdown .gc-mega__anh img{width:100%;height:100%;object-fit:cover;display:block}
.nav-dropdown .gc-mega__ten{font-size:15px;font-weight:700;line-height:1.3;
  color:var(--gc-muc);text-wrap:balance}
.nav-dropdown a.gc-mega__dau:hover .gc-mega__ten{color:var(--gc-ru-700)}

/* BẪY ĐỘ ƯU TIÊN: Flatsome có luật .nav ul:not(.nav-dropdown){padding:0}.
   :not() CỘNG độ ưu tiên của tham số bên trong, nên luật đó là (0,2,1) và
   thắng .nav-dropdown .gc-mega__con (0,2,0) — thụt lề 56px im lặng không ăn,
   làm link con lệch 56px so với tiêu đề nhóm. Thêm .header-main để lên (0,3,0).
   Triệu chứng dễ nhầm: xem cssRules thấy luật của mình khớp và nạp sau cùng,
   nhưng giá trị tính ra vẫn bằng 0. */
.header-main .nav-dropdown .gc-mega__con{margin:0;padding:6px 0 0 56px;list-style:none;
  border-top:1px solid var(--gc-vien)}
.nav-dropdown .gc-mega__con li{margin:0;padding:0;border:0}
/* Cao 40px thay vì 32px cho dễ trỏ trúng, và có nền khi rê chuột để thấy rõ
   đang ở dòng nào. Lề âm 10px giữ chữ thẳng hàng với phần còn lại trong khi
   mảng nền vẫn có chỗ thở hai bên. */
.nav-dropdown .gc-mega__con li a{display:block;padding:6px 10px;margin:0 -10px;
  border-radius:8px;font-size:14px;font-weight:500;line-height:1.45;
  color:var(--gc-mo);text-transform:none;letter-spacing:0;
  transition:background-color .18s ease,color .18s ease}
.nav-dropdown .gc-mega__con li a:hover{color:var(--gc-ru-700);background:var(--gc-ru-050)}

.nav-dropdown .gc-mega__chan{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:12px;margin:4px 10px 0;padding:16px 0;
  border-top:1px solid var(--gc-vien);background:transparent}
.nav-dropdown .gc-mega__chan span{font-size:14.5px;color:var(--gc-mo)}
.nav-dropdown a[href]:where(.gc-mega__chan a){color:var(--gc-ru-700)}
.nav-dropdown .gc-mega__chan a{display:inline-flex;align-items:center;gap:6px;
  font-size:14.5px;font-weight:600;color:var(--gc-ru-700);text-decoration:none}
.nav-dropdown .gc-mega__chan a:after{content:"→";transition:transform .2s ease}
.nav-dropdown .gc-mega__chan a:hover:after{transform:translateX(4px)}

/* ==================== 13. LƯU TRỮ & BÀI VIẾT ========================== */
.gc-tieu-de-trang{background:var(--gc-ru-900);padding:56px 0 52px}
.gc-tieu-de-trang h1{margin:0 0 12px;font-size:40px;line-height:1.18;color:#fff}
.gc-tieu-de-trang .gc-tt__mo{margin:0;max-width:760px;
  font-size:16.5px;line-height:1.68;color:rgba(255,255,255,.9)}
.gc-tieu-de-trang .breadcrumbs,.gc-tieu-de-trang .rank-math-breadcrumb{
  margin:0 0 14px;font-size:13.5px;color:rgba(255,255,255,.62)}
.gc-tieu-de-trang .breadcrumbs a,.gc-tieu-de-trang .rank-math-breadcrumb a{
  color:rgba(255,255,255,.82);text-decoration:none}
.gc-tieu-de-trang .breadcrumbs a:hover,.gc-tieu-de-trang .rank-math-breadcrumb a:hover{color:#fff}

/* Danh sách bài trong trang lưu trữ */
.gc-ds .post-item .col-inner{position:relative;height:100%;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--gc-vien);border-radius:var(--gc-bo);overflow:hidden;
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
/* Cả thẻ là vùng bấm, chữ neo vẫn là tiêu đề bài. Trước đó chỉ dòng tiêu đề
   cao 22px là bấm được — quá nhỏ cho ngón tay. */
.gc-ds .post-item .post-title a::after{content:"";position:absolute;inset:0;z-index:1}
.gc-ds .post-item .col-inner:hover{border-color:var(--gc-ru-500);
  box-shadow:var(--gc-bong);transform:translateY(-3px)}
.gc-ds .post-item .box-image{width:100%!important;flex:0 0 auto;align-self:stretch;
  display:block;overflow:hidden}
/* Ép cùng tỉ lệ: ảnh gốc mỗi bài một khổ nên các hàng thẻ cao lệch nhau ~23px */
.gc-ds .post-item .box-image img{display:block;width:100%;aspect-ratio:16/10;
  object-fit:cover;border-radius:0}
.gc-ds .post-item .box-text{flex:1 1 auto;padding:16px 18px 20px}
.gc-ds .post-item .post-title{font-size:17px;line-height:1.42;color:var(--gc-muc)}
.gc-ds .post-item .post-title:hover{color:var(--gc-ru-700)}
.gc-ds .post-item .from_the_blog_excerpt{font-size:14.5px;line-height:1.6;color:var(--gc-mo)}

/* Bài viết đơn */
.single-post .entry-content{font-size:17px;line-height:1.78;color:var(--gc-chu)}
.single-post .entry-content h2{margin:1.9em 0 .6em;font-size:27px}
.single-post .entry-content h3{margin:1.5em 0 .5em;font-size:21px}
.single-post .entry-content img{border-radius:var(--gc-bo)}
.single-post .entry-content blockquote{border-left:3px solid var(--gc-ru-500);
  background:var(--gc-ru-050);border-radius:0 var(--gc-bo) var(--gc-bo) 0;
  padding:20px 24px;font-style:normal;color:var(--gc-chu)}
.entry-category,.post-meta{text-transform:none;letter-spacing:0}

/* --- Trang silo: nhánh con, mô tả, danh sách bài, kêu gọi hẹp --- */
.gc-tieu-de-trang .gc-tt__so{margin:14px 0 0;font-size:14px;color:rgba(255,255,255,.78)}

.gc-silo-con{padding:34px 0 6px;background:var(--gc-ru-050);border-bottom:1px solid var(--gc-vien)}
.gc-silo-con__tieu{margin:0 0 16px;font-size:15px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gc-mo)}
.gc-silo-con__ds{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 28px;padding:0;list-style:none}
.gc-silo-con__ds li{margin:0}
.gc-silo-con__ds a{display:inline-flex;align-items:baseline;gap:9px;padding:11px 18px;
  background:#fff;border:1px solid var(--gc-vien);border-radius:999px;text-decoration:none;
  transition:border-color .2s ease,box-shadow .2s ease}
.gc-silo-con__ds a:hover{border-color:var(--gc-ru-500);box-shadow:var(--gc-bong)}
.gc-silo-con__ten{font-size:15.5px;font-weight:600;color:var(--gc-muc)}
.gc-silo-con__so{font-size:13px;color:var(--gc-mo)}

/* Mở bài căn giữa: khối chữ rộng 820px mà bám mép trái trong khung 1240px thì
   nửa phải trống hoác, trong khi lưới bài ngay dưới lại trải hết bề ngang —
   nhìn ra hai trục khác nhau chồng lên nhau. */
/* Đoạn dẫn từng căn giữa ở khổ 860px: mắt phải dò lại mép trái từng dòng, và
   dòng cuối luôn treo lơ lửng giữa trang. Chuyển sang căn trái theo đúng mép
   container như mọi khối khác quanh nó, thu khổ chữ về ~68 ký tự cho dễ đọc,
   và dùng thanh nhấn trái — thứ đã là ngôn ngữ chung của site (.gc-gtcl,
   blockquote, .gc-luu-y). text-wrap:pretty chặn từ mồ côi ở dòng cuối. */
.gc-gioi-thieu-muc{padding:40px 0 8px}
.gc-gioi-thieu-muc .taxonomy-description{max-width:680px;
  /* Giữ mép NGOÀI của khối đúng trục 100px: gạch xanh thẳng hàng với mọi khối
     khác, chữ thụt vào trong — đúng cách một khối dẫn nhập có gạch trái.
     Đã thử kéo âm 23px cho CHỮ về trục, nhưng khi đó gạch chìa ra ngoài lề và
     chính nó thành thứ lệch. */
  margin:0;
  padding:2px 0 2px 20px;border-left:3px solid var(--gc-la-500);
  font-size:17.5px;line-height:1.72;color:var(--gc-chu);
  text-align:left;text-wrap:pretty}
.gc-gioi-thieu-muc .taxonomy-description p{margin:0 0 1em}
.gc-gioi-thieu-muc .taxonomy-description p:last-child{margin-bottom:0}
.gc-gioi-thieu-muc .taxonomy-description h2{margin:1.6em 0 .5em;font-size:24px}
.gc-gioi-thieu-muc .taxonomy-description h3{margin:1.4em 0 .4em;font-size:19px}

.gc-ds-bai{padding:44px 0 72px}
.gc-ds-bai__tieu{margin:0 0 26px;font-size:26px;color:var(--gc-muc)}
.gc-ds-bai .page-numbers{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  margin:38px 0 0;padding:0;list-style:none}
.gc-ds-bai .page-numbers li{margin:0}
.gc-ds-bai .page-numbers a,.gc-ds-bai .page-numbers span{display:inline-flex;align-items:center;
  justify-content:center;min-width:42px;height:42px;padding:0 13px;border-radius:11px;
  border:1px solid var(--gc-vien);background:#fff;font-size:15px;font-weight:600;
  color:var(--gc-chu);text-decoration:none}
.gc-ds-bai .page-numbers a:hover{border-color:var(--gc-ru-500);color:var(--gc-ru-700)}
.gc-ds-bai .page-numbers .current{background:var(--gc-ru-700);border-color:var(--gc-ru-700);color:#fff}
.gc-trong{font-size:16.5px;color:var(--gc-mo)}

.gc-keu-goi--hep{padding:56px 0}
.gc-kg-hep{display:flex;align-items:center;justify-content:space-between;gap:32px}
.gc-kg-hep .gc-h2{margin-bottom:8px;font-size:30px}
.gc-kg-hep .gc-dan{font-size:16px}
.gc-kg-hep__nut{display:flex;flex-wrap:wrap;gap:12px;flex:0 0 auto}


/* Nút "Đọc tiếp" mặc định của Flatsome ra 10,88px chữ hoa, tương phản 1.82:1 —
   vừa không đọc được vừa dưới ngưỡng vùng chạm 44px. */
.gc-ds .button.is-outline,.gc-tin-tuc .button.is-outline{
  min-height:42px;padding:0 20px;border-radius:999px;
  border-color:var(--gc-ru-600);color:var(--gc-ru-700);background:#fff;
  font-size:14.5px;font-weight:600;letter-spacing:0;text-transform:none}
.gc-ds .button.is-outline:hover,.gc-tin-tuc .button.is-outline:hover{
  background:var(--gc-ru-600);border-color:var(--gc-ru-600);color:#fff}

/* ======================= 15. GIẤY CHỨNG NHẬN =========================== */
.gc-chung-nhan{background:var(--gc-ru-050)}
.gc-cn-luoi{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.gc-cn-the{display:flex;flex-direction:column;height:100%;background:#fff;
  border:1px solid var(--gc-vien);border-radius:var(--gc-bo);overflow:hidden;
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.gc-cn-the:hover{border-color:var(--gc-ru-500);box-shadow:var(--gc-bong);transform:translateY(-3px)}
.gc-cn-the__anh{background:var(--gc-ru-100);border-bottom:1px solid var(--gc-vien)}
/* Bản quét mỗi tờ lệch nhau vài pixel; ép cùng tỉ lệ A4 để bốn thẻ thẳng hàng */
.gc-cn-the__anh img{display:block;width:100%;aspect-ratio:1/1.414;object-fit:cover;object-position:top}
/* Ghim chiều cao hai hàng chữ có thể vỡ dòng, nếu không mỗi thẻ lệch một kiểu */
.gc-cn-the__than{flex:1 1 auto;display:grid;grid-template-rows:26px 46px auto;
  padding:18px 20px 20px}
.gc-cn-the__ten{margin:0;font-size:17px;font-weight:700;line-height:1.3;color:var(--gc-muc)}
.gc-cn-the__he{margin:0;align-self:start;font-size:13.5px;line-height:1.45;color:var(--gc-mo)}
.gc-cn-the__ct{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:14px 0 0;
  padding-top:13px;border-top:1px solid var(--gc-vien);align-self:end}
/* Hai dòng riêng cho giấy có phạm vi hoặc lưu ý khác bốn chứng chỉ hệ thống. */
.gc-cn-the__pv{margin:10px 0 0;font-size:13.5px;line-height:1.6;color:var(--gc-chu)}
.gc-cn-the__pv strong{color:var(--gc-muc)}
.gc-cn-the__luu-y{margin:10px 0 0;padding:9px 12px;border-radius:10px;
  background:rgba(131,216,62,.18);border-left:3px solid var(--gc-la-500);
  font-size:13px;line-height:1.6;color:var(--gc-chu)}
/* Flatsome viết hoa dt/dd, đọc như đang hét */
.gc-cn-the__ct dt,.gc-cn-the__ct dd{margin:0;font-size:13.5px;line-height:1.5;
  text-transform:none!important;letter-spacing:0}
.gc-cn-the__ct dt{color:var(--gc-mo)}
.gc-cn-the__ct dd{font-weight:600;color:var(--gc-chu)}

.gc-cn-chu-thich{margin:26px 0 0;padding:20px 22px;background:#fff;
  border:1px dashed var(--gc-vien);border-radius:var(--gc-bo)}
.gc-cn-chu-thich p{margin:0 0 8px;font-size:14.5px;line-height:1.65;color:var(--gc-mo)}
.gc-cn-chu-thich p:last-child{margin-bottom:0}
.gc-cn-chu-thich strong{color:var(--gc-chu)}

.gc-cn-khoi--day-du .gc-cn-luoi{grid-template-columns:repeat(2,1fr);gap:30px}
.gc-cn-khoi--day-du .gc-cn-the__ten{font-size:20px}

/* ======================= 16. TRANG GIỚI THIỆU ========================== */
.gc-gt-hero{background:#1E2227}
.gc-gt-hero .gc-gt-hero__h1{margin:0 0 18px;max-width:900px;
  font-size:44px;line-height:1.16;font-weight:700;color:#fff}
.gc-gt-hero .gc-gt-hero__h1 em{font-style:normal;color:var(--gc-ru-200)}
.gc-gt-hero .gc-dan{max-width:820px}

.gc-gt-chung{background:#fff}
.gc-gt-chung .gc-dan{margin-bottom:16px}
.gc-gt-so{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0;padding:0;list-style:none}
.gc-gt-so li{margin:0;padding:22px 20px;background:var(--gc-ru-050);
  border:1px solid var(--gc-vien);border-radius:var(--gc-bo)}
.gc-gt-so b{display:block;font-size:34px;font-weight:700;line-height:1.05;
  letter-spacing:-.02em;color:var(--gc-ru-700)}
.gc-gt-so span{display:block;margin-top:4px;font-size:14px;line-height:1.45;color:var(--gc-mo)}

.gc-gt-bo-may{background:var(--gc-ru-050)}
.gc-gt-bo-may .row>.col{padding-bottom:var(--gc-k3)}
.gc-bp{height:100%;padding:28px 26px;background:#fff;border-radius:var(--gc-bo);
  box-shadow:0 2px 10px rgba(21,25,31,.05)}
.gc-bp__so{display:block;margin-bottom:12px;font-size:14px;font-weight:700;
  letter-spacing:.1em;color:var(--gc-ru-600)}
.gc-bp h3{margin:0 0 8px;font-size:19px}
.gc-bp p{margin:0;font-size:15px;line-height:1.62;color:var(--gc-mo)}

.gc-gt-tam-nhin{background:var(--gc-ru-900)}
.gc-gt-tam-nhin .row>.col{padding-bottom:var(--gc-k3)}
.gc-gt-tn{height:100%;padding:32px 30px;border-radius:var(--gc-bo-lon);
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12)}
.gc-gt-tn .gc-h2{font-size:26px}

.gc-gt-gia-tri{background:#fff}
.gc-gt-gia-tri .row>.col{padding-bottom:var(--gc-k3)}
.gc-gtcl{height:100%;padding:26px 24px;border-left:3px solid var(--gc-ru-500);
  background:var(--gc-ru-050);border-radius:0 var(--gc-bo) var(--gc-bo) 0}
.gc-gtcl h3{margin:0 0 8px;font-size:18px}
.gc-gtcl p{margin:0;font-size:15px;line-height:1.62;color:var(--gc-mo)}

/* Chân trang. Flatsome sơn nền RIÊNG cho từng vùng widget nên phải đặt cả
   footer_1_color/footer_2_color = dark, chỉ sơn lớp ngoài là chữ trắng nền trắng. */
.gc-chan{background:var(--gc-ru-900)}
.gc-chan .gc-chan__logo{margin-bottom:16px}
.gc-chan .gc-chan__gt{margin:0 0 16px;font-size:14.5px;line-height:1.68;color:rgba(255,255,255,.82)}
.gc-chan .gc-chan__gt strong{color:#fff}
.gc-chan .gc-chan__cn{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}
.gc-chan .gc-chan__cn li{margin:0;padding:5px 11px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  font-size:12px;font-weight:600;color:rgba(255,255,255,.86)}
/* mục 14 gộp vào đây */
.gc-chan .gc-chan__tieu{margin:0 0 14px;font-size:14px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:#fff}
.gc-chan .gc-chan__ds{margin:0;padding:0;list-style:none}
.gc-chan .gc-chan__ds li{margin:0}
.gc-chan .gc-chan__ds a{display:block;padding:8px 0;font-size:14.5px;line-height:1.5;
  color:rgba(255,255,255,.82);text-decoration:none}
.gc-chan .gc-chan__ds a:hover{color:var(--gc-ru-200)}
.gc-chan .gc-chan__lh{margin:0 0 18px;padding:0;list-style:none}
.gc-chan .gc-chan__lh li{margin:0 0 11px;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.82)}
.gc-chan .gc-chan__lh span{display:block;margin-bottom:1px;font-size:12.5px;
  letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.68)}
.gc-chan .gc-chan__lh a{color:var(--gc-ru-200);text-decoration:none}
.gc-chan .gc-chan__lh a:hover{text-decoration:underline}
/* Flatsome sơn nền RIÊNG cho từng vùng chân trang. Dải bản quyền mang thêm lớp
   .light nên luật một lớp của theme con thua: nền trắng, chữ trắng, đo ra đúng
   1.00:1 — nhìn ảnh chụp chỉ thấy một dải trống, không ai nghĩ là lỗi CSS. */
.footer-wrapper,.footer-widgets,.footer-widgets.footer-1,.footer-widgets.footer-2,
.absolute-footer,.absolute-footer.light,.absolute-footer.dark{
  background-color:var(--gc-ru-900)}
.absolute-footer,.absolute-footer.light{padding:20px 0;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.78)}
.absolute-footer a,.absolute-footer.light a{color:rgba(255,255,255,.9)}
.absolute-footer a:hover{color:var(--gc-ru-150)}

/* ================= 17. LIÊN KẾT TRONG NỘI DUNG & VÙNG CHẠM ============== */
/* Liên kết nằm giữa câu chữ phải có gạch chân: chỉ đổi màu là chưa đủ với
   người không phân biệt được màu (WCAG 1.4.1). */
.gc-gioi-thieu-muc .taxonomy-description a,
.single-post .entry-content a:not(.button):not(.gc-nut):not([class*="gc-goi-nhanh"]),
.page .entry-content a:not(.button):not(.gc-nut):not([class*="gc-goi-nhanh"]){
  color:var(--gc-ru-700);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:2px}
.gc-gioi-thieu-muc .taxonomy-description a:hover,
.single-post .entry-content a:not(.button):not([class*="gc-goi-nhanh"]):hover{
  color:var(--gc-ru-700);text-decoration-thickness:2px}

/* Vùng chạm tối thiểu 44px cho mọi nút bấm rời (WCAG 2.5.8) */
.gc-ds-bai .page-numbers a,.gc-ds-bai .page-numbers span{min-width:44px;height:44px}
.header li.nav-icon a.icon{min-width:44px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center}

/* ======================= 18. TRANG BÀI VIẾT ĐƠN ======================== */
.gc-bai-dau__muc{margin:0 0 12px}
.gc-bai-dau__muc a{display:inline-block;padding:6px 14px;border-radius:999px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);
  font-size:13px;font-weight:600;color:#fff;text-decoration:none}
.gc-bai-dau__muc a:hover{background:#fff;color:var(--gc-ru-800)}
.gc-bai-dau h1{max-width:900px}
/* Hai lớp: luật màu chữ của theme cha ngang (0,1,0) và nạp sau, nên lớp đơn
   thua — chữ ra rgb(40,40,40) trên nền xanh đậm, đo đúng 1.0:1. Cùng loại lỗi
   với dòng meta ở trang pháp lý. */
.gc-tieu-de-trang .gc-bai-dau__meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin:16px 0 0;
  font-size:14px;color:rgba(255,255,255,.82)}
.gc-tieu-de-trang .gc-bai-dau__meta span{color:inherit}

.gc-bai{padding:52px 0 64px}
.gc-bai__khung{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:52px;align-items:start}
.gc-bai__noi-dung{min-width:0;font-size:17px;line-height:1.78;color:var(--gc-chu)}
.gc-bai__noi-dung h2{margin:1.9em 0 .55em;font-size:27px;line-height:1.28}
.gc-bai__noi-dung h3{margin:1.5em 0 .45em;font-size:21px;line-height:1.33}
.gc-bai__noi-dung p{margin:0 0 1.05em}
.gc-bai__noi-dung img{border-radius:var(--gc-bo);height:auto}
.gc-bai__noi-dung ul,.gc-bai__noi-dung ol{margin:0 0 1.2em 1.25em}
.gc-bai__noi-dung li{margin:0 0 .45em}
.gc-bai__noi-dung table{width:100%;border-collapse:collapse;font-size:15.5px}
.gc-bai__noi-dung th,.gc-bai__noi-dung td{padding:12px 14px;border:1px solid var(--gc-vien);
  text-transform:none!important;text-align:left}
.gc-bai__noi-dung th{background:var(--gc-ru-050);font-weight:700;color:var(--gc-muc)}
/* Bảng nhiều cột phải cuộn trong khung của nó, không đẩy cả trang tràn ngang */
.gc-bai__noi-dung .wp-block-table,.gc-bai__noi-dung figure.wp-block-table{overflow-x:auto}

/* overscroll-behavior để 'auto': cuộn hết cột bên thì trang chạy tiếp, thay vì
   đứng im dưới con trỏ — 'contain' chặn chuyền cuộn và tạo cảm giác kẹt.
   Cột bên dính cao hơn khung nhìn thì phần dưới không bao giờ với tới được:
   đo ở bài dài, 531px cuối (khối "cùng chuyên mục") nằm ngoài màn hình mà
   không cuộn tới được. Cho chính cột bên cuộn trong phần khung nhìn còn lại. */
.gc-bai__ben{position:sticky;top:98px;display:flex;flex-direction:column;gap:20px;
  max-height:calc(100vh - 118px);overflow-y:auto;overscroll-behavior-y:auto;
  padding-right:4px;scrollbar-width:thin}
.gc-bai__ben::-webkit-scrollbar{width:6px}
.gc-bai__ben::-webkit-scrollbar-thumb{background:var(--gc-vien);border-radius:3px}
.gc-ben-cta{padding:26px 24px;border-radius:var(--gc-bo-lon);
  background:var(--gc-ru-900);color:#fff}
.gc-ben-cta__nhan{margin:0 0 8px;font-size:19px;font-weight:700;line-height:1.3;color:#fff}
.gc-ben-cta__mo{margin:0 0 18px;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.86)}
.gc-ben-cta .gc-nut{width:100%;margin-bottom:10px;min-height:48px;font-size:15.5px}
.gc-ben-cta a.gc-nut--vien{border-color:rgba(255,255,255,.7);color:#fff}
.gc-ben-cta a.gc-nut--vien:hover{background:#fff;color:var(--gc-ru-800)}
.gc-ben-cta__cn{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0;padding:14px 0 0;
  list-style:none;border-top:1px solid rgba(255,255,255,.16)}
.gc-ben-cta__cn li{margin:0;padding:4px 10px;border-radius:999px;
  /* 11.5px: dấu tiếng Việt dính vào dòng trên. 12px là mức thấp nhất còn đọc được. */
  background:rgba(255,255,255,.12);font-size:12px;font-weight:600;color:#fff}

.gc-ben-ds{padding:24px 22px;background:var(--gc-ru-050);
  border:1px solid var(--gc-vien);border-radius:var(--gc-bo-lon)}
.gc-ben-ds__tieu{margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gc-mo)}
.gc-ben-ds ul{margin:0 0 14px;padding:0;list-style:none}
.gc-ben-ds li{margin:0;border-top:1px solid var(--gc-vien)}
.gc-ben-ds li:first-child{border-top:0}
.gc-ben-ds a{display:block;padding:10px 0;font-size:15px;line-height:1.5;
  color:var(--gc-chu);text-decoration:none}
.gc-ben-ds a:hover{color:var(--gc-ru-700)}

.gc-bai-lien-quan{padding:0 0 72px;background:#fff}
.gc-bai-lien-quan__tieu{margin:0 0 26px;font-size:26px;color:var(--gc-muc)}


/* ==================== 19. CÂU HỎI THƯỜNG GẶP =========================== */
.gc-faq-khoi{background:#fff}
.gc-faq{display:flex;flex-direction:column;gap:12px}
/* <details>/<summary> có sẵn hỗ trợ bàn phím và trình đọc màn hình,
   nên không cần JavaScript cho phần đóng mở. */
.gc-faq__muc{background:#fff;border:1px solid var(--gc-vien);
  border-radius:var(--gc-bo);overflow:hidden}
.gc-faq__muc[open]{border-color:var(--gc-ru-500);box-shadow:var(--gc-bong)}
.gc-faq__muc>summary{position:relative;list-style:none;cursor:pointer;
  padding:20px 60px 20px 24px;font-size:17px;font-weight:600;line-height:1.45;
  color:var(--gc-muc)}
.gc-faq__muc>summary::-webkit-details-marker{display:none}
.gc-faq__muc>summary:hover{color:var(--gc-ru-700)}
.gc-faq__muc>summary:focus-visible{outline:2px solid var(--gc-ru-600);outline-offset:-2px}
/* Dấu cộng vẽ bằng hai gạch giả lập; mở ra thì gạch dọc mờ đi thành dấu trừ */
.gc-faq__muc>summary:before,.gc-faq__muc>summary:after{content:"";position:absolute;
  right:24px;top:50%;width:16px;height:2.5px;border-radius:2px;
  background:var(--gc-ru-600);transform:translateY(-50%)}
.gc-faq__muc>summary:after{transform:translateY(-50%) rotate(90deg);transition:opacity .18s ease}
.gc-faq__muc[open]>summary:after{opacity:0}
.gc-faq__tra{padding:0 24px 22px}
.gc-faq__tra p{margin:0 0 .9em;font-size:15.5px;line-height:1.72;color:var(--gc-mo)}
.gc-faq__tra p:last-child{margin-bottom:0}

/* ========================= 20. TRANG LIÊN HỆ =========================== */
.gc-lh-hero{background:#1E2227}
.gc-lh-hero .gc-lh-hero__h1{margin:0 0 16px;max-width:860px;
  font-size:42px;line-height:1.16;font-weight:700;color:#fff}

.gc-lh-kenh{background:#fff}
.gc-lh-kenh .row>.col{padding-bottom:var(--gc-k3)}
.gc-kenh{display:flex;flex-direction:column;height:100%;padding:24px 22px;
  background:var(--gc-ru-050);border:1px solid var(--gc-vien);
  border-radius:var(--gc-bo);text-decoration:none;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.gc-kenh:hover{border-color:var(--gc-ru-500);box-shadow:var(--gc-bong);transform:translateY(-3px)}
.gc-kenh__nhan{font-size:13px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gc-mo)}
.gc-kenh__gt{margin:6px 0 10px;font-size:19px;font-weight:700;
  line-height:1.3;color:var(--gc-ru-700)}
.gc-kenh__mo{font-size:14.5px;line-height:1.6;color:var(--gc-mo)}

.gc-lh-form{background:var(--gc-ru-900)}
.gc-lh-form .row>.col{padding-bottom:0}
.gc-lh-trai{padding:72px 48px 72px 0}
.gc-lh-trai .gc-h2{color:#fff;font-size:30px}
.gc-lh-trai .gc-dan{color:rgba(255,255,255,.88)}
.gc-lh-trai .gc-nhan{color:var(--gc-ru-150)}
.gc-can-biet{margin:26px 0;padding:0 0 0 22px;color:rgba(255,255,255,.9)}
.gc-can-biet li{margin:0 0 11px;font-size:15.5px;line-height:1.6}
.gc-can-biet li::marker{color:var(--gc-la-500);font-weight:700}
.gc-lh-diachi{padding-top:22px;border-top:1px solid rgba(255,255,255,.16)}
.gc-lh-diachi p{margin:0 0 14px;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.86)}
.gc-lh-diachi strong{display:block;font-size:12.5px;letter-spacing:.07em;
  text-transform:uppercase;color:rgba(255,255,255,.62);font-weight:700}
.gc-lh-hop{margin:56px 0;padding:36px 34px;background:#fff;
  border-radius:var(--gc-bo-lon);box-shadow:var(--gc-bong-cao)}
.gc-lh-hop h2{margin:0 0 6px;font-size:26px;color:var(--gc-muc)}
.gc-lh-hop__phu{margin:0 0 22px;font-size:15px;color:var(--gc-mo)}

/* ==================== 21. ĐẦU TRANG — THANH TRÊN ====================== */
#top-bar,.header-top{background-color:#1E2227!important;border-bottom:1px solid rgba(255,255,255,.1)}
#top-bar .nav>li>a,.header-top .nav>li>a{color:rgba(255,255,255,.8)}
.gc-tb-trai{display:inline-flex;align-items:center;gap:20px;
  font-size:12.5px;color:rgba(255,255,255,.82)}
.gc-tb-trai__ngan{color:rgba(255,255,255,.66)}
.gc-tb-phai{display:inline-flex;align-items:center;gap:18px;
  font-size:12.5px;color:rgba(255,255,255,.8)}
.gc-tb-phai a{color:rgba(255,255,255,.92);text-decoration:none}
.gc-tb-phai a:hover{color:var(--gc-ru-150)}
.gc-tb-phai__ngan{color:rgba(255,255,255,.68)}

/* ==================== 22. ĐẦU TRANG — HÀNG CHÍNH ====================== */
.header-main{background-color:var(--gc-ru-900)}
.header-main .nav>li>a{font-size:15.5px;font-weight:600;letter-spacing:0;text-transform:none;
  color:rgba(255,255,255,.9)}
.header-main .nav>li>a:hover,.header-main .nav>li.current-menu-item>a{color:#fff}
/* Gạch chân chỉ chạy dưới mục đang xem, đủ để định vị mà không ồn */
.header-main .nav>li>a:after{content:"";display:block;flex:0 0 100%;height:2px;margin-top:5px;border-radius:2px;
  background:var(--gc-la-500);transform:scaleX(0);transform-origin:center;transition:transform .2s ease}
.header-main .nav>li:hover>a:after,.header-main .nav>li.current-menu-item>a:after{transform:scaleX(1)}

.gc-hd-phai{display:inline-flex;align-items:center;gap:20px}
.gc-hd-goi{display:inline-flex;flex-direction:column;line-height:1.2;text-decoration:none}
.gc-hd-goi__nhan{font-size:12px;letter-spacing:.07em;text-transform:uppercase;
  color:rgba(255,255,255,.68)}
.gc-hd-goi__so{font-size:19px;font-weight:700;color:#fff;letter-spacing:-.01em}
.gc-hd-goi:hover .gc-hd-goi__so{color:var(--gc-la-500)}
.header a.gc-hd-nut{display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 24px;border-radius:999px;
  background:var(--gc-ru-600);color:#fff;font-size:15.5px;font-weight:600;
  text-decoration:none;text-transform:none;letter-spacing:0;
  transition:background-color .2s ease,transform .2s ease}
.header a.gc-hd-nut:hover{background:var(--gc-ru-700);color:#fff;transform:translateY(-1px)}

/* Cuộn xuống: header co lại, số điện thoại nhường chỗ cho nút */
.stuck .header-main{box-shadow:0 6px 20px rgba(21,25,31,.28)}
.stuck .gc-hd-goi__nhan{display:none}
.stuck .gc-hd-goi__so{font-size:17px}
.stuck .header a.gc-hd-nut{min-height:40px;padding:0 20px;font-size:15px}

/* Khoảng 850–1200px: menu + hotline + nút không đủ chỗ trên một hàng, "Liên hệ"
   rớt xuống dòng hai nằm dưới logo. Thu gọn dần thay vì để nó vỡ. */
@media (min-width:850px) and (max-width:1200px){
  /* Icon menu tốn ~110px cho 5 mục. Đo ở 1024px: cột chứa menu 524px nhưng
     menu kèm icon cần 556px -> "Liên hệ" rớt xuống hàng hai. Ẩn icon ở dải này,
     menu trở về đúng như trước khi có icon. Menu điện thoại nằm trong
     .off-canvas nên không dính. */
  .header-main .gc-nav-icon{display:none}
  .header-main .nav>li>a{font-size:14.5px}
  .header-main .nav-spacing-medium>li{margin:0 8px}
  .gc-hd-phai{gap:12px}
  .gc-hd-goi__nhan{display:none}
  .gc-hd-goi__so{font-size:17px}
  .header a.gc-hd-nut{min-height:42px;padding:0 18px;font-size:14.5px}
}
@media (min-width:850px) and (max-width:980px){
  .gc-hd-goi{display:none}
}

/* ======================= 23. TRANG PHÁP LÝ ============================= */
/* Hai lớp, không phải một: luật màu chữ của theme cha ngang (0,1,0) và nạp
   sau nên lớp đơn thua — chữ ra rgb(40,40,40) trên nền xanh đậm, đo 1.0:1. */
.gc-tieu-de-trang .gc-pl-dau__meta{margin:16px 0 0;font-size:14px;color:rgba(255,255,255,.82)}
.gc-pl{padding:52px 0 72px}
.gc-pl__khung{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
.gc-pl__noi-dung{min-width:0;max-width:760px;font-size:16.5px;line-height:1.78;color:var(--gc-chu)}
.gc-pl__noi-dung h2{margin:2em 0 .6em;font-size:22px;line-height:1.3;color:var(--gc-muc)}
.gc-pl__noi-dung h2:first-child{margin-top:0}
.gc-pl__noi-dung h3{margin:1.6em 0 .5em;font-size:18px}
.gc-pl__noi-dung p{margin:0 0 1.05em}
.gc-pl__noi-dung ul,.gc-pl__noi-dung ol{margin:0 0 1.2em 1.2em}
.gc-pl__noi-dung li{margin:0 0 .5em}
.gc-pl__noi-dung strong{color:var(--gc-muc)}
.gc-pl__noi-dung a{color:var(--gc-ru-700);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:2px}
.gc-pl__noi-dung a:hover{color:var(--gc-ru-700)}
.gc-pl__hoi{margin:44px 0 0;padding:24px 26px;background:var(--gc-ru-050);
  border-left:3px solid var(--gc-ru-500);border-radius:0 var(--gc-bo) var(--gc-bo) 0}
.gc-pl__hoi p{margin:0 0 .5em;font-size:16px}
.gc-pl__hoi p:last-child{margin-bottom:0}

.gc-pl__ben{position:sticky;top:132px;max-height:calc(100vh - 152px);overflow-y:auto;
  overscroll-behavior:contain}
.gc-pl-muc{padding:24px 22px;background:#fff;border:1px solid var(--gc-vien);
  border-radius:var(--gc-bo-lon)}
.gc-pl-muc__tieu{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gc-mo)}
.gc-pl-muc ul{margin:0;padding:0;list-style:none}
.gc-pl-muc li{margin:0;border-top:1px solid var(--gc-vien)}
.gc-pl-muc li:first-child{border-top:0}
.gc-pl-muc a,
.gc-pl-muc li.dang-xem span{display:block;padding:11px 0;font-size:15px;line-height:1.45;
  color:var(--gc-chu);text-decoration:none}
.gc-pl-muc a:hover{color:var(--gc-ru-700)}
.gc-pl-muc li.dang-xem a,
/* mục đang xem nay là <span> chứ không còn là <a> — phải khai cả hai, nếu
   không nó mất hẳn kiểu và tụt xuống trông như chữ thường */
.gc-pl-muc li.dang-xem span{color:var(--gc-ru-700);font-weight:700}

/* ==================== 24. TÁC GIẢ (E-E-A-T) =========================== */
.gc-tac-gia{display:flex;gap:18px;margin:44px 0 0;padding:26px 26px;
  background:var(--gc-ru-050);border:1px solid var(--gc-vien);border-radius:var(--gc-bo-lon)}
.gc-tac-gia__chu{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:999px;background:var(--gc-ru-700);
  color:#fff;font-size:18px;font-weight:700}
.gc-tac-gia__than{min-width:0}
.gc-tac-gia__nhan{margin:0 0 6px;font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gc-mo)}
.gc-tac-gia__ten{margin:0;font-size:18px;font-weight:700;line-height:1.3}
.gc-tac-gia__ten a{color:var(--gc-muc);text-decoration:none}
.gc-tac-gia__ten a:hover{color:var(--gc-ru-700);text-decoration:underline}
.gc-tac-gia__chuc{margin:2px 0 10px;font-size:14.5px;color:var(--gc-mo)}
.gc-tac-gia__mo{margin:0 0 12px;font-size:15px;line-height:1.7;color:var(--gc-chu)}
.gc-tac-gia__lh{margin:0;font-size:14.5px;color:var(--gc-mo)}
.gc-tac-gia__lh a{color:var(--gc-ru-700);text-decoration:none}
.gc-tac-gia__lh a:hover{text-decoration:underline}

.gc-tg-ho-so{padding:48px 0 8px;background:#fff}
.gc-tg-ho-so__khung{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:52px;align-items:start}
.gc-tg-ho-so__mo{margin:0 0 24px;font-size:17.5px;line-height:1.75;color:var(--gc-chu)}
.gc-tg-ho-so__ct{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;margin:0;
  padding-top:22px;border-top:1px solid var(--gc-vien)}
.gc-tg-ho-so__ct dt,.gc-tg-ho-so__ct dd{margin:0;font-size:15px;line-height:1.6;
  text-transform:none!important;letter-spacing:0}
.gc-tg-ho-so__ct dt{color:var(--gc-mo)}
.gc-tg-ho-so__ct dd{color:var(--gc-chu);font-weight:600}
.gc-tg-ho-so__ct dd a{color:var(--gc-ru-700);text-decoration:none}
.gc-tg-ho-so__ben{position:sticky;top:132px}

/* ==================== 25. MỤC LỤC & ĐÁNH GIÁ SAO ====================== */
.gc-muc-luc{padding:22px 20px;background:#fff;border:1px solid var(--gc-vien);
  border-radius:var(--gc-bo-lon)}
.gc-muc-luc__tieu{margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gc-mo)}
.gc-muc-luc ol{margin:0;padding:0;list-style:none;counter-reset:ml}
.gc-muc-luc li{margin:0;counter-increment:ml;position:relative}
.gc-muc-luc a{display:block;padding:8px 0 8px 30px;font-size:14.5px;line-height:1.45;
  color:var(--gc-mo);text-decoration:none;border-left:2px solid transparent;
  transition:color .2s ease,border-color .2s ease}
.gc-muc-luc a:before{content:counter(ml);position:absolute;left:0;top:8px;
  width:20px;font-size:12.5px;font-weight:700;color:var(--gc-vien);text-align:right}
.gc-muc-luc a:hover{color:var(--gc-ru-700)}
.gc-muc-luc li.dang-doc a{color:var(--gc-ru-700);font-weight:600;
  border-left-color:var(--gc-ru-600);padding-left:32px}
.gc-muc-luc li.dang-doc a:before{color:var(--gc-ru-600)}
/* Bài dài thì mục lục tự cuộn trong khung của nó, không đẩy cột bên dài ra */
/* Mục lục dài không được chiếm hết cột bên, nếu không nút gọi bị đẩy khuất */
@media (min-height:700px){
  .gc-muc-luc ol{max-height:34vh;overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:thin}
}

/* Khối đánh giá sao: đưa về bảng màu chung, bỏ dáng widget mặc định.
   Phần schema AggregateRating của plugin đã tắt (tuỳ chọn kksr_grs) — 1 phiếu
   tự chấm cho dịch vụ của chính mình là loại đánh dấu Google hay phạt. */
.gc-bai__noi-dung .kk-star-ratings{display:inline-flex;align-items:center;gap:12px;
  margin:0 0 26px;padding:10px 18px;
  background:var(--gc-ru-050);border:1px solid var(--gc-vien);border-radius:999px}
.gc-bai__noi-dung .kksr-stars{margin:0}
.gc-bai__noi-dung .kksr-icon{width:19px!important;height:19px!important}
.gc-bai__noi-dung .kksr-stars .kksr-stars-active .kksr-icon{
  background-color:var(--gc-la-500)}
.gc-bai__noi-dung .kksr-stars .kksr-stars-inactive .kksr-icon{
  background-color:var(--gc-ru-200)}
.gc-bai__noi-dung .kksr-legend{margin:0!important;font-size:14px;color:var(--gc-mo)}
.gc-bai__noi-dung .kksr-legend strong{color:var(--gc-muc);font-weight:700}

/* ================ 26. VÙNG CHẠM & CỠ CHỮ NHỎ NHẤT ==================== */
/* Đo trên điện thoại: liên kết chân trang cao 20px, biểu tượng mạng xã hội
   19px, nút "Đọc tiếp" 42px — đều dưới ngưỡng chạm thoải mái 44px. */
/* Đặt vùng chạm lên chính thẻ <a>: cho <li> cao 44px thì ô bấm vẫn chỉ cao
   bằng dòng chữ, ngón tay trượt ra ngoài là mất. */
/* Vùng chạm 44px chỉ cần trên thiết bị CHẠM. Áp cho cả desktop thì 12 liên
   kết thành một cột cao 528px — đó là lý do chân trang trước đây dài bất
   thường và các cột lệch nhau hẳn một màn hình. */
@media (hover:none),(pointer:coarse){
  .gc-chan .gc-chan__ds a{min-height:44px;display:flex;align-items:center}
}
.gc-chan .gc-chan__lh a,
.gc-keu-goi .gc-kg__lh a,
.gc-tac-gia__lh a,
.gc-ctn__meta a{display:inline-flex;align-items:center;min-height:44px}
.gc-nganh .gc-the__con a{min-height:36px;display:inline-flex;align-items:center}
.header li.header-search a.is-small,
.header .ux-search-submit{min-width:44px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center}
.footer-wrapper .social-icons a.icon,
.gc-chan .social-icons a.icon{min-width:44px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center}
.gc-ds .button.is-outline,.gc-tin-tuc .button.is-outline,
.gc-tin-tuc .box-text-inner .button{min-height:44px}
.absolute-footer a{display:inline-block;padding:4px 0}

/* Cỡ chữ nhỏ nhất trên điện thoại là 13px — dưới mức đó đọc trên tay rất mệt */


/* ======================== 10. MÀN HÌNH HẸP ============================== */
@media (max-width:1140px){
  .gc-hero .gc-hero__h1{font-size:44px}
  .gc .gc-h2{font-size:34px}
}
@media (max-width:849px){
  /* Vùng chạm tối thiểu 44px cho các liên kết văn bản đứng riêng (không nằm
     trong đoạn văn). Đo bằng elementFromPoint với khung nhìn cao bằng cả trang
     — xem soat/do-trong-trinh-duyet.js. */
  .gc a.gc-lien{min-height:44px}
  .gc-tg-ho-so__ct dd a{display:inline-flex;align-items:center;min-height:44px}

  /* Lưới 4 ảnh hero: thu nhãn lại cho vừa ô hẹp trên điện thoại. */
  .gc-hero__anh4{gap:9px;margin-top:26px}
  .gc-hero__anh4 figure{border-radius:12px;box-shadow:0 8px 20px rgba(30,34,39,.12)}
  .gc-hero__anh4 figcaption{left:7px;bottom:7px;padding:4px 9px;font-size:12px}

  .gc-chan .gc-chan__cn li{font-size:13px;padding:6px 12px}
  .gc-chan .gc-chan__lh span{font-size:13px}
  .gc-hero .gc-hero__cn li{font-size:13px}
  .gc-ben-cta__cn li{font-size:13px}
  .gc-tb-trai{font-size:13px}

  .gc .gc-h2{font-size:29px}
  .gc .gc-dan{font-size:16px}
  .gc-hero .gc-hero__h1{font-size:34px}
  .gc-hero .gc-hero__dan{font-size:16.5px}
  .gc-hero .gc-hero__tin{gap:16px 26px}
  .gc-hero .gc-hero__tin b{font-size:23px}
  .gc-cam-ket{margin-top:-38px}
  .gc-cam-ket .gc-ck-hop{grid-template-columns:1fr 1fr;gap:22px 0;padding:26px 12px}
  .gc-cam-ket .gc-ck{padding:0 16px}
  .gc-cam-ket .gc-ck:nth-child(3){border-left:0}
  .gc-quy-trinh .gc-qt{padding:24px 22px}
  .gc-so-lieu .gc-sl b{font-size:34px}
  .gc-cn-luoi{grid-template-columns:1fr 1fr;gap:16px}
  .gc-cn-khoi--day-du .gc-cn-luoi{grid-template-columns:1fr;gap:22px}
  .gc-cn-the__than{padding:15px 16px 17px}
  .gc-cn-the__ten{font-size:15.5px}
  .gc-cn-the__than{grid-template-rows:24px 58px auto}
  .gc-gt-hero .gc-gt-hero__h1{font-size:29px}
  .gc-gt-so{grid-template-columns:1fr 1fr;gap:10px}
  .gc-gt-so li{padding:16px 15px}
  .gc-gt-so b{font-size:27px}
  .gc-gt-tn{padding:24px 22px}
  .gc-gt-tn .gc-h2{font-size:22px}
  .gc-bai{padding:34px 0 48px}
  .gc-bai__khung{grid-template-columns:1fr;gap:34px}
  /* Ở đây cột bên xếp xuống dưới nội dung nên nó không còn là cột bên nữa.
     Trả position:static thôi là chưa đủ: max-height + overflow-y:auto biến nó
     thành hộp cuộn riêng cao bằng khung nhìn, và overscroll-behavior:contain
     CHẶN cú vuốt chuyền ra trang — ngón tay chạm vào khối "cùng chuyên mục"
     là trang đứng im. Phải gỡ cả bốn thuộc tính. */
  .gc-bai__ben{position:static;max-height:none;overflow:visible;
    overscroll-behavior:auto;padding-right:0}
  .gc-bai__noi-dung{font-size:16.5px;line-height:1.75}
  .gc-bai__noi-dung h2{font-size:23px}
  .gc-bai__noi-dung h3{font-size:19px}
  .gc-bai-lien-quan{padding:0 0 52px}
  .gc-bai-lien-quan__tieu{font-size:22px}
  .gc-faq__muc>summary{padding:16px 52px 16px 18px;font-size:15.5px}
  .gc-faq__muc>summary:before,.gc-faq__muc>summary:after{right:18px}
  .gc-faq__tra{padding:0 18px 18px}
  .gc-lh-hero .gc-lh-hero__h1{font-size:28px}
  .gc-lh-trai{padding:44px 0 8px}
  .gc-lh-trai .gc-h2{font-size:24px}
  .gc-lh-hop{margin:0 0 44px;padding:26px 22px}
  .gc-lh-hop h2{font-size:22px}
  .gc-pl{padding:34px 0 52px}
  .gc-pl__khung{grid-template-columns:1fr;gap:34px}
  .gc-pl__ben{position:static;max-height:none;overflow:visible;
    overscroll-behavior:auto}
  .gc-pl__noi-dung{font-size:16px}
  .gc-pl__noi-dung h2{font-size:20px}
  /* Thanh trên trên điện thoại chỉ giữ dải chứng nhận, cho cuộn ngang trong
     khung của nó. Thẻ <li> bọc ngoài là flex item nên phải cho phép co giãn,
     nếu không dải chip đo ra rộng 0px và biến mất. */
  #top-bar li.html_topbar_left{flex:1 1 auto;min-width:0}
  #top-bar .flex-left,#top-bar .flex-row{min-width:0}
  .gc-tb-trai__ngan,.gc-tb-phai{display:none}
  /* Hotline và nút báo giá đã có mặt ở thanh hành động dưới đáy màn hình */
  .gc-hd-phai{display:none}
  .gc-keu-goi .gc-kg__hop{padding:26px 22px}
  .gc-tieu-de-trang{padding:40px 0 36px}
  .gc-tieu-de-trang h1{font-size:28px}
  .gc-kg-hep{flex-direction:column;align-items:flex-start;gap:22px}
  .gc-kg-hep .gc-h2{font-size:25px}
  .gc-ds-bai{padding:32px 0 56px}
  .gc-ds-bai__tieu{font-size:22px}
  .gc-chuyen-sau{padding:0 0 52px}
  .gc-chuyen-sau__khung{grid-template-columns:1fr;gap:32px}
  .gc-chuyen-sau__ben{position:static;max-height:none;overflow:visible;
    overscroll-behavior:auto;padding-right:0}
  .gc-chuyen-sau__tieu{font-size:22px}
  .gc-gioi-thieu-muc{padding:28px 0 4px}
  .gc-gioi-thieu-muc .taxonomy-description{max-width:none;padding-left:15px;
    font-size:16px;line-height:1.7}
  .gc-chuyen-sau__noi{font-size:16px}
  .gc-chuyen-sau__noi h2{font-size:21px}
  .gc-chuyen-sau__noi h3{font-size:18px}
  .gc-chuyen-sau__noi.gc-gon{max-height:820px}
  .gc-ctn{padding:20px 18px}
  .gc-tac-gia{flex-direction:column;gap:14px;padding:20px 18px}
  .gc-tg-ho-so__khung{grid-template-columns:1fr;gap:30px}
  .gc-tg-ho-so__ben{position:static}
  .gc-tg-ho-so__ct{grid-template-columns:1fr;gap:2px 0}
  .gc-tg-ho-so__ct dd{margin-bottom:10px}
  /* Trên điện thoại cột bên nằm dưới bài, mục lục ở đó là vô dụng */
  .gc-muc-luc{display:none}
  /* Dải nổi nhường chỗ cho thanh hành động dưới đáy */
  .gc-lh{display:none}
  /* Thanh nằm sẵn nhưng trượt khỏi màn hình cho tới khi cuộn qua hero —
     xem giacong_thanh_day_theo_cuon(). visibility:hidden để ngón tay và trình
     đọc màn hình đều không chạm tới khi nó đang ẩn. */
  .gc-thanh-day{display:grid;grid-template-columns:1fr 1fr;gap:10px;
    position:fixed;left:0;right:0;bottom:0;z-index:64;padding:10px 12px;
    background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
    border-top:1px solid var(--gc-vien);
    transform:translateY(105%);visibility:hidden;
    transition:transform .22s ease,visibility 0s linear .22s}
  .gc-thanh-day.gc-thanh-day--hien{transform:none;visibility:visible;
    transition:transform .22s ease,visibility 0s}
  @media (prefers-reduced-motion:reduce){
    .gc-thanh-day{transition:none}
    .gc-thanh-day.gc-thanh-day--hien{transition:none}
  }
  .gc-thanh-day__nut{display:inline-flex;align-items:center;justify-content:center;gap:8px;
    min-height:48px;border-radius:999px;font-size:15.5px;font-weight:600;text-decoration:none}
  .gc-thanh-day__nut svg{width:19px;height:19px}
  /* Hai nút từng là hai bậc xám sát nhau nên nhìn như một khối, không thấy đâu
     là hành động chính. Nút gọi lấy màu hành động xanh lá của toàn site; nút
     báo giá giữ trung tính để hai bên phân vai rõ. */
  .gc-thanh-day__nut--goi{background:var(--gc-xd-600);color:#fff}
  .gc-thanh-day__nut--bao-gia{background:var(--gc-ru-700);color:#fff}
  body{padding-bottom:68px}
  #top-link{bottom:80px!important}
}
@media (max-width:549px){
  .gc-gioi-thieu-muc{padding:22px 0 2px}
  /* Giữ 16px: khổ chỉ còn ~42 ký tự nên thu nhỏ chữ không thêm được chữ nào,
     chỉ khiến khó đọc hơn. */
  .gc-gioi-thieu-muc .taxonomy-description{padding-left:13px}
  .gc-hero .gc-hero__h1{font-size:29px}
  .gc-hero .gc-hero__nut{gap:10px}
  .gc-hero a.gc-nut{width:100%;padding:0 18px}
  .gc-cam-ket .gc-ck-hop{grid-template-columns:1fr;gap:18px}
  .gc-cam-ket .gc-ck{padding:0 6px;border-left:0}
  .gc-mau .gc-mau__doi{grid-template-columns:1fr;gap:0}
  /* Thẻ ngành hàng chuyển sang dạng NGANG: ảnh bên trái, chữ bên phải.
     Xếp dọc thì mỗi thẻ cao 393px — gần trọn một màn hình cho một mục, khách
     phải cuộn tám màn mới xem hết tám ngành. Dạng ngang còn khoảng 150px. */
  /* Phải thêm .gc-luoi vào selector. Cuối tệp có `.gc-luoi .gc-the{flex-direction:
     column}` — cùng độ ưu tiên (0,2,0), viết SAU khối này và không nằm trong
     media query nào, nên nó đè mất luật row ở đây. Hậu quả không phải là "thẻ
     vẫn dọc" cho đẹp: `flex:0 0 112px` ở dòng dưới vẫn ăn, mà trên trục dọc nó
     ép CHIỀU CAO còn 112px trong khi ảnh cao 224px — mất đúng một nửa hình.
     Giữ luôn cả selector không .gc-luoi cho những trang chỉ có .gc-nganh. */
  .gc-nganh .gc-the,
  .gc-nganh.gc-luoi .gc-the{flex-direction:row;align-items:stretch}
  .gc-nganh .gc-the__anh{flex:0 0 112px;aspect-ratio:auto;align-self:stretch;
    display:flex;align-items:center}
  /* contain chứ không cover: khung ngang hẹp mà cover thì cắt mất nửa hình vẽ */
  .gc-nganh .gc-the__anh img{height:auto;object-fit:contain}
  .gc-nganh .gc-the__than{padding:13px 15px}
  .gc-nganh .gc-the__than h3{font-size:16px;margin-bottom:5px}
  .gc-nganh .gc-the__mo{margin-bottom:9px;font-size:13.5px;line-height:1.5;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .gc-nganh .gc-the__con a{padding:4px 10px;font-size:12px}
  .gc-nganh .row>.col{padding-bottom:14px}

  /* Ba logo một hàng thay vì hai: 15 logo còn 5 hàng thay vì 8 */
  .gc-logo{gap:10px}
  .gc-logo li{width:calc(33.333% - 7px);height:60px;padding:8px 10px}

  .gc-cn-luoi{grid-template-columns:1fr}
  /* Hai khối chữ dài nhất: siết đệm, không đổi số cột vì mỗi ô có 2–3 dòng */
  .gc-quy-trinh .gc-qt{padding:20px 18px}
  .gc-quy-trinh .gc-qt__so{width:38px;height:38px;margin-bottom:11px;font-size:17px}
  .gc-quy-trinh .gc-qt h3{font-size:17px}
  .gc-quy-trinh .gc-qt p{font-size:14.5px;line-height:1.55}
  .gc-quy-trinh .row>.col{padding-bottom:14px}
  .gc-vi-sao .gc-vs{padding:20px 18px}
  .gc-vi-sao .gc-vs h3{font-size:16.5px}
  .gc-vi-sao .gc-vs p{font-size:14.5px;line-height:1.55}
  .gc-vi-sao .row>.col{padding-bottom:14px}
}

/* ================ 27. TRANG GIỚI THIỆU & LIÊN HỆ — KHỐI BỔ SUNG ================ */

/* --- 27.1 Năng lực theo công đoạn (trang giới thiệu) --- */
.gc-nang-luc{background:var(--gc-ru-050)}
.gc-nang-luc .gc-nl{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.gc-nang-luc .gc-nl__o{padding:26px 24px;background:#fff;border:1px solid var(--gc-vien);
  border-radius:var(--gc-bo);box-shadow:0 2px 10px rgba(21,25,31,.05)}
.gc-nang-luc .gc-nl__o b{display:block;margin-bottom:9px;font-size:17px;line-height:1.35;color:var(--gc-muc)}
.gc-nang-luc .gc-nl__o span{display:block;font-size:15px;line-height:1.68;color:var(--gc-chu)}

/* --- 27.2 Quy trình làm việc bảy bước --- */
.gc-lam-viec .gc-lv{counter-reset:b;display:grid;grid-template-columns:1fr 1fr;gap:16px 26px;
  margin:34px 0 0;padding:0;list-style:none}
.gc-lam-viec .gc-lv li{counter-increment:b;position:relative;padding:20px 22px 20px 68px;
  background:#fff;border:1px solid var(--gc-vien);border-radius:var(--gc-bo)}
.gc-lam-viec .gc-lv li:before{content:counter(b);position:absolute;left:22px;top:20px;
  display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;
  background:var(--gc-ru-700);font-size:15px;font-weight:700;color:#fff}
.gc-lam-viec .gc-lv b{display:block;margin-bottom:6px;font-size:16.5px;line-height:1.35;color:var(--gc-muc)}
.gc-lam-viec .gc-lv span{display:block;font-size:15px;line-height:1.68;color:var(--gc-chu)}

/* --- 27.3 Ranh giới: những gì không nhận --- */
.gc-khong-nhan{background:var(--gc-ru-050)}
.gc-khong-nhan .gc-kn{max-width:900px;margin:30px auto 26px;padding:0;list-style:none}
.gc-khong-nhan .gc-kn li{position:relative;margin:0 0 12px;padding:16px 20px 16px 52px;
  background:#fff;border:1px solid var(--gc-vien);border-left:4px solid var(--gc-la-500);
  border-radius:var(--gc-bo);font-size:15.5px;line-height:1.7;color:var(--gc-chu)}
.gc-khong-nhan .gc-kn li:before{content:"×";position:absolute;left:20px;top:14px;
  font-size:20px;font-weight:700;line-height:1.4;color:var(--gc-ru-600)}

/* --- 27.4 Địa chỉ và giờ làm việc (trang liên hệ) --- */
.gc-dia-chi .gc-dc{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
.gc-dia-chi .gc-dc__o{padding:24px 22px;background:#fff;border:1px solid var(--gc-vien);
  border-radius:var(--gc-bo);box-shadow:0 2px 10px rgba(21,25,31,.05)}
.gc-dia-chi .gc-dc__o b{display:block;margin-bottom:8px;padding-bottom:8px;
  border-bottom:1px solid var(--gc-vien);font-size:13px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--gc-ru-700)}
.gc-dia-chi .gc-dc__o p{margin:0 0 8px;font-size:15.5px;line-height:1.62;color:var(--gc-muc)}
.gc-dia-chi .gc-dc__ghi{font-size:14.5px!important;line-height:1.65!important;color:var(--gc-mo)!important}
.gc-dia-chi .gc-dc__o a{color:var(--gc-ru-700);text-decoration:underline}
.gc-dia-chi .gc-dc__gui{max-width:900px;margin:26px auto 0;padding:18px 22px;
  background:var(--gc-ru-050);border-left:4px solid var(--gc-la-500);border-radius:var(--gc-bo);
  font-size:15.5px;line-height:1.7;color:var(--gc-chu)}

@media (max-width:1099px){
  .gc-nang-luc .gc-nl{grid-template-columns:1fr 1fr}
  .gc-dia-chi .gc-dc{grid-template-columns:1fr 1fr}
}
@media (max-width:849px){
  .gc-nang-luc .gc-nl,.gc-dia-chi .gc-dc,.gc-lam-viec .gc-lv{grid-template-columns:1fr;gap:12px}
  .gc-nang-luc .gc-nl{margin-top:24px}
  .gc-lam-viec .gc-lv{margin-top:24px}
  .gc-lam-viec .gc-lv li{padding:18px 18px 18px 60px}
  .gc-lam-viec .gc-lv li:before{left:18px;top:18px;width:29px;height:29px;font-size:14px}
  .gc-khong-nhan .gc-kn{margin-top:22px}
  .gc-dia-chi .gc-dc__gui{margin-top:20px;padding:16px 18px}
}

/* ── 28. MEGA MENU KHI SILO ĐỦ KHUNG ────────────────────────────────────────
   Từ lúc menu dựng đủ 8 nhánh × 59 mục con, khối mega cao 1067px trong khi
   màn 900px chỉ còn 755px dưới thanh điều hướng — nguyên hàng cột thứ hai
   (Mỹ phẩm, Dịch vụ, OEM, Kiến thức) nằm dưới mép, không rê chuột tới được.
   Đây là lỗi chỉ lộ ra khi ĐO, nhìn ảnh chụp màn hình không thấy vì ảnh cắt
   đúng ở mép. Hai việc: bóp dòng con lại, và chặn trần chiều cao cho cuộn.
   Dùng :has() để chỉ chạm khối mega, không đụng các dropdown thường. */
/* BẪY: luật chặn KHÔNG phải của Flatsome mà của chính tệp này ở khối menu
   tràn ngang — .header-main li.menu-item-design-full-width > .nav-dropdown
   {max-height:none;overflow:visible}. Phải viết đè đúng hình dạng đó thì mới
   chắc thắng; .header-main .nav-dropdown:has(.gc-mega) trông có vẻ đủ mạnh
   nhưng đo ra max-height vẫn là none. */
.header-main li.menu-item-design-full-width > .nav-dropdown:has(.gc-mega){
  max-height:calc(100vh - 150px);overflow-x:hidden;overflow-y:auto;
  overscroll-behavior:contain}
.header-main .nav-dropdown:has(.gc-mega)::-webkit-scrollbar{width:10px}
.header-main .nav-dropdown:has(.gc-mega)::-webkit-scrollbar-thumb{
  background:var(--gc-vien);border-radius:6px;border:3px solid #fff}
.header-main .nav-dropdown:has(.gc-mega)::-webkit-scrollbar-track{background:#fff}

.header-main .nav-dropdown .gc-mega.row.row-small{padding-top:16px}
.nav-dropdown .gc-mega>.col{padding-bottom:12px}
.nav-dropdown .gc-mega__o{padding:10px 10px 8px}
/* 34px vẫn trên ngưỡng trỏ chuột thoải mái; vùng chạm 44px chỉ bắt buộc trên
   thiết bị cảm ứng, mà ở đó menu dùng bản điện thoại chứ không phải mega. */
.nav-dropdown .gc-mega__con li a{padding:7px 10px}
.header-main .nav-dropdown .gc-mega__con{padding-top:6px}

/* ── 29. KHỐI NỘI DUNG TRONG BÀI DỊCH VỤ ────────────────────────────────────
   Bài dịch vụ dài gần 3.000 từ mà chỉ toàn đoạn văn thì không ai quét mắt
   được. Ba khối dưới đây là neo thị giác: sơ đồ, bảng so sánh, danh sách. */
.gc-hinh{margin:26px 0;padding:0}
.gc-hinh img{display:block;width:100%;height:auto;border-radius:14px;
  border:1px solid var(--gc-vien)}
.gc-hinh figcaption{margin-top:9px;font-size:14px;line-height:1.55;
  color:var(--gc-mo);font-style:normal}

/* Bảng rộng PHẢI cuộn trong hộp của nó, không được đẩy cả trang trôi ngang. */
.gc-bang-cuon{margin:22px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--gc-vien);border-radius:14px}
.gc-bang{width:100%;min-width:640px;margin:0;border-collapse:collapse;
  font-size:15px;line-height:1.55;background:#fff}
.gc-bang th,.gc-bang td{padding:12px 14px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--gc-vien)}
.gc-bang thead th{background:var(--gc-ru-700);color:#fff;font-weight:700;
  font-size:14.5px;border-bottom:0}
.gc-bang tbody th{width:23%;font-weight:600;color:var(--gc-chu);
  background:var(--gc-ru-050)}
.gc-bang tbody tr:last-child th,.gc-bang tbody tr:last-child td{border-bottom:0}
.gc-bang tbody tr:hover td,.gc-bang tbody tr:hover th{background:var(--gc-ru-050)}

.gc-ds{margin:18px 0;padding-left:0;list-style:none}
.gc-ds li{position:relative;margin:0 0 12px;padding-left:26px;line-height:1.72}
.gc-ds li:before{content:"";position:absolute;left:4px;top:10px;width:8px;height:8px;
  border-radius:50%;background:var(--gc-la-500)}
.gc-ds li strong{color:var(--gc-ru-900)}

@media (max-width:549px){
  .gc-bang{font-size:14px}
  .gc-bang th,.gc-bang td{padding:10px 11px}
  .gc-hinh figcaption{font-size:13.5px}
}

/* ── 29. MEGA MENU: GỠ STYLE NỘI TUYẾN CỦA FLATSOME ─────────────────────────
   Triệu chứng người dùng báo: menu nhấp nháy và không hiện trên desktop.

   ĐO ĐƯỢC (1440×900, lúc menu mở): thẻ .nav-dropdown bị Flatsome ghi thẳng
   style nội tuyến `inset:63.1px 0 0 -85px; width:1440px` → hộp menu chỉ còn
   CAO 16.9px, trong khi ruột .gc-mega cao 894px. Cộng với overflow-y:auto ở
   khối 28 thì toàn bộ mega bị cắt thành một vệt trắng mỏng dưới đầu trang —
   đúng cái vệt trắng trong ảnh chụp màn hình.

   NGUỒN: flatsome.js, nhánh xử lý menu-item-design-full-width chạy
     n.css({inset:0})                     // top/right/bottom/left = 0
     n.css({width: body.clientWidth, left: bodyRect.left - ddRect.left})
     n.css({top: mastheadRect.bottom - liRect.bottom + liRect.height})
   Nó đặt lại top/left/width nhưng KHÔNG BAO GIỜ xoá `bottom:0` của inset:0.

   Vì sao Flatsome gốc không vỡ mà ở đây lại vỡ: .nav-dropdown của theme cha là
   display:table. Hộp bảng co theo nội dung và bỏ qua ràng buộc top+bottom.
   Khối menu tràn ngang ở trên đổi nó thành display:block — với block thì
   top và bottom cùng khác auto sẽ GIẢI RA chiều cao = cao khối chứa − top −
   bottom = 80 − 63.1 − 0 = 16.9px. Tức lỗi sinh ra từ chỗ CSS của mình gặp JS
   của theme cha, không phải riêng bên nào sai.

   Công thức `top` của Flatsome cũng cộng thêm liRect.height vì nó tưởng khối
   chứa là chính <li>; ở đây <li> đã là position:static nên khối chứa là
   .header-inner, thành ra top lệch lên đúng bằng khoảng hở dưới <li>.

   Style nội tuyến chỉ thua được bằng !important — không có cách nào khác.
   Đóng menu thì Flatsome tự gọi .attr("style","") nên phần còn lại vẫn sạch. */
.header-main li.menu-item-design-full-width > .nav-dropdown{
  /* bottom:auto là dòng quan trọng nhất cả khối: trả chiều cao về theo nội dung */
  top:100% !important;bottom:auto !important;
  left:0 !important;right:0 !important;width:auto !important;height:auto !important;
  /* Trần chiều cao chuyển xuống .gc-mega (xem dưới) nên ở đây mở khoá lại,
     đồng thời trả overflow về visible để cầu nối rê chuột không bị cắt. */
  max-height:none !important;overflow:visible !important}

/* Cầu nối khoảng hở rê chuột.
   <li> kết thúc ở y=101.1 còn bảng bắt đầu ở y=118 (mép dưới .header-inner):
   16.9px ở giữa không thuộc <li> nào. hoverIntent của Flatsome đặt timeout:70
   — rê chuột qua vệt chết đó chậm hơn 70ms là menu đóng, tới nơi lại mở:
   ĐÚNG hiện tượng nhấp nháy. Nối liền bằng một khối trong suốt bắc lên trên.
   Nó nằm trong .nav-dropdown nên khi menu đóng thì thừa hưởng visibility:hidden
   và không cướp chuột của thanh đầu trang. */
.header-main li.menu-item-design-full-width > .nav-dropdown::before{
  content:"";position:absolute;left:0;right:0;bottom:100%;height:20px}

/* Trần chiều cao + cuộn dời từ .nav-dropdown sang chính khối mega.
   Để trên .nav-dropdown thì overflow:hidden cắt mất cầu nối ::before ở trên. */
.header-main li.menu-item-design-full-width > .nav-dropdown:has(.gc-mega){
  overflow:visible !important;max-height:none !important}
.header-main .nav-dropdown .gc-mega.row.row-small{
  max-height:calc(100vh - 118px);overflow-x:hidden;overflow-y:auto;
  overscroll-behavior:contain;border-radius:0 0 18px 18px}
.header-main .nav-dropdown .gc-mega::-webkit-scrollbar{width:10px}
.header-main .nav-dropdown .gc-mega::-webkit-scrollbar-thumb{
  background:var(--gc-vien);border-radius:6px;border:3px solid #fff}
.header-main .nav-dropdown .gc-mega::-webkit-scrollbar-track{background:#fff}

/* ── 30. CHUẨN HOÁ MÀU NGOÀI BẢNG & CĂN LỀ ──────────────────────────────────
   Đo bằng getComputedStyle trên trang chủ: 46 sắc được vẽ ra, trong đó 9 sắc
   nằm ngoài bộ nhận diện. Phần lớn là mặc định của theme cha rò qua các khối
   mình không phủ hết. Quy hết về bảng màu HCN Pharma. */

/* #f1f1f1 — chữ mặc định của .dark trong Flatsome, xuất hiện 121 lần.
   Đây là sắc xám trung tính, đặt cạnh nền xanh y tế thì lệch nhiệt màu.
   Thay bằng bậc 150 (ngả lam cùng hệ, 11.75:1 trên nền 900). */
.dark, .dark p, .dark li, .dark td, .dark dd,
.section.dark .col-inner > p{color:var(--gc-ru-150)}
.dark h1,.dark h2,.dark h3,.dark h4,.dark h5,.dark h6,
.dark strong,.dark b{color:#fff}

/* #777, #333, #111 — mặc định của theme cha ở dropdown và ô tìm kiếm */
.nav-dropdown,.header-search-form,.live-search-results{color:var(--gc-chu)}
.live-search-results{color:var(--gc-muc)}
.header-search-form input.search-field,
.searchform input[type=search]{color:var(--gc-chu)}

/* #ddd — viền mặc định */
.nav-dropdown.nav-dropdown-default,
.searchform input[type=search],
.header-search-form input.search-field{border-color:var(--gc-vien)}

/* #000 — chữ trong ô nhập của biểu mẫu */
input[type=text],input[type=email],input[type=tel],input[type=number],
input[type=search],textarea,select{color:var(--gc-chu)}

/* #666 — nền xám do trình dựng trang ghi vào ba khối có ảnh nền.
   Gradient và lớp phủ vẽ đè lên nên không lộ ra, nhưng để đúng bảng màu thì
   lúc ảnh nền chưa tải xong người dùng cũng thấy đúng sắc thương hiệu. */
.gc-so-lieu{background-color:var(--gc-ru-900)}

/* #00a0d2 — viền thông báo của biểu mẫu liên hệ */
.wpcf7-response-output{border-color:var(--gc-ru-500)!important;color:var(--gc-chu)}

/* CĂN LỀ: gc-so-lieu dùng .row-small nên lề âm là -10px thay vì -15px, khiến
   khối nội dung rộng 1263px trong khi mọi mục khác là 1270px — lệch 4px mỗi
   bên, đủ để mắt thấy khi cuộn qua. Ép về đúng trục chung. */
.gc-so-lieu .row{margin-left:-15px;margin-right:-15px}
.gc-so-lieu .row > .col{padding-left:15px;padding-right:15px}

/* ── 31. NÚT TÌM KIẾM, CỘT TRÁI FAQ ─────────────────────────────────────────
   Hai chỗ đo được là lệch khỏi bộ nhận diện hoặc lệch về bố cục. */


/* Nút tìm kiếm đang lấy màu phụ của theme là xanh lá, với biểu tượng trắng
   chỉ đạt 2.85:1. Xanh lá trong bộ nhận diện không dùng làm nền cho chữ
   trắng được — đổi sang xanh y tế (11.57:1). */
button.ux-search-submit,
.ux-search-submit.secondary{background-color:var(--gc-ru-600)!important;color:#fff!important}
button.ux-search-submit:hover{background-color:var(--gc-ru-700)!important}

/* Khối FAQ: cột trái chỉ có tiêu đề và một dòng, trong khi cột phải dài bảy
   mục — cuộn tới giữa là bên trái trống hẳn một khoảng lớn. Ghim cột trái lại
   để nó đi theo người đọc thay vì trôi mất, và chừa khoảng bằng chiều cao
   thanh đầu trang dính. */
@media (min-width:850px){
  .gc-faq-khoi .row > .col:first-child > .col-inner{
    position:sticky;top:104px}
}

/* ── 32. NÚT GỌI NỔI: ĐỔI SANG XANH LÁ ──────────────────────────────────────
   Đo trên trang có nền xanh y tế: nút gọi #1C60BA đặt trên nền #1E2227 chỉ
   chênh nhau 1.55:1 — gần như chìm hẳn. Một nút hành động nổi phải đọc được
   trên MỌI nền mà nó bay qua, mà cả site thì chỗ trắng chỗ xanh đậm.
   Xanh lá thương hiệu giải đúng bài này: 6.31:1 với nền 900 và 2.85:1 với
   nền trắng — đủ tách khỏi cả hai. Biểu tượng để màu xanh đậm nhất, đạt
   6.31:1 trên nền lá, thay vì chữ trắng chỉ 2.85:1. */
.gc-lh__nut--goi{background:var(--gc-la-500);color:var(--gc-ru-900);
  box-shadow:0 10px 24px rgba(21,25,31,.34)}
.gc-lh__nut--goi:hover{background:var(--gc-la-400);color:var(--gc-ru-900)}
.gc-lh__nut--goi svg{fill:currentColor}

/* Thẻ ba kênh: thêm viền trắng mảnh để tách khỏi nền xanh đậm, vì viền
   --gc-vien vốn tính cho nền sáng nên đặt trên nền tối thì biến mất. */
.gc-lh__nhom{box-shadow:0 8px 22px rgba(21,25,31,.28),0 0 0 1px rgba(255,255,255,.16)}

/* ===== 33. Trang 404 =====
   Bản của theme cha là tiếng Anh và chỉ có một câu. Trang này phải làm việc:
   ô tìm kiếm trước, rồi sáu nhánh dịch vụ, rồi số điện thoại. */
.gc .gc-404__ma{margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gc-la-500)}
.gc-404{padding:44px 0 72px}
.gc-404__tieu{margin:0 0 16px;font-size:20px;color:var(--gc-muc)}
.gc-404__tim{margin:0 0 40px}
.gc-404__form{display:flex;gap:10px;max-width:640px}
.gc-404__form input[type="search"]{flex:1;min-width:0;height:52px;margin:0;padding:0 16px;
  border:1px solid var(--gc-vien);border-radius:var(--gc-bo);background:#fff;
  font-size:16px;color:var(--gc-chu);box-shadow:none}
.gc-404__form input[type="search"]:focus{border-color:var(--gc-ru-500);outline:none;
  box-shadow:0 0 0 3px rgba(31,122,6,.12)}
.gc-404__form .gc-nut{flex:0 0 auto;min-height:52px;padding:0 26px}
.gc-404__nhanh{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 44px}
.gc-404__the{display:block;padding:18px 20px;background:#fff;border:1px solid var(--gc-vien);
  border-left:3px solid var(--gc-la-500);border-radius:var(--gc-bo);text-decoration:none;
  transition:border-color .2s ease,box-shadow .2s ease}
.gc-404__the:hover{border-color:var(--gc-ru-500);border-left-color:var(--gc-la-500);
  box-shadow:0 6px 18px rgba(21,25,31,.08)}
.gc-404__ten{display:block;font-size:16px;font-weight:700;color:var(--gc-muc)}
.gc-404__mo{display:block;margin-top:6px;font-size:14px;line-height:1.55;color:var(--gc-mo)}
.gc-404__goi{display:flex;align-items:center;justify-content:space-between;gap:28px;
  padding:26px 28px;background:var(--gc-ru-050);border-radius:var(--gc-bo-lon)}
.gc-404__goi p{margin:0;max-width:520px;font-size:16px;line-height:1.65;color:var(--gc-chu)}
.gc-404__goi .gc-404__tieu{margin-bottom:8px}
.gc-404__nut{display:flex;gap:10px;flex:0 0 auto}
.gc-404__them{margin:26px 0 0;font-size:15px;color:var(--gc-mo)}
@media (max-width:849px){
  .gc-404{padding:30px 0 52px}
  .gc-404__nhanh{grid-template-columns:1fr 1fr;gap:12px}
  .gc-404__goi{flex-direction:column;align-items:flex-start;gap:18px;padding:22px 20px}
  .gc-404__nut{width:100%}
  .gc-404__nut .gc-nut{flex:1}
}
@media (max-width:549px){
  .gc-404__nhanh{grid-template-columns:1fr}
  .gc-404__form{flex-direction:column}
  .gc-404__form .gc-nut{width:100%}
}

/* ===== 34. Sơ đồ trang =====
   Trang liệt kê dài, nên ưu tiên quét mắt: cột nhiều, chữ vừa, thụt lề theo cấp. */
.gc-sd{padding:40px 0 72px}
.gc-sd__nhom{margin:0 0 30px}
.gc-sd__nhom--c1{margin:0 0 22px;padding-left:18px;border-left:2px solid var(--gc-vien)}
.gc-sd__nhom--c2{padding-left:16px}
.gc-sd__tieu{display:flex;align-items:baseline;gap:10px;margin:0 0 12px;
  font-size:21px;color:var(--gc-muc)}
.gc-sd__nhom--c1 .gc-sd__tieu{font-size:17px}
.gc-sd__tieu a{color:inherit;text-decoration:none}
.gc-sd__tieu a:hover{color:var(--gc-ru-700);text-decoration:underline}
.gc-sd__so{font-size:13px;font-weight:400;color:var(--gc-mo)}
.gc-sd__ds{margin:0 0 16px;padding:0;list-style:none;
  columns:3;column-gap:28px}
.gc-sd__ds li{margin:0 0 7px;break-inside:avoid;font-size:14.5px;line-height:1.5}
.gc-sd__ds a{color:var(--gc-chu);text-decoration:none}
.gc-sd__ds a:hover{color:var(--gc-ru-700);text-decoration:underline}
.gc-sd__cuoi{margin:34px 0 0;padding:22px 24px;background:var(--gc-ru-050);
  border-radius:var(--gc-bo)}
.gc-sd__cuoi p{margin:0;font-size:16px;color:var(--gc-chu)}
@media (max-width:1099px){ .gc-sd__ds{columns:2} }
@media (max-width:849px){
  .gc-sd{padding:28px 0 52px}
  .gc-sd__ds{columns:1}
  .gc-sd__tieu{font-size:19px}
  .gc-sd__nhom--c1{padding-left:14px}
}
/* Tiêu đề thứ hai trong cùng một cột chân trang cần khoảng thở phía trên. */
.gc-chan__tieu--2{margin-top:22px}

/* ===== 35. Ranh giới thành phần tương tác =====
   Ô nhập, ô chọn và ô tìm kiếm phải tự lộ ra ranh giới: người dùng không nhìn
   thấy khung thì không biết chỗ nào gõ được. --gc-vien (1.35:1) chỉ hợp cho
   viền thẻ trang trí. */
input[type=text],input[type=tel],input[type=email],input[type=search],
input[type=number],input[type=url],select,textarea,
.header-search-form input.search-field,.searchform input[type=search]{
  border:1px solid var(--gc-vien-nhap)}
input[type=text]:focus,input[type=tel]:focus,input[type=email]:focus,
input[type=search]:focus,input[type=number]:focus,input[type=url]:focus,
select:focus,textarea:focus{
  border-color:var(--gc-xd-600);outline:none;
  box-shadow:0 0 0 3px rgba(31,122,6,.16)}
input::placeholder,textarea::placeholder{color:var(--gc-mo);opacity:1}

/* ===== 36. Mega menu: cột đều nhau =====
   Trước đây mỗi cột liệt kê hết mục con nên cột 10 mục cao gấp đôi cột 5 mục,
   lưới nhìn rách. Nay mỗi cột chỉ hiện tối đa 6 mục rồi tới liên kết "+N mục
   khác". Không dùng nút bấm mở rộng: menu này mở bằng rê chuột, vừa bấm để mở
   rộng là con trỏ rời khỏi vùng menu và menu đóng. */
.nav-dropdown .gc-mega__con li.gc-mega__them{margin-top:2px}
.nav-dropdown .gc-mega__con li.gc-mega__them a{
  font-weight:600;color:var(--gc-xd-600)}
.nav-dropdown .gc-mega__con li.gc-mega__them a:hover{
  color:var(--gc-xd-500);background:var(--gc-xd-100)}
/* Ô của mỗi nhánh kéo cao bằng ô cao nhất trong cùng hàng */
.nav-dropdown .gc-mega>.col{display:flex}
.nav-dropdown .gc-mega .col-inner{display:flex;width:100%}
.nav-dropdown .gc-mega__o{display:flex;flex-direction:column;width:100%}
.nav-dropdown .gc-mega__con{flex:1 1 auto}

/* Khối phụ "hợp tác / nhà máy / kiến thức": cùng lưới thẻ nhưng nền nhạt để
   tách khỏi khối ngành hàng phía trên, tránh đọc thành một danh sách chín thẻ. */
.gc-nganh--phu{background:var(--gc-ru-050)}

/* Thẻ trong cùng một hàng cao bằng nhau: mô tả dài ngắn khác nhau làm mép dưới
   so le, và dải chip bị đẩy lệch nhau theo. Kéo giãn phần thân, ghim chip xuống đáy. */
.gc-luoi .col{display:flex}
.gc-luoi .col-inner{display:flex;width:100%}
.gc-luoi .gc-the{display:flex;flex-direction:column;width:100%}
.gc-luoi .gc-the__than{display:flex;flex-direction:column;flex:1 1 auto}
.gc-luoi .gc-the__mo{flex:1 1 auto}
.gc-luoi .gc-the__con{margin-top:auto}

/* ---------------------------------------------------------------------------
 * §37 — Logo tròn ở chân trang
 *
 * Logo là huy hiệu tròn: nửa trên nền xanh thương hiệu, nửa dưới nền trắng.
 * Đặt trên chân trang nền tối thì mép xanh phía trên gần như chìm vào nền,
 * nên thêm một vòng sáng mảnh làm ranh giới. Nền trắng dưới img phòng khi
 * phần trong suốt của PNG không tải được — border-radius cắt nó thành đúng
 * hình tròn nên không lộ góc vuông.
 * ------------------------------------------------------------------------- */
/* Chân trang dùng logo NGANG bản nền tối (chữ trắng), không dùng huy hiệu
   tròn: huy hiệu có vành trắng nên trên nền tối nó hiện thành một đĩa sáng,
   và ở khổ nhỏ thì chữ bên trong không đọc được. */
.gc-chan .gc-chan__logo{margin-bottom:18px;max-width:196px}
/* KHÔNG sơn nền trắng và KHÔNG bo tròn ở đây. Ba luật đó viết cho huy hiệu
   tròn 14049; chân trang nay dùng logo ngang 13966 vốn đã là bản chữ trắng
   cho nền tối. Để nguyên thì cái đĩa trắng đè lên chính chữ trắng của logo —
   trên nền #1E2227 nó hiện thành một hình bầu dục sáng nuốt mất chữ
   "giacong.vn" và cắt cụt dòng "RELENTLESS INNOVATION". */
.gc-chan .gc-chan__logo img{background:none;border-radius:0;box-shadow:none}
@media(max-width:849px){
  .gc-chan .gc-chan__logo{max-width:132px;margin-bottom:16px}
}


/* ---------------------------------------------------------------------------
 * §39 — Mục lục ở đầu bài trên khổ hẹp
 *
 * Dưới 850px cột bên rơi xuống DƯỚI bài, mục lục ở đó không điều hướng được gì
 * nên vẫn giữ luật ẩn ở §…; JS (giacong_muc_luc_bai_viet) dời hẳn khối lên đầu
 * .gc-bai__noi-dung và gắn .gc-muc-luc--dau. Luật dưới đây chỉ áp cho bản đã
 * dời, nên bản nằm ở cột bên không bị ảnh hưởng gì.
 *
 * Thu gọn sẵn thay vì cho cuộn trong khung: mục lục 11–18 dòng mà để cuộn bên
 * trong thì ngón tay kéo trúng khung con và trang đứng im — đúng lỗi đã gặp ở
 * .gc-bai__ben. Vì vậy phải TẮT max-height/overflow mà §25 đặt cho thẻ ol.
 * ------------------------------------------------------------------------- */
@media (max-width:849px){
  .gc-muc-luc.gc-muc-luc--dau{display:block;margin:0 0 26px;padding:0;
    border-radius:var(--gc-bo-lon);overflow:hidden}

  .gc-muc-luc--dau .gc-muc-luc__tieu{display:flex;align-items:center;gap:10px;
    margin:0;padding:15px 18px;cursor:pointer;background:var(--gc-ru-050);
    border-bottom:1px solid var(--gc-vien);color:var(--gc-muc)}
  .gc-muc-luc--dau .gc-muc-luc__dem{margin-left:auto;font-size:12.5px;
    font-weight:400;letter-spacing:0;text-transform:none;color:var(--gc-mo)}
  .gc-muc-luc--dau .gc-muc-luc__caret{flex:0 0 auto;width:10px;height:10px;
    border-right:2px solid var(--gc-ru-500);border-bottom:2px solid var(--gc-ru-500);
    transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease}
  .gc-muc-luc--dau.gc-muc-luc--gon .gc-muc-luc__caret{
    transform:rotate(-135deg) translate(-3px,-3px)}
  .gc-muc-luc--dau .gc-muc-luc__tieu:focus-visible{outline:2px solid var(--gc-ru-600);
    outline-offset:-2px}

  /* Tắt khung cuộn của §25 — xem giải thích ở đầu mục */
  .gc-muc-luc--dau ol{max-height:none;overflow:visible;padding:6px 8px 10px}
  .gc-muc-luc--dau.gc-muc-luc--gon ol{display:none}

  /* Vùng bấm đủ rộng cho ngón tay: 44px chiều cao tối thiểu */
  .gc-muc-luc--dau a{padding:11px 12px 11px 40px;min-height:44px;
    border-left:0;border-radius:9px;color:var(--gc-chu)}
  .gc-muc-luc--dau a:before{left:12px;top:11px;color:var(--gc-mo)}
  .gc-muc-luc--dau a:active{background:var(--gc-ru-050)}
  .gc-muc-luc--dau li.dang-doc a{padding-left:40px;color:var(--gc-xd-600);
    background:rgba(131,216,62,.14);box-shadow:inset 3px 0 0 var(--gc-la-500)}
  .gc-muc-luc--dau li.dang-doc a:before{color:var(--gc-xd-600)}
}

/* ---------------------------------------------------------------------------
 * §40 — Trải nghiệm người dùng: bảy chỗ đo được là chưa đạt
 *
 * Đo trên trang chủ, trang chuyên mục và trang bài, ở 375px và 1440px.
 * ------------------------------------------------------------------------- */

/* 1. Ô nhập dưới 16px làm iOS Safari TỰ PHÓNG TO trang khi chạm vào ô — trang
      nhảy, người dùng phải tự thu lại. Cả 9 ô của biểu mẫu đang ở 15px.
      16px là ngưỡng chính xác mà iOS dùng, không phải con số ước lượng. */
.gc input[type="text"], .gc input[type="email"], .gc input[type="tel"],
.gc input[type="number"], .gc input[type="search"], .gc input[type="url"],
.gc textarea, .gc select,
.wpcf7-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7-form textarea, .wpcf7-form select{font-size:16px}

}

@media (max-width:849px){
  /* 3. Chip chuyên mục con trong thẻ ngành đang cao 36px — dưới ngưỡng 44px
        mà cả Apple lẫn Google khuyến nghị cho vùng chạm. */
  .gc-nganh .gc-the__con a{min-height:44px;padding:6px 14px;font-size:12.5px}
  .gc-nganh .gc-the__con{gap:8px}

  /* 4. Mô tả thẻ ngành 13.5px là chữ thân bài chứ không phải nhãn phụ — đây là
        nội dung chính của khối lớn nhất trang chủ. */
  .gc-nganh .gc-the__mo{font-size:15px;line-height:1.55}
}

/* 5. Ô tìm kiếm trong ngăn kéo điện thoại cao 33px. */
.mfp-content .searchform input[type="search"],
.mfp-content .search-field,
.off-canvas .search-field{min-height:44px;font-size:16px}

/* 6. Nút đóng ngăn kéo cao 39px. */
.mfp-close{min-width:44px;min-height:44px;display:flex;
  align-items:center;justify-content:center}

/* 7. Ô nhập ở mọi nơi khác trong ngăn kéo cũng phải đủ cao để chạm. */
.mfp-content input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.mfp-content select{min-height:44px}

/* Nhảy tới neo trong trang: header dính cao 118px trên điện thoại và 62px khi
   đã cuộn, nên nếu không chừa lề thì tiêu đề đích nằm khuất ngay dưới header
   và người dùng tưởng nút không chạy. */
:target,
[id]{scroll-margin-top:96px}
@media (max-width:849px){
  [id]{scroll-margin-top:130px}
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}
/* Phần tử neo rỗng — chỉ để nhảy tới, không chiếm chỗ trong bố cục */
.gc-neo{display:block;height:0;overflow:hidden}

/* Màu nền dự phòng cho các dải nền tối.
   Flatsome đặt background-color:#666 cho .dark. Ở hero, dải chuyển màu than
   chì vẽ đè lên nên mắt thường không thấy — nhưng #666 vẫn là màu nằm dưới:
   nếu dải chuyển màu không dựng được thì chữ #DBE1E8 rơi xuống nền xám và chỉ
   còn 4.08:1, dưới ngưỡng 4.5. Đặt màu dự phòng khớp với đầu tối của dải. */
/* .gc-keu-goi đã tách khỏi nhóm này: nền của nó do §46 quyết theo biến thể
   (bản đầy đủ nền sáng, bản hẹp nền xanh), không còn là navy. */
.section.gc.dark,
.gc-vi-sao,
.gc-so-lieu{background-color:var(--gc-ru-900)}
.gc-hero{background-image:none;background-color:#fff}

/* ---------------------------------------------------------------------------
 * §41 — Căn lề thân bài về một trục
 *
 * Đo ở 1440px trước khi sửa: cột bài rộng 852px nhưng các phần tử kết thúc ở
 * ba mép phải khác nhau — chữ 820, danh sách 841, ảnh và bảng 952 — và bắt đầu
 * ở hai mép trái, 100 và 121. Ba mép phải trong một cột đọc ra như lỗi dựng
 * trang chứ không như chủ ý.
 *
 * Quy về MỘT mép trái và MỘT mép phải: chữ chạy hết bề rộng cột đúng bằng ảnh
 * và bảng. Đã thử bó chữ ở 720px cho dòng ngắn lại (92 → 77 ký tự) nhưng chủ
 * site thấy khoảng trống bên phải đọc như lỗi dựng trang, nên bỏ.
 * ------------------------------------------------------------------------- */

/* Danh sách đang lấy margin-left để thụt đầu dòng, khiến cả HỘP dịch sang phải
   21px nên mép phải lệch theo. Chuyển sang padding: hộp giữ nguyên mép, chỉ
   dấu đầu dòng thụt vào. */
.gc-bai__noi-dung ul,
.gc-bai__noi-dung ol,
.gc-chuyen-sau__noi ul,
.gc-chuyen-sau__noi ol{margin-left:0;padding-left:1.25em}

}

/* ---------------------------------------------------------------------------
 * §42 — Hàng chip trong thẻ ngành: giữ đúng MỘT hàng
 *
 * Chip được ghim đáy thẻ (margin-top:auto) nên khi mọi thẻ cùng một hàng chip
 * thì dải chip nằm thẳng nhau. Nhưng đo được: thẻ "Nhà máy" xuống 2 hàng, thẻ
 * "Mỹ phẩm" xuống tận 3 hàng vì nhãn dài hơn bề rộng thẻ (349px lọt lòng) —
 * dải chip mỗi thẻ bắt đầu ở một độ cao khác nhau, nhìn ra lệch.
 *
 * Đã rút nhãn bỏ phần tiêu đề thẻ nói rồi (tên chuyên mục thật giữ nguyên).
 * Thu thêm đệm ngang trên desktop để ba chip vừa đúng một hàng. Trên điện
 * thoại giữ nguyên 44px chiều cao vùng chạm — ở đó thẻ xếp dọc nên chip xuống
 * hàng không gây lệch.
 * ------------------------------------------------------------------------- */
@media (min-width:850px){
  .gc-nganh .gc-the__con{gap:5px}
  .gc-nganh .gc-the__con a{padding:5px 10px}
}

/* Rút nhãn chưa đủ: vẫn còn thẻ xuống 2 hàng chip vì tên chuyên mục vốn dài.
   Cách chắc chắn là để MỌI thẻ dành sẵn đúng chiều cao 2 hàng, rồi xếp chip từ
   trên xuống trong khoảng đó — thẻ 1 hàng và thẻ 2 hàng khi ấy cùng bắt đầu ở
   một độ cao, dải chip thẳng hàng ngang qua cả lưới.
   36px chiều cao chip + 6px khoảng cách = 78px. */
@media (min-width:850px){
  .gc-nganh .gc-the__con{min-height:78px;align-content:flex-start}
}

/* ---------------------------------------------------------------------------
 * §43 — Khối gọi nhanh ngay sau đoạn mở bài
 *
 * Đặt ở đầu bài chứ không cuối vì phần lớn người đọc không xuống hết. Trước đó
 * nút gọi duy nhất nằm ở cột bên, mà cột bên bị ẩn dưới 850px — trên điện
 * thoại trong bài không có nút nào.
 *
 * Giữ khối thấp và một hàng ở desktop để không cắt mạch đọc; xuống hai hàng ở
 * khổ hẹp. Không dùng nền tối hay viền dày: đây là lời mời, không phải quảng
 * cáo chen ngang.
 * ------------------------------------------------------------------------- */
.gc-goi-nhanh{display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  margin:26px 0 30px;padding:20px 22px;
  background:var(--gc-ru-050);border:1px solid var(--gc-vien);
  border-left:4px solid var(--gc-la-500);border-radius:var(--gc-bo-lon)}
.gc-goi-nhanh__chu{flex:1 1 300px;min-width:0}
.gc-goi-nhanh__nhan{margin:0 0 4px;font-size:16.5px;font-weight:700;
  line-height:1.35;color:var(--gc-muc)}
.gc-goi-nhanh__mo{margin:0;font-size:14.5px;line-height:1.55;color:var(--gc-mo)}
.gc-goi-nhanh__nut{flex:0 0 auto;display:flex;gap:10px;flex-wrap:wrap}
.gc-goi-nhanh__goi,
.gc-goi-nhanh__bao-gia{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:0 20px;border-radius:999px;
  font-size:15.5px;font-weight:600;text-decoration:none;white-space:nowrap;
  transition:background .16s ease,border-color .16s ease}
/* Luật màu link thân bài (.single-post .entry-content a:not(.button):not(.gc-nut))
   có độ cụ thể (0,4,1) nên nuốt màu chữ của nút: chữ ra #124E9D trên nền xanh
   đậm, đo được 2.04:1 — nút nhìn như bị chìm. Đã thêm nút vào chính danh sách
   :not() của luật đó thay vì chồng thêm độ cụ thể ở đây. */
.gc-goi-nhanh__goi{background:var(--gc-xd-600);color:#fff}
.gc-goi-nhanh__goi:hover,.gc-goi-nhanh__goi:focus-visible{background:var(--gc-xd-700);color:#fff}
.gc-goi-nhanh__bao-gia{color:var(--gc-ru-800)}
.gc-goi-nhanh__bao-gia:hover{color:var(--gc-ru-900)}
.gc-goi-nhanh__goi svg{flex:0 0 auto}
/* Nút chính là hành động muốn người đọc làm — cho nó nổi khỏi nền khối bằng
   một bóng nhẹ, không phải bằng màu sáng hơn (xanh sáng #83D83E chỉ đạt
   2.85:1 với chữ trắng nên không dùng làm nền nút được). */
.gc-goi-nhanh .gc-goi-nhanh__goi{box-shadow:0 2px 10px rgba(31,122,6,.28);font-weight:700}
.gc-goi-nhanh .gc-goi-nhanh__goi:hover{box-shadow:0 4px 14px rgba(31,122,6,.36)}
.gc-goi-nhanh__bao-gia{background:#fff;color:var(--gc-ru-800);
  border:1px solid var(--gc-vien-nhap)}
.gc-goi-nhanh__bao-gia:hover,.gc-goi-nhanh__bao-gia:focus-visible{
  border-color:var(--gc-ru-600);color:var(--gc-ru-900)}
.gc-goi-nhanh a:focus-visible{outline:2px solid var(--gc-ru-600);outline-offset:2px}

@media (max-width:849px){
  .gc-goi-nhanh{gap:16px;padding:18px;margin:22px 0 26px}
  .gc-goi-nhanh__nut{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .gc-goi-nhanh__goi,.gc-goi-nhanh__bao-gia{padding:0 12px;font-size:14.5px}
}
@media (max-width:399px){
  .gc-goi-nhanh__nut{grid-template-columns:1fr}
}

/* ═══ 44. Khối kiến thức tách khỏi lưới dịch vụ ═══
   Cố ý KHÔNG dùng thẻ ảnh như lưới dịch vụ: hai khối cùng kiểu thẻ thì mắt
   đọc thành một danh sách dài, đúng cái đang muốn tách. Đây là danh sách
   chữ, nhẹ hơn về thị giác, đọc rõ là phần đọc thêm. */
.gc-ds-kt{padding:2.5rem 0 3rem}
.gc-ds-kt__mo{max-width:62ch;margin:.35rem 0 1.4rem;color:var(--gc-mo);font-size:.95rem;line-height:1.65}
.gc-ds-kt__ds{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.gc-ds-kt__muc{margin:0}
.gc-ds-kt__muc>a{display:block;min-height:44px;padding:.85rem 1rem;
  border:1px solid var(--gc-vien);border-left:3px solid var(--gc-la-500);
  border-radius:var(--gc-bo-lon);background:#fff;text-decoration:none;
  transition:border-color .15s ease,background .15s ease}
.gc-ds-kt__muc>a:hover,.gc-ds-kt__muc>a:focus-visible{background:var(--gc-nen);border-color:var(--gc-la-500)}
.gc-ds-kt__ten{display:block;color:var(--gc-chu);font-weight:600;line-height:1.4}
.gc-ds-kt__tom{display:block;margin-top:.25rem;color:var(--gc-mo);font-size:.88rem;line-height:1.55}
@media (max-width:549px){
  .gc-ds-kt__ds{grid-template-columns:1fr}
}

/* ═══ 45. Dòng dẫn silo (con → cha) ═══
   Đứng đầu thân bài nhánh, nói trang này nằm ở đâu trong nhóm. Cố ý nhẹ hơn
   chữ thân bài: đây là chỉ đường, không phải nội dung chính — nhưng vẫn phải
   đạt tương phản đọc được, nên dùng --gc-mo chứ không hạ thêm. */
.gc-chuyen-sau__noi > .gc-dan-silo{
  margin:0 0 1.4em;padding:.85rem 1.1rem;
  border-left:3px solid var(--gc-la-500);border-radius:0 var(--gc-bo-lon) var(--gc-bo-lon) 0;
  background:var(--gc-nen);color:var(--gc-mo);font-size:.95rem;line-height:1.7}
.gc-chuyen-sau__noi > .gc-dan-silo a{color:var(--gc-ru-700);font-weight:600}

/* ═══ 46. Khối kêu gọi ═══
   Có HAI biến thể, và chúng cần hai cách xử lý khác hẳn nhau:

   · Bản đầy đủ ở trang chủ cao hơn 1600px vì nó chứa cả biểu mẫu báo giá,
     hotline, email và hai địa chỉ. Phủ kín ngần ấy diện tích bằng một màu bão
     hoà thì nặng và làm ô nhập khó đọc. Bản này để NỀN SÁNG, biểu mẫu là thẻ
     trắng nổi lên trên.
   · Bản hẹp (.gc-keu-goi--hep) ở cuối các trang trong chỉ cao vài trăm px —
     đúng khổ để làm một khoảnh khắc màu thương hiệu. Bản này giữ NỀN XANH.

   Xanh dương làm nền chỉ hợp khi mảng đủ nhỏ; càng lớn càng phải nhạt đi. */

/* ---- bản đầy đủ: nền sáng ---- */
.gc-keu-goi:not(.gc-keu-goi--hep),
section.gc-keu-goi:not(.gc-keu-goi--hep){background-color:var(--gc-ru-050)!important}
.gc-keu-goi:not(.gc-keu-goi--hep) .gc-h2,
.gc-keu-goi:not(.gc-keu-goi--hep) h2,
.gc-keu-goi:not(.gc-keu-goi--hep) h3{color:var(--gc-muc)}
.gc-keu-goi:not(.gc-keu-goi--hep) .gc-nhan{color:var(--gc-xd-600)}
.gc-keu-goi:not(.gc-keu-goi--hep) .gc-dan,
.gc-keu-goi:not(.gc-keu-goi--hep) p,
.gc-keu-goi:not(.gc-keu-goi--hep) li{color:var(--gc-mo)}
.gc-keu-goi:not(.gc-keu-goi--hep) b,
.gc-keu-goi:not(.gc-keu-goi--hep) strong{color:var(--gc-muc)}
.gc-keu-goi:not(.gc-keu-goi--hep) .gc-kg__lh a,
.gc-keu-goi:not(.gc-keu-goi--hep) a:not(.gc-nut){color:var(--gc-xd-600)}
.gc-keu-goi:not(.gc-keu-goi--hep) .gc-kg__lh a:hover{text-decoration:underline}

/* Thẻ biểu mẫu: trên nền sáng phải có viền và bóng, nếu không nó chìm vào nền */
.gc-keu-goi:not(.gc-keu-goi--hep) .gc-kg__hop{
  background:#fff;border:1px solid var(--gc-vien);box-shadow:var(--gc-bong)}
.gc-keu-goi:not(.gc-keu-goi--hep) .gc-kg__hop h3{color:var(--gc-muc)}
.gc-keu-goi:not(.gc-keu-goi--hep) .gc-kg__hop p{color:var(--gc-mo)}

/* ---- bản hẹp ở trang trong: giữ nền xanh, nút xanh lá ---- */
.gc-keu-goi--hep,
section.gc-keu-goi--hep{background-color:var(--gc-xd-600)!important;background-image:none}
.gc-keu-goi--hep .gc-h2,
.gc-keu-goi--hep h2,.gc-keu-goi--hep h3{color:#fff}
.gc-keu-goi--hep .gc-dan,.gc-keu-goi--hep p{color:var(--gc-ru-150)}
.gc-keu-goi--hep .gc-kg__lh a{color:#fff}
.gc-keu-goi--hep .gc-kg__lh a:hover{color:var(--gc-la-400);text-decoration:underline}

/* Nút xanh lá chỉ dùng TRÊN nền xanh dương — chỗ duy nhất xanh lá đủ nổi để
   làm nền nút, và chữ trên nó phải là navy (9.45:1), không phải trắng. */
.gc-keu-goi--hep .gc-nut--chinh,
.gc-keu-goi--hep a.gc-nut--chinh{background:var(--gc-la-500);color:var(--gc-ru-900)}
.gc-keu-goi--hep .gc-nut--chinh:hover,
.gc-keu-goi--hep a.gc-nut--chinh:hover{background:var(--gc-la-400);color:var(--gc-ru-900)}
.gc-keu-goi--hep .gc-nut--vien,
.gc-keu-goi--hep a.gc-nut--vien{border-color:#fff;color:#fff;background:transparent}
.gc-keu-goi--hep .gc-nut--vien:hover,
.gc-keu-goi--hep a.gc-nut--vien:hover{background:#fff;color:var(--gc-xd-600)}

/* ═══ 47. Header nền trắng ═══
   Brief: header trắng, xanh dương làm màu hành động. Đảo lại toàn bộ giả định
   cũ (header navy, chữ trắng) nên phải ghi đè cả lớp nav-dark của Flatsome —
   lớp đó ép mọi liên kết trong header thành trắng, trên nền trắng là mất chữ.

   Dải #top-bar giữ navy: một vạch tối mỏng phía trên neo cả trang và giữ chỗ
   cho dòng "Nhận gia công toàn quốc" mà không cần thêm màu thứ ba. */
.header-main{background-color:#fff;border-bottom:1px solid var(--gc-vien)}

.header-main .nav>li>a,
.header-main.nav-dark .nav>li>a,
.header-main .nav>li>a .gc-nav-icon{color:var(--gc-muc)}
.header-main .nav>li>a:hover,
.header-main.nav-dark .nav>li>a:hover,
.header-main .nav>li.current-menu-item>a,
.header-main .nav>li.current-menu-ancestor>a{color:var(--gc-xd-600)}
.header-main .nav>li>a:after{background:var(--gc-xd-600)}

/* Biểu tượng tìm kiếm và nút mở menu — Flatsome tô trắng qua nav-dark */
.header-main .nav .icon-search,
.header-main .nav .icon-menu,
.header-main a.icon,
.header-main.nav-dark a.icon,
.header-main .header-button a.button.icon{color:var(--gc-muc)}
.header-main a.icon:hover{color:var(--gc-xd-600)}

/* Nút hành động trong header: đặc, xanh dương, chữ trắng */
.header a.gc-hd-nut{background:var(--gc-xd-600);color:#fff;border-color:var(--gc-xd-600)}
.header a.gc-hd-nut:hover{background:var(--gc-xd-700);color:#fff}

/* Viên xanh lá — điểm nhấn 10% duy nhất trong header. Nền lá, chữ navy:
   8.39:1. Không đảo lại thành chữ trắng, xanh lá với trắng chỉ 1.70:1. */
.header .nav li.gc-nav-cta>a{background:var(--gc-la-500);color:var(--gc-ru-900)!important}
.header .nav li.gc-nav-cta>a:hover{background:var(--gc-la-600);color:var(--gc-ru-900)!important}

/* Bóng khi dính trên đầu: nhẹ hơn hẳn bản nền tối, nếu không viền đen quanh
   header trắng trông như hộp thoại nổi. */
.stuck .header-main{box-shadow:0 4px 16px rgba(30,34,39,.10)}

/* Menu điện thoại: nền trắng nên chữ phải đổi theo */
.mfp-content .mobile-sidebar,
.off-canvas-left .mfp-content{background:#fff}

/* ═══ 48. Sửa nốt các cặp màu chưa đạt và vòng lấy nét trên nền tối ═══ */

/* Liên hệ trong khối kêu gọi: bậc --gc-ru-200 chỉ đạt 4.30:1 trên nền xanh
   dương. Đây là số điện thoại và email — thứ người đọc phải nhìn ra ngay —
   nên cho hẳn màu trắng (6.78:1) chứ không nhích lên một bậc cho đủ điểm. */
.gc-keu-goi .gc-kg__lh a{color:#fff}
.gc-keu-goi .gc-kg__lh a:hover{color:var(--gc-la-400);text-decoration:underline}

/* Vòng lấy nét: mặc định của trình duyệt là viền xanh dương, trên nền navy và
   nền xanh dương thì gần như không thấy. Người dùng bàn phím mất dấu con trỏ.
   Trên nền tối đổi sang xanh lá — 9.45:1 trên navy, 4.12:1 trên xanh dương. */
.gc a:focus-visible,
.gc button:focus-visible,
.gc input:focus-visible,
.gc textarea:focus-visible,
.gc select:focus-visible{outline:3px solid var(--gc-xd-600);outline-offset:2px;border-radius:3px}

.gc-hero a:focus-visible,.gc-hero button:focus-visible,
.gc-keu-goi a:focus-visible,.gc-keu-goi button:focus-visible,
.gc-vi-sao a:focus-visible,.gc-so-lieu a:focus-visible,
.gc-tieu-de-trang a:focus-visible,
.gc-chan a:focus-visible,.gc-chan button:focus-visible,
.gc-lh-form a:focus-visible,.gc-lh-form button:focus-visible,
.gc-gt-tam-nhin a:focus-visible,
.header-main a:focus-visible{outline-color:var(--gc-la-500)}

/* ═══ 49. Sửa sau khi kiểm trên nhiều khổ màn hình ═══ */

/* 1. Khối gọi điện trong header — chữ TRẮNG còn sót từ thời header nền tối.
      Trên header trắng nó vô hình hoàn toàn: số điện thoại, thứ đáng giá nhất
      ở đầu trang, biến mất ở khổ desktop. Không có cảnh báo nào, chỉ lộ khi đo. */
.gc-hd-goi__nhan{color:var(--gc-mo)}
.gc-hd-goi__so{color:var(--gc-muc)}
.gc-hd-goi:hover .gc-hd-goi__so,
.gc-hd-goi:focus-visible .gc-hd-goi__so{color:var(--gc-xd-600)}

/* 2. Liên kết "bỏ qua tới nội dung" giữ nguyên 1×1 kể cả khi được lấy nét —
      người dùng bàn phím không thấy nó ở đâu nên không dùng được. Phải hiện
      thành một nút thật khi nhận nét. */
/* Flatsome giấu phần tử bằng clip:rect(1px,1px,1px,1px) — thuộc tính này chỉ
   cắt phần VẼ RA, không đổi hộp bố cục, nên đặt lại width/height là chưa đủ:
   phải gỡ luôn clip, nếu không nút vẫn vô hình dù đã to ra. Đây là luật tiện
   ích cho người dùng bàn phím, dùng !important ở đây là đúng chỗ. */
a.skip-link:focus,
a.skip-link:focus-visible,
.screen-reader-text.skip-link:focus{
  clip:auto!important;clip-path:none!important;
  left:12px!important;top:12px!important;z-index:100000;
  width:auto!important;height:auto!important;overflow:visible!important;
  padding:12px 20px;border-radius:var(--gc-bo);
  background:var(--gc-xd-600);color:#fff;font-size:15px;font-weight:600;
  line-height:1.3;text-decoration:none;box-shadow:var(--gc-bong-cao);
  outline:3px solid var(--gc-la-500);outline-offset:2px}

/* 3. Ô tìm kiếm ở header 15.5px — dưới 16px thì iOS TỰ PHÓNG cả trang khi
      chạm vào ô, người dùng phải chụm tay thu lại. Ô trong ngăn kéo đã 16px
      từ trước, ô ở header thì sót. */
.header-search-form input.search-field,
.searchform input[type=search],
.header input.search-field{font-size:16px}

/* 4. Biểu tượng tìm kiếm ở thanh điện thoại rộng 29px — dưới ngưỡng 44px.
      Luật cũ chỉ nhắm .header li.header-search, không phủ .mobile-nav. */
.mobile-nav li.nav-icon>a,
.mobile-nav a.is-small,
.header .mobile-nav a.icon{min-width:44px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center}

/* 5. Ô đánh dấu đồng ý trong biểu mẫu liên hệ chỉ 20×20 — dưới cả mức tối
      thiểu 24px của WCAG 2.5.8. Nới vùng chạm bằng phần đệm của nhãn thay vì
      phóng to ô, để hình thức không đổi. */
.wpcf7-acceptance .wpcf7-list-item{margin:0}
.wpcf7-acceptance .wpcf7-list-item label{
  display:flex;align-items:flex-start;gap:10px;min-height:44px;
  padding:10px 0;cursor:pointer}
.wpcf7-acceptance input[type=checkbox]{
  width:22px;height:22px;margin-top:2px;flex:0 0 22px;accent-color:var(--gc-xd-600)}

/* 6. Chip chuyên mục con: luật 44px cũ nằm trong @media nhưng bị luật sau đó
      ghi đè lại 36px. Neo theo thiết bị CHẠM chứ không theo bề ngang màn hình
      — máy tính bảng ngang 1024px vẫn là ngón tay. */
@media (hover:none),(pointer:coarse){
  .gc-nganh .gc-the__con a,
  .gc-luoi .gc-the__con a{min-height:44px;padding:8px 14px}
}

/* ═══ 50. Đưa xanh lá trở lại đúng vai của nó ═══
   Đo trên trang chủ: xanh lá — màu thứ hai của logo — chỉ xuất hiện ĐÚNG MỘT
   chỗ (nút gọi nổi). Nhận diện mất một nửa, trang đọc ra "xanh dương đơn sắc".
   Brief đã chỉ rõ chỗ dùng: tick, số liệu, badge, icon nhỏ. Ba luật dưới đây
   phủ đúng ba chỗ đó, KHÔNG đổi mã màu nào và không mở rộng ra mảng nền.

   RÀNG BUỘC BẤT DI: #83D83E chỉ 1.65:1 với trắng. Nên trên nền sáng xanh lá
   chỉ được làm HÌNH (chấm, tick, gạch), không bao giờ làm CHỮ. Chỉ trên navy
   nó mới đủ tương phản để làm chữ (9.45:1). */

/* 1. Số liệu — đúng chữ "số liệu" trong brief. Con số nằm trên navy nên xanh lá
      làm chữ được; nhãn dưới giữ trắng mờ để con số nổi lên một mình. */
.gc-so-lieu .gc-sl b{color:var(--gc-la-500)}

/* 2. Cam kết — bốn lời hứa ngay dưới hero, hiện chỉ là chữ đậm + chữ thường.
      Thêm dấu tick: người đọc lướt sẽ thấy ngay đây là danh sách cam kết.
      Tick gắn vào chính dòng tiêu đề, KHÔNG định vị tuyệt đối — khối này có
      sẵn padding và đường kẻ dọc giữa các mục, đổi theo ba mức màn hình; đặt
      tuyệt đối sẽ đè lên đường kẻ ở ít nhất một mức. */
.gc-cam-ket .gc-ck b{display:flex;align-items:flex-start;gap:10px}
.gc-cam-ket .gc-ck b:before{content:"";flex:0 0 23px;height:23px;margin-top:-1px;
  border-radius:50%;
  background:var(--gc-la-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%230B2444' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px 13px no-repeat}

/* 3. Chip chứng nhận trong hero — chấm xanh lá nhỏ, đủ để bốn chip đọc ra là
      "đã đạt" chứ không phải bốn nhãn trung tính. */
.gc-hero .gc-hero__cn li{display:inline-flex;align-items:center;gap:8px}
.gc-hero .gc-hero__cn li:before{content:"";flex:0 0 9px;
  width:9px;height:9px;border-radius:50%;background:var(--gc-la-500)}

/* ═══ 51. Chân trang dựng lại ═══
   Bố cục cũ là 4 cột 4/2/3/3, trong đó cột 2-span gánh 12 liên kết chia làm
   hai nhóm — cột đó cao gấp ba cột bên cạnh, và tiêu đề nhóm thứ hai trôi lửng
   giữa danh sách nên đọc như lỗi. Nay 4 cột đều nhau, mỗi cột một chủ đề, và
   nhóm chính sách xuống dải đáy — đúng thứ tự ưu tiên: điều hướng trước,
   pháp lý sau. */

.gc-chan .gc-chan__ds a{padding:5px 0}
.gc-chan .gc-chan__tieu--2{margin-top:26px}

/* Cột liên hệ: địa chỉ nhà máy dài, cần chỗ thở để không dính mép phải */
.gc-chan .gc-chan__lh{padding-right:12px}
.gc-chan .gc-chan__lh li{margin-bottom:13px}

/* ---- Dải đáy: chính sách + dòng pháp nhân ---- */
.gc-chan .gc-chan__day{margin-top:38px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.13)}
.gc-chan .gc-chan__cs{display:flex;flex-wrap:wrap;gap:6px 22px;
  margin:0 0 12px;padding:0;list-style:none}
.gc-chan .gc-chan__cs li{margin:0}
.gc-chan .gc-chan__cs a{display:inline-flex;align-items:center;min-height:32px;
  font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.72);text-decoration:none}
.gc-chan .gc-chan__cs a:hover{color:#fff;text-decoration:underline}
.gc-chan .gc-chan__bq{margin:0;font-size:13px;line-height:1.6;color:rgba(255,255,255,.58)}
/* Khối thông tin pháp nhân. Ba dòng ngắn dễ đọc hơn một đoạn dài — người ta
   chỉ liếc xuống đây để tìm ĐÚNG một thứ (mã số thuế, địa chỉ hay số điện
   thoại), chứ không đọc cả đoạn. */
.gc-chan .gc-chan__dn{display:flex;flex-direction:column;gap:5px;max-width:82ch}
.gc-chan .gc-chan__dn-ten{margin:0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.86)}
.gc-chan .gc-chan__dn-ten strong{color:#fff}
.gc-chan .gc-chan__dn-ct{margin:0;font-size:12.5px;line-height:1.65;color:rgba(255,255,255,.56)}
.gc-chan .gc-chan__dn-ct b{font-weight:700;color:rgba(255,255,255,.78)}
.gc-chan .gc-chan__dn-ct a{color:rgba(255,255,255,.78);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.26)}
.gc-chan .gc-chan__dn-ct a:hover,.gc-chan .gc-chan__dn-ct a:focus-visible{color:#fff;
  border-bottom-color:#fff}
.gc-chan .gc-chan__dn .gc-chan__bq{margin-top:5px;font-size:12.5px;color:rgba(255,255,255,.44)}

@media (hover:none),(pointer:coarse){
  .gc-chan .gc-chan__cs a{min-height:44px}
  .gc-chan .gc-chan__cs{gap:0 20px}
}
@media (max-width:849px){
  .gc-chan .gc-chan__day{margin-top:28px}
  .gc-chan .gc-chan__lh{padding-right:0}
}

/* ─────────────────────────────────────────────────────────────────────────
 * §52 — Trang giới thiệu: mục lục nhóm ngành
 *
 * /gioi-thieu-ve-gia-cong/ nhận 75 liên kết vào mà chỉ trỏ ra ĐÚNG MỘT chỗ.
 * Đó là ngõ cụt: uy tín gom về đây rồi nằm lại, không chảy sang trang dịch vụ
 * nào cả. Khối này là lối ra.
 *
 * Cố tình KHÔNG dùng lại lưới thẻ có ảnh của trang chủ (.gc-nganh) — trang
 * giới thiệu là trang chữ, đọc từ trên xuống; một mục lục gạch chân hợp với
 * nhịp đó hơn là bảy thẻ ảnh nữa.
 * ───────────────────────────────────────────────────────────────────────── */
.gc-gt-muc-luc{background:var(--gc-ru-050)}
.gc-gt-ml{margin:0;padding:0;list-style:none;
  border-top:1px solid var(--gc-vien);
  column-gap:44px}
@media (min-width:850px){.gc-gt-ml{columns:2}}
.gc-gt-ml li{margin:0;padding:15px 0 16px;border-bottom:1px solid var(--gc-vien);
  break-inside:avoid}
.gc-gt-ml a{display:inline-block;font-size:17px;font-weight:700;line-height:1.35;
  color:var(--gc-muc);text-decoration:none;
  text-decoration:underline;text-decoration-color:transparent;
  text-underline-offset:4px;transition:text-decoration-color .16s ease,color .16s ease}
.gc-gt-ml a:hover,.gc-gt-ml a:focus-visible{color:var(--gc-ru-700);
  text-decoration-color:currentColor}
.gc-gt-ml p{margin:4px 0 0;font-size:14.5px;line-height:1.6;color:var(--gc-mo)}
.gc-gt-muc-luc .gc-dan--cuoi{margin:26px 0 0;font-size:15px;color:var(--gc-mo)}
.gc-gt-muc-luc .gc-dan--cuoi a{color:var(--gc-ru-700);font-weight:600}
@media (max-width:549px){
  .gc-gt-ml li{padding:13px 0 14px}
  .gc-gt-ml a{font-size:16px}
}

/* ─────────────────────────────────────────────────────────────────────────
 * §53 — Bỏ thanh đáy mặc định của Flatsome
 *
 * Flatsome in .absolute-footer với dòng bản quyền riêng của nó, ngay dưới
 * khối chân trang mình dựng — thành hai dòng bản quyền chồng nhau, dòng dưới
 * còn ghi "Một sản phẩm thuộc Netholding".
 *
 * Đã xoá chữ ở footer_left_text/footer_right_text, nhưng cái <div> rỗng vẫn
 * giữ nguyên padding và đường kẻ trên — đó chính là khoảng trống lớn giữa hai
 * dòng. Phải giấu cả hộp, không chỉ xoá chữ.
 *
 * .gc-chan__day mới là dòng bản quyền thật: nó mang thêm 9 liên kết chính sách.
 * ───────────────────────────────────────────────────────────────────────── */
.absolute-footer{display:none}

/* ─────────────────────────────────────────────────────────────────────────
 * §54 — Khối kêu gọi bản đầy đủ: chữ phải đi theo nền
 *
 * Các section này khai `dark="true"` trong UX Builder từ thời khối còn nền
 * navy. §46 sau đó đổi bản đầy đủ sang NỀN SÁNG bằng `!important`, nhưng chữ
 * thì không: lớp `.dark` vẫn còn trên section nên §4 sơn chữ bằng --gc-ru-150.
 * Kết quả đo được trên /gioi-thieu-ve-gia-cong/: #DBE1E8 trên #F7F9FB —
 * 1.25:1, gần như vô hình. Nền đổi mà chữ không đổi theo là lỗi nửa vời tệ
 * hơn cả hai bản thuần.
 *
 * Viết kèm `.dark` để chắc chắn thắng `.gc.dark .gc-nhan` — cùng cách §46 đã
 * phải dùng `!important` cho nền.
 * ───────────────────────────────────────────────────────────────────────── */
.gc-keu-goi:not(.gc-keu-goi--hep).dark .gc-h2,
.gc-keu-goi:not(.gc-keu-goi--hep).dark h2,
.gc-keu-goi:not(.gc-keu-goi--hep).dark h3,
.gc-keu-goi:not(.gc-keu-goi--hep).dark b,
.gc-keu-goi:not(.gc-keu-goi--hep).dark strong{color:var(--gc-muc)}
.gc-keu-goi:not(.gc-keu-goi--hep).dark .gc-nhan{color:var(--gc-xd-600)}
.gc-keu-goi:not(.gc-keu-goi--hep).dark .gc-dan,
.gc-keu-goi:not(.gc-keu-goi--hep).dark p,
.gc-keu-goi:not(.gc-keu-goi--hep).dark li{color:var(--gc-mo)}
.gc-keu-goi:not(.gc-keu-goi--hep).dark .gc-kg__lh li{color:var(--gc-chu)}
.gc-keu-goi:not(.gc-keu-goi--hep).dark .gc-kg__lh b{color:var(--gc-muc)}
.gc-keu-goi:not(.gc-keu-goi--hep).dark .gc-kg__lh a,
.gc-keu-goi:not(.gc-keu-goi--hep).dark a:not(.gc-nut){color:var(--gc-xd-600)}
.gc-keu-goi:not(.gc-keu-goi--hep).dark .gc-kg__hop h3{color:var(--gc-muc)}
.gc-keu-goi:not(.gc-keu-goi--hep).dark .gc-kg__hop .gc-kg__phu{color:var(--gc-mo)}
/* Nút viền: §3 đảo nó sang trắng cho nền tối — trên nền sáng thì tàng hình. */
.gc-keu-goi:not(.gc-keu-goi--hep).dark a.gc-nut--vien{
  border-color:var(--gc-xd-600);color:var(--gc-xd-600)}
.gc-keu-goi:not(.gc-keu-goi--hep).dark a.gc-nut--vien:hover{
  background:var(--gc-xd-600);color:#fff}

/* ─────────────────────────────────────────────────────────────────────────
 * §55 — Bốn chỗ đo được là chưa đạt trên thiết bị thật
 * ───────────────────────────────────────────────────────────────────────── */

/* 1. Liên kết NẰM TRONG mô tả thẻ ngành không bấm được. Tiêu đề thẻ có
   `::after{inset:0}` phủ kín thẻ để cả thẻ là vùng bấm; lớp phủ đó nằm TRÊN
   liên kết trong đoạn mô tả, nên chạm vào "chiết xuất thảo mộc" lại đi tới
   trang của thẻ. Nâng riêng thẻ <a> lên trên lớp phủ — KHÔNG nâng cả đoạn
   mô tả, nếu không phần chữ còn lại mất luôn vai trò vùng bấm của thẻ. */
.gc-nganh .gc-the__mo a{position:relative;z-index:2}

/* 2. Ô tích trong biểu mẫu chỉ 20×20 — dưới ngưỡng 24×24 của WCAG 2.5.8.
   Đây là ô đồng ý điều khoản: bấm trượt ở đây là khách không gửi được form. */
.gc-mau .gc-mau__dongy input[type=checkbox],
.wpcf7-acceptance input[type=checkbox]{width:24px;height:24px}

/* 4. Tiêu đề bài trong lưới mặc định của Flatsome là <a> display:inline, cao
   đúng 22px — thiếu 2px so với ngưỡng 24×24. Đây là danh sách bài ở trang
   chuyên mục con, tức là đường đi chính của khách trên điện thoại. */
.box-text .post-title a{display:inline-block;padding:2px 0}

/* 5. Liên kết trong ô bảng so sánh cao 18px. Ô có đệm riêng nhưng chỉ thẻ <a>
   mới bấm được, nên vùng chạm thật vẫn là 18px. */
.gc-bang td a,
.gc-bang th a{display:inline-block;min-height:24px;padding:3px 0}

/* 6. Ô tìm kiếm ở trang 404 chỉ cao 22px — đây đúng là chỗ khách đang lạc
   đường và cần gõ, không phải chỗ để tiết kiệm chiều cao. */
.gc-404 .search-field,
.gc-404 input[type=search],
.gc-404 form input:not([type=submit]){min-height:44px}

/* 3. Ba nhãn dưới 12px đã được nâng THẲNG Ở KHAI BÁO GỐC, không thêm luật đè
   ở đây: `.gc-ben-cta__cn li` và `.gc-hero__anh4 figcaption` đều có luật riêng
   trong @media (max-width:849px) và (max-width:549px); một luật đè viết ngoài
   media sẽ nuốt luôn các luật đó vì nó đứng sau. */