/* ============================================================
   Novagri Global — custom layer (plain CSS, dùng kèm Tailwind)
   Dev: utilities đến từ Tailwind Play CDN.
   Production: `npm run css:build` sinh assets/css/tailwind.css,
   thay 2 thẻ <script> Tailwind CDN bằng <link> tới file đó.
   ============================================================ */

::selection { background: #C9A24B; color: #fff; }

/* ---------- Thanh cuộn (scrollbar) theo thương hiệu ----------
   Luôn hiển thị bên phải (overflow-y: scroll), track có background rõ.
   Dùng selector global (không tiền tố html) để ép WebKit bỏ overlay
   scrollbar của macOS → track + thumb luôn hiện. */
/* Firefox */
html { scrollbar-width: auto; scrollbar-color: #0F4A35 #dfe7e1; scrollbar-gutter: stable; overflow-y: scroll; }
/* WebKit / Chromium */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track {
  background-color: #dfe7e1;
  border-left: 1px solid #cbd6ce;
}
::-webkit-scrollbar-thumb {
  background-color: #0F4A35;
  border-radius: 999px;
  border: 3px solid #dfe7e1;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: #C9A24B; background-clip: padding-box; }
::-webkit-scrollbar-corner { background-color: #dfe7e1; }

/* ---------- Component classes ----------
   Hiệu ứng hover: lớp màu ::before đổ đầy từ trái sang phải (scaleX). */
.btn-primary,
.btn-green,
.btn-outline-light,
.btn-outline-green {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 15px; padding: 14px 32px; border-radius: 10px;
  letter-spacing: .3px; text-align: center; cursor: pointer; border: none;
  transition: color .3s ease, border-color .3s ease;
}
.btn-primary::before,
.btn-green::before,
.btn-outline-light::before,
.btn-outline-green::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.btn-primary:hover::before,
.btn-green:hover::before,
.btn-outline-light:hover::before,
.btn-outline-green:hover::before { transform: scaleX(1); }

.btn-primary { background: #C9A24B; color: #1E2A24; }
.btn-primary::before { background: #D8B25C; }
.btn-green { background: #0F4A35; color: #fff; }
.btn-green::before { background: #145A40; }
.btn-outline-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.6); font-weight: 600; }
.btn-outline-light::before { background: rgba(255,255,255,.16); }
.btn-outline-green { background: transparent; color: #0F4A35; border: 1.5px solid #0F4A35; font-weight: 600; }
.btn-outline-green::before { background: #0F4A35; }
.btn-outline-green:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .btn-primary::before, .btn-green::before,
  .btn-outline-light::before, .btn-outline-green::before { transition: none; }
}

.section-title {
  font-family: Montserrat, system-ui, sans-serif; font-weight: 700;
  font-size: clamp(22px, 3vw, 30px); color: #0F4A35; letter-spacing: .5px;
  text-transform: uppercase; margin: 0;
}
.section-title-bar { width: 60px; height: 3px; background: #C9A24B; border-radius: 2px; margin: 12px auto 0; }
.section-title-bar-left { margin-left: 0; }

.input-field {
  width: 100%; height: 46px; border-radius: 10px; border: 1.5px solid #e6e6e0;
  background: #fff; padding: 0 16px; font-size: 14px; color: #1E2A24;
  outline: none; font-family: inherit; transition: border-color .15s ease;
}
.input-field:focus { border-color: #0F4A35; }
textarea.input-field { height: auto; padding: 12px 16px; resize: vertical; }

/* ---------- Tiện ích khác ---------- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* Marquee hàng logo thương hiệu (mega menu). Mặc định KHÔNG chạy — 1 hàng tĩnh, tràn thì ẩn.
   JS thêm .is-marquee + nhân đôi track khi nội dung vượt bề rộng → cuộn loop liền mạch. */
.mega-marquee__track { will-change: transform; }
.mega-marquee.is-marquee .mega-marquee__track {
  animation: mega-marquee-scroll var(--marquee-dur, 20s) linear infinite;
}
.mega-marquee.is-marquee:hover .mega-marquee__track { animation-play-state: paused; }
@keyframes mega-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* -50% vì track đã nhân đôi → về đúng vị trí đầu */
}
@media (prefers-reduced-motion: reduce) {
  .mega-marquee.is-marquee .mega-marquee__track { animation: none; }
  .mega-marquee.is-marquee { overflow-x: auto; }
}

/* Swiper theme */
.swiper-pagination-bullet { background: #ffffff; opacity: .5; width: 9px; height: 9px; }
.swiper-pagination-bullet-active { background: #C9A24B; opacity: 1; }

/* Badge vát góc (BÁN CHẠY / COMBO / HÀNG MỚI) */
.badge-ribbon {
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%);
  box-shadow: 0 2px 7px rgba(0, 0, 0, .22);
}

/* Pill "Tiết kiệm <số tiền>" góc dưới ảnh card sản phẩm.
   Dùng chung cho snippet product-item và card "Đã xem gần đây" (product.bwt). */
.save-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px 3px 6px;
  border-radius: 999px;
  background: #FCEFE2;
  border: 1px solid #F3DCC5;
  color: #A9601F;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(169, 96, 31, .14);
}
@media (max-width: 639px) {
  /* Card hẹp lại khi carousel hiện 2.5 sản phẩm — thu nhỏ pill cho vừa */
  .save-pill { font-size: 9px; padding: 2px 5px 2px 4px; gap: 2px; letter-spacing: -.1px; }
  .save-pill svg { width: 9px; height: 9px; }
}
@media (max-width: 360px) {
  /* Máy nhỏ (iPhone SE): card chỉ ~100px, bóp thêm 1 nấc để không cắt số tiền */
  .save-pill { font-size: 8px; padding: 2px 4px; gap: 1px; letter-spacing: -.3px; }
  .save-pill svg { width: 8px; height: 8px; }
}

/* ---------- Nền gradient thương hiệu ---------- */
/* Hero trang chủ */
.hero-banner { background: radial-gradient(120% 140% at 80% 0%, #15603f 0%, #0F4A35 45%, #0a3527 100%); }
/* Panel giới thiệu ở trang đăng nhập / đăng ký */
.auth-hero { background: radial-gradient(130% 130% at 20% 10%, #15603f, #0F4A35 55%, #0a3527); }

/* ---------- Trang auth (login/register/reset) ---------- */
/* Nền trang trí: gradient xanh/vàng thương hiệu toả 2 góc + lưới chấm bi mờ,
   phủ kín viewport (fixed, sau nội dung) để không còn khoảng trắng trơn */
.auth-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  top: 0 !important;
  background:
    radial-gradient(640px 420px at 88% 8%, rgba(201,162,75,.16), transparent 62%),
    radial-gradient(760px 520px at 8% 96%, rgba(15,74,53,.13), transparent 62%),
    radial-gradient(circle at 1px 1px, rgba(15,74,53,.07) 1px, transparent 1.5px),
    linear-gradient(180deg, #F5F5F2 0%, #eef2ec 100%);
  background-size: auto, auto, 26px 26px, auto;
}
/* Nội dung auth nổi trên nền */
.auth-bg ~ * { position: relative; z-index: 1; }
/* Nút quay về trang chủ — pill nổi cố định góc trên trái */
.auth-back {
  position: fixed; top: 18px !important; left: 18px; z-index: 30;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px 10px 14px; border-radius: 999px;
  background: #fff; border: 1px solid #e6e6de; color: #0F4A35;
  font-size: 13.5px; font-weight: 600;
  box-shadow: 0 6px 18px rgba(15,74,53,.1);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.auth-back:hover { background: #F0F4EF; transform: translateY(-1px); box-shadow: 0 9px 22px rgba(15,74,53,.14); }
@media (max-width: 640px) { .auth-back { top: 12px; left: 12px; padding: 8px 14px 8px 11px; font-size: 12.5px; } }
/* Dải đầu trang (gioi-thieu, faq, b2b, ...) */
.page-hero { background: radial-gradient(120% 160% at 80% 0%, #15603f, #0F4A35 55%, #0a3527); }
/* Khối CTA / card nền xanh */
.panel-green { background: linear-gradient(135deg, #0F4A35, #0c3c2b); }
.panel-green-flat { background: linear-gradient(105deg, #0F4A35, #0c3c2b); }
/* Banner khuyến mãi trang chủ — đậm (trái) chuyển mượt sang nhạt (phải) */
.promo-green { background: linear-gradient(90deg, #082c20 0%, #0F4A35 45%, #17654791 78%, #1a6d4f00 100%); }
/* Khối B2B: div cao đúng tỉ lệ ảnh (894×596) để object-cover không cắt hình.
   Mobile: để nội dung tự quyết chiều cao (text nhiều), tối thiểu 300px. */
.promo-b2b { min-height: 300px; }
@media (min-width: 768px) { .promo-b2b { min-height: 340px; } }
@media (min-width: 1024px) { .promo-b2b { min-height: 360px; } }
/* Canh ảnh theo chiều ngang: giữ 2 người + kệ hàng trong khung nhìn */
.promo-b2b > img { object-position: 62% center; }
.promo-tile-green { background: linear-gradient(100deg, #0F4A35 0%, #0F4A35 52%, #145a40 100%); }
.promo-tile-coffee { background: linear-gradient(100deg, #241a12 0%, #2e2114 52%, #3a2a18 100%); }
.promo-overlay { background: linear-gradient(90deg, rgba(15,74,53,.6) 0%, rgba(15,74,53,.32) 45%, rgba(15,74,53,.18) 100%); }

/* ---------- Đổ bóng thẻ ---------- */
.card-elevated { box-shadow: 0 24px 60px rgba(15,74,53,.14); }
.card-elevated-sm { box-shadow: 0 18px 50px rgba(15,74,53,.1); }

/* ---------- Pill trạng thái đơn hàng ---------- */
.status-shipping { background: #fdecdf; color: #E87522; }
.status-delivered { background: #e3f0e9; color: #0F4A35; }
.status-processing { background: #eef0f4; color: #5b6b8b; }
.status-cancelled { background: #fdecec; color: #d14343; }

/* Nội dung rich-text soạn từ admin Sapo */
.rte p { margin: 0 0 14px; }
.rte ul, .rte ol { margin: 0 0 14px; padding-left: 22px; }
.rte ul { list-style: disc; }
.rte ol { list-style: decimal; }
.rte img { max-width: 100%; border-radius: 12px; }
.rte a { color: #0F4A35; text-decoration: underline; }
.rte table { width: 100%; border-collapse: collapse; margin: 0 0 14px; }
.rte td, .rte th { border: 1px solid #eee; padding: 8px 12px; }

/* ============================================================
   Cụm liên hệ nổi (toggle bung: Zalo / Gọi / Messenger)
   + nút lên đầu trang. Namespace .bl-contact / .bl-scrolltop.
   Màu theo thương hiệu Novagri (primary xanh, gold).
   ============================================================ */
.bl-contact, .bl-contact *, .bl-scrolltop { box-sizing: border-box; }

.bl-contact {
  position: fixed; right: 28px; bottom: 24px;top: auto !important; left: auto; z-index: 60;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}

.bl-contact__items { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.bl-contact__item {
  position: relative; width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; box-shadow: 0 0 0 1.5px #fff, 0 6px 16px rgba(15,74,53,.22);
  opacity: 0; transform: translateY(18px) scale(.5); pointer-events: none;
  transition: opacity .3s ease, transform .3s cubic-bezier(.16,1,.3,1), box-shadow .2s ease;
}
.bl-contact__item:hover { transform: translateY(0) scale(1.08); box-shadow: 0 0 0 1.5px #fff, 0 10px 22px rgba(15,74,53,.3); }

/* Mở: hiện + stagger (icon gần nút toggle bung trước) */
.bl-contact.is-open .bl-contact__item { opacity: 1; transform: none; pointer-events: auto; }
.bl-contact.is-open .bl-contact__item:nth-last-child(1) { transition-delay: 0s; }
.bl-contact.is-open .bl-contact__item:nth-last-child(2) { transition-delay: .06s; }
.bl-contact.is-open .bl-contact__item:nth-last-child(3) { transition-delay: .12s; }

/* Zalo: viền xanh Zalo nhẹ */
.bl-contact__item--zalo { background: #082C20; }
/* Messenger: nền gradient xanh */
.bl-contact__item--fb { background: radial-gradient(circle at 30% 20%, #14563E, #082C20 60%, #061F16); }
/* Gọi điện: nền xanh thương hiệu + 2 vòng "chuông rung" lan ra */
.bl-contact__item--phone { background: #082C20; }
.bl-contact__ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(201,162,75,.7); pointer-events: none;
  animation: bl-ring 1.6s ease-out infinite;
}
.bl-contact__ring--2 { animation-delay: .5s; }
@keyframes bl-ring { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(2); opacity: 0; } }

/* Nút toggle chính */
.bl-contact__toggle {
  position: relative; width: 60px; height: 60px; border-radius: 50%;
  border: 0; cursor: pointer; background: #082C20; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1.5px #fff, 0 8px 20px rgba(15,74,53,.42);
  transition: transform .2s ease, background .2s ease;
}
.bl-contact__toggle:hover { transform: scale(1.06); background: #0F4A35; }
/* vòng "thở" gây chú ý (tắt khi mở) */
.bl-contact__toggle::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(201,162,75,.7); z-index: -1;
  animation: bl-ring 2s ease-out infinite;
}
.bl-contact.is-open .bl-contact__toggle::after { animation: none; }

/* 2 icon toggle cross-fade (chat <-> close) */
.bl-contact__ic { position: absolute; display: flex; transition: opacity .25s ease, transform .3s cubic-bezier(.16,1,.3,1); }
.bl-contact__ic--close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.bl-contact.is-open .bl-contact__ic--chat { opacity: 0; transform: rotate(90deg) scale(.6); }
.bl-contact.is-open .bl-contact__ic--close { opacity: 1; transform: none; }

/* Nút lên đầu trang (cạnh trái cụm liên hệ) */
.bl-scrolltop {
  position: fixed; right: 100px; bottom: 24px; top: auto !important; left: auto; z-index: 60;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: #082C20; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1.5px #fff, 0 6px 16px rgba(15,74,53,.28);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease, background .2s ease;
}
.bl-scrolltop.is-visible { opacity: 1; visibility: visible; transform: none; }
.bl-scrolltop:hover { background: #0F4A35; }

@media (max-width: 1024px) {
  /* Nhường chỗ cho bottom-nav mobile (cao ~64px) */
  .bl-contact { bottom: 80px; }
  .bl-scrolltop { bottom: 80px; }
}
@media (max-width: 768px) {
  .bl-contact { right: 16px; gap: 12px; }
  .bl-contact__toggle { width: 52px; height: 52px; }
  .bl-contact__item { width: 48px; height: 48px; }
  .bl-scrolltop { right: 74px; }
}
@media (prefers-reduced-motion: reduce) {
  .bl-contact__ring, .bl-contact__toggle::after { animation: none; }
  .bl-contact__item, .bl-contact__ic, .bl-scrolltop { transition: none; }
}

/* Alpine: tránh nháy nội dung trước khi Alpine khởi động */
[x-cloak] { display: none !important; }

/* Khoá scroll khi mở drawer */
body.overflow-locked { overflow: hidden; }

/* ============================================================
   Newsletter — dải đăng ký nhận tin nằm trên footer.
   Namespace .nl-* (CSS thuần, không phụ thuộc Tailwind build).
   ============================================================ */
.nl-section { background: #082C20; border-bottom: 1px solid rgba(255,255,255,.1); color: #fff; }
.nl-inner {
  max-width: 1200px; margin: 0 auto; padding: 56px 20px;
  display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center;
}
.nl-eyebrow {
  font-family: Montserrat, system-ui, sans-serif; font-weight: 700;
  font-size: 12px; letter-spacing: 3px; color: #C9A24B; margin: 0 0 10px;
}
.nl-title {
  font-family: Montserrat, system-ui, sans-serif; font-weight: 800;
  font-size: clamp(24px, 3vw, 32px); line-height: 1.25; color: #fff; margin: 0 0 12px;
}
.nl-desc { font-size: 14.5px; line-height: 1.6; color: #cfe0d6; max-width: 480px; margin: 0; }

.nl-label { display: block; font-size: 13px; font-weight: 600; color: #cfe0d6; margin-bottom: 8px; }
.nl-label span { color: #C9A24B; }
.nl-row { display: flex; flex-direction: column; gap: 12px; }
.nl-input {
  flex: 1; min-width: 0; height: 48px; border-radius: 10px;
  border: 2px solid transparent; background: #fff; color: #1E2A24;
  font: inherit; font-size: 14.5px; padding: 0 16px; outline: none;
  transition: border-color .15s ease;
}
.nl-input:focus { border-color: #C9A24B; }
.nl-btn {
  height: 48px; padding: 0 28px; border: 0; border-radius: 10px; flex-shrink: 0;
  background: #C9A24B; color: #082C20; cursor: pointer;
  font-family: Montserrat, system-ui, sans-serif; font-weight: 700;
  font-size: 14px; letter-spacing: .5px; transition: background .15s ease;
}
.nl-btn:hover { background: #D8B25C; }

.nl-success {
  display: none; align-items: center; gap: 12px;
  background: rgba(255,255,255,.1); border-radius: 12px;
  padding: 16px 20px; font-size: 14.5px; line-height: 1.5;
}
.nl-success svg { flex-shrink: 0; }
.nl-success.is-visible { display: flex; }
/* Bản demo static: onsubmit thêm .nl-sent vào .nl-box để hiện lời cảm ơn */
.nl-box.nl-sent form { display: none; }
.nl-box.nl-sent .nl-success { display: flex; }

.nl-error { font-size: 13px; color: #f5b8b8; margin: 8px 0 0; }
.nl-note { font-size: 12px; line-height: 1.6; color: #9fb3a8; margin: 14px 0 0; }
.nl-note a { color: inherit; text-decoration: underline; }
.nl-note a:hover { color: #C9A24B; }

@media (min-width: 640px) { .nl-row { flex-direction: row; } }
@media (min-width: 1024px) { .nl-inner { grid-template-columns: 1fr 1fr; padding: 64px 20px; } }

/* ============================================================
   Nâng cấp trang chủ — flash sale (.fs-*), câu chuyện vùng
   nguyên liệu (.st-*), đánh giá khách hàng (.rv-*), tin tức
   (.ns-*) + hiệu ứng reveal khi cuộn (.hp-reveal).
   CSS thuần, không phụ thuộc Tailwind build.
   ============================================================ */

/* ---------- Reveal khi cuộn (JS gắn .hp-reveal rồi .is-in) ---------- */
.hp-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.hp-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hp-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Flash sale hôm nay ---------- */
.fs-section { background: linear-gradient(100deg, #E87522 0%, #d3620f 55%, #b34e08 100%); color: #fff; }
.fs-inner { max-width: 1200px; margin: 0 auto; padding: 28px 20px 32px; }
.fs-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.fs-title {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-family: Montserrat, system-ui, sans-serif; font-weight: 800;
  font-size: clamp(20px, 2.6vw, 26px); letter-spacing: .5px;
}
.fs-title svg { flex-shrink: 0; }
.fs-timer { display: flex; align-items: center; gap: 8px; }
.fs-timer-label { font-size: 13px; font-weight: 600; margin-right: 2px; }
.fs-cell {
  min-width: 44px; padding: 9px 6px; border-radius: 10px;
  background: rgba(255,255,255,.95); color: #b34e08;
  font-family: Montserrat, system-ui, sans-serif; font-weight: 800;
  font-size: 18px; line-height: 1; text-align: center;
}
.fs-sep { font-weight: 800; opacity: .8; }
.fs-section .swiper-slide { height: auto; color: #1E2A24; }
.fs-more { text-align: center; margin-top: 18px; }
.fs-more a { color: #fff; font-weight: 700; font-size: 14px; border-bottom: 1.5px solid rgba(255,255,255,.6); padding-bottom: 2px; }
.fs-more a:hover { border-color: #fff; }

/* ---------- Câu chuyện vùng nguyên liệu ---------- */
.st-section { background: #fff; border-top: 1px solid #eee; border-bottom: 1px solid #eee; margin-top: 44px; }
.st-inner {
  max-width: 1200px; margin: 0 auto; padding: 60px 20px 72px;
  display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center;
}
.st-visual { position: relative; padding-bottom: 28px; }
.st-img-main {
  display: block; width: 86%; height: 320px; object-fit: cover;
  border-radius: 20px; box-shadow: 0 24px 60px rgba(15,74,53,.18);
}
.st-img-sub {
  position: absolute; right: 0; bottom: 0; width: 46%; height: 180px;
  object-fit: cover; border-radius: 16px; border: 5px solid #fff;
  box-shadow: 0 18px 40px rgba(15,74,53,.22);
}
.st-badge {
  position: absolute; left: 12px; top: -18px; z-index: 2;
  background: #0F4A35; color: #fff; border-radius: 14px;
  padding: 10px 18px 12px; text-align: center;
  box-shadow: 0 12px 28px rgba(15,74,53,.35);
  font-size: 11px; font-weight: 600; letter-spacing: .5px; line-height: 1.3;
}
.st-badge b { display: block; font-family: Montserrat, system-ui, sans-serif; font-weight: 800; font-size: 22px; color: #C9A24B; }
.st-eyebrow {
  font-family: Montserrat, system-ui, sans-serif; font-weight: 700;
  font-size: 12px; letter-spacing: 3px; color: #C9A24B; margin: 0 0 10px;
}
.st-title {
  font-family: Montserrat, system-ui, sans-serif; font-weight: 800;
  font-size: clamp(24px, 3vw, 34px); line-height: 1.25; color: #0F4A35; margin: 0 0 16px;
}
.st-desc { font-size: 14.5px; line-height: 1.7; color: #5b6b62; margin: 0 0 12px; }
.st-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 26px; padding: 0; list-style: none; }
.st-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: #F0F4EF; color: #0F4A35; font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: 999px;
}
.st-chip svg { flex-shrink: 0; }
@media (min-width: 1024px) { .st-inner { grid-template-columns: 1.05fr 1fr; } }

/* ---------- Đánh giá khách hàng ---------- */
.rv-section { background: #F0F4EF; margin-top: 48px; }
.rv-inner { max-width: 1200px; margin: 0 auto; padding: 56px 20px 60px; }
.rv-head { text-align: center; margin-bottom: 30px; }
.rv-section .swiper-slide { height: auto; }
.rv-section .rv-card { height: 100%; }
.rv-card {
  position: relative;
  background: #fff; border-radius: 18px; padding: 26px 22px 22px;
  box-shadow: 0 10px 24px rgba(15,74,53,.08);
  display: flex; flex-direction: column; gap: 12px;
}
.rv-card::before {
  content: "\201C"; position: absolute; top: 6px; right: 18px;
  font-family: Georgia, serif; font-size: 64px; line-height: 1;
  color: rgba(201,162,75,.28); pointer-events: none;
}
.rv-stars { color: #C9A24B; font-size: 15px; letter-spacing: 3px; }
.rv-text { font-size: 14.5px; line-height: 1.65; color: #3d4a43; margin: 0; flex: 1; }
.rv-who { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.rv-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: #0F4A35; color: #C9A24B;
  font-family: Montserrat, system-ui, sans-serif; font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.rv-name { font-weight: 700; font-size: 14px; color: #1E2A24; }
.rv-meta { font-size: 12.5px; color: #7A7A72; margin-top: 2px; }

/* ---------- Tin tức / kiến thức trên trang chủ ---------- */
.ns-inner { max-width: 1200px; margin: 0 auto; padding: 56px 20px 12px; }
.ns-head { text-align: center; margin-bottom: 30px; }
/* Carousel tin tức: card phải cao bằng slide để 3 cột desktop đều nhau */
.ns-card {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  background: #fff; border-radius: 18px; text-decoration: none; color: inherit;
  box-shadow: 0 6px 18px rgba(15,74,53,.07);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ns-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(15,74,53,.14); }
.ns-thumb { display: block; width: 100%; height: 180px; object-fit: cover; background: #F5F5F2; }
.ns-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.ns-date { font-size: 12px; color: #9a9a92; margin-bottom: 8px; }
.ns-name {
  font-family: Montserrat, system-ui, sans-serif; font-weight: 700;
  font-size: 16px; line-height: 1.4; color: #1E2A24; margin: 0 0 10px;
}
.ns-card:hover .ns-name { color: #0F4A35; }
/* Desktop: tối đa 2 dòng, quá thì "…" (line-clamp) — ghi đè xuống 3 dòng ở mobile bên dưới */
.ns-excerpt {
  font-size: 13.5px; line-height: 1.6; color: #7A7A72; margin: 0 0 12px; flex: 1;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.ns-more { color: #0F4A35; font-weight: 600; font-size: 13.5px; }
.ns-all { text-align: center; margin-top: 26px; }
/* Slide hẹp trên mobile (1.5 bài) — bóp ảnh + chữ cho cân */
@media (max-width: 639px) {
  .ns-thumb { height: 140px; }
  .ns-body { padding: 14px 14px 16px; }
  .ns-name { font-size: 14.5px; }
  .ns-excerpt { font-size: 12.5px; -webkit-line-clamp: 3; line-clamp: 3; }
  .ns-more { font-size: 12.5px; }
}

/* ============================================================
   Menu desktop — line vàng bung từ giữa ra 2 bên khi hover/active.
   (Ghi đè border-b có sẵn của link nav bằng ::after animate được.)

   CHỈ áp cho link trên THANH NAV, không lọt vào mega panel: panel nằm
   trong nav.bg-primary nên selector `nav.bg-primary a` trần sẽ bắt luôn
   mọi link danh mục con → gạch vàng dưới chân từng mục khi hover.
   Hàng nav = .max-w-container; link nav là con trực tiếp của hàng đó,
   hoặc của wrapper x-data (mục có mega menu).
   ============================================================ */
nav.bg-primary > .max-w-container > a,
nav.bg-primary > .max-w-container > div > a {
  position: relative; border-bottom-color: transparent !important;
}
nav.bg-primary > .max-w-container > a::after,
nav.bg-primary > .max-w-container > div > a::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 0;
  height: 3px; border-radius: 2px; background: #C9A24B;
  transform: scaleX(0); transform-origin: center;
  transition: transform .28s cubic-bezier(.16,1,.3,1);
}
nav.bg-primary > .max-w-container > a:hover::after,
nav.bg-primary > .max-w-container > a:focus-visible::after,
nav.bg-primary > .max-w-container > a.border-gold::after,
nav.bg-primary > .max-w-container > div > a:hover::after,
nav.bg-primary > .max-w-container > div > a:focus-visible::after,
nav.bg-primary > .max-w-container > div > a.border-gold::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  nav.bg-primary > .max-w-container > a::after,
  nav.bg-primary > .max-w-container > div > a::after { transition: none; }
}

/* ============================================================
   Khối nội dung SEO cuối footer (.bft-*), nằm trên dòng copyright.
   ============================================================ */
.bft { border-top: 1px solid rgba(255,255,255,.1); }
.bft-inner {
  max-width: 1200px; margin: 0 auto; padding: 30px 20px 6px;
  display: grid; grid-template-columns: 1fr; gap: 26px;
}
.bft-box h3 {
  font-family: Montserrat, system-ui, sans-serif; font-weight: 700;
  font-size: 13.5px; line-height: 1.45; color: #fff;
  text-transform: uppercase; letter-spacing: .4px; margin: 0 0 12px;
}
.bft-box ul { margin: 0; padding: 0 0 0 18px; list-style: disc; }
.bft-box li { font-size: 12.5px; line-height: 1.65; color: #9fb3a8; margin: 0 0 7px; }
.bft-box li::marker { color: #C9A24B; }
.bft-box p { font-size: 12.5px; line-height: 1.9; color: #9fb3a8; margin: 0; }
@media (min-width: 1024px) { .bft-inner { grid-template-columns: 1fr 1fr 1.15fr; gap: 32px; } }

/* ============================================================
   Brand banner — lớp phủ gradient để chữ luôn nổi trên ảnh.
   .promo-tile: khung; .promo-scrim: scrim tối dần từ trái sang
   phải (nằm trên ảnh, dưới text). .promo-content: khối chữ, có
   text-shadow đề phòng ảnh sáng.
   ============================================================ */
.promo-tile { position: relative; overflow: hidden; }
.promo-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(0,0,0,.62) 0%,
    rgba(0,0,0,.5) 38%,
    rgba(0,0,0,.18) 66%,
    rgba(0,0,0,0) 100%);
}
.promo-content { position: relative; z-index: 2; }
.promo-content h3,
.promo-content p { text-shadow: 0 1px 10px rgba(0,0,0,.45); }

/* ============================================================
   Icon danh mục sản phẩm trang chủ (.cat-ic) — hộp bo tròn với
   nền gradient nhạt + viền vàng, đổi màu khi hover card.
   CHỈ áp từ md+ (desktop giữ design cũ); mobile dùng icon tròn
   primary-soft gọn qua utility trực tiếp trong home-categories.bwt.
   ============================================================ */
@media (min-width: 768px) {
  .cat-ic {
    width: 64px; height: 64px; border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(150deg, #eef4ee 0%, #e3ede6 100%);
    border: 1px solid #dce7df;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
    transition: transform .25s cubic-bezier(.16,1,.3,1), background .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  .cat-tile:hover .cat-ic {
    transform: translateY(-2px) scale(1.06) rotate(-2deg);
    background: linear-gradient(150deg, #0F4A35 0%, #145A40 100%);
    border-color: #C9A24B;
    box-shadow: 0 10px 22px rgba(15,74,53,.28);
  }
  /* Khi hover: icon chuyển sang trắng/vàng cho nổi trên nền xanh */
  .cat-tile:hover .cat-ic svg [stroke="#0F4A35"] { stroke: #fff; }
  .cat-tile:hover .cat-ic svg [stroke="#C9A24B"] { stroke: #E7C87A; }
  .cat-tile:hover .cat-ic svg [fill="#C9A24B"] { fill: #C9A24B; }
}
@media (prefers-reduced-motion: reduce) {
  .cat-ic, .cat-tile:hover .cat-ic { transition: none; transform: none; }
}

/* ============================================================
   Toast notification (#ng-toasts — main.js novagriToast)
   ============================================================ */
#ng-toasts {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  width: min(92vw, 420px);
}
.ng-toast {
  pointer-events: auto;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  color: #fff;
  background: #0F4A35;
  box-shadow: 0 10px 28px rgba(15, 74, 53, .28);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s cubic-bezier(.16, 1, .3, 1);
}
.ng-toast.is-in { opacity: 1; transform: translateY(0); }
.ng-toast--error { background: #b0483a; box-shadow: 0 10px 28px rgba(176, 72, 58, .3); }

/* ============================================================
   Nút thêm giỏ đang xử lý (.is-loading — main.js gắn/tháo)
   ============================================================ */
[data-add-to-cart].is-loading {
  opacity: .6;
  cursor: wait;
  animation: ng-pulse 1s ease-in-out infinite;
}
@keyframes ng-pulse {
  50% { opacity: .35; }
}

/* ============================================================
   Skip link (accessibility) — ẩn tới khi nhận focus bàn phím
   ============================================================ */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  background: #0F4A35;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 0 0 10px 10px;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; }

/* ============================================================
   Tôn trọng prefers-reduced-motion cho toàn bộ motion tuỳ chỉnh
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ng-toast,
  .skip-link,
  [data-add-to-cart].is-loading { transition: none; animation: none; }
  html { scroll-behavior: auto !important; }
}

/* ============================================================
   Bottom nav mobile — chống "khoảng trống" trên iOS Safari.
   Áp dụng cho MỌI trang (nav nằm trong footer, include từ layout).

   Vì sao có lỗi: iOS Safari bố trí `position: fixed; bottom: 0` theo
   LARGE viewport (viewport khi thanh công cụ trình duyệt đã thu gọn).
   Khi cuộn nhanh, Safari thu/hiện thanh công cụ nhưng phần tử fixed
   cập nhật vị trí trễ một nhịp → mép dưới nav bị nhấc lên, để lộ một
   dải nội dung trang phía dưới (đúng như ảnh chụp báo lỗi).

   Lỗi này KHÔNG riêng trang nào. Trang danh mục lộ rõ hơn chỉ vì có
   cuộn vô tận, trang rất dài nên thao tác cuộn nhanh xảy ra nhiều hơn.

   Cách xử lý:
   1. `.bottom-nav::after` — "tấm váy" nền trải dài BÊN DƯỚI nav và
      trôi cùng nav. Đây là điểm mấu chốt: khoảng trống nằm NGOÀI phần
      tử nên padding không với tới; phải có phần tử phủ xuống dưới thì
      nhịp trễ của Safari mới lộ ra màu nav thay vì nội dung trang.
   2. Đệm safe-area cho Home Indicator (iPhone X trở lên).
   3. `transform: translateZ(0)` đẩy nav lên compositor layer riêng để
      Safari trượt nav trên GPU thay vì đợi repaint của luồng chính.
   4. Spacer cuối trang cũng cộng safe-area để nội dung không bị che.

   Bắt buộc đi kèm `viewport-fit=cover` trong thẻ meta viewport, nếu
   không `env(safe-area-inset-*)` luôn trả về 0.
   ============================================================ */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;

  /* Đệm an toàn cho Home Indicator (iPhone X trở lên) */
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));

  /* Đưa nav lên compositor layer riêng: Safari cập nhật vị trí phần tử
     fixed ngay trên GPU khi thanh công cụ trượt, thay vì đợi repaint. */
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Tấm váy nền phủ xuống dưới nav — lấp khoảng trống trong nhịp Safari
   thu/hiện thanh công cụ. Nằm ngoài viewport ở trạng thái bình thường
   nên không ảnh hưởng bố cục; `pointer-events: none` để không chắn thao
   tác chạm; `background-color: inherit` để luôn khớp màu nav nếu sau này đổi.
   400px: dư sức phủ mọi mức thu của thanh địa chỉ/công cụ Safari trên
   toàn bộ dòng iPhone, kể cả khi khách zoom-out trang. */
.bottom-nav::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 400px;
  background-color: inherit;
  pointer-events: none;
}

/* Spacer giữ chỗ cho bottom-nav phải cộng safe-area,
   nếu không nội dung cuối trang sẽ bị nav che mất. */
.bottom-nav-spacer {
  height: calc(64px + env(safe-area-inset-bottom, 0px));
}

/* Các nút nổi (liên hệ / lên đầu trang) cũng phải tránh safe-area */
@media (max-width: 1024px) {
  .bl-contact { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  .bl-scrolltop { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   Hero slider — chế độ slide của TOÀN BỘ khối hero (tuỳ chọn).
   Bật/tắt ở Tuỳ chỉnh ▸ Trang chủ — Hero ▸ "Hiển thị hero dạng slide".
   Khi bật, hero chỉ còn 5 ảnh phủ kín, không có chữ/nút.
   Markup: snippets/home-hero.bwt — khởi tạo ở initHeroSlider() (main.js).

   Ảnh dùng object-fit: cover để phủ kín khối ở mọi bề ngang màn hình.
   Chiều cao khối cố định theo breakpoint (aspect-ratio không dùng được vì
   ảnh admin tải lên có tỉ lệ khác nhau, sẽ làm slide nhảy giật khi chuyển).
   ============================================================ */
.hero-slider { position: relative; overflow: hidden; }
.hero-slider .swiper { width: 100%; }
/* <picture> mặc định là inline → ép block để không sinh khe trắng dưới ảnh */
.hero-slider picture { display: block; width: 100%; }

.hero-slider__img {
  display: block;
  width: 100%;
  height: clamp(220px, 34vw, 460px);
  object-fit: cover;
  object-position: center;
}

/* Mobile dùng ảnh vuông (hero_slide_N_mobile, khuyến nghị 800×800) qua <source>.
   Khung ngang 220px của desktop sẽ cover-crop mất ~44% chiều cao ảnh vuông,
   khiến ảnh mobile trông y hệt ảnh desktop. Chuyển sang aspect-ratio 1/1 để
   ảnh mobile hiện đủ bố cục; height:auto để aspect-ratio quyết định chiều cao. */
@media (max-width: 639px) {
  .hero-slider__img {
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

.hero-slider__link { display: block; }

/* Chấm điều hướng — dùng lại màu bullet thương hiệu khai báo ở phần Swiper theme */
.hero-slider__dots.swiper-pagination {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 7px;
  z-index: 2;
}
.hero-slider__dots .swiper-pagination-bullet {
  margin: 0;
  cursor: pointer;
  /* Viền mờ để chấm luôn nhìn rõ trên ảnh sáng */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
  transition: opacity .2s ease, transform .2s ease;
}
.hero-slider__dots .swiper-pagination-bullet:hover { opacity: .85; }
.hero-slider__dots .swiper-pagination-bullet-active { transform: scale(1.15); }

@media (prefers-reduced-motion: reduce) {
  .hero-slider__dots .swiper-pagination-bullet { transition: none; }
}


/* ============================================================
   Mobile — thu gọn khoảng đệm dọc giữa các section trang chủ.
   Trên màn hẹp, padding thiết kế cho desktop (56-72px) tạo ra
   những khoảng trống quá dài, khách phải cuộn nhiều mới hết trang.
   Các section dùng Tailwind chỉnh trực tiếp trong .bwt (py-7 sm:py-12);
   phần dưới đây dành cho các section định nghĩa bằng CSS thuần.
   ============================================================ */
@media (max-width: 639px) {
  /* Flash sale */
  .fs-inner { padding: 20px 20px 24px; }

  /* Câu chuyện vùng nguyên liệu */
  .st-section { margin-top: 28px; }
  .st-inner { padding: 34px 20px 40px; gap: 30px; }

  /* Đánh giá khách hàng */
  .rv-section { margin-top: 30px; }
  .rv-inner { padding: 34px 20px 38px; }

  /* Tin tức */
  .ns-inner { padding: 34px 20px 10px; }
  .ns-head { margin-bottom: 22px; }

  /* Đăng ký nhận tin */
  .nl-inner { padding: 34px 20px; gap: 24px; }
}