/* Giao diện riêng của HydroCalcs: nền tối kiểu kính mờ, nhấn xanh lá – cyan. Nạp qua SITE.themeCss trong <head>; mọi selector có tiền tố `html` để thắng CSS nền của Base bất kể thứ tự nạp. */
html:root {
  --fg:#eaf6f3; --muted:#9db8b5; --bg:#041417; --card:#0a2226; --line:rgba(255,255,255,.1);
  --accent:#34d399; --accent2:#22d3ee; --lime:#a3e635;
  color-scheme: dark;
}
html body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background-color:#041417;
  background-image:
    radial-gradient(900px 500px at 15% -5%, rgba(52,211,153,.20), transparent 60%),
    radial-gradient(800px 500px at 90% 5%, rgba(34,211,238,.16), transparent 60%),
    radial-gradient(700px 600px at 50% 110%, rgba(163,230,53,.08), transparent 60%),
    radial-gradient(circle at 12% 30%, rgba(125,255,214,.35) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 22%, rgba(125,230,255,.35) 0 3px, transparent 4px),
    radial-gradient(circle at 76% 70%, rgba(125,255,214,.25) 0 2px, transparent 3px),
    radial-gradient(circle at 24% 80%, rgba(125,230,255,.25) 0 3px, transparent 4px),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:auto,auto,auto,auto,auto,auto,auto,48px 48px,48px 48px;
  background-attachment:fixed;
  min-height:100vh;
}
html .wrap, html main.wrap { max-width:1080px; padding-left:20px; padding-right:20px; }
html main { padding-top:48px; padding-bottom:72px; }
html main p, html main li { max-width:72ch; }
html .grid p, html .card p, html .grid li { max-width:none; }

