/* Theme "nongnghiep" cho daisyUI 5 - chi ghi de bien mau, khong can build.
   Khi chuyen sang JSP: copy nguyen file nay vao webapp/static/css/. */
html[data-theme="nongnghiep"] {
  color-scheme: light;
  --color-base-100: oklch(100% 0 0);
  --color-base-200: oklch(97.5% 0.01 120);
  --color-base-300: oklch(92% 0.02 120);
  --color-base-content: oklch(27% 0.03 150);
  --color-primary: oklch(52% 0.13 145);
  --color-primary-content: oklch(98% 0.01 145);
  --color-secondary: oklch(50% 0.09 60);
  --color-secondary-content: oklch(98% 0.01 60);
  --color-accent: oklch(80% 0.15 85);
  --color-accent-content: oklch(28% 0.06 80);
  --color-neutral: oklch(30% 0.04 150);
  --color-neutral-content: oklch(97% 0.01 225);
  --color-info: oklch(68% 0.13 235);
  --color-info-content: oklch(20% 0.04 235);
  --color-success: oklch(65% 0.15 155);
  --color-success-content: oklch(18% 0.05 155);
  --color-warning: oklch(82% 0.15 85);
  --color-warning-content: oklch(25% 0.06 85);
  --color-error: oklch(62% 0.2 25);
  --color-error-content: oklch(98% 0.01 25);
  --radius-selector: 1rem;
  --radius-field: 0.6rem;
  --radius-box: 1rem;
}

/* Icon Lucide: svg nam canh chu, can giua theo dong; kich thuoc do class Tailwind size-N tren the <i> (duoc chep sang svg). Chua ve xong van giu cho trong. */
i[data-lucide] { display: inline-block; }
svg.lucide { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* Khung anh san pham gia lap (khi san pham chua co anh) */
.ph {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, oklch(95% 0.05 125), oklch(90% 0.08 105));
  font-size: 4rem; line-height: 1;
}
.ph-sm { font-size: 1.75rem; }
.ph-lg { font-size: 7rem; }
.hero-bg {
  background: radial-gradient(circle at 80% 20%, oklch(80% 0.14 120 / .5), transparent 50%),
              linear-gradient(135deg, oklch(46% 0.13 150), oklch(33% 0.09 165));
}

/* daisyUI 5 da bo lop "form-control" va "label-text" nhung cac form dang dung chung.
   Them lai de: nhan nam tren o nhap, cac o cach nhau (label mac dinh la inline nen margin/space-y khong co tac dung). */
.form-control { display: flex; flex-direction: column; gap: 0.375rem; }
.form-control > .label { padding: 0; min-height: 0; white-space: normal; } /* cho phep dong goi y dai xuong dong, khong ep rong trang tren man hinh hep */
.form-control .label-text { font-size: 0.875rem; font-weight: 500; color: color-mix(in oklab, var(--color-base-content) 80%, transparent); }
.form-control .label-text-alt { font-size: 0.75rem; }

/* Nhan "Het hang"/"Con 3" khong duoc xuong dong trong o bang hep */
.badge { white-space: nowrap; }
/* Admin: link khong gach chan (chi gach khi re chuot vao) */
#adm-main .link { text-decoration: none; }
#adm-main .link:hover { text-decoration: underline; }

/* Anh the san pham: nen xam + mo dan hien khi tai xong -> doi danh muc/loc bang htmx khong bi nhay trang roi hien anh */
.pc-img { opacity: 0; transition: opacity .25s ease; }
.pc-img.is-loaded { opacity: 1; }

/* Footer luon nam day man hinh ke ca khi trang ngan (trang co .site-footer: body xep doc, footer day xuong bang margin-top:auto) */
body:has(> .site-footer) { display: flex; flex-direction: column; min-height: 100vh; }
body:has(> .site-footer) > main { width: 100%; padding-bottom: 3rem; }
.site-footer { margin-top: auto; }

/* Chat: ten nguoi gui + gio cach bong bong chat mot chut (daisyUI mac dinh de sat nhau) */
.chat-header { margin-bottom: .35rem; }
.chat-header time { margin-left: .5rem; }

/* Header khach: bo cuc dat san trong CSS nay (link render-blocking) thay vi chi dua vao Tailwind CDN (sinh CSS bang JS sau khi trang ve) -> chuyen trang
   thanh tim kiem khong bi "dai roi ngan lai". Chieu rong o tim co dinh (co the co lai khi man hinh hep), khong phu thuoc nut ben canh. */
.nv-header { position: sticky; top: 0; z-index: 30; }
.nv-header-inner { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; max-width: 80rem; margin: 0 auto; padding: .5rem 1rem; min-height: 4rem; }
.nv-brand { display: inline-flex; align-items: center; gap: .375rem; white-space: nowrap; font-weight: 800; }
.nv-search { position: relative; min-width: 0; order: 9; flex: 1 1 100%; }
.nv-search label.input { width: 100%; }
.nv-actions { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.nv-actions .btn { padding-inline: .5rem; }
@media (min-width: 640px) {
  .nv-header-inner { flex-wrap: nowrap; gap: .75rem; height: 4rem; padding-block: 0; }
  .nv-search { order: 0; flex: 0 1 34rem; margin-inline: auto; }
  .nv-actions { gap: .5rem; margin-left: 0; }
  .nv-actions .btn { padding-inline: .75rem; }
}