/**
 * Design tokens — Duong Chau Food.
 *
 * Bang mau lay cam hung tu bien hieu quan an Hoa-Viet: giay goi mau gao rang,
 * muc den, va con dau/triem son do (dau moc dong tren thuc don/hop mang ve).
 * KHONG dung lai bang mau/CSS cua Mini App (Liquid Glass xanh #0068ff) — day la
 * mot he thong rieng cho website.
 *
 * Khong the tai Google Fonts (sandbox build khong co mang ra ngoai), nen dung
 * system font stack — Segoe UI/Roboto/Helvetica deu ho tro day du dau tieng
 * Viet, an toan hon webfont ngoai co the loi dau khi thieu glyph to hop.
 */

:root {
  color-scheme: light;

  /* Mau nen & chu */
  --rice: #f8f1e4; /* nen giay goi */
  --rice-deep: #efe4cf; /* nen the/card tren rice */
  --ink: #241a12; /* muc den — chu chinh, nen header/footer */
  --ink-soft: #4a3c2c; /* chu phu */
  --ink-faint: #8a7a63; /* chu nhat, meta */

  /* Mau nhan dien */
  --seal: #b3271e; /* do son triem — CTA, gia, badge */
  --seal-deep: #8a1e17; /* do dam hon, hover/active */
  --seal-tint: #f3d9d3; /* do rat nhat, nen badge/hover */
  --ginger: #c8781f; /* cam gung — sao danh gia, highlight phu */
  --bamboo: #3f6b45; /* xanh tre — con hang/thanh cong */
  --bamboo-tint: #e1ecdd;

  --line: #e2d6bd; /* duong vien tren nen rice */
  --line-strong: #cdbd9a;

  --white: #fffdf8;

  /* Typography */
  --font-display: ui-serif, "Iowan Old Style", "Noto Serif", Georgia, "Times New Roman", serif;
  --font-body: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Nhip khoang cach */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-card: 0 2px 10px rgba(36, 26, 18, 0.08);
  --shadow-raised: 0 8px 24px rgba(36, 26, 18, 0.14);
  --shadow-overlay: 0 18px 50px rgba(36, 26, 18, 0.22);

  /* Vai tro semantic de component khong phu thuoc truc tiep vao ten mau. */
  --surface: var(--white);
  --surface-alt: var(--rice-deep);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-soft);
  --text-muted: var(--ink-faint);
  --border: var(--line);
  --border-strong: var(--line-strong);

  --header-h: 64px;
  --bottomnav-h: 60px;
  --sticky-cta-h: 69px;
  --container-max: 1180px;
  --container-wide: 1320px;

  --focus-ring: 0 0 0 3px rgba(179, 39, 30, 0.42);
  --focus-ring-dark: 0 0 0 3px rgba(255, 253, 248, 0.72);
  --transition-fast: 140ms ease;
  --transition-base: 220ms ease;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    --transition-fast: 140ms ease;
    --transition-base: 220ms ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
  }
}


/* ===== Reset co ban ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body, #root { height: 100%; }
body {
  margin: 0;
  background: var(--rice);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; }
a { color: var(--seal); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; color: var(--ink); }
p { margin: 0; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ===== Layout khung ===== */
.app-shell {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.app-main {
  flex: 1;
  padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px) + var(--space-5));
}

@media (min-width: 1024px) {
  .app-main { padding-bottom: 0; }
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

@media (min-width: 1024px) {
  .container { padding: 0 var(--space-6); }
}

/* ===== Header desktop ===== */
.site-header {
  display: none;
}

@media (min-width: 1024px) {
  .site-header {
    display: block;
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--ink);
    color: var(--rice);
    border-bottom: 3px solid var(--seal);
  }
  .site-header__row {
    height: var(--header-h);
    display: flex;
    align-items: center;
    gap: var(--space-6);
  }
  .site-header__nav {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex: 0 0 auto;
  }
  .site-header__nav a {
    color: var(--rice);
    opacity: 0.85;
    font-size: 14.5px;
    letter-spacing: 0.02em;
  }
  .site-header__nav a:hover { opacity: 1; text-decoration: none; }
  .site-header__nav a.is-active { opacity: 1; color: #f0c8a8; }
  .site-header__search {
    flex: 1 1 auto;
    max-width: 420px;
  }
  .site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex: 0 0 auto;
  }
}

