/* ===========================================================================
   RESET CSS NEN TANG TOAN SITE - chuyen tu home.css sang day (2026-09-19) de
   moi trang deu co, khong chi cac trang truoc day nap home.css. Nguyen ban,
   khong sua noi dung (tru dong @charset bo di vi file nay da la UTF-8 tu dau).
   =========================================================================== */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box; }

#admin-bar .wrap {
  margin-top: 0; }

body {
  font-size: 14px;
  font-family: 'Roboto', sans-serif; }

html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
font,
img,
ol,
ul,
li,
button {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: transparent;
  font-family: "Roboto"; }

button, input, textarea {
  outline: none;
  border: none; }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none; }

#calendar_clock {
  display: flex; }
  #calendar_clock li {
    margin-right: 10px; }
    #calendar_clock li:last-child {
      margin-right: 0; }
    #calendar_clock li svg {
      margin-right: 5px; }

.wrap {
  width: 100%;
  padding: 0;
  float: left; }

/* width cố định 1320px trước đây khiến MỌI trang dùng .container (đăng
   nhập/đăng ký, trang tĩnh /trang/*.html, ...) bị tràn ngang trên màn hình
   hẹp hơn 1320px - chữ/bảng bị cắt mất bên phải thay vì co lại vừa khung
   hình. Đổi sang max-width (giống hệt cách .hb-container đã làm đúng ở
   dưới) để co giãn theo viewport, không còn tràn. */
.container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--hb-space-6); }
@media (max-width: 991px) {
  .container {
    padding-left: var(--hb-mobile-gutter);
    padding-right: var(--hb-mobile-gutter);
  }
}

.top_product {
  margin-top: 30px; }

.bottom_product {
  margin-bottom: 20px; }

.clear {
  clear: both; }

.left {
  float: left; }

.right {
  float: right; }

