/* Theme: Sinh học hiện đại — clean white lab ground, chlorophyll green + teal, gold only for actions.
   Layout: hero copy left, "cell" image right with floating credentials; light bands throughout. */
:root{
  --paper:#FFFFFF; --surface:#FFFFFF; --mint:#EEF8F2;
  --ink:#0F2A22; --muted:#4F6A60; --line:#D8EBE1;
  --leaf:#13854A; --chloro:#1FA35B; --teal:#0E8C8C; --accent2:#0E8C8C;
  --leaf-deep:#0B4F4F; --leaf-soft:#E2F4EA;
  --flesh:#F5B800; --flesh-soft:#FFF4CC; --dona-red:#C42127; --on-deep:#EAF7F1; --trunk:#8B6B4E;
  --f-display:"Lexend","Be Vietnam Pro",system-ui,sans-serif;
  --r-md:14px;--r-lg:24px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0B1714;--surface:#11201C;--mint:#0F1E1A;--ink:#E4F2EC;--muted:#9DB8AE;--line:#21362F;
  --leaf:#4CC983;--chloro:#4CC983;--teal:#3CC4C4;--accent2:#3CC4C4;--leaf-deep:#0A2A2A;--leaf-soft:#173129;
  --flesh:#F5B800;--flesh-soft:#3A3010;--dona-red:#FF7A72;--on-deep:#E4F2EC;--trunk:#B08E6E;color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0B1714;--surface:#11201C;--mint:#0F1E1A;--ink:#E4F2EC;--muted:#9DB8AE;--line:#21362F;
  --leaf:#4CC983;--chloro:#4CC983;--teal:#3CC4C4;--accent2:#3CC4C4;--leaf-deep:#0A2A2A;--leaf-soft:#173129;
  --flesh:#F5B800;--flesh-soft:#3A3010;--dona-red:#FF7A72;--on-deep:#E4F2EC;--trunk:#B08E6E;color-scheme:dark}

h1,h2,h3{font-weight:600;letter-spacing:-.02em}
h1{font-weight:700;font-size:clamp(2.3rem,5.2vw,4rem);letter-spacing:-.035em}
.alt{background:var(--mint);border-block:0}
.btn-primary{background:var(--leaf)}
.btn-primary:hover{background:var(--teal)}
.hero-kicker{color:var(--teal);font-weight:600}

/* Hero */
.hero-bio{background:radial-gradient(1200px 500px at 85% 20%,var(--mint),transparent 70%)}
.hero-bio .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.cell-wrap{position:relative;padding:28px 10px}
.cell{margin:0;border-radius:58% 42% 48% 52% / 46% 54% 46% 54%;overflow:hidden;aspect-ratio:1;box-shadow:0 0 0 14px var(--mint),0 0 0 15px var(--line)}
.cell img{width:100%;height:100%;object-fit:cover}
.float{position:absolute;display:flex;align-items:center;gap:8px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:9px 14px 9px 10px;font-size:.88rem;font-weight:600;box-shadow:0 10px 24px -14px rgba(11,79,79,.45)}
.float svg{width:22px;height:22px;color:var(--teal)}
.f1{left:-6px;top:14%}.f2{right:0;top:44%}.f3{left:8%;bottom:4%}
@media (max-width:860px){.hero-bio .wrap{grid-template-columns:1fr}.cell{aspect-ratio:4/3;border-radius:var(--r-lg)}.float{position:static;margin-top:10px}.cell-wrap{display:flex;flex-wrap:wrap;gap:8px;padding:0 0 0}.cell-wrap .cell{flex:1 1 100%}}

/* Proof strip */
.proof{border-block:1px solid var(--line)}
.proof-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-block:22px;gap:20px}
.proof-grid div{display:flex;gap:12px;align-items:flex-start}
.proof-grid svg{width:28px;height:28px;flex:none;color:var(--chloro)}
.proof-grid p{font-size:.93rem;color:var(--muted)}
.proof-grid b{display:block;color:var(--ink)}
@media (max-width:860px){.proof-grid{grid-template-columns:1fr 1fr}}

/* Cards and lines */
.p-card{border-radius:var(--r-md)}
.p-card:hover{border-color:var(--chloro);box-shadow:0 14px 30px -20px rgba(11,79,79,.5)}
.line.big{background:linear-gradient(160deg,var(--leaf-deep),#0E6B55);color:var(--on-deep)}
.crop-picker button[aria-pressed="true"]{background:var(--teal);border-color:var(--teal)}
.calc-out{background:linear-gradient(135deg,var(--leaf-deep),#0E6B55)}
.seg input:checked+label{border-color:var(--teal);background:var(--mint);color:var(--teal)}
.stats dd{color:var(--teal)}

/* Light CTA band + footer */
.band{background:var(--mint);color:var(--ink)}
.band h2,:root[data-theme="dark"] .band h2{color:var(--ink)}
.band .lede{color:var(--muted)}
.phone{border-color:var(--line)}
.phone span{color:var(--muted)}
.phone a{color:var(--leaf)}
.form-card{border:1px solid var(--line);box-shadow:0 20px 40px -28px rgba(11,79,79,.45)}
.site-footer{background:var(--paper);color:var(--ink);border-top:1px solid var(--line)}
.site-footer a{color:var(--ink)}
.site-footer a:hover{color:var(--leaf)}
.foot-grid h4,:root[data-theme="dark"] .foot-grid h4{color:var(--ink)}
.foot-grid p,.foot-bottom{color:var(--muted)}
.foot-bottom{border-color:var(--line)}
.foot-brand img{border:1px solid var(--line)}