/* ===== Logo / dau moc ===== */
.seal-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: inherit;
  white-space: nowrap;
}
.seal-mark:hover { text-decoration: none; }

.seal-mark__chop {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--seal);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
  border: 1.5px solid rgba(255, 253, 248, 0.35);
  flex-shrink: 0;
}

/* ===== O tim kiem ===== */
.search-field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(255, 253, 248, 0.1);
  border: 1px solid rgba(255, 253, 248, 0.25);
  border-radius: var(--radius-md);
  padding: 8px 12px;
}
.search-field input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--rice);
  font-size: 14px;
}
.search-field input::placeholder { color: rgba(248, 241, 228, 0.55); }
.search-field input:focus { outline: none; }
.search-field svg { color: rgba(248, 241, 228, 0.7); flex-shrink: 0; }

.search-field--page {
  background: var(--white);
  border: 1px solid var(--line-strong);
}
.search-field--page input { color: var(--ink); }
.search-field--page input::placeholder { color: var(--ink-faint); }
.search-field--page svg { color: var(--ink-faint); }
.search-field > svg { display: none; }
.search-field__submit {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.search-field__submit:hover { background: rgba(255, 253, 248, 0.12); }
.search-field--page .search-field__submit:hover { background: var(--rice-deep); }

/* ===== Nut icon (gio hang, tai khoan) ===== */
.icon-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(248, 241, 228, 0.25);
  background: transparent;
  color: var(--rice);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.icon-button:hover { background: rgba(248, 241, 228, 0.12); }

.icon-button__badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--seal);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ink);
}

/* ===== Mobile top bar ===== */
.mobile-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--ink);
  color: var(--rice);
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 3px solid var(--seal);
}
@media (min-width: 1024px) {
  .mobile-topbar { display: none; }
}
.mobile-topbar .seal-mark { font-size: 16px; }

/* ===== Bottom nav mobile ===== */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--white);
  border-top: 1px solid var(--line);
  height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 1024px) {
  .bottom-nav { display: none; }
}
.bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--ink-faint);
  font-size: 11px;
  position: relative;
  min-height: 44px;
}
.bottom-nav__item.is-active { color: var(--seal); }
.bottom-nav__item svg { width: 22px; height: 22px; }

.bottom-nav__badge {
  position: absolute;
  top: 2px;
  right: calc(50% - 20px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--seal);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===== Category rail (mobile ngang) ===== */
.category-rail {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding: var(--space-3) var(--space-4);
  scrollbar-width: none;
}
.category-rail::-webkit-scrollbar { display: none; }
.category-rail__chip {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--white);
  color: var(--ink-soft);
  font-size: 13.5px;
  white-space: nowrap;
  cursor: pointer;
}
.category-rail__chip.is-active {
  background: var(--seal);
  border-color: var(--seal);
  color: var(--white);
}

@media (min-width: 1024px) {
  .category-rail { display: none; }
}

/* ===== Sidebar desktop (danh muc) ===== */
.category-sidebar {
  display: none;
}
@media (min-width: 1024px) {
  .category-sidebar {
    display: block;
    width: 220px;
    flex-shrink: 0;
  }
  .category-sidebar__title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-faint);
    margin-bottom: var(--space-3);
  }
  .category-sidebar__list { display: flex; flex-direction: column; gap: 2px; }
  .category-sidebar__item {
    display: block;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    color: var(--ink-soft);
    font-size: 14px;
    cursor: pointer;
    background: none;
    border: none;
    text-align: left;
    width: 100%;
  }
  .category-sidebar__item:hover { background: var(--rice-deep); text-decoration: none; }
  .category-sidebar__item.is-active {
    background: var(--seal-tint);
    color: var(--seal-deep);
    font-weight: 600;
  }
}

.with-sidebar {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
}
.with-sidebar__content { flex: 1; min-width: 0; }

