/* CFC inner-page + article content styles. Tokens from cfc.css. */
.crumbs{border-bottom:1px solid var(--border);font-size:13px}
.crumbs .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 0}
.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--link)}
.crumbs .sep{color:var(--muted)}.crumbs [aria-current=page]{color:var(--text)}
main#main{display:block}
/* Product detail */
.pdp{padding-block:40px 80px}
.pdp-hero{display:grid;grid-template-columns:1fr 1fr;gap:6%;align-items:start}
.pdp-gallery{position:sticky;top:16px}
.pdp-main-img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#fff;border:1px solid var(--border)}
.pdp-noimg{display:grid;place-items:center;color:var(--muted);font-size:34px;letter-spacing:.1em}
.pdp-thumbs{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.pdp-thumb{padding:0;border:1px solid var(--border);background:#fff;width:72px;height:72px;overflow:hidden}
.pdp-thumb[aria-pressed=true]{border-color:var(--text);outline:2px solid var(--text)}
.pdp-thumb img{width:100%;height:100%;object-fit:contain}
.pdp-info h1{font-size:clamp(30px,4vw,46px);margin-bottom:16px}
.pdp-meta{display:flex;flex-wrap:wrap;gap:8px 22px;color:var(--muted);font-size:14px;margin-bottom:22px}
.pdp-price{font-size:30px;font-weight:600;letter-spacing:-.02em;margin-bottom:20px}
.pdp-buy{margin-bottom:24px}
.pdp-buy-row{display:flex;gap:12px;align-items:center;margin-top:12px}
.pdp-qty{width:76px;padding:12px;background:var(--surface);color:var(--text);border:1px solid var(--control-border);border-radius:var(--radius)}
.pdp-soldout{font-weight:600;color:var(--muted);margin-bottom:12px}
.pdp-lead{color:var(--muted);border-top:1px solid var(--border);padding-top:20px}
.pdp-section{padding-block:40px;border-top:1px solid var(--border);margin-top:40px}
.pdp-section>h2{margin-bottom:20px}
.pdp-pending{background:var(--subtle);border-left:3px solid var(--brand);padding:24px}
.pdp-pending p{margin-bottom:16px;max-width:70ch}
/* Rich text (product description, page body) */
.rte{max-width:75ch}
.rte h2{font-size:clamp(24px,3vw,32px);margin:32px 0 14px}.rte h3{font-size:21px;margin:26px 0 10px}
/* The global p{max-width:65ch} caps body copy at ~550px, so rich text pooled on
   one side of its column. Inside .rte the container sets the measure, not the p. */
.rte p,.rte li{max-width:none}
.rte p{margin:0 0 16px}.rte ul,.rte ol{margin:0 0 16px;padding-left:1.3rem}.rte li{margin-bottom:7px}
.rte img{max-width:100%;height:auto;margin:16px 0;border-radius:8px}
.rte a{color:var(--link);text-underline-offset:3px}
.rte table{width:100%;border-collapse:collapse;margin:18px 0;font-size:.95rem}
.rte th,.rte td{border:1px solid var(--border);padding:10px 12px;text-align:left;vertical-align:top}
.rte th{background:var(--subtle)}
/* Word-pasted Sapo content (Về CFC, chính sách, hướng dẫn): the editor keeps
   Word's fixed pt widths, negative margins, VNI-Times fonts and single-cell
   layout tables, which push the text out of its column. Neutralise them so the
   body flows in the CFC type scale instead of Word's page geometry. */
.rte [style*="width"],.rte [width]{max-width:100%}
.rte table[width],.rte td[width],.rte th[width]{width:auto}
.rte [style*="margin-left:-"],.rte [style*="margin-left: -"]{margin-left:0!important}
.rte [style*="text-indent"]{text-indent:0!important}
.rte font,.rte span{font-family:inherit!important;font-size:inherit!important;line-height:inherit!important;letter-spacing:normal!important}
/* Word ships hard-coded black text, which disappears on the dark theme. */
.rte [style*="color"]{color:inherit!important}
/* A one-cell table is layout scaffolding, not tabular data: unwrap it. */
.rte table:has(> tbody > tr:only-child > td:only-child),.rte table:has(> tr:only-child > td:only-child){display:block;width:auto!important;margin-inline:0!important;border:0!important;font-size:inherit}
/* height on a <tr> is only a minimum while it is a table row; once unwrapped to
   a block it becomes a hard height and Word's "height:3.65pt" clips everything. */
.rte table:has(> tbody > tr:only-child > td:only-child) tbody,.rte table:has(> tbody > tr:only-child > td:only-child) tr,.rte table:has(> tbody > tr:only-child > td:only-child) td{display:block;width:auto!important;height:auto!important;border:0!important;padding:0!important}
/* Real data tables wrap inside the column instead of stretching the page. */
.rte table{table-layout:fixed;max-width:100%}
.rte{overflow-wrap:anywhere}
/* Article */
.article{padding-block:32px 72px}
.article-inner{width:min(920px,100%);margin-inline:auto}
.article h1{font-size:clamp(30px,4.4vw,48px);letter-spacing:-.025em;line-height:1.12;margin-bottom:16px;text-wrap:balance}
.article-meta{display:flex;flex-wrap:wrap;gap:6px 20px;color:var(--muted);font-size:14px;border-bottom:1px solid var(--border);padding-bottom:20px;margin-bottom:8px}
.article-hero{margin:26px 0 6px}.article-hero img{width:100%;height:auto;border-radius:10px;border:1px solid var(--border)}
.article-body{font-size:17px;line-height:1.75}
.article-body>h2{font-size:clamp(23px,3.2vw,32px);line-height:1.2;margin:44px 0 12px;scroll-margin-top:24px;text-wrap:balance}
.article-body>h3{font-size:20px;margin:28px 0 8px;scroll-margin-top:24px}
.article-body p{margin:0 0 16px}.article-body ul,.article-body ol{margin:0 0 16px;padding-left:1.3rem}.article-body li{margin-bottom:7px}
.article-body a{color:var(--link);text-underline-offset:2px;overflow-wrap:anywhere}
.article-body img{max-width:100%;height:auto}
/* KN-012 authoring conventions, tokenised + dark-aware */
.answer-block{margin:0 0 20px;padding:15px 18px;border-left:4px solid var(--brand);background:var(--subtle);font-weight:600}
.toc{margin:24px 0;padding:14px 18px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.toc summary{cursor:pointer;font-weight:700}
.toc ol{margin:10px 0 0;padding-left:1.2rem;columns:2;column-gap:32px}.toc li{margin:5px 0;break-inside:avoid}
.toc a{color:var(--link)}
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:18px 0 22px;border:1px solid var(--border);border-radius:10px}
.article-body table{width:100%;min-width:620px;border-collapse:collapse;font-size:.93rem;background:var(--surface)}
.article-body table.compact{min-width:560px}
.article-body caption{padding:11px 13px;text-align:left;font-weight:700;background:var(--subtle);border-bottom:1px solid var(--border)}
.article-body th,.article-body td{padding:10px 11px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border)}
.article-body th{font-weight:700;background:var(--subtle)}.article-body tr:last-child td{border-bottom:0}
.treatment{min-width:150px}
.sample{display:block;margin-top:3px;color:var(--muted);font-size:.84em;line-height:1.3}
.mobile-hint{display:none;color:var(--muted);font-size:.84rem;margin:-5px 0 8px}
.field-figure{margin:22px 0 26px;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.photo-card{margin:0;background:var(--surface);border:1px solid var(--border);border-radius:9px;overflow:hidden}
.photo-card img{width:100%;height:auto;display:block}
.photo-card figcaption{padding:9px 10px 10px;font-size:.9rem;line-height:1.45}
.field-figure>figcaption{margin-top:12px;font-size:.92rem;color:var(--muted);line-height:1.55}
.related{margin:26px 0;padding:16px 18px;border-left:3px solid var(--brand);background:var(--subtle)}
.related strong{display:block;margin-bottom:6px}.related a{color:var(--link)}
.article-body>footer{margin-top:46px;padding-top:20px;border-top:1px solid var(--border);font-size:.94rem;color:var(--muted)}
.article-body>footer p{margin-bottom:8px}
.faq h3{margin-top:26px}
.article-tags{margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.article-tags .tag{font-size:12px;color:var(--muted);border:1px solid var(--border);padding:5px 10px;border-radius:var(--radius)}
/* Listing (blog / collection) */
.list-head{padding-block:36px 8px}
.list-head h1{font-size:clamp(30px,4vw,46px);margin-bottom:12px}
.list-head p{color:var(--muted);max-width:60ch}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding-block:24px 40px}
.post-card{border-top:1px solid var(--border);padding-top:18px}
.post-card a.post-thumb{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--subtle);margin-bottom:14px}
.post-card img{width:100%;height:100%;object-fit:cover}
.post-thumb--product{aspect-ratio:4/5;background:#fff;display:grid;place-items:center;padding:12px}
.post-thumb--product img{object-fit:contain}
.post-card h3{font-size:19px;line-height:1.3;margin-bottom:8px}
.post-card h3 a{text-decoration:none}.post-card h3 a:hover{color:var(--link)}
.post-meta{font-size:12px;color:var(--muted);margin-bottom:10px;letter-spacing:.02em}
.post-card p{font-size:14px;color:var(--muted)}
.empty-note{padding:40px 0;color:var(--muted)}
.tag-filter{display:flex;flex-wrap:wrap;gap:8px;padding-block:8px 4px}
.tag-filter a{font-size:13px;padding:8px 15px;border:1px solid var(--border);border-radius:20px;text-decoration:none;color:var(--muted);transition:all .18s var(--ease)}
.tag-filter a:hover{border-color:var(--link);color:var(--link)}
.tag-filter a.is-active{background:var(--text);border-color:var(--text);color:var(--bg)}
/* Pagination */
.pagination{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding-block:24px 8px}
.pagination a,.pagination span{min-width:44px;min-height:44px;display:grid;place-items:center;border:1px solid var(--border);padding:0 12px;text-decoration:none;font-size:14px}
.pagination .current{background:var(--text);color:var(--bg);border-color:var(--text)}
.product-actions .price{font-size:14px;font-weight:600}
/* Solutions hub */
.sol-hero{padding-block:44px 8px}.sol-hero h1{font-size:clamp(32px,4.4vw,52px);margin:12px 0 16px;max-width:20ch}.sol-hero p{color:var(--muted);max-width:78ch}
.sol-filter{padding-block:20px 4px;position:sticky;top:0;z-index:20;background:var(--bg)}
.sol-filter .choice-row{margin-bottom:14px}
.sol-filter .stage-note{font-size:13px;color:var(--muted);max-width:96ch;margin:0;padding-bottom:16px}
.sol-crops{padding-bottom:24px}
.crop-block{padding-block:40px;border-top:1px solid var(--border);scroll-margin-top:96px}
.crop-block[hidden]{display:none}
.crop-head{margin-bottom:26px}
.crop-head h2{font-size:clamp(26px,3vw,38px);letter-spacing:-.03em}
.crop-head p{color:var(--muted);font-size:15px;margin-top:10px;max-width:80ch}
.stage-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.stage{position:relative;border:1px solid var(--border);border-radius:12px;padding:20px;background:var(--surface)}
.stage-no{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--link)}
.stage h3{font-size:17px;line-height:1.3;margin:8px 0 8px}
.stage p{font-size:14px;line-height:1.6;color:var(--muted);margin:0;max-width:none}
.stage-rec{margin-top:10px!important;padding-top:10px;border-top:1px solid var(--border);color:var(--text)!important}
.crop-rec{margin-top:22px;padding:16px 18px;background:var(--subtle);border-left:3px solid var(--brand);font-size:14px;color:var(--muted);max-width:none}
.crop-rec a{color:var(--link);font-weight:600;white-space:nowrap}
@media(max-width:1023px){.stage-list{grid-template-columns:repeat(2,1fr);gap:16px}}
@media(max-width:680px){.sol-filter{position:static}.stage-list{grid-template-columns:1fr}.crop-block{padding-block:30px}}
/* Generic content page */
.page-doc{padding-block:36px 72px}
.page-doc .article-inner>h1{font-size:clamp(30px,4.4vw,48px);margin-bottom:22px}
/* Contact page */
.contact-head{max-width:70ch;margin-bottom:34px}
.contact-head h1{font-size:clamp(30px,4.4vw,48px);letter-spacing:-.025em;line-height:1.12;margin:10px 0 14px}
.contact-head p{font-size:17px}
.contact-intro{margin-bottom:34px}
.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:start}
.contact-side{display:grid;gap:14px}
.contact-card{border:1px solid var(--border);border-radius:12px;padding:18px 20px;background:var(--surface)}
.contact-label{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.contact-strong{font-size:20px;font-weight:650;letter-spacing:-.02em;color:var(--link);text-decoration:none;overflow-wrap:anywhere}
.contact-strong:hover{text-decoration:underline}
.contact-card p{margin:0;font-size:15px;line-height:1.55;max-width:none}
.contact-form-wrap{border:1px solid var(--border);border-radius:14px;padding:26px;background:var(--surface)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-field{margin:0 0 16px;max-width:none}
.form-field .field-label{margin-bottom:8px;font-weight:600}
.contact-form-wrap input,.contact-form-wrap textarea{width:100%;padding:12px 14px;font:inherit;font-size:15px;color:var(--text);background:var(--bg);border:1px solid var(--control-border);border-radius:var(--radius)}
.contact-form-wrap textarea{resize:vertical;min-height:130px}
.contact-form-wrap input::placeholder,.contact-form-wrap textarea::placeholder{color:var(--muted)}
.form-note{font-size:13px;margin:0 0 18px}
.form-ok{margin:0 0 18px;padding:13px 16px;border-left:3px solid var(--brand);background:var(--subtle);font-weight:600}
.form-error{margin:0 0 18px;padding:13px 16px;border-left:3px solid #c0392b;background:var(--subtle)}
.contact-map{padding-block:56px 8px}
.map-frame{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--subtle)}
.map-frame iframe{display:block;width:100%;height:clamp(300px,42vh,460px);border:0}
.map-note{font-size:14px;margin-top:12px}
.map-note a{color:var(--link)}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:28px}}
/* Phone and email on the contact page are inline text; give them a tap area. */
@media(max-width:767px){.contact-strong{display:inline-flex;align-items:center;min-height:44px}
.crumbs a{display:inline-flex;align-items:center;min-height:34px}}
@media(max-width:767px){.article-body .toc a{display:inline-flex;align-items:center;min-height:36px}}
/* "Xem [chuyên mục] →" and the article's category link are standalone CTAs. */
@media(max-width:767px){.section-head a{display:inline-flex;align-items:center;min-height:40px}
.article-meta a{display:inline-flex;align-items:center;min-height:32px}}
@media(max-width:600px){.form-row{grid-template-columns:1fr;gap:0}.contact-form-wrap{padding:20px}}
.search-form{display:flex;gap:10px;margin:16px 0;max-width:520px}
.search-form input{flex:1;padding:12px 14px;background:var(--surface);color:var(--text);border:1px solid var(--control-border);border-radius:var(--radius)}
.cfc-center{text-align:center}.cfc-center-actions{justify-content:center}
/* --- Guard: page-level CSS embedded in Sapo article bodies -------------------
   KN-012 (and anything authored the same way) ships a complete standalone-page
   <style> block inside article.content -- `body{background:#fff;color:#202124}`,
   `:root{color-scheme:light}`, plus .answer-block/.toc/.field-figure/... in
   hard-coded light greys. That is deliberate: the live Evo theme has none of
   these styles, so stripping it from the content would break the article there.
   Inside this theme it must not repaint the page. The embedded sheet sits in
   <body>, so at equal specificity it wins on source order -- `body{color}` beat
   ours (dark text on the dark background) and every single-class rule below beat
   its token twin. Re-assert the tokens exactly one specificity step higher. */
