/* ===== Design tokens — docs/02-design-system.md ===== */
:root{
  --forest-900:#123B2A; --forest-700:#1E5C40; --forest-500:#2E7D57; --forest-100:#E6F0EA;
  --honey-600:#B8862B; --honey-400:#D9A94A; --honey-100:#FBF3E2;
  --cream-50:#FAF7F0; --bark-800:#3E3428; --bark-500:#8A7A62;
  --radius-card:14px; --radius-btn:9px;
  --shadow-card:0 1px 2px rgba(18,59,42,.05), 0 8px 22px rgba(18,59,42,.06);
  --shadow-pop:0 6px 14px rgba(18,59,42,.10), 0 18px 38px rgba(18,59,42,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
/* Flex item mặc định min-width:auto -> không co được dưới nội dung, gây TRÀN NGANG trên mobile.
   Cho phép co lại để mọi trang vừa khít màn hình hẹp. */
body>*,main>*{min-width:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:'Be Vietnam Pro',system-ui,sans-serif;
  background:var(--cream-50); color:var(--bark-800);
  font-size:16px; line-height:1.6;
  display:flex;flex-direction:column;min-height:100vh;
}
a{color:var(--forest-700)}
.mono{font-variant-numeric:tabular-nums; letter-spacing:.02em}

/* ===== Header + nav gộp một khối ===== */
.site-header{
  background:linear-gradient(180deg, var(--forest-900), #0E3021);
  color:#fff; position:sticky; top:0; z-index:50;
  box-shadow:0 2px 14px rgba(9,29,20,.35);
  transition:box-shadow .2s ease;
}
/* Cuộn xuống: header co gọn + kính mờ */
.site-header.scrolled{
  background:rgba(14,48,33,.88);
  backdrop-filter:blur(10px);
  box-shadow:0 4px 22px rgba(9,29,20,.5);
}
.site-header.scrolled .bar{padding-top:.42rem;padding-bottom:.42rem}
.site-header.scrolled .logo{width:30px;height:30px}
.site-header .bar,.site-header .logo{transition:all .2s ease}
.site-header .bar{
  max-width:1180px;margin:0 auto;
  display:flex;align-items:center;gap:.75rem;
  padding:.7rem 1rem;flex-wrap:wrap;
}
.site-header .logo{width:38px;height:38px;flex:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.3))}
.site-header .logo-img{border-radius:9px;object-fit:cover;display:block;
  box-shadow:0 0 0 1.5px rgba(217,169,74,.55), 0 2px 8px rgba(0,0,0,.35)}
.site-header .brand{
  font-weight:900;font-size:1.02rem;letter-spacing:.07em;
  color:var(--honey-400);text-transform:uppercase;text-decoration:none;
  margin-right:.5rem;
}
.main-nav{display:flex;gap:.15rem;flex-wrap:wrap;margin-left:auto}
.main-nav a{
  text-decoration:none;color:rgba(255,255,255,.85);font-weight:600;font-size:.9rem;
  padding:.5rem .95rem;border-radius:999px;transition:background .15s ease,color .15s ease;
}
.main-nav a:hover{background:rgba(255,255,255,.12);color:#fff}
.main-nav a.on{background:var(--honey-600);color:#fff}
.main-nav .cart .n{
  background:#fff;color:var(--honey-600);border-radius:999px;
  font-size:.72rem;padding:.05rem .45rem;margin-left:.3rem;font-weight:800;
}
/* Dropdown "Giới thiệu" */
.nav-dd{position:relative}
.nav-dd .dd-btn{
  border:0;cursor:pointer;font:inherit;font-weight:600;font-size:.9rem;
  color:rgba(255,255,255,.85);background:transparent;
  padding:.5rem .95rem;border-radius:999px;display:inline-flex;align-items:center;gap:.35rem;
}
.nav-dd .dd-btn i{font-style:normal;font-size:.7rem;transition:transform .18s ease}
.nav-dd:hover .dd-btn,.nav-dd.open .dd-btn{background:rgba(255,255,255,.12);color:#fff}
.nav-dd.here .dd-btn{background:var(--honey-600);color:#fff}
.nav-dd:hover .dd-btn i,.nav-dd.open .dd-btn i{transform:rotate(180deg)}
.nav-dd .dd-menu{
  visibility:hidden;opacity:0;transform:translateY(6px);
  position:absolute;top:calc(100% + .45rem);left:0;min-width:190px;z-index:70;
  background:linear-gradient(180deg,#0E3021,#0B241A);
  border:1px solid rgba(217,169,74,.3);border-radius:14px;
  padding:.45rem;box-shadow:0 16px 34px rgba(9,29,20,.5);
  transition:opacity .16s ease,transform .16s ease;
  display:flex;flex-direction:column;gap:.15rem;
}
.nav-dd:hover .dd-menu,.nav-dd.open .dd-menu,.nav-dd:focus-within .dd-menu{
  visibility:visible;opacity:1;transform:none;
}
.nav-dd .dd-menu a{width:100%;border-radius:9px;padding:.55rem .85rem;font-size:.88rem}

/* Nút hamburger — chỉ hiện mobile */
.nav-toggle{
  display:none;margin-left:auto;width:42px;height:42px;border:0;cursor:pointer;
  background:rgba(255,255,255,.1);border-radius:10px;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.nav-toggle span{width:20px;height:2.5px;border-radius:2px;background:var(--honey-400);transition:transform .2s ease,opacity .2s ease}
.nav-toggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
@media(max-width:860px){
  .site-header .bar{position:relative}
  .nav-toggle{display:flex}
  .main-nav{
    display:none;position:absolute;top:100%;left:0;right:0;z-index:60;
    flex-direction:column;gap:.3rem;margin:0;padding:.8rem 1rem 1.1rem;
    background:linear-gradient(180deg,#0E3021,#0B241A);
    border-top:1px solid rgba(217,169,74,.3);
    box-shadow:0 14px 28px rgba(9,29,20,.45);
  }
  .main-nav.open{display:flex}
  .main-nav a{width:100%;border-radius:10px;padding:.75rem 1rem;font-size:.95rem}
  /* Mobile: dropdown trải phẳng trong danh sách */
  .nav-dd{width:100%}
  .nav-dd .dd-btn{display:none}
  .nav-dd .dd-menu{
    visibility:visible;opacity:1;transform:none;position:static;
    background:transparent;border:0;box-shadow:none;padding:0;min-width:0;
    border-top:1px dashed rgba(217,169,74,.35);padding-top:.35rem;margin-top:.2rem;
  }
}

/* ===== Khung nội dung ===== */
.wrap{max-width:760px;margin:0 auto;padding:1.25rem 1rem;width:100%}
.wrap.wide{max-width:1180px}
/* Mobile: siết khoảng cách chung */
@media(max-width:640px){
  .wrap{padding:1rem .85rem}
  .card{padding:1.05rem}
}
main{flex:1;display:flex;flex-direction:column}

.card{
  background:#fff;border-radius:var(--radius-card);
  box-shadow:var(--shadow-card); padding:1.35rem; margin-bottom:1rem;
  border:1px solid rgba(18,59,42,.07);
}
.card h2{
  font-size:.8rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--bark-500); margin-bottom:.9rem;
  display:flex;align-items:center;gap:.5rem;
}
.card h2::before{content:"";width:16px;height:3px;background:linear-gradient(90deg,var(--honey-600),var(--honey-400));border-radius:2px}

.badge{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.24rem .75rem;border-radius:999px;
  font-size:.8rem;font-weight:700;color:#fff;
}
/* Pill tint màu — nhãn trạng thái đẹp: nền nhạt + chữ đậm cùng tông + chấm màu.
   Màu truyền qua biến --pc (lấy từ state_definitions, không hard-code). */
.pill{
  display:inline-flex;align-items:center;gap:.42rem;
  padding:.22rem .72rem;border-radius:999px;
  font-size:.78rem;font-weight:700;line-height:1.4;white-space:nowrap;
  background:color-mix(in srgb, var(--pc, #8A7A62) 12%, #fff);
  color:color-mix(in srgb, var(--pc, #8A7A62) 78%, #000);
  border:1px solid color-mix(in srgb, var(--pc, #8A7A62) 32%, #fff);
}
.pill::before{
  content:"";width:7px;height:7px;border-radius:999px;flex:none;
  background:var(--pc, #8A7A62);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--pc, #8A7A62) 22%, transparent);
}
/* Pill trên nền tối (hero) */
.pill.dark{
  background:color-mix(in srgb, var(--pc, #D9A94A) 26%, rgba(9,29,20,.6));
  color:#fff;border-color:color-mix(in srgb, var(--pc, #D9A94A) 55%, transparent);
  backdrop-filter:blur(4px);
}
.btn{
  display:inline-block;background:linear-gradient(135deg,var(--forest-700),var(--forest-500));
  color:#fff;padding:.75rem 1.6rem;border-radius:var(--radius-btn);
  font-weight:700;text-decoration:none;border:0;font-size:1rem;cursor:pointer;
  box-shadow:0 3px 10px rgba(30,92,64,.35);
  transition:transform .14s ease, box-shadow .14s ease;
  position:relative;overflow:hidden;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(30,92,64,.45)}
.btn.gold{background:linear-gradient(135deg,var(--honey-600),var(--honey-400));box-shadow:0 3px 10px rgba(184,134,43,.4)}
/* Ánh mật quét qua nút khi hover */
.btn::after{
  content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(105deg, transparent, rgba(255,244,214,.45), transparent);
  transform:skewX(-20deg);transition:left .45s ease;
}
.btn:hover::after{left:130%}

/* ===== Chất ong: divider tổ ong + huy hiệu lục giác ===== */
.comb-divider{
  height:26px;margin-top:-1px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='26' viewBox='0 0 48 26'%3E%3Cpath d='M0 0 h48 v6 l-12 14 h-24 z' fill='none'/%3E%3Cpolygon points='24,2 44,13 24,24 4,13' fill='none' stroke='%23D9A94A' stroke-opacity='.5' stroke-width='1.6'/%3E%3C/svg%3E");
  background-size:48px 26px;background-repeat:repeat-x;
  opacity:.75;
}
.hex-chip{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:48px;flex:none;
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background:linear-gradient(150deg,var(--honey-400),var(--honey-600));
  color:#fff;font-weight:900;
}

/* ===== THẺ ẢNH dùng chung (phong cách landing VN) ===== */
.photo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem}
@media(min-width:860px){.photo-grid{grid-template-columns:repeat(var(--cols,4),1fr);gap:1.1rem}}
.pcell{
  position:relative;overflow:hidden;border-radius:18px;
  aspect-ratio:var(--ar,3/4);display:flex;color:#fff;
  box-shadow:var(--shadow-card);transition:transform .18s ease, box-shadow .18s ease;
}
.pcell:hover{transform:translateY(-5px);box-shadow:var(--shadow-pop)}
.pcell>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.pcell:hover>img{transform:scale(1.09)}
.pcell::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(9,29,20,.05) 28%, rgba(9,29,20,.9) 84%)}
.pcell .in{position:relative;z-index:2;margin-top:auto;padding:1rem 1.05rem 1.1rem;width:100%}
.pcell .ic{width:40px;height:45px;display:flex;align-items:center;justify-content:center;
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background:linear-gradient(150deg,var(--honey-400),var(--honey-600));font-size:1.15rem;margin-bottom:.55rem;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}
.pcell b{display:block;margin-bottom:.25rem;font-size:1rem;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.pcell p{font-size:.8rem;color:rgba(255,255,255,.88);line-height:1.5}
.pcell .btn{margin-top:.7rem;padding:.5rem 1.1rem;font-size:.85rem}
.pcell.noimg{background:linear-gradient(150deg,var(--forest-700),var(--forest-900))}

/* ===== TIMELINE ZIGZAG dùng chung ===== */
.zig{position:relative;max-width:960px;margin:0 auto}
.zig::before{content:"";position:absolute;top:10px;bottom:10px;left:19px;width:0;
  border-left:2.5px dashed var(--honey-400);opacity:.65}
@media(min-width:860px){.zig::before{left:50%;transform:translateX(-50%)}}
.zstep{position:relative;display:grid;gap:1rem;margin-bottom:2.2rem;padding-left:56px}
.zstep:last-child{margin-bottom:.4rem}
@media(min-width:860px){
  .zstep{grid-template-columns:1fr 1fr;gap:2.6rem;padding-left:0;align-items:center}
  .zstep .zimg{grid-column:1}
  .zstep .ztxt{grid-column:2}
  .zstep:nth-child(even) .zimg{grid-column:2;grid-row:1}
  .zstep:nth-child(even) .ztxt{grid-column:1;grid-row:1;text-align:right}
}
.zstep .znum{
  position:absolute;left:0;top:0;width:40px;height:45px;z-index:2;
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background:linear-gradient(150deg,var(--honey-400),var(--honey-600));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:1.05rem;
  filter:drop-shadow(0 3px 8px rgba(184,134,43,.4));
}
@media(min-width:860px){.zstep .znum{left:50%;top:50%;transform:translate(-50%,-50%)}}
.zstep .zimg{border-radius:16px;overflow:hidden;aspect-ratio:16/9;
  box-shadow:var(--shadow-card);border:1px solid rgba(18,59,42,.08)}
.zstep .zimg img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.zstep:hover .zimg img{transform:scale(1.06)}
.zstep .zimg.noimg{background:linear-gradient(150deg,var(--forest-100),var(--honey-100));
  display:flex;align-items:center;justify-content:center;font-size:2.4rem}
.zstep b{color:var(--forest-900);font-size:1.08rem;font-weight:900}
.zstep p{font-size:.9rem;color:var(--bark-500);margin-top:.35rem;line-height:1.65}

/* ===== Hiện dần khi cuộn (JS gắn class .in) ===== */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease, transform .5s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ===== Thanh phân loại — pill lục giác cao cấp (dùng chung mọi trang) ===== */
.cats{display:flex;gap:.5rem;flex-wrap:wrap;margin:1.4rem 0 1.1rem}
.cats a{
  display:inline-flex;align-items:center;gap:.5rem;
  text-decoration:none;font-size:.86rem;font-weight:700;padding:.5rem 1.1rem;
  border-radius:999px;background:#fff;border:1.5px solid rgba(18,59,42,.13);color:var(--bark-800);
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  position:relative;
}
.cats a::before{
  content:"";width:9px;height:10px;flex:none;
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background:linear-gradient(150deg,var(--honey-400),var(--honey-600));
  opacity:.55;transition:opacity .14s ease, transform .14s ease;
}
.cats a:hover{
  transform:translateY(-2px);border-color:var(--honey-400);
  box-shadow:0 5px 14px rgba(184,134,43,.22);
}
.cats a:hover::before{opacity:1;transform:rotate(18deg) scale(1.15)}
.cats a.on{
  background:linear-gradient(135deg,var(--forest-700),var(--forest-900));
  border-color:transparent;color:#fff;
  box-shadow:0 4px 14px rgba(18,59,42,.35);
}
.cats a.on::before{opacity:1;box-shadow:0 0 0 3px rgba(217,169,74,.3)}
.cats a i{
  font-style:normal;font-size:.7rem;font-weight:800;
  background:var(--honey-100);color:var(--honey-600);
  border-radius:999px;padding:.08rem .5rem;
}
.cats a.on i{background:rgba(217,169,74,.9);color:#fff}

/* ===== Nút lên đầu trang — lục giác ===== */
#backtop{
  position:fixed;left:1rem;bottom:1.2rem;z-index:70;width:46px;height:52px;
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background:linear-gradient(150deg,var(--forest-700),var(--forest-900));
  color:var(--honey-400);border:0;font-size:1.2rem;font-weight:900;cursor:pointer;
  opacity:0;pointer-events:none;transition:opacity .25s ease, transform .18s ease;
}
#backtop.show{opacity:.92;pointer-events:auto}
#backtop:hover{transform:translateY(-3px)}
.muted{color:var(--bark-500);font-size:.85rem}

/* ===== Breadcrumb (FRS 10.1) ===== */
.breadcrumb{width:100%;max-width:1180px;margin:0 auto;padding:.85rem 1rem .1rem;display:flex;flex-wrap:wrap;
  align-items:center;gap:.35rem;font-size:.83rem;color:var(--bark-500)}
.breadcrumb a{color:var(--forest-700);text-decoration:none;font-weight:600}
.breadcrumb a:hover{color:var(--honey-600)}
.breadcrumb .sep{color:var(--bark-500);opacity:.6}
.breadcrumb [aria-current="page"]{color:var(--bark-800);font-weight:700}

/* ===== Thanh bộ lọc dùng chung (Farm, Tin tức) ===== */
.fbar{background:#fff;border:1px solid rgba(18,59,42,.08);border-radius:14px;
  box-shadow:var(--shadow-card);padding:.9rem 1.1rem;margin-bottom:1.2rem;display:grid;gap:.55rem}
.frow{display:grid;gap:.35rem}
@media(min-width:700px){.frow{grid-template-columns:96px 1fr;align-items:baseline;gap:.7rem}}
.flab{font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--bark-500)}
.fchips{display:flex;gap:.4rem;flex-wrap:wrap}
.fchips a{font-size:.82rem;font-weight:700;text-decoration:none;color:var(--forest-700);
  border:1px solid rgba(18,59,42,.16);border-radius:999px;padding:.28rem .8rem;
  background:#fff;transition:background .13s ease,color .13s ease,border-color .13s ease}
.fchips a:hover{border-color:var(--honey-400);color:var(--honey-600)}
.fchips a.on{background:var(--forest-700);color:#fff;border-color:transparent}
.fchips a i{font-style:normal;opacity:.6;font-size:.75rem;margin-left:.25rem}
.fchips a.mo{opacity:.45}
.fclear{justify-self:start;font-size:.8rem;font-weight:700;color:#C4552D;text-decoration:none;
  margin-top:.15rem;border-top:1px dashed rgba(18,59,42,.12);padding-top:.6rem;width:100%}

/* ===== Footer ===== */
.site-footer{
  background:linear-gradient(180deg,#0E3021,var(--forest-900));
  color:rgba(255,255,255,.75);margin-top:2.5rem;
}
.site-footer .cols{
  max-width:1180px;margin:0 auto;padding:2.2rem 1rem 1.2rem;
  display:grid;gap:1.5rem;grid-template-columns:1fr;
}
@media(min-width:720px){.site-footer .cols{grid-template-columns:2fr 1fr 1fr}}
.site-footer h4{color:var(--honey-400);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.6rem}
.site-footer a{color:rgba(255,255,255,.85);text-decoration:none;display:block;padding:.18rem 0;font-size:.9rem}
.site-footer a:hover{color:var(--honey-400)}
.site-footer .brandline{font-weight:900;letter-spacing:.07em;color:var(--honey-400);text-transform:uppercase;margin-bottom:.4rem}
/* ===== Thanh liên hệ nhanh dưới đáy — CHỈ trên điện thoại =====
   Khách Việt quen bấm gọi/nhắn Zalo hơn điền biểu mẫu. Trên máy tính thì ẩn,
   vì ở đó đã có nút chat nổi góc phải và hotline trên đầu trang. */
.mobile-bar{display:none}
@media(max-width:760px){
  .mobile-bar{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    position:fixed;left:0;right:0;bottom:0;z-index:90;
    background:#fff;border-top:1px solid rgba(18,59,42,.12);
    box-shadow:0 -3px 14px rgba(18,59,42,.12);
    padding-bottom:env(safe-area-inset-bottom); /* iPhone có thanh gạt dưới */
  }
  .mobile-bar a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
    padding:.55rem .3rem;text-decoration:none;font-size:.7rem;font-weight:800;
    color:var(--forest-900);line-height:1.2;
  }
  .mobile-bar a+a{border-left:1px solid rgba(18,59,42,.1)}
  .mobile-bar a:active{background:var(--honey-100)}
  .mb-call{color:var(--forest-700)!important}
  .mb-zalo{color:#0068FF!important}
  .mb-zalo .zi{font-weight:900;font-size:.95rem;line-height:1}
  .mb-shop{color:var(--honey-600)!important}
  /* Chừa chỗ cho thanh, kẻo nó che mất phần cuối trang */
  body{padding-bottom:60px}
  /* Nút chat nổi nhích lên để không chồng lên thanh */
  .chat-float{bottom:4.6rem!important}
}

/* Thông tin doanh nghiệp bắt buộc theo NĐ 52/2013 — khách Việt cũng quen
   nhìn xuống đây để biết bên bán có thật hay không. */
.site-footer .legal{
  border-top:1px solid rgba(217,169,74,.18);
  max-width:1180px;margin:0 auto;padding:1rem 1rem .2rem;
  font-size:.8rem;line-height:1.7;color:rgba(255,255,255,.62);
}
.site-footer .legal b{color:rgba(255,255,255,.86);font-weight:700}
.site-footer .legal span+span::before{content:"·";margin:0 .5rem;opacity:.45}
.site-footer .legal a{display:inline;color:var(--honey-400);padding:0}
@media(max-width:560px){
  /* Điện thoại: mỗi mục một dòng cho dễ đọc và dễ bấm số */
  .site-footer .legal span{display:block}
  .site-footer .legal span+span::before{content:none}
}
.site-footer .copy{
  border-top:1px solid rgba(217,169,74,.18);text-align:center;
  padding: .9rem 1rem;font-size:.78rem;color:rgba(255,255,255,.55);
}