/* ===== Nut ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 11px 20px;
  border-radius: var(--radius-md);
  font-size: 14.5px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast);
  min-height: 44px;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--seal); color: var(--white); }
.btn-primary:hover { background: var(--seal-deep); }
.btn-primary:disabled { background: var(--line-strong); color: var(--ink-faint); cursor: not-allowed; transform: none; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-outline:hover { background: var(--rice-deep); }
.btn-ghost { background: transparent; color: var(--seal); }
.btn-block { width: 100%; }
.btn-sm { padding: 7px 14px; font-size: 13.5px; min-height: 36px; }

/* ===== Form va modal primitives ===== */
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.form-control {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-primary);
  font: inherit;
}
.form-control::placeholder { color: var(--text-muted); }
.form-control[aria-invalid="true"] { border-color: var(--seal); }
.form-help { font-size: 12px; color: var(--text-muted); }
.form-error { font-size: 12px; color: var(--seal-deep); }
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: rgba(36, 26, 18, 0.56);
}
.modal-panel {
  width: min(520px, 100%);
  max-height: min(720px, calc(100dvh - 32px));
  overflow: auto;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-overlay);
}
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.modal-title { font-size: 20px; }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-5); flex-wrap: wrap; }

/* ===== The san pham ===== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (min-width: 640px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
}

.product-card {
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.product-card:hover { box-shadow: var(--shadow-raised); }
@media (hover: hover) {
  .product-card:hover { transform: translateY(-2px); }
}

.product-card__link { color: inherit; display: block; }
.product-card__link:hover { text-decoration: none; }

.product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--rice-deep);
}
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }

.product-card__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--seal);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
}

.product-card__oos {
  position: absolute;
  inset: 0;
  background: rgba(36, 26, 18, 0.55);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: var(--space-3);
}

.product-card__body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.product-card__name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  min-height: 2.7em;
}

.product-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.product-card__price { color: var(--seal); font-weight: 700; font-size: 14.5px; }
.product-card__old-price { color: var(--ink-faint); font-size: 12px; text-decoration: line-through; }

.product-card__meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--ink-faint);
}

.product-card__add {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--seal-tint);
  color: var(--seal-deep);
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  min-height: 40px;
}
.product-card__add:hover { background: var(--seal); color: var(--white); }
.product-card__add:disabled {
  background: var(--rice-deep);
  color: var(--ink-faint);
  cursor: not-allowed;
}

/* ===== Section chung ===== */
.section {
  padding: var(--space-6) 0;
}
.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  gap: var(--space-3);
}
.section__title {
  font-size: 21px;
}
.section__eyebrow {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--seal);
  font-weight: 700;
  margin-bottom: 4px;
  display: block;
}
.section__link { font-size: 13.5px; font-weight: 600; white-space: nowrap; }

/* ===== Footer ===== */
.site-footer {
  background: var(--ink);
  color: rgba(248, 241, 228, 0.75);
  padding: var(--space-7) 0 var(--space-6);
  margin-top: var(--space-7);
}
.site-footer a { color: rgba(248, 241, 228, 0.85); }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 700px) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
.site-footer__col h4 {
  color: var(--rice);
  font-size: 14px;
  margin-bottom: var(--space-3);
}
.site-footer__col ul { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.site-footer__bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(248, 241, 228, 0.15);
  font-size: 12.5px;
  color: rgba(248, 241, 228, 0.5);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ===== Empty/loading/error states ===== */
.state-block {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--ink-faint);
}
.state-block__title { color: var(--ink); font-size: 16px; margin-bottom: var(--space-2); }