/* Header: thanh nổi dạng viên thuốc */
html .site-header { background:transparent; border:0; position:sticky; top:12px; z-index:20; margin-top:12px; padding:0 20px; }
html .site-header .wrap { max-width:1080px; padding:10px 14px 10px 20px; border:1px solid var(--line); border-radius:20px;
  background:rgba(4,20,23,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 0 40px rgba(34,211,238,.10), inset 0 0 0 1px rgba(255,255,255,.02); }
html .brand { color:#fff; font-weight:800; letter-spacing:-.01em; }
html .brand .logo { color:var(--accent); filter:drop-shadow(0 0 8px rgba(52,211,153,.6)); }
html nav a { margin-left:6px; padding:7px 14px; border-radius:999px; color:var(--muted); font-weight:600; font-size:.95rem; }
html nav a:hover { background:rgba(255,255,255,.07); color:#fff; text-decoration:none; }

/* Chữ */
html h1 { font-size:clamp(2.2rem,5.2vw,3.6rem); font-weight:900; line-height:1.08; letter-spacing:-.025em; margin:.1em 0 .45em; color:#fff; }
html h2 { font-size:clamp(1.6rem,3vw,2.1rem); font-weight:800; letter-spacing:-.02em; margin-top:2.6em; color:#fff; }
html .grad { background:linear-gradient(90deg,var(--lime),var(--accent) 45%,var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
html .eyebrow { display:block; font-size:.78rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--accent2); margin:3.5rem 0 .6rem; }
html .eyebrow + h2 { margin-top:0; }
html .hero .eyebrow { margin:0 0 14px; }
html main a { color:var(--accent); }
html .muted { color:var(--muted); }

/* Card kính mờ */
html .card { background:rgba(255,255,255,.045); border:1px solid var(--line); border-radius:24px; padding:28px; }
html .grid { gap:18px; grid-template-columns:repeat(auto-fill,minmax(235px,1fr)); }
html .grid a.card, html .grid .card { transition:transform .25s, border-color .25s, background .25s, box-shadow .25s; color:var(--muted); }
html .grid a.card:hover { transform:translateY(-4px); border-color:rgba(52,211,153,.45); background:rgba(255,255,255,.07); box-shadow:0 12px 40px rgba(34,211,238,.10); text-decoration:none; }
html .grid a.card strong { color:#fff; font-size:1.08rem; }
html .card details, html details.card { cursor:pointer; }
html details.card summary { list-style:none; }
html details.card summary strong { color:#fff; }

/* Nút */
html button, html .btn { display:inline-block; margin-top:16px; padding:12px 26px; font-size:1rem; font-weight:700; border:0; border-radius:999px; cursor:pointer; text-decoration:none;
  background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#042a26; box-shadow:0 0 24px rgba(52,211,153,.30); transition:transform .2s, box-shadow .2s; }
html button:hover, html .btn:hover { transform:translateY(-1px); box-shadow:0 0 32px rgba(52,211,153,.5); text-decoration:none; }
html main a.btn { color:#042a26; }
html .btn.ghost, html main a.btn.ghost { background:rgba(255,255,255,.05); color:#fff; border:1px solid rgba(34,211,238,.35); box-shadow:0 0 24px rgba(34,211,238,.12); }
html .btns { display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
html .btns .btn { margin-top:8px; }

/* Form */
html label { color:var(--muted); font-size:.9rem; }
html input, html select { background:rgba(255,255,255,.05); color:#fff; border:1px solid var(--line); border-radius:12px; padding:11px 12px; }
html input:focus, html select:focus { outline:2px solid rgba(52,211,153,.55); outline-offset:1px; border-color:transparent; }
html select option { background:#0a2226; color:#fff; }
html .result { background:linear-gradient(135deg,rgba(52,211,153,.14),rgba(34,211,238,.10)); border:1px solid rgba(52,211,153,.35); border-radius:16px; color:#fff; }
html .result strong { color:var(--lime); }

/* Bảng */
html table { border:1px solid var(--line); border-radius:14px; border-collapse:separate; border-spacing:0; overflow:hidden; }
html th, html td { border-bottom:1px solid var(--line); }
html tr:last-child td { border-bottom:0; }
html th { background:rgba(52,211,153,.12); color:#fff; }

/* Footer */
html .site-footer { background:transparent; border-top:1px solid var(--line); padding:28px 0; }
html .site-footer a { color:var(--muted); }
html .site-footer a:hover { color:#fff; }

/* Hero */
html .hero { gap:40px; }
html .hero img { filter:drop-shadow(0 0 40px rgba(34,211,238,.25)); }
html .card img { filter:drop-shadow(0 0 10px rgba(52,211,153,.35)); }

/* ===== Nền thuỷ canh có chuyển động: bong bóng nổi lên, sóng nước, cây đung đưa =====
   Pseudo-element cố định (không thêm DOM), dưới nội dung (z-index âm), không bắt chuột.
   Chỉ animate transform/opacity (chạy trên GPU, không vẽ lại) để không làm nặng máy. */
html body::before, html body::after, html::before, html::after { content:""; position:fixed; pointer-events:none; }

/* Bong bóng: một tile 640px lặp lại, cả lớp trôi lên đúng một tile rồi lặp (liền mạch) */
html body::before { left:0; right:0; top:0; height:calc(100vh + 640px); z-index:-3;
  background-image:
    radial-gradient(circle at 18% 82%, rgba(165,243,252,0) 0 4px, rgba(165,243,252,.32) 5px 6px, rgba(165,243,252,0) 7px),
    radial-gradient(circle at 71% 38%, rgba(165,243,252,0) 0 7px, rgba(165,243,252,.22) 8px 9px, rgba(165,243,252,0) 10px),
    radial-gradient(circle at 42% 60%, rgba(167,243,208,0) 0 3px, rgba(167,243,208,.32) 4px 5px, rgba(167,243,208,0) 6px),
    radial-gradient(circle at 86% 15%, rgba(167,243,208,0) 0 9px, rgba(167,243,208,.18) 10px 11px, rgba(167,243,208,0) 12px),
    radial-gradient(circle at 30% 25%, rgba(165,243,252,0) 0 5px, rgba(165,243,252,.24) 6px 7px, rgba(165,243,252,0) 8px),
    radial-gradient(circle at 60% 90%, rgba(167,243,208,0) 0 6px, rgba(167,243,208,.20) 7px 8px, rgba(167,243,208,0) 9px);
  background-size:640px 640px; animation:rise 45s linear infinite; }
@keyframes rise { to { transform:translateY(-640px); } }

/* Sóng nước ở đáy màn hình: lớp rộng hơn màn hình 1200px, trôi ngang đúng một chu kỳ rồi lặp */
html body::after { left:0; bottom:0; width:calc(100vw + 1200px); height:110px; z-index:-1;
  background-image:url(/img/wave-a.svg), url(/img/wave-b.svg); background-repeat:repeat-x;
  background-position:0 bottom, 400px bottom; background-size:1200px 110px, 600px 90px;
  opacity:.32; animation:drift 24s linear infinite; }
@keyframes drift { to { transform:translateX(-1200px); } }

/* Cây hai bên mép màn hình, đung đưa nhẹ */
html::before, html::after { bottom:0; z-index:-2; width:min(340px,26vw); height:min(460px,36vw); min-width:180px; min-height:245px;
  background-repeat:no-repeat; background-position:center bottom; background-size:contain; opacity:.5;
  transform-origin:50% 100%; animation:sway 9s ease-in-out infinite alternate; }
html::before { left:-10px; background-image:url(/img/plant-left.svg); }
html::after { right:-10px; background-image:url(/img/plant-right.svg); animation-duration:11s; animation-delay:-3s; }
@keyframes sway { from { transform:rotate(-1.8deg); } to { transform:rotate(1.8deg); } }

@media (max-width:720px) { html::after { display:none; } html::before { opacity:.35; } }
@media (max-width:720px) { html body::before { display:none; } }
@media (prefers-reduced-motion: reduce) {
  html body::before, html body::after, html::before, html::after { animation:none; }
}