/* ═══════════════════════════════════════════════════════════════════════════
   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:#4C4C46;  /* 6,9 -> 8,3 tren trang: cung ly do voi trang chu — dat chuan nhung bot, nang mot nac cho sac */
  --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}
/* ── Header có màu (yêu cầu 28/07/2026): dải ruy băng thương hiệu 3px chạy
   trên đỉnh (xanh rừng → vàng mật → xanh rừng), mục menu được viên hoá —
   rê chuột nền kem mật, mục đang mở nền xanh rừng chữ trắng (12,5:1). Thanh
   trắng trơn trước đó không có lấy một điểm màu nào ngoài logo. ── */
.site-header{ position:sticky; }
.site-header::before{
  content:''; display:block; height:3px;
  background:linear-gradient(90deg, var(--forest-900) 0%, var(--honey-400) 35%,
              var(--honey-600) 50%, var(--honey-400) 65%, var(--forest-900) 100%);
}
.site-header .main-nav a,
.site-header .nav-dd .dd-btn{ border-radius:999px; transition:background .18s ease, color .18s ease }
.site-header .main-nav a:hover,
.site-header .nav-dd:hover .dd-btn{ background:var(--honey-100); color:var(--forest-900) }
.site-header .main-nav a.on,
.site-header .nav-dd.here .dd-btn{ background:var(--forest-900); color:#fff }
.site-header .main-nav .cart .n{ background:var(--forest-900); color:#fff }

/* Dropdown "Giới thiệu": các mục cùng MỘT khuôn viên — mục đang chọn viên
   xanh đậm, mục thường cũng có đệm y hệt và hover viên kem, nên danh sách
   thẳng khối chứ không phải một viên to giữa đám chữ trần. */
.site-header .dd-menu{ min-width:210px; padding:.5rem }
.site-header .dd-menu a{
  display:block; font-size:.92rem; font-weight:600;
  padding:.6rem .9rem; border-radius:10px; line-height:1.35;
}
.site-header .dd-menu a:hover{ background:var(--honey-100); color:var(--forest-900) }
.site-header .dd-menu a.on{ background:var(--forest-900); color:#fff }

/* Menu to hơn một nấc (yêu cầu 28/07/2026): 0,82 → 0,95rem, đệm rộng thêm và
   thanh header cao thêm chút. Chữ menu 0,82rem trên màn 1440 nhỏ so với phần
   còn lại của trang — mục điều hướng chính thì phải bấm được dễ. */
.site-header .main-nav a{font-size:.95rem;letter-spacing:.03em;font-weight:600;padding:.58rem .64rem}
.site-header .nav-dd .dd-btn{font-size:.95rem;letter-spacing:.03em;padding:.58rem .64rem}
.site-header .brand{font-size:1.14rem}
.site-header .logo{width:44px;height:44px}
.site-header .bar{padding-top:.85rem;padding-bottom:.85rem;gap:.6rem}

/*
 * HEADER PHẢI GỌN TRONG MỘT HÀNG.
 *
 * Đợt phóng to menu ở trên chỉ đổi cỡ chữ, nhưng lúc đó đệm hai bên mỗi mục
 * để 1,05rem. Cộng lại: 9 mục menu chiếm 984px, trong khi khung .bar rộng
 * 1180px trừ đi logo + tên thương hiệu thì chỉ còn 865px cho menu. Thừa
 * 119px, mà .bar lại để flex-wrap:wrap — nên cả cụm menu bị đẩy xuống hàng
 * thứ hai, nhìn ra thành header lệch hẳn làm hai tầng. Lỗi chỉ lộ khi đăng
 * nhập, vì "👤 Super Admin" dài hơn chữ "Đăng nhập" của khách vãng lai.
 *
 * Giữ nguyên cỡ chữ 0,95rem như đã yêu cầu — chỉ siết đệm lại (chữ vẫn to,
 * chỉ viên nền ôm sát hơn) và CẤM xuống dòng trên desktop. Tên tài khoản là
 * thứ duy nhất không đoán trước được độ dài nên cho nó co lại và cắt bằng
 * dấu ba chấm; hết chỗ thì tên ngắn đi chứ menu không bao giờ rớt hàng nữa.
 */
@media(min-width:1200px){
  .site-header .bar{flex-wrap:nowrap}
  .site-header .main-nav{flex-wrap:nowrap;min-width:0}
  .site-header .main-nav a,
  .site-header .nav-dd .dd-btn{white-space:nowrap}
  .site-header .brand{margin-right:0;letter-spacing:.045em;white-space:nowrap;flex:none}
  .site-header .main-nav .acct{min-width:0;overflow:hidden;text-overflow:ellipsis}
}
.site-header.scrolled .bar{padding-top:.55rem;padding-bottom:.55rem}
.site-header.scrolled .logo{width:36px;height:36px}
.site-header .main-nav .cart .n{font-size:.78rem}
.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:1199px){
  .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 — bản RỪNG ĐẬM ÁNH MẬT (30/07, Chị chê bản kem nhạt
   "phèn"): đồng bộ ngôn ngữ với hero trang chủ + trang truy xuất. Một khối
   này ăn cho CẢ 8 trang con — đổi ở đây, đừng đổi lẻ trong blade. ─────────── */
.pg-hero, .sv-hero, .fr-hero, .cr-hero, .ab-hero, .od-hero,
.shop-hero, .sr-hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 54% 80% at 84% -6%, rgba(217,169,74,.18), transparent 62%),
    linear-gradient(158deg,#0D2C1F 0%, #123B2A 52%, #1B5138 100%);
  color:rgba(255,255,255,.86);
  padding:3.6rem 1rem 3.9rem;
  text-align:center;
}
/* Hoạ tiết tổ ong vàng chìm — đủ thấy chất ong, không tranh chữ */
.pg-hero::after, .sv-hero::after, .fr-hero::after, .cr-hero::after,
.ab-hero::after, .od-hero::after, .shop-hero::after, .sr-hero::after{
  content:""; position:absolute; inset:0; opacity:.06; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpolygon points='28,2 52,16 52,46 28,60 4,46 4,16' fill='none' stroke='%23D9A94A' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size:56px 64px; display:block;
}
/* Chỉ vàng mảnh dưới đáy banner — nét "sang" khép dải */
.pg-hero::before, .sv-hero::before, .fr-hero::before, .cr-hero::before,
.ab-hero::before, .od-hero::before, .shop-hero::before, .sr-hero::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px; z-index:2;
  background:linear-gradient(90deg,transparent,#C79B4B 18%,#EBC97C 50%,#C79B4B 82%,transparent);
}
/* 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}

/* Tiêu đề trắng, nới 28ch — hết cảnh gãy 3 dòng lởm chởm như bản cũ */
.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:#fff;
  font-size:clamp(1.85rem,3.6vw,2.75rem);
  line-height:1.16; font-weight:800; letter-spacing:-.015em;
  max-width:28ch; margin:0 auto; text-wrap:balance;
  text-shadow:0 2px 18px rgba(0,0,0,.25);
}
.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:#EBC97C;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:rgba(255,255,255,.82); max-width:58ch; margin:.95rem auto 0;
  font-size:1.02rem; line-height:1.66;
}
/* Dòng nhãn nhỏ phía trên tiêu đề — vàng mật sáng trên nền tối */
.pg-hero .kicker, .shop-hero .kicker, .fr-hero .kicker, .ab-hero .kicker,
.od-hero .kicker, .sv-hero .kicker, .cr-hero .kicker{
  color:#EBC97C; letter-spacing:.2em; text-transform:uppercase;
  font-size:.74rem; font-weight:800; margin-bottom:.55rem; display:block;
}
@media(max-width:640px){
  .pg-hero, .sv-hero, .fr-hero, .cr-hero, .ab-hero, .od-hero,
  .shop-hero, .sr-hero{padding:2.7rem 1rem 3rem}
}