/* ===== Trang chinh sach/gioi thieu ===== */
.prose {
  max-width: 680px;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.prose h2 { font-size: 18px; margin-top: var(--space-4); }
.prose h3 { font-size: 16px; }

/* ===== Trang Gio hang ===== */
.cart-page { padding-top: var(--space-4); padding-bottom: var(--space-7); }

.cart-note {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  background: var(--seal-tint);
  color: var(--seal-deep);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: 13.5px;
}
.cart-note p { margin: 2px 0; }

.cart-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
@media (min-width: 1024px) {
  .cart-layout { flex-direction: row; align-items: flex-start; }
  .cart-list { flex: 1.6; }
  .cart-summary { flex: 1; position: sticky; top: calc(var(--header-h) + var(--space-4)); }
}

.cart-list { display: flex; flex-direction: column; gap: var(--space-3); }

.cart-line {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.cart-line__media {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--rice-deep);
  flex-shrink: 0;
}
.cart-line__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cart-line__name { font-size: 14px; font-weight: 600; color: var(--ink); }
.cart-line__price { font-size: 13px; color: var(--ink-faint); }
.cart-line__oos { font-size: 12px; color: var(--seal); font-weight: 600; }
.cart-line__actions { display: flex; align-items: center; gap: var(--space-3); margin-top: 4px; }
.cart-line__remove {
  background: none;
  border: none;
  color: var(--ink-faint);
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cart-line__remove:hover { color: var(--seal); }
.cart-line__total { font-weight: 700; color: var(--seal); font-size: 14px; white-space: nowrap; }

.qty-stepper--sm button { width: 34px; height: 34px; }
.qty-stepper--sm span { min-width: 30px; }

.cart-summary {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.cart-summary__row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.cart-summary__amount { font-size: 20px; font-weight: 700; color: var(--seal); font-family: var(--font-display); }
.cart-summary__note { font-size: 12.5px; color: var(--ink-faint); margin-bottom: var(--space-4); }

.checkout-disabled {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  background: var(--rice-deep);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: 13px;
  color: var(--ink-soft);
}
.checkout-disabled__title { font-weight: 700; color: var(--ink); margin-bottom: 2px; }

/* ===== Trang chi tiet san pham ===== */
.product-detail { padding-top: var(--space-4); padding-bottom: var(--space-7); }
.product-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 13.5px;
  cursor: pointer;
  padding: 8px 0;
  margin-bottom: var(--space-2);
}
.product-detail__layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
@media (min-width: 1024px) {
  .product-detail__layout { flex-direction: row; gap: var(--space-7); align-items: flex-start; }
  .product-detail__gallery { flex: 1; max-width: 480px; }
  .product-detail__info { flex: 1; }
}

.product-detail__main-image {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--rice-deep);
}
.product-detail__main-image img { width: 100%; height: 100%; object-fit: cover; }

.product-detail__thumbs { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; }
.product-detail__thumb {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  background: var(--rice-deep);
}
.product-detail__thumb.is-active { border-color: var(--seal); }
.product-detail__thumb img { width: 100%; height: 100%; object-fit: cover; }

.product-detail__name { font-size: 22px; margin: 6px 0 10px; }
.product-detail__meta-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink-faint);
  margin-bottom: var(--space-3);
}
.product-detail__rating { display: inline-flex; align-items: center; gap: 4px; color: var(--ginger); }
.product-detail__price-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: var(--space-4); flex-wrap: wrap; }
.product-detail__price { font-size: 26px; font-weight: 700; color: var(--seal); font-family: var(--font-display); }
.product-detail__unit { font-size: 13px; color: var(--ink-faint); }
.product-detail__added-note { color: var(--bamboo); font-size: 13.5px; margin-top: 8px; }

.qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  margin: var(--space-3) 0 var(--space-4);
  width: fit-content;
}
.qty-stepper button {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
}
.qty-stepper span { min-width: 40px; text-align: center; font-weight: 600; }

.product-detail__description, .product-detail__reviews { border-top: 1px solid var(--line); }

.review-list { display: flex; flex-direction: column; gap: var(--space-4); }
.review-item { padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.review-item__head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 4px; }
.review-item__name { font-weight: 600; font-size: 14px; }
.review-item__stars { color: var(--ginger); font-size: 13px; }
.review-item__content { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 4px; }
.review-item__date { font-size: 12px; color: var(--ink-faint); }

/* ===== Trang Danh muc / Tim kiem ===== */
.category-page__search {
  padding-top: var(--space-4);
  max-width: 460px;
}
@media (min-width: 1024px) {
  .category-page__search { display: none; }
}

.filter-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-4);
}
@media (min-width: 640px) {
  .filter-bar { flex-direction: row; align-items: center; justify-content: space-between; }
}
.filter-bar__prices {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
}
.filter-bar__prices::-webkit-scrollbar { display: none; }
.filter-chip {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--white);
  color: var(--ink-soft);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.filter-chip.is-active { background: var(--ink); color: var(--rice); border-color: var(--ink); }
.filter-bar__sort {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 13.5px;
  background: var(--white);
  color: var(--ink);
  min-height: 40px;
}

/* ===== Hero trang chu ===== */
.hero {
  background: var(--ink);
  color: var(--rice);
  position: relative;
  overflow: hidden;
  padding: var(--space-7) 0 var(--space-6);
}
.hero::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: var(--seal);
  opacity: 0.18;
}
.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 620px;
}
.hero__title {
  font-size: 30px;
  line-height: 1.25;
  color: var(--rice);
  margin: 8px 0 14px;
}
.hero__title-accent { color: #f0c8a8; }
.hero__tagline {
  font-size: 14.5px;
  color: rgba(248, 241, 228, 0.78);
  max-width: 460px;
  margin-bottom: var(--space-5);
}
.hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.hero .btn-outline { color: var(--rice); border-color: rgba(248, 241, 228, 0.4); }
.hero .btn-outline:hover { background: rgba(248, 241, 228, 0.1); }

@media (min-width: 1024px) {
  .hero { padding: var(--space-8) 0 var(--space-7); }
  .hero__title { font-size: 40px; }
}

/* ===== Luoi danh muc trang chu ===== */
.category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (min-width: 640px) {
  .category-grid { grid-template-columns: repeat(4, 1fr); }
}
.category-grid__item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  min-height: 64px;
}
.category-grid__item:hover { border-color: var(--seal); text-decoration: none; background: var(--seal-tint); }

