/* ═══════════════════════════════════════════════════════════════════════════
   ONG DÚ ĐẤT RỒNG — LỚP GIAO DIỆN CAO CẤP
   Hướng: SÁNG · THIÊN NHIÊN · SANG

   Tệp này nạp SAU CÙNG (sau site.css và sau style riêng của từng trang) nên
   thắng tự nhiên, không cần rải !important.

   Vì sao đổi:
   - Chữ nâu #3E3428 trên nền kem đọc ra "hàng thủ công", không phải cao cấp
   - Vàng ochre #B8862B ngả mù tạt, trông bụi chứ không lấp lánh
   - Banner đầu trang là mảng xanh đặc kín + hoa văn tổ ong lặp → rất nặng mắt
   - Hoa lá và đàn ong hoạt hình dễ thương, mà dễ thương thì ngược với sang

   Nguyên tắc giữ: KHÔNG đổi bố cục, KHÔNG đổi nội dung. Chỉ đổi cách nhìn.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Xanh rừng giữ nguyên tinh thần, nhưng sạch hơn một chút */
  --forest-900:#123B2A; --forest-700:#1B5741; --forest-500:#2A7A57; --forest-100:#EEF4F0;
  /*
   * Vàng đồng sâu. Trước dùng #B8892C, nhưng đo trên nền kem chỉ được 2,98:1 —
   * dưới mức đọc thoải mái (4,5:1), mà đây là màu của thẻ phân loại, nhãn năm,
   * liên kết chuyên mục... tức là chữ nhỏ, đúng chỗ cần đọc rõ nhất.
   * #8A6614 cho 5,26:1 trên trắng và 4,96:1 trên kem, lại ngả đồng cổ nên
   * đứng cạnh xanh rừng còn sang hơn vàng cũ.
   * Đổi ngay tại biến nên mọi chỗ dùng --honey-600 đều được sửa một lượt,
   * cả khi nó làm NỀN cho chữ trắng (trắng trên #8A6614 = 5,26:1).
   */
  --honey-600:#8A6614; --honey-400:#DCB65E; --honey-100:#FDF8EC;
  /* Nền trắng, chữ gần đen trung tính thay cho nâu */
  /* --bark-500 là màu chữ phụ. #6F6F68 đặt trên nền xanh nhạt chỉ 3,89:1 nên
     hạ tối một nấc; nhìn gần như không khác mà đọc chắc hơn hẳn. */
  --cream-50:#FFFFFF; --bark-800:#1B1B18; --bark-500:#5A5A54;
  --shadow-card:0 1px 2px rgba(0,0,0,.03), 0 14px 38px rgba(20,30,25,.07);
  --shadow-pop:0 10px 24px rgba(20,30,25,.08), 0 26px 60px rgba(20,30,25,.10);
  /* Nền thiên nhiên dùng chung cho mọi banner đầu trang */
  --nen-thien-nhien:
    radial-gradient(46% 58% at 20% 26%, rgba(255,236,182,.85), transparent 62%),
    radial-gradient(42% 50% at 78% 16%, rgba(255,249,224,.85), transparent 60%),
    radial-gradient(64% 74% at 60% 92%, rgba(190,220,193,.75), transparent 68%),
    linear-gradient(155deg,#F8F3E4 0%,#F1EBD8 40%,#E6EEDE 100%);
}