/* Số liệu trong banner: kính mờ tối, số vàng — cùng chất trang truy xuất */
.hero-stats > *, .shop-hero .stat, .pg-hero .stat{
  background:rgba(255,255,255,.09); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.17);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  border-radius:14px; color:rgba(255,255,255,.85);
}
.hero-stats b, .shop-hero .stat b, .pg-hero .stat b{color:#EBC97C}

/* Gạch vàng ngắn dưới tiêu đề khối — nét "sang" thống nhất toàn site */
.tc .dau h2::after{
  content:""; display:block; width:46px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,#C79B4B,#EBC97C); margin-top:.5rem;
}
/* Nhãn dưới số: sáng dịu trên kính tối (30/07 — bản cũ bark-500 tối om trên nền rừng) */
.hero-stats span, .shop-hero .stat span, .pg-hero .stat span,
.hero-stats .st span{color:rgba(255,255,255,.75)}

/* ── 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)}

/* Nút chính trong banner tối: VÀNG MẬT đặc, chữ rừng đậm — CTA phải sáng nhất dải
   (bản cũ nền forest-900 = nút tối chìm nghỉm trên nền tối, 30/07) */
.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:linear-gradient(135deg,#EBC97C,#C79B4B); color:#123B2A; border:0;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
}
.pg-hero .btn.gold:hover, .sv-hero .btn.gold:hover, .fr-hero .btn.gold:hover,
.cr-hero .btn.gold:hover, .ab-hero .btn.gold:hover, .od-hero .btn.gold:hover,
.shop-hero .btn.gold:hover, .sr-hero .btn.gold:hover{
  background:linear-gradient(135deg,#F3D794,#D9A94A);
}

/* Chữ phụ và liên kết trong banner tối: vàng sáng / trắng dịu */
.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){color:#EBC97C}
.pg-hero small, .shop-hero small, .ab-hero small,
.od-hero small, .sv-hero small{color:rgba(255,255,255,.72)}

/* ── 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)}

/* ── Chuẩn vùng chạm điện thoại (rà mobile 29/07/2026, WCAG 2.5.8) ──
   Link đứng MỘT MÌNH (logo, footer, breadcrumb) phải đủ cao cho ngón tay;
   link nằm giữa câu văn được chuẩn miễn trừ nên không đụng. */
.site-header .brand{display:inline-flex;align-items:center;min-height:44px}
.site-footer .cols a{display:inline-block;padding:.35rem 0}
.crumbs a,.breadcrumb a{display:inline-block;padding:.35rem .1rem}

/* ══ LUỒNG MUA HÀNG — dùng chung Giỏ hàng + Thanh toán (30/07) ═══════════════
   Đặt ở đây thay vì trong từng blade để hai bước không bao giờ lệch tông nhau.
   Sửa một chỗ là cả phễu mua đổi theo. */

/* Dải đầu trang + 3 bước */
.mua-dau{
  position:relative; overflow:hidden; text-align:center;
  background:
    radial-gradient(ellipse 54% 80% at 84% -6%, rgba(217,169,74,.18), transparent 62%),
    linear-gradient(158deg,#0D2C1F 0%, #123B2A 52%, #1B5138 100%);
  padding:2.2rem 1rem 2.4rem; margin-bottom:1.4rem;
}
.mua-dau::after{
  content:""; position:absolute; inset:0; opacity:.06; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpolygon points='28,2 52,16 52,46 28,60 4,46 4,16' fill='none' stroke='%23D9A94A' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size:56px 64px;
}
.mua-dau::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px; z-index:2;
  background:linear-gradient(90deg,transparent,#C79B4B 18%,#EBC97C 50%,#C79B4B 82%,transparent);
}
.mua-dau h1{position:relative;z-index:2;color:#fff;font-size:clamp(1.6rem,3.2vw,2.2rem);
  font-weight:800;letter-spacing:-.015em;margin:0}
.mua-dau .dem{position:relative;z-index:2;color:rgba(255,255,255,.78);font-size:.92rem;margin-top:.35rem}

.buoc-mua{position:relative;z-index:2;display:flex;justify-content:center;align-items:center;
  gap:.5rem;flex-wrap:wrap;margin-top:1.1rem}
.buoc-mua .b{display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:700;color:rgba(255,255,255,.55)}
.buoc-mua .b i{width:1.5rem;height:1.5rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  font-style:normal;font-size:.76rem;font-weight:900;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2)}
.buoc-mua .b.xong{color:rgba(255,255,255,.8)}
.buoc-mua .b.xong i{background:rgba(235,201,124,.22);border-color:rgba(235,201,124,.5);color:#EBC97C}
.buoc-mua .b.on{color:#0D2C1F}
.buoc-mua .b.on i{background:linear-gradient(135deg,#EBC97C,#C79B4B);border-color:transparent;color:#123B2A}
.buoc-mua .b.on span{background:linear-gradient(135deg,#EBC97C,#C79B4B);color:#123B2A;border-radius:999px;padding:.2rem .7rem}
.buoc-mua .noi{width:26px;height:2px;border-radius:2px;background:rgba(255,255,255,.18)}
@media(max-width:520px){.buoc-mua .noi{width:14px}.buoc-mua .b{font-size:.75rem}}

/* Đo tương phản trên NỀN SÁNG NHẤT của thẻ (góc có quầng vàng, rgb(65,99,60)):
   nhãn #F3D794 4,87:1 · dòng thường trắng80% 5,07 · đọc gọn trắng78% 4,9 ·
   chữ nút #123B2A trên vàng 4,88 — đều qua 4,5. Đổi màu ở đây nhớ đo lại.
/* Thẻ tóm tắt nền rừng — chỗ duy nhất tối giữa trang sáng, mắt không trượt */
.mua-tom{
  position:relative; overflow:hidden; border-radius:18px; padding:1.3rem 1.35rem 1.4rem;
  background:
    radial-gradient(ellipse 60% 70% at 90% 0%, rgba(217,169,74,.20), transparent 60%),
    linear-gradient(158deg,#123B2A 0%, #0D2C1F 100%);
  box-shadow:0 18px 44px rgba(13,44,31,.22);
}
@media(min-width:900px){.mua-tom{position:sticky;top:5rem}}
.mua-tom::after{
  content:""; position:absolute; inset:0; opacity:.05; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpolygon points='28,2 52,16 52,46 28,60 4,46 4,16' fill='none' stroke='%23D9A94A' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size:56px 64px;
}
.mua-tom > *{position:relative;z-index:2}
.mua-tom h2{color:#F3D794;font-size:.74rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 .9rem;text-align:left}
.mua-tom h2::before,.mua-tom h2::after{display:none}
.mua-tom .dong{display:flex;justify-content:space-between;gap:1rem;padding:.42rem 0;font-size:.94rem;color:rgba(255,255,255,.8)}
.mua-tom .dong b{color:#fff;font-weight:700}
.mua-tom .mon{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;font-size:.9rem;
  color:rgba(255,255,255,.78);border-bottom:1px dashed rgba(255,255,255,.12)}
.mua-tom .mon:last-of-type{border-bottom:0;margin-bottom:.4rem}
.mua-tom .mon b{color:#fff;font-weight:700;white-space:nowrap}
.mua-tom .tong{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  border-top:1px solid rgba(255,255,255,.16);margin-top:.7rem;padding-top:.9rem}
.mua-tom .tong span{color:rgba(255,255,255,.86);font-size:.95rem;font-weight:700}
.mua-tom .tong b{color:#EBC97C;font-size:1.5rem;font-weight:900;letter-spacing:-.01em}
.mua-tom .doc{color:rgba(255,255,255,.78);font-size:.78rem;text-align:right;margin-top:.15rem;font-style:italic}
.mua-tom .nut{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;margin-top:1.05rem;
  background:linear-gradient(135deg,#EBC97C,#C79B4B); color:#123B2A; font-weight:800; font-size:1rem;
  border:0; cursor:pointer; border-radius:999px; padding:.85rem 1.2rem; text-decoration:none;
  box-shadow:0 10px 26px rgba(0,0,0,.28); transition:transform .15s ease, background .15s ease}
.mua-tom .nut:hover{background:linear-gradient(135deg,#F3D794,#D9A94A);transform:translateY(-1px)}
.mua-tom .ghi{color:rgba(255,255,255,.62);font-size:.82rem;line-height:1.55;margin:.7rem 0 0}
.mua-tom .goiy{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:12px;
  padding:.7rem .85rem;font-size:.84rem;color:rgba(255,255,255,.84);margin-top:.85rem;line-height:1.55}
.mua-tom .goiy b{color:#EBC97C}

/* Hàng cam kết cuối trang mua */
.mua-tin{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:1.2rem}
.mua-tin .t{display:flex;align-items:center;gap:.7rem;background:#fff;border:1px solid rgba(18,59,42,.08);
  border-radius:14px;padding:.8rem .95rem;box-shadow:var(--shadow-card)}
.mua-tin .t i{flex:none;width:2.3rem;height:2.3rem;border-radius:11px;display:inline-flex;
  align-items:center;justify-content:center;background:linear-gradient(135deg,#F6EEDC,#EFE3C9);
  color:#AD8129;font-style:normal}
.mua-tin .t span{font-size:.87rem;font-weight:700;color:var(--forest-900);line-height:1.4}

/* ══ THANH ĐẦU TRANG — cụm tiện ích (30/07) ═══════════════════════════════
   Chị chê header "tù tù": bảy mục nằm đều một hàng, biểu tượng là emoji, giỏ
   hàng chỉ là chữ. Nay tách hai nhóm bằng vạch mảnh — trái "đi đâu", phải
   "việc của tôi" — và mỗi mục bên phải có hình khối riêng. */
/* Khoảng thở tách nhóm — thay cho vạch kẻ đã bỏ */
@media(min-width:861px){ .site-header .main-nav .nut-tron{ margin-left:.85rem } }
/* Nút tròn cho tìm kiếm */
.site-header .main-nav .nut-tron{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; padding:0; border-radius:999px;
  color:var(--forest-900); background:transparent; flex:none;
}
.site-header .main-nav .nut-tron .chu-mb{ display:none }
.site-header .main-nav .nut-tron:hover{ background:var(--honey-100); color:var(--honey-600) }
.site-header .main-nav .nut-tron.on{ background:var(--forest-900); color:#fff }

/* Giỏ hàng: viên viền, có icon — số món là chấm vàng nổi ở góc */
.site-header .main-nav .cart{
  display:inline-flex; align-items:center; gap:.4rem; position:relative;
  padding:.5rem .95rem; border-radius:999px;
  border:1.5px solid rgba(18,59,42,.14); color:var(--forest-900); font-weight:700;
}
.site-header .main-nav .cart:hover{ background:var(--honey-100); border-color:rgba(199,155,75,.55); color:var(--honey-600) }
.site-header .main-nav .cart.on{ background:var(--forest-900); border-color:transparent; color:#fff }
.site-header .main-nav .cart .n{
  position:absolute; top:-6px; right:-6px; min-width:20px; height:20px;
  display:inline-flex; align-items:center; justify-content:center; padding:0 5px;
  border-radius:999px; background:linear-gradient(135deg,#EBC97C,#C79B4B);
  color:#123B2A; font-size:.72rem; font-weight:900; border:2px solid #fff;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.site-header .main-nav .cart.on .n{ border-color:var(--forest-900) }

/* Tài khoản: chữ cái đầu trong vòng tròn xanh + tên */
.site-header .main-nav .acct{
  display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .95rem .4rem .4rem;
  border-radius:999px; font-weight:700; color:var(--forest-900);
}
.site-header .main-nav .acct .cc{
  flex:none; width:30px; height:30px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--forest-700),var(--forest-900));
  color:#EBC97C; font-size:.88rem; font-weight:900;
}
.site-header .main-nav .acct:hover{ background:var(--honey-100); color:var(--honey-600) }
.site-header .main-nav .acct.on{ background:var(--forest-900); color:#fff }
.site-header .main-nav .acct.on .cc{ background:#fff; color:var(--forest-900) }

/* Đăng nhập: nút đặc — lời mời rõ ràng nhất trên thanh */
.site-header .main-nav .dang-nhap{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.55rem 1.15rem; border-radius:999px;
  background:var(--forest-900); color:#fff; font-weight:700;
}
.site-header .main-nav .dang-nhap:hover{ background:#0E2F21; color:#fff }

/* Điện thoại: menu xổ dọc — cụm tiện ích xếp thành hàng ngang riêng ở cuối */
@media(max-width:860px){
  .site-header .main-nav .nut-tron,
  .site-header .main-nav .cart,
  .site-header .main-nav .acct,
  .site-header .main-nav .dang-nhap{ width:auto; justify-content:flex-start }
  .site-header .main-nav .cart .n{ position:static; margin-left:.3rem; border-color:transparent }
  /* Nút tròn thành một dòng menu bình thường, có chữ */
  .site-header .main-nav .nut-tron{ width:auto; height:auto; padding:.58rem .64rem; gap:.55rem; border-radius:999px }
  .site-header .main-nav .nut-tron .chu-mb{ display:inline }
}

/* Khổ RỘNG (30/07 — Chị yêu cầu nới ngang): .wrap.wide đang 1180px, các trang
   nhiều cột số liệu (khu tài khoản, trang đơn) cần thêm bề ngang. Khai riêng
   một khổ thay vì sửa .wide — .wide đang dùng ở chục trang khác. */
.wrap.rong{max-width:1260px}