/* ===== The bai viet ===== */
.post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px) {
  .post-grid { grid-template-columns: repeat(3, 1fr); }
}
.post-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  color: inherit;
}
.post-card:hover { text-decoration: none; box-shadow: var(--shadow-raised); }
.post-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--rice-deep); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: 6px; }
.post-card__date { font-size: 12px; color: var(--ink-faint); }
.post-card__title { font-size: 15.5px; line-height: 1.35; }
.post-card__excerpt {
  font-size: 13px;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== Trang Gioi thieu ===== */
.about-page { padding-top: var(--space-5); padding-bottom: var(--space-7); }
.about-page__title { font-size: 26px; margin: 4px 0 var(--space-4); }
@media (min-width: 1024px) {
  .about-page__title { font-size: 32px; }
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
@media (min-width: 640px) {
  .about-grid { grid-template-columns: repeat(3, 1fr); }
}
.about-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.about-card h2 { font-size: 15px; margin-bottom: 6px; color: var(--seal); }
.about-card p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }

.about-cta {
  background: var(--rice-deep);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: 480px;
}
.about-cta p { font-weight: 600; color: var(--ink); }

/* ===== Trang Lien he ===== */
.contact-page { padding-top: var(--space-5); padding-bottom: var(--space-7); }
.contact-page__title { font-size: 26px; margin: 4px 0 var(--space-2); }
.contact-page__lead { color: var(--ink-soft); max-width: 520px; margin-bottom: var(--space-6); }

.contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 480px;
  margin-bottom: var(--space-6);
}
.contact-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  color: var(--ink);
}
.contact-row:hover { border-color: var(--seal); text-decoration: none; }
.contact-row__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--seal-tint);
  color: var(--seal-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-row__label { font-size: 12px; color: var(--ink-faint); display: block; }
.contact-row__value { font-size: 14.5px; font-weight: 600; }

/* ===== Trang Chinh sach ===== */
.policies-page { padding-top: var(--space-5); padding-bottom: var(--space-7); }
.policies-page__title { font-size: 26px; margin: 4px 0 var(--space-5); }
.policy-block {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--line);
}
.policy-block:first-of-type { padding-top: 0; }
.policy-block:last-of-type { border-bottom: none; }
.policy-block__title { font-size: 17px; margin-bottom: var(--space-3); }

/* ===== Sticky bottom CTA (chi tiet san pham mobile) ===== */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--bottomnav-h);
  z-index: 45;
  background: var(--white);
  border-top: 1px solid var(--line);
  padding: var(--space-3) var(--space-4);
  display: flex;
  gap: var(--space-3);
  box-shadow: 0 -4px 16px rgba(36, 26, 18, 0.08);
}
@media (min-width: 1024px) {
  .sticky-cta { display: none; }
}

/* ===== Workspace 06: nen tang noi dung va responsive ===== */
.site-header, .hero, .site-footer { --focus-ring: var(--focus-ring-dark); }

.rich-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: var(--text-secondary);
}
.rich-text p { margin: 0; }
.rich-text ul, .rich-text ol { margin: 0; padding-left: 1.35em; }
.rich-text ul { list-style: disc; }
.rich-text ol { list-style: decimal; }
.rich-text li + li { margin-top: var(--space-1); }
.rich-text h2, .rich-text h3, .rich-text h4 { margin-top: var(--space-3); }
.rich-text a { text-decoration: underline; text-underline-offset: 2px; }
.rich-text blockquote {
  margin: var(--space-2) 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--seal);
  background: var(--surface-alt);
  color: var(--text-secondary);
}
.rich-text img { width: auto; max-width: 100%; height: auto; border-radius: var(--radius-md); }