body{background:#fff;color:var(--bark-800)}

/* ── Thanh đầu trang: trắng trong mờ nền ─────────────────────────────────── */
.site-header{
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  color:var(--bark-800);
  border-bottom:1px solid rgba(20,30,25,.07);
  box-shadow:none;
}
.site-header.scrolled{
  background:rgba(255,255,255,.94);
  box-shadow:0 1px 20px rgba(20,30,25,.08);
}
.site-header a{color:var(--bark-800)}
.site-header .brand{color:var(--forest-900);letter-spacing:.08em;font-weight:800}
.site-header .main-nav a{font-size:.82rem;letter-spacing:.05em;font-weight:600}
.site-header .main-nav a:hover{color:var(--honey-600)}
.site-header .logo{filter:none}
.site-header .dd-menu{
  background:#fff;border:1px solid rgba(20,30,25,.08);
  box-shadow:0 12px 34px rgba(20,30,25,.10);
}

/*
 * Toàn bộ thanh điều hướng trong site.css viết cho thời thanh nền XANH ĐẬM:
 * chữ trắng, bảng menu xanh đậm, nút hamburger sáng mờ. Nay nền là trắng nên
 * mỗi chỗ còn sót lại đều hoá vô hình. Quy tắc `.site-header a` ở trên chỉ với
 * tới thẻ <a>, nên những thứ sau vẫn trắng-trên-trắng:
 */

/* 1. "Giới thiệu" là <button>, không phải <a> — nên bị bỏ sót hoàn toàn */
.site-header .nav-dd .dd-btn{color:var(--bark-800)}
.site-header .nav-dd:hover .dd-btn,
.site-header .nav-dd.open .dd-btn{background:var(--forest-100);color:var(--forest-900)}

/* 2. Trang đang xem: nền vàng + chữ trắng chỉ được 3,16:1 → đổi sang xanh rừng */
.site-header .main-nav a.on,
.site-header .nav-dd.here .dd-btn{background:var(--forest-900);color:#fff}
.site-header .main-nav a:hover{background:var(--forest-100)}
/* Số món trong giỏ: viên trắng trên thanh trắng thì mất hút */
.site-header .main-nav .cart .n{background:var(--forest-900);color:#fff}
.site-header .main-nav a.on .n{background:#fff;color:var(--forest-900)}

/* 3. Nút hamburger: nền trắng-mờ trên nền trắng, vạch vàng nhạt → gần như tàng hình */
.site-header .nav-toggle{background:var(--forest-100);border-radius:12px}
.site-header .nav-toggle span{background:var(--forest-900)}

/* 4. Bảng menu điện thoại vẫn nền xanh đậm, mà chữ đã bị đổi thành đen.
      Đây là chỗ hỏng nặng nhất: cả menu chính trên điện thoại không đọc nổi. */
@media(max-width:860px){
  .site-header .main-nav{
    background:#fff;
    border-top:1px solid rgba(20,30,25,.08);
    box-shadow:0 16px 34px rgba(20,30,25,.12);
  }
  .site-header .main-nav .dd-menu{
    background:transparent;border:0;box-shadow:none;
    border-top:1px dashed rgba(18,59,42,.18);
  }
}

/* ── BANNER ĐẦU TRANG — dùng chung cho mọi trang ─────────────────────────── */
.pg-hero, .sv-hero, .fr-hero, .cr-hero, .ab-hero, .od-hero,
.shop-hero, .sr-hero{
  position:relative; overflow:hidden;
  background:var(--nen-thien-nhien);
  color:var(--bark-800);
  padding:3.4rem 1rem 3.6rem;
  text-align:center;
  border-bottom:1px solid rgba(20,30,25,.06);
}
/* Bỏ lớp hoa văn tổ ong lặp phía sau */
.pg-hero::after, .sv-hero::after, .fr-hero::after, .cr-hero::after,
.ab-hero::after, .od-hero::after, .shop-hero::after, .sr-hero::after{display:none}
/* Bỏ hoa lá và đàn ong hoạt hình trên MỌI trang */
.flora, .bee-stage{display:none}
/* Dải kim cương vàng ngăn cách — bỏ cho gọn */
.comb-divider{display:none}

/* Chữ trong banner: xanh rừng đậm thay vì trắng */
.pg-hero h1, .sv-hero h1, .fr-hero h1, .cr-hero h1, .ab-hero h1,
.od-hero h1, .shop-hero h1, .sr-hero h1{
  color:var(--forest-900);
  font-size:clamp(1.85rem,3.6vw,2.75rem);
  line-height:1.14; font-weight:800; letter-spacing:-.018em;
  max-width:20ch; margin:0 auto; text-wrap:balance;
}
.pg-hero h1 em, .shop-hero h1 em, .fr-hero h1 em, .ab-hero h1 em,
.od-hero h1 em, .sv-hero h1 em{color:var(--honey-600);font-style:normal}
.pg-hero p, .sv-hero p, .fr-hero p, .cr-hero p, .ab-hero p,
.od-hero p, .shop-hero p, .sr-hero p{
  color:#3F4A43; max-width:56ch; margin:.9rem auto 0; font-size:1.02rem; line-height:1.62;
}
/* Dòng nhãn nhỏ phía trên tiêu đề */
.pg-hero .kicker, .shop-hero .kicker, .fr-hero .kicker, .ab-hero .kicker,
.od-hero .kicker, .sv-hero .kicker, .cr-hero .kicker{
  color:var(--honey-600); letter-spacing:.18em; text-transform:uppercase;
  font-size:.74rem; font-weight:800;
}

/* Số liệu trong banner: thẻ trắng nổi thay vì ô xanh đậm */
.hero-stats > *, .shop-hero .stat, .pg-hero .stat{
  background:rgba(255,255,255,.82); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 10px 30px rgba(20,30,25,.08);
  border-radius:14px; color:var(--bark-800);
}
.hero-stats b, .shop-hero .stat b, .pg-hero .stat b{color:var(--forest-900)}
.hero-stats span, .shop-hero .stat span, .pg-hero .stat span,
.hero-stats .st span{color:var(--bark-500)}

/* ── Nút: bo tròn hoàn toàn, một đặc một viền ────────────────────────────── */
.btn, .ghost{
  border-radius:999px; padding:.8rem 1.75rem; font-weight:700;
  letter-spacing:.012em; min-height:46px;
  display:inline-flex; align-items:center; justify-content:center;
}
.btn.gold{background:var(--forest-900);color:#fff;border:0;
  box-shadow:0 10px 26px rgba(18,59,42,.20)}
.btn.gold::after{display:none}   /* bỏ hiệu ứng ánh sáng chạy ngang */
.btn.gold:hover{background:#0E2F21}
.ghost{background:rgba(255,255,255,.78);color:var(--forest-900);
  border:1.5px solid rgba(18,59,42,.22);backdrop-filter:blur(6px)}
.ghost:hover{background:#fff;border-color:var(--forest-900)}

/*
 * Các trang tự khai quy tắc riêng cho nút phụ, ví dụ `.shop-hero .ghost`.
 * Chọn lọc cấp đó CỤ THỂ HƠN quy tắc `.ghost` ở trên nên nó thắng — hậu quả là
 * nút giữ màu chữ trắng của thời banner nền tối, đặt lên nền sáng thành
 * trắng-trên-trắng, không đọc được.
 * Nhắc lại ở đúng mức cụ thể ấy để nền sáng luôn đi kèm chữ đậm.
 */
.pg-hero .ghost, .sv-hero .ghost, .fr-hero .ghost, .cr-hero .ghost,
.ab-hero .ghost, .od-hero .ghost, .shop-hero .ghost, .sr-hero .ghost{
  background:rgba(255,255,255,.80); color:var(--forest-900);
  border:1.5px solid rgba(18,59,42,.22); backdrop-filter:blur(6px);
}
.pg-hero .ghost:hover, .sv-hero .ghost:hover, .fr-hero .ghost:hover,
.cr-hero .ghost:hover, .ab-hero .ghost:hover, .od-hero .ghost:hover,
.shop-hero .ghost:hover, .sr-hero .ghost:hover{background:#fff;border-color:var(--forest-900)}

.pg-hero .btn.gold, .sv-hero .btn.gold, .fr-hero .btn.gold, .cr-hero .btn.gold,
.ab-hero .btn.gold, .od-hero .btn.gold, .shop-hero .btn.gold, .sr-hero .btn.gold{
  background:var(--forest-900); color:#fff; border:0;
  box-shadow:0 10px 26px rgba(18,59,42,.20);
}

/* Chữ phụ và liên kết trong banner cũng phải đủ tương phản trên nền sáng */
.pg-hero a:not(.btn):not(.ghost), .sv-hero a:not(.btn):not(.ghost),
.fr-hero a:not(.btn):not(.ghost), .ab-hero a:not(.btn):not(.ghost),
.od-hero a:not(.btn):not(.ghost), .shop-hero a:not(.btn):not(.ghost),
.pg-hero small, .shop-hero small, .ab-hero small,
.od-hero small, .sv-hero small{color:#5C645D}

/* ── Thẻ: viền tóc thay đổ bóng nặng ─────────────────────────────────────── */
.card, .pcard, .fcard, .ncard, .job, .pcell{
  border:1px solid #EEECE6; border-radius:18px; box-shadow:none;
  transition:box-shadow .18s ease, transform .18s ease;
}
.card:hover, .pcard:hover, .fcard:hover, .ncard:hover{
  box-shadow:0 18px 44px rgba(20,30,25,.09); transform:translateY(-3px);
}
.pcard .ph{background:#F8F7F3}

/*
 * ── Thẻ ảnh nền: bỏ khung cứng trên điện thoại ──────────────────────────────
 * `.eco .e` và `.pcell` đặt aspect-ratio cố định (3/4) kèm overflow:hidden.
 * Trên máy tính thẻ đủ rộng nên vừa; xuống 390px thẻ chỉ còn ~180px ngang,
 * chữ xuống dòng nhiều hơn và bị KHOÁ CỨNG cắt mất phần cuối — trang chủ mất
 * dòng chốt của cả 4 thẻ, trang Dịch vụ cắt đôi cả 4 cái nút.
 * Cho chiều cao chạy theo nội dung là hết; máy tính giữ nguyên như cũ.
 */
@media(max-width:860px){
  .eco .e, .pcell{aspect-ratio:auto; min-height:15rem}
  /* Thẻ cao hơn thì lớp phủ tối phải bắt đầu sớm hơn, không chữ trắng sẽ
     rơi trúng mảng tranh sáng — đo được 1,41:1, tức gần như không đọc được. */
  .eco .e::after, .pcell::after{
    background:linear-gradient(180deg, rgba(9,29,20,.08) 0%,
      rgba(9,29,20,.60) 28%, rgba(9,29,20,.90) 55%, rgba(9,29,20,.95) 100%);
  }
}

/*
 * ── Nền vàng nhạt thì đừng đặt chữ trắng ────────────────────────────────────
 * Ba chỗ này tô nền bằng dải chuyển sang --honey-400 (#DCB65E). Chữ trắng trên
 * đó chỉ 2,16:1. Đổi --honey-600 ở trên không cứu được vì đầu sáng vẫn sáng.
 */
.pcard .ribbon{background:var(--honey-600);box-shadow:0 2px 8px rgba(138,102,20,.35)}
/* Chip loại farm nằm đè lên ảnh — vàng cũ ghi thẳng số nên biến không với tới */
.fb-chips .typ{background:rgba(138,102,20,.92)}
/* Nhãn giảm giá: đỏ gạch cũ được 4,48:1, thiếu đúng một chút */
.pcard .sale{background:#B34924}
/*
 * Viên nhãn lấy màu từ bảng trạng thái do Ong Dú Đất Rồng tự đặt trong admin,
 * nên không biết trước sáng hay tối. Nền pha 12% màu ấy với trắng nên luôn rất
 * sáng; chữ vì thế phải pha đủ đen mới chắc đọc được với MỌI màu người dùng
 * chọn — kể cả vàng chanh. 52% là mức an toàn cho cả dải màu.
 */
.pill{color:color-mix(in srgb, var(--pc, #8A7A62) 52%, #000)}

/* Trang chủ ghi thẳng mã màu vàng/xám cũ nên đổi biến không với tới được */
.hh .kicker, .qr-in form label{color:var(--honey-600)}
.qr-in .stats span{color:var(--bark-500)}
.btn-ong{
  background:var(--forest-900);
  box-shadow:0 10px 26px rgba(18,59,42,.20);
}
.btn-ong:hover{background:#0E2F21;box-shadow:0 12px 30px rgba(18,59,42,.26)}

/* ── Khoảng thở ──────────────────────────────────────────────────────────── */
.sec{padding-top:4.6rem}
.sec .head h2{
  font-size:clamp(1.5rem,2.8vw,2.05rem); letter-spacing:-.02em; color:var(--forest-900);
}

/* ── Ô nhập liệu ─────────────────────────────────────────────────────────── */
input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=password], select, textarea{
  border-radius:12px; border:1px solid #E4E1D8; background:#FCFBF8;
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--honey-600); background:#fff;
}

/*
 * ── Banner trang truy xuất tổ ong ──────────────────────────────────────────
 * Lớp `.hero` chỉ trang này dùng, nên trước đó bị bỏ sót: nó vẫn là mảng xanh
 * đặc kèm hoa văn tổ ong — đúng kiểu cũ mà cả site đã bỏ. Mà đây lại là trang
 * khách nhìn thấy đầu tiên sau khi quét QR, tức là mặt tiền thật sự.
 */
.hero{
  background:var(--nen-thien-nhien);
  color:var(--bark-800);
  padding:2.6rem 1rem 3.6rem;
  border-bottom:1px solid rgba(20,30,25,.06);
}
.hero::after{display:none}                      /* hoa văn tổ ong lặp */
.hero .sub{color:var(--honey-600);opacity:1;letter-spacing:.16em}
.hero .code{color:var(--forest-900);letter-spacing:.02em}
.hero .hchip{
  background:rgba(255,255,255,.82);
  border:1px solid rgba(18,59,42,.14);
  color:var(--forest-900);
  backdrop-filter:blur(6px);
}
.hero .hchip a{color:var(--honey-600)}
.hero .hacts .b{
  background:var(--forest-900);border:0;color:#fff;
  border-radius:999px;padding:.55rem 1.25rem;
  box-shadow:0 8px 20px rgba(18,59,42,.18);
}
.hero .hacts .b:hover{background:#0E2F21}
/* Nút phụ đứng cạnh: viền mảnh trên nền sáng */
.hero .hacts .b + .b{
  background:rgba(255,255,255,.8);color:var(--forest-900);
  border:1.5px solid rgba(18,59,42,.22);box-shadow:none;
}
.hero .hacts .b + .b:hover{background:#fff;border-color:var(--forest-900)}

/*
 * ── Nút lên đầu trang ──────────────────────────────────────────────────────
 * Đang neo góc dưới TRÁI nên nằm đè lên chữ ở chân trang. Chuyển sang phải cho
 * đúng thói quen người dùng và tránh chỗ có chữ.
 * Nâng cao thêm trên điện thoại: khi Chị điền hotline/Zalo thì thanh gọi nhanh
 * `.mobile-bar` hiện ra sát đáy, để nguyên 1,2rem là nút sẽ chồng lên nó.
 */
#backtop{left:auto; right:1rem; bottom:1.25rem}
@media(max-width:760px){
  #backtop{bottom:calc(4.9rem + env(safe-area-inset-bottom))}
}

/* ── Chân trang: giữ xanh đậm làm điểm neo, nhưng mềm hơn ────────────────── */
.site-footer{background:linear-gradient(180deg,#123B2A,#0D2C1F)}