a {
  text-decoration: none;
  color: #333; }

table {
  border-spacing: 0;
  border-collapse: collapse; }

ul {
  list-style-type: none; }

input {
  outline: none; }

select {
  outline: none; }

textarea {
  outline: none; }

/* ==========================================================================
   DESIGN TOKENS — Đông Trùng Hạ Thảo Thái Minh
   Phiên bản tinh gọn: 1 màu CHÍNH (Nâu) + 1 màu PHỤ (Vàng đồng)
   + 1 thang trung tính (Neutral) dùng chung cho mọi mục đích còn lại
   ========================================================================== */

:root {
  /* ---- Typography & Layout ---- */
  /* Roboto đã tự host đủ 5 weight qua @font-face trong roboto_font.css -
     dùng chung 1 token này cho mọi chỗ gọi var(--hb-font) trong home-biz.css,
     tránh mỗi nơi tự khai 1 font khác nhau (nguồn gốc lỗi font web/mobile
     không đồng nhất - xem ghi chú fallback tại chỗ gọi var() trong home-biz.css). */
  --hb-font: "Roboto", sans-serif;
  /* Lề trái/phải chuẩn cho mọi khối trên mobile (trước đây là số 14 viết
     cứng rải rác ở nhiều nơi - gộp về đây để đổi 1 chỗ áp dụng toàn trang). */
  --hb-mobile-gutter: 14px;
  --hb-container: 1500;
  --hb-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --hb-transition: all 0.25s var(--hb-ease);

  /* ==========================================================================
     COLORS
     Nguyên tắc: mỗi màu brand chỉ có 1 sắc gốc + 1 sắc đậm (hover/active)
     + 1 sắc rất nhạt (nền phụ). Không nhân bản "light/dark/50" tràn lan.
     ========================================================================== */

  /* ---- 1. PRIMARY — Nâu đậm (màu chính: text, nền đậm, header) ---- */
  --hb-primary: #3A2312;
  --hb-primary-hover: #241409;   /* dùng khi hover/active trên nền primary */
  --hb-primary-tint: #F6F3F0;    /* nền phụ rất nhạt, không phải màu riêng */

  /* ---- 2. SECONDARY — Vàng đồng (màu phụ: CTA, điểm nhấn) ---- */
  --hb-secondary: #D4B04C;
  --hb-secondary-hover: #B69238; /* hover/active trên nền secondary */
  --hb-secondary-tint: #FBF8F0;  /* nền phụ rất nhạt */

  /* ---- 3. NEUTRAL — 1 thang xám duy nhất, dùng cho mọi nhu cầu còn lại ---- */
  --hb-neutral-50:  #F8FAFC;  /* nền trang, nền card phụ */
  --hb-neutral-100: #F1F5F9;  /* nền hover nhẹ, divider mờ */
  --hb-neutral-200: #E2E8F0;  /* border mặc định */
  --hb-neutral-400: #94A3B8;  /* icon phụ, placeholder */
  --hb-neutral-500: #64748B;  /* text phụ (muted) */
  --hb-neutral-900: #0F172A;  /* text đậm thay thế khi không dùng nâu */

  /* ---- 4. BASE ---- */
  --hb-white: #FFFFFF;
  --hb-black: #000000;

  /* ---- 5. FUNCTIONAL — chỉ giữ mức tối thiểu cho form/thông báo ---- */
  /* Không tách riêng "success/warning/info" nền + chữ nếu không thực sự dùng.
     Nếu hệ thống chưa có form phức tạp, có thể bỏ hẳn mục này. */
  --hb-danger: #DC2626;        /* lỗi form + màu Giá/Khuyến mãi dùng chung */
  --hb-success: #16A34A;       /* trạng thái thành công (đặt hàng, v.v.) */

  /* ---- Semantic aliases — trỏ về token gốc, không định nghĩa màu mới ---- */
  --hb-text-main: var(--hb-primary);
  --hb-text-muted: var(--hb-neutral-500);
  --hb-text-on-dark: var(--hb-white);
  --hb-border: var(--hb-neutral-200);
  /* Độ dày viền thẻ sản phẩm - 1 nguồn chung cho web (.product, .tproduct)
     và mobile (.product, .cate-product, .buyTogether .product) để không còn
     mỗi bên tự khai báo lại và dễ lệch giá trị. */
  --hb-card-border-width: 0.5px;
  --hb-bg-body: var(--hb-white);
  --hb-bg-soft: var(--hb-neutral-50);
  --hb-price: var(--hb-danger);

  /* ==========================================================================
     TYPOGRAPHY SCALE
     ========================================================================== */
  --hb-fw-regular: 400;
  --hb-fw-medium: 500;
  --hb-fw-bold: 700;

  --hb-fs-hero: 3.5rem;       /* 56px */
  --hb-fs-h1: 2.5rem;         /* 40px */
  --hb-fs-h2: 1.875rem;       /* 30px */
  --hb-fs-h3: 1.5rem;         /* 24px */
  --hb-fs-h4: 1.125rem;       /* 18px */
  --hb-fs-body-lg: 1.0625rem; /* 17px */
  --hb-fs-body: 0.9375rem;    /* 15px */
  --hb-fs-sm: 0.8125rem;      /* 13px */
  --hb-fs-xs: 0.75rem;        /* 12px */

  --hb-lh-tight: 1.2;
  --hb-lh-normal: 1.5;
  --hb-lh-relaxed: 1.7;

  /* ==========================================================================
     SPACING, BORDER & SHADOWS
     ========================================================================== */
  --hb-space-1: 4px;
  --hb-space-2: 8px;
  --hb-space-3: 12px;
  --hb-space-4: 16px;
  --hb-space-5: 20px;
  --hb-space-6: 24px;
  --hb-space-8: 32px;
  --hb-space-10: 40px;
  --hb-space-12: 48px;
  --hb-space-16: 64px;
  --hb-space-20: 80px;

  --hb-radius-sm: 4px;
  --hb-radius-md: 8px;
  --hb-radius-lg: 12px;
  --hb-radius-full: 9999px;
  --hb-radius-circle: 50%;

  --hb-shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
  --hb-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --hb-shadow-lg: 0 10px 24px rgba(0,0,0,0.1);
  --hb-shadow-focus: 0 0 0 3px rgba(212, 176, 76, 0.4);

  /* ==========================================================================
     Z-INDEX
     ========================================================================== */
  --hb-z-dropdown: 20;
  --hb-z-sticky: 50;
  --hb-z-drawer: 100;
  --hb-z-modal-backdrop: 150;
  --hb-z-modal: 200;
  --hb-z-toast: 300;

  /* ---- Buttons ---- */
  --hb-btn-padding-y: var(--hb-space-3);
  --hb-btn-padding-x: var(--hb-space-6);
  --hb-btn-font-size: var(--hb-fs-body);
  --hb-btn-font-weight: var(--hb-fw-bold);
  --hb-btn-primary-bg: var(--hb-secondary);
  --hb-btn-primary-text: var(--hb-primary-hover);
  --hb-btn-radius: 0;             /* bo góc sắc theo chuẩn chung, không bo tròn */
  --hb-btn-border-width: 1px;
  --hb-btn-letter-spacing: 0.02em; /* label uppercase dễ đọc hơn */
  --hb-btn-hover-lift: translateY(-2px);
}

/* ==========================================================================
   KHỐI DÙNG CHUNG (không phải token, nhưng đặt ở đây để mọi trang - vốn đều
   load design-tokens.css - dùng chung được đúng 1 định nghĩa container thay
   vì mỗi trang tự viết 1 con số width khác nhau).
   ========================================================================== */
.hb-container {
  max-width: calc(var(--hb-container) * 1px);
  margin: 0 auto;
  padding: 0 var(--hb-space-6);
}
.hb-container--flush {
  max-width: 100%;
  padding: 0;
}
/* Màn hình hẹp (mobile) - lề trái/phải hẹp hơn cho vừa màn hình nhỏ. Trước
   đây rule này chỉ được viết inline riêng ở mobile/home.blade.php nên các
   trang mobile khác dùng .hb-container không được áp dụng - chuyển về đây
   (design-tokens.css load ở MỌI trang) để dùng chung thật sự. */
@media (max-width: 991px) {
  .hb-container {
    padding-left: var(--hb-mobile-gutter);
    padding-right: var(--hb-mobile-gutter);
  }
}