.post-detail__cover {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
  margin-bottom: var(--space-5);
}
.post-detail__cover img { width: 100%; height: 100%; object-fit: cover; }
.product-detail__sold, .product-detail__code { color: var(--text-muted); }

.state-block {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.state-block__icon { color: var(--seal); }
.state-block--error { background: var(--seal-tint); border-radius: var(--radius-md); color: var(--seal-deep); }
.state-block--error .state-block__title { color: var(--seal-deep); }
.state-block--loading { min-height: 220px; }
.state-block__action { margin-top: var(--space-2); }
.state-block__spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--line);
  border-top-color: var(--seal);
  border-radius: 50%;
  animation: state-spin 0.8s linear infinite;
}
@keyframes state-spin { to { transform: rotate(360deg); } }

.product-grid--skeleton { pointer-events: none; }
.product-card--skeleton { min-height: 320px; }
.skeleton {
  background: linear-gradient(100deg, var(--rice-deep) 30%, #f8ead5 45%, var(--rice-deep) 60%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.product-card--skeleton .product-card__media { aspect-ratio: 1 / 1; }
.product-card--skeleton .product-card__body { gap: 10px; }
.skeleton-line { height: 12px; border-radius: var(--radius-sm); }
.skeleton-line--wide { width: 88%; }
.skeleton-line--short { width: 52%; }
@keyframes skeleton-shimmer { to { background-position: -200% 0; } }

.toast-region {
  position: fixed;
  right: var(--space-4);
  bottom: calc(var(--bottomnav-h) + var(--space-4));
  z-index: 70;
  pointer-events: none;
}
.toast {
  max-width: min(360px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--ink);
  color: var(--rice);
  box-shadow: var(--shadow-overlay);
  font-size: 14px;
  animation: toast-in var(--transition-base);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.sticky-cta { bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px)); }
.product-detail { padding-bottom: calc(var(--space-7) + var(--sticky-cta-h)); }
.site-footer { padding-bottom: calc(var(--space-6) + var(--bottomnav-h) + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 640px) {
  .container { padding-left: var(--space-5); padding-right: var(--space-5); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .container { max-width: 980px; }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .container { padding-left: var(--space-6); padding-right: var(--space-6); }
  .category-sidebar { width: 240px; }
  .site-footer { padding-bottom: var(--space-6); }
  .product-detail { padding-bottom: var(--space-7); }
}
@media (min-width: 1280px) {
  .container { max-width: var(--container-wide); }
  .product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .post-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1440px) {
  .container { padding-left: var(--space-7); padding-right: var(--space-7); }
  .section { padding-top: var(--space-7); padding-bottom: var(--space-7); }
}
@media (max-width: 400px) {
  .cart-line {
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas: "media body" "media total";
    gap: var(--space-2) var(--space-3);
  }
  .cart-line__media { width: 56px; height: 56px; grid-area: media; }
  .cart-line__body { grid-area: body; }
  .cart-line__total { grid-area: total; justify-self: start; }
  .cart-line__actions { gap: var(--space-2); flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton, .state-block__spinner, .toast { animation: none; }
}

/* ===== Workspace 09: dang nhap email OTP ===== */
.mobile-topbar__actions { display: flex; align-items: center; gap: var(--space-2); }

.account-page {
  padding-top: var(--space-6);
  padding-bottom: var(--space-8);
  max-width: 760px;
}
.account-page__title { font-size: 28px; margin: 4px 0 var(--space-2); }
.account-page__lead { color: var(--ink-soft); max-width: 520px; margin-bottom: var(--space-5); }
.account-page__footnote { margin-top: var(--space-4); color: var(--ink-faint); font-size: 13px; }
.account-card {
  width: min(100%, 480px);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-top: 4px solid var(--seal);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-raised);
}
.account-card form { display: flex; flex-direction: column; gap: var(--space-3); }
.account-card__submit { margin-top: var(--space-2); }
.account-card__otp-field { margin-top: var(--space-2); }
.account-card__otp { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: 0.32em; text-align: center; }
.account-card__message { margin-top: var(--space-3); }
.account-card__label { color: var(--ink-faint); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.account-card__value { margin: 2px 0 var(--space-4); font-family: var(--font-display); font-size: 22px; color: var(--seal); }
.account-card__note { color: var(--ink-soft); margin-bottom: var(--space-5); }

@media (min-width: 1024px) {
  .account-page { padding-top: var(--space-8); }
  .account-page__title { font-size: 34px; }
}