:root body{color:var(--text)}
.article-body .answer-block{border-left-color:var(--brand);background:var(--subtle)}
.article-body .toc{border-color:var(--border);background:var(--surface)}
.article-body .table-wrap{border-color:var(--border)}
.article-body .field-figure{border-color:var(--border);background:var(--surface)}
.article-body .photo-card{background:var(--surface);border-color:var(--border)}
.article-body .related{border-left-color:var(--brand);background:var(--subtle)}
.article-body .sample,.article-body .mobile-hint{color:var(--muted)}
.article-body .field-figure>figcaption{color:var(--muted)}
.article-body footer{border-top-color:var(--border)}
/* Only grid the article's style block defines that the theme did not. */
.article-body .portrait-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
/* Same reason: an article authored as a standalone page carries its own <h1>,
   which duplicates the title this template already renders -- two identical h1
   on one page. Keep ours (it is the one in the outline) and hide the copy. */
.article-body h1{display:none}
/* About page */
.about-hero{position:relative;min-height:clamp(360px,52vh,560px);display:flex;align-items:flex-end;overflow:hidden}
.about-hero-media{position:absolute;inset:0}
.about-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.about-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,20,4,.15),rgba(0,18,4,.82))}
.about-hero-inner{position:relative;width:100%;padding-block:44px;color:#fff}
.about-hero-inner .section-no{color:#bfe6b3}
.about-hero-inner h1{font-size:clamp(32px,5vw,58px);letter-spacing:-.03em;line-height:1.08;margin:10px 0 16px;max-width:20ch}
.about-hero-inner p{max-width:60ch;font-size:17px;color:#e7efe5}
.about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.about-stat{border-top:2px solid var(--brand);padding-top:16px}
.about-stat b{display:block;font-size:clamp(26px,3vw,38px);letter-spacing:-.03em;line-height:1.1}
.about-stat span{font-size:13px;color:var(--muted)}
/* Single column: the Sapo body is Word-pasted with its own fixed widths, so a
   side-by-side grid track let it overflow and drag the whole section sideways.
   The khảo nghiệm figure now sits below the story text. */
.about-story-grid{display:block}
/* Full container width, matching the section heading above it. Lines get long
   on a 1360px container, so the body gets a little extra leading to compensate. */
.about-story-grid>.rte{max-width:none;min-width:0;line-height:1.8}
.about-proof{margin:44px 0 0;width:100%}
.about-proof img{width:100%;height:auto;border-radius:14px;border:1px solid var(--border)}
.about-proof figcaption{font-size:13px;color:var(--muted);margin-top:10px}
.about-values{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.about-values .cap-card{background:var(--surface)}
@media(max-width:900px){.about-stats{grid-template-columns:repeat(2,1fr);gap:20px}.about-values{grid-template-columns:1fr}}
/* Compare tray */
.cmp-add{margin-top:12px;width:100%;padding:10px;border:1px solid var(--control-border);background:transparent;color:var(--text);border-radius:9px;font-size:13px;font-weight:600;cursor:pointer;transition:background .18s var(--ease),border-color .18s,color .18s}
.cmp-add:hover{border-color:var(--link);color:var(--link)}
.cmp-add.is-added{background:var(--brand);border-color:var(--brand);color:var(--on-accent)}
.pdp-cmp{width:auto;padding:10px 18px;margin-top:16px}
.cmp-tray{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -10px 30px rgba(0,0,0,.12)}
.cmp-tray-inner{display:flex;align-items:center;gap:16px;padding:12px 0}
.cmp-lead{font-size:13px;color:var(--muted);white-space:nowrap}.cmp-lead b{color:var(--text);margin-right:4px}
.cmp-chips{display:flex;gap:10px;overflow-x:auto;flex:1;padding-bottom:2px}
.cmp-chip{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 6px;border:1px solid var(--border);border-radius:10px;background:var(--bg);cursor:grab;flex-shrink:0}
.cmp-chip.drag{opacity:.4}
.cmp-chip img{width:34px;height:34px;object-fit:contain;background:#fff;border-radius:6px}
.cmp-chip span{font-size:12px;max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-rm{border:0;background:none;color:var(--muted);font-size:17px;line-height:1;cursor:pointer;padding:0 2px}.cmp-rm:hover{color:var(--text)}
.cmp-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.cmp-textbtn{border:0;background:none;color:var(--muted);font-size:13px;cursor:pointer}.cmp-textbtn:hover{color:var(--text)}
.cmp-toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%) translateY(10px);background:var(--text);color:var(--bg);padding:11px 18px;border-radius:10px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:70}
.cmp-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.compare-table .cmp-th{display:inline-flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:var(--text);min-width:120px}
.compare-table .cmp-th img{width:70px;height:70px;object-fit:contain;background:#fff;border-radius:8px}
.compare-table .cmp-th span{font-size:13px;text-align:center;line-height:1.3}
#cmp-dialog{border:1px solid var(--border);border-radius:14px;padding:28px;background:var(--surface);color:var(--text);width:min(920px,94vw);max-height:88vh}
#cmp-dialog::backdrop{background:#000b}
@media(max-width:640px){.cmp-lead{display:none}.cmp-chip span{max-width:84px}}
@media(max-width:900px){.pdp-hero{grid-template-columns:1fr;gap:28px}.pdp-gallery{position:static}.post-grid{grid-template-columns:repeat(2,1fr);gap:24px}}
@media(max-width:680px){.post-grid{grid-template-columns:1fr}.toc ol{columns:1}.mobile-hint{display:block}.article-body table{font-size:.86rem}.photo-grid.landscape-grid{grid-template-columns:1fr}}