/* ================= Tuỳ biến cho website tiếng Việt =================
   Tệp này do Arodes thêm vào. Mọi chỉnh sửa riêng đặt ở đây,
   không sửa style.css gốc để sau này còn cập nhật mẫu được. */

:root{
  --xanh: #7fad39;      /* xanh lá chủ đạo của Ogani */
  --xanh-dam: #1c231f;
  --cam: #f0a04b;
}

/* --- Logo chữ thay cho ảnh logo --- */
.logo-chu{ display:inline-block; line-height:1.05; text-decoration:none; }
.logo-chu .logo-ten{
  display:block; font-size:26px; font-weight:800; letter-spacing:.02em;
  color:var(--xanh-dam);
}
.logo-chu .logo-ten b{ color:var(--xanh); font-weight:800; }
.logo-chu .logo-slogan{
  display:block; font-size:11px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:#9b9b9b; margin-top:2px;
}
.humberger__menu__logo .logo-chu .logo-ten,
.footer__about__logo .logo-chu .logo-ten{ font-size:24px; }
.footer__about__logo .logo-chu .logo-slogan{ color:#9aa39b; }

/* --- Menu ngang: chữ tiếng Việt dài hơn tiếng Anh nên phải thu khoảng cách
       lại, nếu không menu sẽ rớt xuống hai dòng --- */
.header__menu ul li{ margin-right:30px; }
.header__menu ul li:last-child{ margin-right:0; }
.header__menu ul li a{ font-size:14px; letter-spacing:.01em; }
.header__menu ul li .header__menu__dropdown{ width:230px; }
.header__menu ul li .header__menu__dropdown li a{ font-size:13.5px; }

/* --- Giá "Liên hệ" thay cho giá USD --- */
.gia-lien-he{ color:var(--xanh) !important; font-weight:700; font-size:16px; }

/* --- Nút "Xem chi tiết" trên ảnh sản phẩm --- */
.featured__item__pic__hover li a{ font-size:14px; }

/* --- Khối giới thiệu công ty trên trang chủ --- */
.gioi-thieu{ padding:70px 0 40px; }
.gioi-thieu__text h2{
  font-size:32px; font-weight:700; color:var(--xanh-dam);
  margin-bottom:16px; line-height:1.3;
}
.gioi-thieu__text p{ color:#6f6f6f; font-size:16px; line-height:1.9; margin-bottom:14px; }
.gioi-thieu__so{ display:flex; flex-wrap:wrap; gap:34px; margin-top:26px; }
.gioi-thieu__so div h3{ font-size:30px; font-weight:800; color:var(--xanh); margin-bottom:2px; }
.gioi-thieu__so div span{ font-size:13px; color:#8b8b8b; text-transform:uppercase; letter-spacing:.08em; }
.gioi-thieu__anh img{ width:100%; border-radius:6px; }

/* --- Dải cam kết --- */
.cam-ket{ background:#f5f6f5; padding:44px 0; }
.cam-ket__item{ display:flex; gap:16px; align-items:flex-start; }
.cam-ket__item i{ font-size:32px; color:var(--xanh); line-height:1; margin-top:4px; }
.cam-ket__item h5{ font-size:16px; font-weight:700; color:var(--xanh-dam); margin-bottom:4px; }
.cam-ket__item p{ font-size:14px; color:#7b7b7b; margin:0; line-height:1.7; }
@media (max-width: 767px){
  .cam-ket__item{ margin-bottom:26px; }
  .gioi-thieu{ padding:46px 0 20px; }
  .gioi-thieu__text h2{ font-size:25px; }
}

/* --- Nhắc nhở nội dung tạm (xoá khi có nội dung thật) --- */
.ghi-chu-tam{
  background:#fff8e6; border-top:2px solid #f0a04b; color:#7a5a20;
  font-size:13.5px; padding:12px 0; text-align:center;
}
.ghi-chu-tam b{ color:#5c4315; }


/* ================= Trang chi tiết sản phẩm (đích của mã QR) ================= */
.sp__anh img{ width:100%; border-radius:8px; }
.sp__thongtin{ padding-top:6px; }
.sp__thongtin h2{
  font-size:30px; font-weight:700; color:var(--xanh-dam);
  margin-bottom:10px; line-height:1.3;
}
.nhan{
  display:inline-block; vertical-align:middle; font-size:12px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:4px 11px;
  border-radius:100px; margin-left:6px;
}
.nhan--con{ background:#e8f2dc; color:#4f7a1e; }
.nhan--het{ background:#f6e2e2; color:#9d3b3b; }
.sp__gia{ font-size:22px; font-weight:700; color:var(--xanh); margin-bottom:16px; }
.sp__gia small{ font-size:14px; font-weight:400; color:#9b9b9b; }
.sp__mota{ color:#6f6f6f; line-height:1.9; margin-bottom:22px; }
.sp__nut{ display:inline-block; }
.sp__nut i{ margin-right:8px; }
.sp__gopy{ margin-top:18px; font-size:14px; color:#9b9b9b; }

/* --- Khối truy xuất nguồn gốc --- */
.truy-xuat{ padding:20px 0 70px; }
.truy-xuat__hop{
  border:1px solid #e3e6e0; border-left:4px solid var(--xanh);
  border-radius:8px; padding:26px 28px; background:#fbfcfa;
}
.truy-xuat__dau{ display:flex; gap:16px; align-items:flex-start; margin-bottom:20px; }
.truy-xuat__dau i{ font-size:32px; color:var(--xanh); line-height:1; margin-top:3px; }
.truy-xuat__dau h3{ font-size:21px; font-weight:700; color:var(--xanh-dam); margin-bottom:4px; }
.truy-xuat__dau p{ font-size:14.5px; color:#7b7b7b; margin:0; }
.truy-xuat__bang{ width:100%; border-collapse:collapse; }
.truy-xuat__bang th,
.truy-xuat__bang td{
  padding:12px 4px; border-bottom:1px solid #e7eae5;
  font-size:15px; text-align:left; vertical-align:top;
}
.truy-xuat__bang th{
  width:190px; font-weight:500; color:#8b918a;
  font-size:13.5px; text-transform:uppercase; letter-spacing:.05em;
}
.truy-xuat__bang td{ color:var(--xanh-dam); font-weight:500; }
.truy-xuat__bang tr:last-child th,
.truy-xuat__bang tr:last-child td{ border-bottom:none; }
.truy-xuat__chan{ margin-top:18px; font-size:13.5px; color:#9b9b9b; line-height:1.8; }

@media (max-width: 767px){
  .sp__thongtin{ padding-top:26px; }
  .sp__thongtin h2{ font-size:24px; }
  .truy-xuat__hop{ padding:20px 18px; }
  .truy-xuat__bang th{ display:block; width:auto; padding-bottom:2px; border-bottom:none; }
  .truy-xuat__bang td{ display:block; padding-top:0; padding-bottom:14px; }
}


/* ================= Trang danh mục sản phẩm ================= */
.sp-ghichu{ color:#8b918a; font-size:15px; line-height:1.8; margin-bottom:34px; max-width:70ch; }
.dm-tieude{
  font-size:20px; font-weight:700; color:var(--xanh-dam);
  margin:14px 0 22px; padding-bottom:10px; border-bottom:2px solid #eceee9;
}
.dm-tieude::before{
  content:""; display:inline-block; width:8px; height:8px; border-radius:2px;
  background:var(--xanh); margin-right:10px; vertical-align:3px;
}


/* ================= Trang giới thiệu — khối quy trình ================= */
.quy-trinh{ padding:70px 0 40px; }
.buoc{ padding-right:14px; margin-bottom:34px; }
.buoc__so{
  display:block; font-size:15px; font-weight:800; letter-spacing:.1em;
  color:var(--xanh); margin-bottom:10px;
}
.buoc h5{ font-size:17px; font-weight:700; color:var(--xanh-dam); margin-bottom:8px; }
.buoc p{ font-size:14.5px; color:#7b7b7b; line-height:1.85; margin:0; }
@media (max-width:767px){ .quy-trinh{ padding:46px 0 10px; } }


/* ================= Dấu phân cách cho breadcrumb ================= */
.breadcrumb__links a:not(:last-child)::after,
.breadcrumb__links a + span::before{
  content:"/"; display:inline-block; margin:0 9px; color:#c3c8c1; font-weight:400;
}
.breadcrumb__links a + span::before{ margin-left:0; }
.breadcrumb-option{ padding:16px 0; border-bottom:1px solid #f0f1ee; }

/* ================= Lưới sản phẩm sinh từ dữ liệu ================= */
.nguon-du-lieu{ display:inline-block; margin-top:6px; font-size:13px; color:#a8ada6; }
.dm-dem{ font-size:13px; font-weight:400; color:#a8ada6; letter-spacing:0; margin-left:8px; }
.dm-tieude::before{ vertical-align:3px; }
.product__item__text h5 small{ font-size:13px; font-weight:400; color:#a0a5a0; }

/* Hàng tạm hết */
.sp--het .product__item__pic{ position:relative; }
.sp--het .product__item__pic::after{
  content:""; position:absolute; inset:0; background:rgba(255,255,255,.55);
}
.sp__nhan-goc{
  position:absolute; top:12px; left:12px; z-index:2; margin:0;
}

/* ================= Không tìm thấy sản phẩm ================= */
.khong-thay{ text-align:center; padding:80px 20px 90px; max-width:60ch; margin:0 auto; }
.khong-thay i{ font-size:44px; color:#c9cec7; margin-bottom:22px; display:block; }
.khong-thay h2{ font-size:26px; font-weight:700; color:var(--xanh-dam); margin-bottom:14px; }
.khong-thay p{ color:#7b7b7b; line-height:1.9; margin-bottom:12px; }
.khong-thay .primary-btn{ margin-top:16px; display:inline-block; }

/* ================= Cảnh báo lô hàng quá hạn ================= */
.canh-bao{
  background:#fdf1f1; border-left:4px solid #c0554f; border-radius:6px;
  padding:16px 20px; margin-bottom:30px; color:#8d3b36;
  font-size:15px; line-height:1.8; font-weight:500;
}
.canh-bao i{ margin-right:8px; }


/* ================= Trang chủ là đích của mã QR chung =================
   Khách quét mã bằng điện thoại phải thấy ngay công ty bán gì.
   Cột danh mục dọc bị trùng với menu hamburger nên ẩn đi trên màn hình hẹp,
   nhờ đó khối giới thiệu chính hiện lên sớm hơn khoảng một màn hình. */
@media (max-width: 991px){
  .hero__categories{ display:none; }
  .hero__search{ margin-bottom:22px; }
  .hero__search__phone{ margin-top:14px; }
}