/* Font tự host — sinh từ fonts.googleapis.com, chỉ giữ ba bộ latin,
   latin-ext và vietnamese. Bộ vietnamese là BẮT BUỘC: thiếu nó thì mọi
   dấu tiếng Việt rơi sang font dự phòng và chữ trông so le.
   Đây là font biến thiên nên MỘT file phủ mọi trọng lượng; khai dải
   100 900 để đổi độ đậm trong thiết kế không phải thêm file.
   Muốn cập nhật: lấy lại css2 của Google bằng User-Agent trình duyệt
   hiện đại (UA cũ sẽ trả về .ttf thay vì .woff2), lọc ba bộ trên. */
/* Inter — latin */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Inter — latin-ext */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Inter — vietnamese */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
/* Montserrat — latin */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/montserrat-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Montserrat — latin-ext */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/montserrat-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Montserrat — vietnamese */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/montserrat-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
:root{--green:#056b43;--dark:#053d2e;--deep:#032d22;--lime:#5dce2d;--blue:#087fe2;--cyan:#09a9cc;--ink:#17342b;--muted:#667a73;--bg:#f4f8f5;--line:#dce9e2;--white:#fff;--orange:#f49a36;--shadow:0 18px 50px rgba(5,61,46,.12);--radius:24px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#fff;font:16px/1.6 Inter,Arial,sans-serif}button,input,select{font:inherit}button,a{transition:.22s ease}a{color:inherit;text-decoration:none}button{cursor:pointer}.wrap{width:min(1180px,calc(100% - 40px));margin:auto}.topline{background:var(--deep);color:#d7eee5;font-size:13px}.topline-inner{height:34px;display:flex;align-items:center;justify-content:space-between}.topline-inner div{display:flex;gap:24px}.hotline{color:#a7ef72;font-weight:700}.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);border-bottom:1px solid rgba(220,233,226,.9);backdrop-filter:blur(14px)}.nav{height:78px;display:flex;align-items:center;gap:26px}.brand{display:flex;align-items:center;gap:12px;min-width:238px}.brand img{width:66px;height:40px;object-fit:contain}.brand span{display:flex;flex-direction:column;line-height:1.08}.brand strong{font:700 10px/1.2 Montserrat,sans-serif;color:var(--green);letter-spacing:.18em}.brand b{font:800 12px/1.3 Montserrat,sans-serif;color:var(--dark);white-space:nowrap}.navlinks{display:flex;align-items:center;justify-content:center;gap:24px;flex:1}.navlinks a{font-size:14px;font-weight:600;color:#385047;position:relative;padding:28px 0}.navlinks a:after{content:"";position:absolute;left:0;right:100%;bottom:16px;height:2px;background:var(--green)}.navlinks a:hover,.navlinks a.active{color:var(--green)}.navlinks a:hover:after,.navlinks a.active:after{right:0}.nav-cta{border:0;background:var(--green);color:#fff;border-radius:12px;padding:12px 17px;font-weight:700;font-size:13px;white-space:nowrap}.nav-cta:hover,.btn.primary:hover{background:#075a3b;transform:translateY(-2px)}.menu-btn{display:none;background:none;border:0;padding:8px}.menu-btn span{display:block;width:24px;height:2px;background:var(--dark);margin:5px}
.hero{position:relative;overflow:hidden;background:linear-gradient(118deg,#f2faf5 0,#fbfefc 47%,#e9f7f9 100%);padding:80px 0 76px}.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(5,107,67,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(5,107,67,.04) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(to right,#000,transparent 72%)}.hero-inner{position:relative;display:grid;grid-template-columns:1.03fr .97fr;align-items:center;gap:68px}.eyebrow{color:var(--green);font-size:12px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}.hero-copy .eyebrow{display:flex;align-items:center;gap:10px}.eyebrow i{width:24px;height:2px;background:var(--lime)}.hero h1{font:800 clamp(44px,5vw,68px)/1.06 Montserrat,Inter,sans-serif;margin:22px 0 24px;color:var(--dark);letter-spacing:-.045em}.hero h1 span{color:var(--green)}.hero-copy>p{max-width:585px;font-size:18px;color:var(--muted);margin:0 0 30px}.hero-actions{display:flex;gap:12px;align-items:center}.btn{border:0;border-radius:13px;padding:14px 20px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:18px}.btn.primary{background:var(--green);color:#fff;box-shadow:0 10px 24px rgba(5,107,67,.2)}.btn.secondary{border:1px solid var(--line);background:#fff;color:var(--dark)}.btn.secondary:hover{border-color:var(--green);color:var(--green)}.hero-proof{display:flex;gap:34px;margin-top:44px}.hero-proof div{display:flex;flex-direction:column;border-left:2px solid var(--line);padding-left:14px}.hero-proof strong{font:800 22px Montserrat;color:var(--dark)}.hero-proof span{font-size:12px;color:var(--muted)}.hero-visual{position:relative}.image-frame{position:relative;height:530px;border-radius:34px 80px 34px 34px;overflow:hidden;box-shadow:0 30px 80px rgba(0,73,56,.22);border:7px solid #fff}.image-frame>img{width:100%;height:100%;object-fit:cover}.image-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(1,50,36,.58),transparent 52%)}.live-card{position:absolute;background:rgba(255,255,255,.95);box-shadow:0 16px 34px rgba(3,50,36,.17);backdrop-filter:blur(10px)}.weather-card{left:22px;bottom:25px;padding:12px 16px;border-radius:16px;display:flex;align-items:center;gap:11px}.card-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#fff4d8}.live-card small{font-size:9px;letter-spacing:.08em;color:var(--muted);font-weight:800;display:block}.live-card b{font-size:13px;color:var(--dark)}.price-card{right:20px;top:28px;border-radius:16px;padding:14px 16px}.price-card b{font:800 24px Montserrat;color:var(--dark);display:block}.price-card b em{font:500 10px Inter;color:var(--muted)}.price-card span{position:absolute;right:14px;bottom:14px;background:#e3f8dc;color:var(--green);font-size:10px;font-weight:800;padding:3px 7px;border-radius:9px}.map-pin{position:absolute;width:16px;height:16px;border:4px solid #fff;border-radius:50%;background:var(--lime);box-shadow:0 0 0 7px rgba(93,206,45,.24)}.p1{top:34%;left:42%}.p2{top:53%;left:63%}.p3{top:68%;left:36%}.orbit-label{position:absolute;right:-18px;bottom:-25px;background:var(--dark);color:#d8f3e8;border-radius:17px;padding:12px 17px;font-size:11px;box-shadow:var(--shadow)}.orbit-label span{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--cyan);color:#fff;font-weight:800;margin-right:7px}
.quick{margin-top:-35px;position:relative;z-index:5;background:#fff;border-radius:20px;box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(6,1fr);padding:12px}.quick>a,.quick>button{border:0;background:#fff;display:grid;grid-template-columns:46px 1fr;grid-template-rows:24px 20px;text-align:left;column-gap:10px;padding:16px 12px;border-right:1px solid var(--line);align-items:center}.quick>*:last-child{border-right:0}.quick>*:hover{background:var(--bg);border-radius:14px}.quick b{font-size:13px}.quick small{font-size:10px;color:var(--muted)}.qicon{grid-row:1/3;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-weight:800}.qicon.green{background:#e1f4e8;color:var(--green)}.qicon.blue{background:#e4f2ff;color:var(--blue)}.qicon.lime{background:#edf9df;color:#54aa25}.qicon.teal{background:#e4f8f6;color:#138d81}.qicon.orange{background:#fff1df;color:#d97918}.qicon.navy{background:#e8edf7;color:#31598d}
.signal{margin-top:46px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fbfdfb}.signal-row{min-height:72px;display:grid;grid-template-columns:1.25fr repeat(3,1fr) .7fr;align-items:center}.signal-title{display:flex;align-items:center;gap:9px}.signal-title i{width:9px;height:9px;background:var(--lime);border-radius:50%;box-shadow:0 0 0 5px rgba(93,206,45,.13)}.signal-title span{font-size:10px;font-weight:800;color:var(--green)}.signal-title b{font-size:12px;border-left:1px solid var(--line);padding-left:9px}.ticker{display:grid;grid-template-columns:1fr auto;line-height:1.35;padding:0 20px;border-left:1px solid var(--line)}.ticker span{font-size:11px;color:var(--muted)}.ticker b{font-size:12px}.ticker em{font-size:10px;font-style:normal;grid-row:1/3;grid-column:2;align-self:center}.up{color:#149c63}.down{color:#e05c57}.signal-row>a{text-align:right;color:var(--green);font-size:12px;font-weight:700}
.section{padding:105px 0}.section-heading{max-width:680px;margin-bottom:42px}.section-heading.centered{text-align:center;margin-left:auto;margin-right:auto}.section-heading h2,.solution-intro h2,.market-copy h2{font:800 clamp(34px,4vw,48px)/1.12 Montserrat,Inter,sans-serif;color:var(--dark);letter-spacing:-.035em;margin:13px 0}.section-heading p,.solution-intro p,.market-copy>p{color:var(--muted);font-size:16px}.section-heading.row{max-width:none;display:flex;align-items:end;justify-content:space-between}.section-heading.row>a{font-size:13px;font-weight:700;color:var(--green);padding-bottom:18px}
.ecosystem{background:#fff}.eco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.eco-card{position:relative;border:1px solid var(--line);border-radius:22px;padding:28px;min-height:278px;display:flex;flex-direction:column;background:#fff;overflow:hidden}.eco-card:before{content:"";position:absolute;left:0;top:0;width:0;height:4px;background:var(--lime);transition:.25s}.eco-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}.eco-card:hover:before{width:100%}.eco-card.featured{background:linear-gradient(145deg,var(--green),#0783a5);color:#fff;border-color:transparent}.eco-card.featured:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:#ffffff0d;right:-55px;bottom:-65px}.eco-no{position:absolute;right:24px;top:19px;font:700 12px Montserrat;color:#a3b2ac}.featured .eco-no{color:#ffffff85}.eco-icon{width:50px;height:50px;border-radius:15px;background:var(--bg);color:var(--green);display:grid;place-items:center;font-weight:800;margin-bottom:20px}.featured .eco-icon{background:#ffffff20;color:#fff}.eco-card h3{font:750 19px/1.35 Montserrat;margin:0 0 11px;max-width:275px}.eco-card p{color:var(--muted);font-size:14px;margin:0 0 22px}.featured p{color:#dcf4ec}.eco-card a,.eco-card button{margin-top:auto;align-self:flex-start;border:0;background:none;padding:0;color:var(--green);font-size:13px;font-weight:750}.featured button{color:#fff}.eco-card a span,.eco-card button span{margin-left:6px}
.solutions{background:linear-gradient(135deg,var(--deep),#076144);color:#fff;position:relative;overflow:hidden}.solutions:after{content:"";position:absolute;right:-10%;top:-30%;width:570px;height:570px;border-radius:50%;border:1px solid #ffffff13;box-shadow:0 0 0 70px #ffffff06,0 0 0 140px #ffffff04}.solution-layout{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.eyebrow.light{color:#a9ef78}.solution-intro h2{color:#fff}.solution-intro p{color:#bfd9cf;max-width:530px}.solution-tabs{margin-top:34px;display:flex;flex-direction:column;gap:7px}.solution-tabs button{border:0;border-left:3px solid transparent;background:transparent;color:#a8c7bc;text-align:left;padding:12px 18px;font-weight:600;border-radius:0 10px 10px 0}.solution-tabs button:hover,.solution-tabs button.active{border-left-color:var(--lime);background:#ffffff0c;color:#fff}.solution-panel{background:#fff;color:var(--ink);border-radius:28px;padding:40px;box-shadow:0 35px 80px rgba(0,0,0,.22)}.panel-mark{display:inline-block;padding:6px 10px;border-radius:7px;background:#e6f5ec;color:var(--green);font-size:10px;font-weight:800;letter-spacing:.08em}.solution-panel h3{font:800 30px/1.25 Montserrat;margin:18px 0 12px;color:var(--dark)}.solution-panel p{color:var(--muted)}.solution-panel ul{list-style:none;padding:0;margin:24px 0 30px;display:grid;grid-template-columns:1fr 1fr;gap:14px}.solution-panel li{font-size:13px;font-weight:600;padding-left:25px;position:relative}.solution-panel li:before{content:"✓";position:absolute;left:0;width:18px;height:18px;border-radius:50%;background:#e6f5ec;color:var(--green);display:grid;place-items:center;font-size:10px}
.knowledge{background:var(--bg)}.knowledge-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:20px}.main-story{background:#fff;border-radius:24px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;min-height:390px;box-shadow:0 12px 35px rgba(3,61,45,.06)}.story-art{min-height:390px;display:grid;place-items:center;position:relative;overflow:hidden}.story-art.rice{background:linear-gradient(150deg,#c1eb65,#55ba36)}.story-art:before,.story-art:after{content:"";position:absolute;border-radius:100% 0 100% 0;background:#ffffff24;transform:rotate(25deg)}.story-art:before{width:180px;height:290px;left:25px;bottom:-70px}.story-art:after{width:110px;height:200px;right:15px;top:-40px}.story-art>span{font:800 26px Montserrat;color:#fff;z-index:1;letter-spacing:.12em}.story-copy{padding:40px 34px;display:flex;flex-direction:column;justify-content:center}.story-copy>span,.side-stories article span{font-size:10px;color:var(--green);font-weight:800;letter-spacing:.09em}.story-copy h3{font:750 25px/1.3 Montserrat;margin:14px 0}.story-copy p{font-size:14px;color:var(--muted)}.story-copy a{color:var(--green);font-size:13px;font-weight:700;margin-top:18px}.side-stories{display:grid;gap:13px}.side-stories article{background:#fff;border-radius:18px;padding:15px;display:grid;grid-template-columns:105px 1fr;gap:17px;align-items:center}.mini-art{height:92px;border-radius:14px;display:grid;place-items:center;font:800 18px Montserrat}.mini-art.orange{background:#fff1db;color:#e38828}.mini-art.blue{background:#e1f1fc;color:#168cce}.mini-art.green{background:#e3f4e9;color:var(--green)}.side-stories h3{font:700 14px/1.4 Montserrat;margin:6px 0}.side-stories small{color:var(--muted)}
.market{background:#fff}.market-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:86px;align-items:center}.market-copy h2{font-size:46px}.market-metrics{display:flex;gap:30px;margin:30px 0}.market-metrics div{display:flex;flex-direction:column}.market-metrics strong{font:800 24px Montserrat;color:var(--green)}.market-metrics span{font-size:11px;color:var(--muted)}.market-board{background:var(--bg);border:1px solid var(--line);padding:24px;border-radius:26px;box-shadow:var(--shadow)}.board-head{display:flex;justify-content:space-between;align-items:center;padding:4px 4px 20px}.board-head small{font-size:9px;color:var(--muted);font-weight:800;display:block;letter-spacing:.09em}.board-head b{font:750 18px Montserrat}.board-head>span{font-size:10px;color:var(--green);font-weight:700;background:#e1f4e8;padding:6px 10px;border-radius:20px}.board-row{display:grid;grid-template-columns:1.3fr 1fr .55fr;align-items:center;background:#fff;border-radius:12px;padding:14px 16px;margin-bottom:7px;font-size:13px}.board-row.head{background:transparent;color:var(--muted);font-size:10px;font-weight:700;padding-top:0}.board-row>span{display:flex;align-items:center}.board-row em{text-align:right;font-style:normal;font-size:11px;font-weight:700}.dot{width:9px;height:9px;border-radius:50%;margin-right:9px}.rice-dot{background:#62bd34}.coffee-dot{background:#9a6a40}.pepper-dot{background:#3c4741}.fruit-dot{background:#e9a430}.trade-card{margin-top:16px;background:linear-gradient(120deg,var(--dark),var(--green));color:#fff;border-radius:16px;padding:17px;display:grid;grid-template-columns:50px 1fr auto;align-items:center;gap:14px}.trade-icon{width:48px;height:48px;border-radius:14px;background:#ffffff1d;display:grid;place-items:center;font-weight:800}.trade-card small{font-size:9px;color:#b8e8d5;display:block}.trade-card b{display:block;font-size:13px}.trade-card span{font-size:10px;color:#cde9de}.trade-card button{border:0;background:var(--lime);color:var(--deep);font-size:11px;font-weight:800;border-radius:10px;padding:10px 14px}
.projects{background:var(--bg)}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.project-card{background:#fff;border-radius:22px;padding:25px;border:1px solid var(--line)}.project-type{font-size:9px;color:var(--green);font-weight:800;letter-spacing:.1em}.project-map{height:165px;margin:18px 0 23px;border-radius:16px;background:linear-gradient(145deg,#e6f5ec,#cfe8d9);color:#1f6b45;position:relative;overflow:hidden}.project-map svg{display:block;width:100%;height:100%}.blue-map{background:linear-gradient(145deg,#e4f1fb,#c4dfef);color:#1b5c82}.lime-map{background:linear-gradient(145deg,#f1f9e0,#d9edb3);color:#4c6d1e}.project-card h3{font:750 18px/1.4 Montserrat;margin:0 0 11px}.project-card p{color:var(--muted);font-size:13px}.project-card a{color:var(--green);font-size:12px;font-weight:700}
.cta-section{padding:78px 0;background:#fff}.cta-box{background:linear-gradient(125deg,var(--green),#087e92);color:#fff;border-radius:30px;padding:48px 54px;display:flex;align-items:center;justify-content:space-between;position:relative;overflow:hidden}.cta-box:after{content:"";position:absolute;width:300px;height:300px;border:55px solid #ffffff0b;border-radius:50%;right:24%;top:-170px}.cta-box>div{position:relative;z-index:1}.cta-box span{font-size:10px;letter-spacing:.12em;color:#c9f2e3;font-weight:800}.cta-box h2{font:800 34px/1.25 Montserrat;margin:12px 0 0}.cta-actions{display:flex;gap:10px}.btn.white{background:#fff;color:var(--green)}.btn.ghost{background:#ffffff12;color:#fff;border:1px solid #ffffff55}
/* ==========================================================================
   FOOTER. Bản mockup cũ là bốn cột chữ xám 12px trên một mảng --deep phẳng:
   không có phân cấp, không có điểm nhìn, và ba nút mạng xã hội chỉ là ba ký
   tự "f" / "Z" / "▶". Bản này giữ NGUYÊN bố cục 4 cột và toàn bộ nội dung,
   chỉ dựng lại phần nhìn:
     - nền chuyển sắc chéo + đường gradient lime→cyan ở mép trên + một vòng
       loang mờ góc phải, tất cả bằng CSS (không thêm ảnh, không thêm request);
     - mỗi tiêu đề cột có gạch chân lime ngắn để tách cột bằng mắt;
     - liên kết mọc ra một gạch lime khi rê chuột thay vì chỉ đổi màu;
     - cột liên hệ chuyển từ năm dòng <p> giống hệt nhau sang danh sách có
       icon dẫn đầu, số tổng đài tô sáng vì đó là thứ người ta thật sự bấm.
   Màu chữ #a8c6bb đạt 8,9:1 trên --deep và 7,0:1 trên đầu dải gradient
   (#04402f) — vượt AA cho cả cỡ chữ nhỏ. Xem thêm khối TIẾP CẬN cuối file.
   ========================================================================== */
footer{position:relative;overflow:hidden;background:linear-gradient(165deg,#04402f,var(--deep) 48%,#02201a);color:#c7ddd5;padding:72px 0 0}
footer:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--lime),var(--cyan) 42%,rgba(9,169,204,0) 78%)}
footer:after{content:"";position:absolute;right:-170px;top:-140px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(93,206,45,.13),rgba(93,206,45,0) 68%);pointer-events:none}
.footer-grid{position:relative;z-index:1;display:grid;align-items:start;grid-template-columns:minmax(0,1.6fr) minmax(150px,1fr) minmax(170px,1.05fr) minmax(250px,1.45fr);gap:44px}
.footer-brand{margin-top:0}
.footer-grid .brand{align-items:flex-start}
.footer-grid .brand strong{color:#8fe06a}
.footer-grid .brand b{color:#fff}
/* Ba trụ định vị thương hiệu, dạng chip. */
.footer-pills{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:18px 0 22px;max-width:100%}
.footer-pills li{font-size:12px;font-weight:600;color:#d3ece1;border:1px solid #ffffff1f;background:#ffffff0a;border-radius:999px;padding:6px 12px}
.socials{display:flex;gap:10px}
.socials a{width:40px;height:40px;border-radius:12px;border:1px solid #ffffff21;background:#ffffff0a;color:#d3ece1;display:grid;place-items:center}
.socials svg{width:18px;height:18px}
.socials a:hover{background:var(--lime);border-color:var(--lime);color:var(--deep);transform:translateY(-2px)}
.footer-grid h4{position:relative;color:#fff;font:700 14px/1.35 Montserrat;margin:0 0 22px;padding-bottom:12px}
.footer-grid h4:after{content:"";position:absolute;left:0;bottom:0;width:28px;height:2px;border-radius:2px;background:var(--lime)}
.footer-col{display:flex;flex-direction:column}
.footer-links{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.footer-grid a,.footer-grid p,.footer-contact{font-size:13px;color:#a8c6bb;margin:0;line-height:1.6}
/* Gạch lime mọc ra khi rê chuột: dấu hiệu rõ hơn đổi màu, và không làm dòng
   nhảy sang dòng khác vì cả gạch lẫn lề đều nở từ 0. */
.footer-links a{display:inline-flex;align-items:center}
.footer-links a:before{content:"";width:0;height:1.5px;margin-right:0;background:var(--lime);transition:.22s ease}
.footer-links a:hover{color:#fff}
.footer-links a:hover:before{width:14px;margin-right:9px}
.footer-contact{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.footer-contact li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:11px;align-items:start}
/* Vạch ngăn giữa hai liên kết điều hướng và bốn dòng thông tin pháp nhân:
   cùng một cột nhưng khác loại nội dung. */
.footer-contact .fc-sep{margin-top:6px;padding-top:14px;border-top:1px solid #ffffff12}
.fc-icon{display:grid;place-items:center;color:#7fd45a;margin-top:2px}
.fc-icon svg{width:16px;height:16px}
.footer-contact b{display:block;color:#fff;font-weight:700;margin-bottom:2px}
.footer-contact a{color:#c8e4d9}
.footer-contact a:hover{color:#fff;text-decoration:underline}
.fc-strong{color:#a7ef72;font-weight:700}
.copyright{position:relative;z-index:1;margin-top:54px;padding:20px 0;border-top:1px solid #ffffff14;display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:12px;color:#8ba99e}
.copyright .legal{display:flex;gap:22px}
.copyright .legal span{position:relative}
.copyright .legal span+span:before{content:"";position:absolute;left:-12px;top:50%;width:3px;height:3px;border-radius:50%;background:#ffffff38;transform:translateY(-50%)}
/* Chỉ đọc bằng trình đọc màn hình — dùng cho bản một dòng của câu định vị. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.modal[hidden]{display:none}.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px}.modal-backdrop{position:absolute;inset:0;background:rgba(2,37,28,.72);backdrop-filter:blur(5px)}.modal-box{position:relative;width:min(460px,100%);background:#fff;border-radius:26px;padding:34px;box-shadow:0 30px 90px rgba(0,0,0,.28)}.modal-close{position:absolute;right:18px;top:14px;border:0;background:none;font-size:28px;color:var(--muted)}.modal-icon{width:55px;height:55px;border-radius:16px;background:linear-gradient(135deg,var(--green),var(--cyan));color:#fff;display:grid;place-items:center;font-weight:800}.modal-box h2{font:800 25px Montserrat;margin:18px 0 8px}.modal-box>p{color:var(--muted);font-size:13px}.modal-box form{display:grid;gap:13px;margin-top:20px}.modal-box label{font-size:12px;font-weight:700}.modal-box input,.modal-box select{width:100%;border:1px solid var(--line);border-radius:11px;padding:12px 13px;margin-top:5px;background:#fff;color:var(--ink)}.modal-box form .btn{width:100%;margin-top:5px}.success{padding:24px;background:#e7f5ec;border-radius:15px;margin-top:18px;text-align:center}.success b,.success span{display:block}.success b{color:var(--green);font-size:18px}.success span{font-size:12px;color:var(--muted)}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}.delay{transition-delay:.15s}
@media(max-width:1050px){.navlinks{gap:14px}.navlinks a{font-size:12px}.brand{min-width:210px}.hero-inner{gap:36px}.quick{grid-template-columns:repeat(3,1fr)}.quick>*:nth-child(3){border-right:0}.quick>*:nth-child(-n+3){border-bottom:1px solid var(--line)}.signal-row{grid-template-columns:1.1fr repeat(2,1fr) .6fr}.ticker:nth-of-type(3){display:none}.eco-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.topline{display:none}.header .nav{height:68px}.navlinks,.nav-cta{display:none}.menu-btn{display:block;margin-left:auto}.nav.open{height:auto;flex-wrap:wrap;padding-bottom:16px}.nav.open .navlinks{display:flex;order:3;width:100%;flex-direction:column;align-items:stretch;gap:0}.nav.open .navlinks a{padding:11px 4px;border-bottom:1px solid var(--line)}.nav.open .nav-cta{display:block;order:4;width:100%}.hero{padding:55px 0 70px}.hero-inner{grid-template-columns:1fr}.hero-copy{text-align:center}.hero-copy .eyebrow,.hero-actions,.hero-proof{justify-content:center}.hero-copy>p{margin-left:auto;margin-right:auto}.hero-visual{max-width:580px;margin:auto;width:100%}.image-frame{height:440px}.signal-row{grid-template-columns:1fr 1fr}.signal-title{display:none}.ticker{border:0}.ticker:nth-of-type(3){display:grid}.signal-row>a{display:none}.solution-layout,.market-layout{grid-template-columns:1fr;gap:48px}.solution-tabs{display:grid;grid-template-columns:1fr 1fr}.solution-tabs button{border-left:0;border-bottom:2px solid transparent;border-radius:10px;text-align:center}.solution-tabs button.active{border-left:0;border-bottom-color:var(--lime)}.knowledge-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1.5fr 1fr 1fr}.footer-grid>div:last-child{grid-column:1/-1}.cta-box{flex-direction:column;text-align:center;gap:28px}.section{padding:82px 0}}
@media(max-width:600px){.wrap{width:min(100% - 28px,1180px)}.brand img{width:55px;height:34px}.brand b{font-size:10px}.brand strong{font-size:8px}.hero h1{font-size:39px}.hero-copy>p{font-size:15px}.hero-actions{flex-direction:column}.hero-actions .btn{width:100%}.hero-proof{gap:13px}.hero-proof strong{font-size:18px}.image-frame{height:340px;border-radius:26px 56px 26px 26px}.weather-card{left:12px;bottom:12px}.price-card{right:10px;top:16px}.orbit-label{right:5px;font-size:9px}.quick{grid-template-columns:repeat(2,1fr);margin-top:-32px}.quick>*{border-right:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important}.quick>*:nth-child(even){border-right:0!important}.quick>*:nth-last-child(-n+2){border-bottom:0!important}.signal-row{grid-template-columns:1fr}.ticker{padding:11px 4px;border-bottom:1px solid var(--line)}.ticker:nth-of-type(3){display:none}.section-heading h2,.solution-intro h2,.market-copy h2{font-size:32px}.eco-grid,.project-grid{grid-template-columns:1fr}.eco-card{min-height:240px}.solution-panel{padding:27px 22px}.solution-panel ul{grid-template-columns:1fr}.section-heading.row{align-items:start;gap:10px}.section-heading.row>a{display:none}.main-story{grid-template-columns:1fr}.story-art{min-height:230px}.market-metrics{justify-content:space-between;gap:10px}.market-board{padding:14px}.board-row{grid-template-columns:1.4fr 1fr .6fr;padding:12px 10px;font-size:11px}.trade-card{grid-template-columns:44px 1fr}.trade-card button{grid-column:1/-1}.cta-box{padding:38px 22px}.cta-box h2{font-size:27px}.cta-actions{flex-direction:column;width:100%}.footer-grid{grid-template-columns:1fr 1fr;gap:35px}.footer-brand{grid-column:1/-1}.footer-grid>div:last-child{grid-column:1/-1}.copyright{flex-direction:column;gap:5px}.modal-box{padding:28px 22px}}

/* ==========================================================================
   BỔ SUNG NGOÀI MOCKUP — mọi thứ phía trên là styles.css gốc, giữ nguyên.
   Mockup chỉ có khối teaser .market ở trang chủ, không có trang chi tiết mặt
   hàng (/thi-truong/{slug}), nên các class .commodity-* và .board-empty không
   thể có trong file gốc. Viết theo đúng biến, bo góc và bóng đổ của mockup để
   trang mới không lạc khỏi phần còn lại.
   ========================================================================== */
.commodity-header{margin-bottom:34px}
.commodity-header h1{font:800 clamp(34px,4vw,48px)/1.12 Montserrat,Inter,sans-serif;color:var(--dark);letter-spacing:-.035em;margin:13px 0 20px}
.commodity-header>a{display:inline-block;margin-top:22px;color:var(--green);font-size:13px;font-weight:700}
/* .eyebrow i của mockup là gạch ngang 24x2 màu lime. Ở đây <i> lại mang class
   .dot, và `.eyebrow i` (0,1,1) thắng `.dot` (0,1,0) nên chấm màu sẽ bị bóp
   thành gạch. Nâng độ ưu tiên để trả lại hình tròn, và trả lại cả bốn màu vì
   background của mockup cũng đang thắng theo cùng lý do. */
.eyebrow i.dot{width:9px;height:9px;border-radius:50%;margin-right:9px}
.eyebrow i.rice-dot{background:#62bd34}
.eyebrow i.coffee-dot{background:#9a6a40}
.eyebrow i.pepper-dot{background:#3c4741}
.eyebrow i.fruit-dot{background:#e9a430}
.commodity-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:14px}
.commodity-price strong{font:800 clamp(32px,4.4vw,46px)/1 Montserrat;color:var(--dark);letter-spacing:-.03em}
.commodity-price em{font-style:normal;font-size:13px;font-weight:800;padding:5px 10px;border-radius:20px;background:#e1f4e8}
.commodity-price em.down{background:#fdeceb}
.commodity-price span{font-size:12px;color:var(--muted)}
.commodity-history .board-row{grid-template-columns:1fr 1fr .55fr}
.commodity-history .board-row b{font-weight:700}
.board-empty{margin:0;padding:26px 16px;text-align:center;font-size:13px;color:var(--muted);background:#fff;border-radius:12px}
@media(max-width:600px){.commodity-price{gap:9px}.commodity-history .board-row{grid-template-columns:1fr 1fr .6fr;padding:12px 10px;font-size:11px}}

/* --------------------------------------------------------------------------
   Trang /gioi-thieu và /lien-he. Mockup không có hai trang này, nên các class
   dưới đây là phần MỚI. Mọi trang đều dựng chủ yếu bằng class sẵn có của
   mockup (.section, .wrap, .section-heading, .eco-grid/.eco-card,
   .solution-layout/.solution-panel, .market-metrics, .market-layout,
   .cta-box); phần dưới chỉ vá đúng những chỗ mockup không có luật.
   -------------------------------------------------------------------------- */

/* .section-heading của mockup chỉ style <h2>. Hai trang này là trang NỘI DUNG
   (không phải trang danh sách) nên mỗi trang có đúng một <h1> — cần luật riêng,
   nếu không tiêu đề chính rơi về <h1> mặc định của trình duyệt (Times, 2em). */
.about-intro{background:linear-gradient(118deg,#f2faf5 0,#fbfefc 47%,#e9f7f9 100%);padding:76px 0 66px}
.about-intro .section-heading{max-width:840px;margin-bottom:0}
.about-intro h1{font:800 clamp(28px,3.4vw,42px)/1.2 Montserrat,Inter,sans-serif;color:var(--dark);letter-spacing:-.03em;margin:14px 0 16px}
.about-intro .section-heading p{font-size:17px}

/* .market-metrics của mockup nằm trong cột trái căn trái; ở khối QUY MÔ nó đứng
   một mình giữa trang. */
.about-metrics{justify-content:center;gap:56px;margin:0}
.about-metrics strong{font:800 40px Montserrat;color:var(--green);line-height:1.1}
.about-metrics span{font-size:13px;color:var(--muted);text-align:center}
.about-metrics div{align-items:center}

/* Đúng 04 nhóm đối tác: lưới 3 cột của .eco-grid để lại một ô lẻ. */
.partner-grid{grid-template-columns:repeat(2,1fr)}
.partner-grid .eco-card h3{max-width:none}
.resource-grid .eco-card h3{max-width:none;font-size:17px}
/* Dòng liệt kê thành phần ("Viện nghiên cứu • Trường đại học • ..."): nhỏ hơn,
   màu thương hiệu, tách khỏi đoạn mô tả bên dưới. */
.partner-tags{font-size:12.5px;font-weight:600;color:var(--green);letter-spacing:.01em;margin:0 0 14px}
.featured .partner-tags{color:#d8f3e8}

/* ——— Trang Giới thiệu: đợt làm dày 2026-09-21 ———
   Trước đợt này trang có 12 thẻ mà ô icon của cả 12 đều là hai chữ viết tắt,
   và toàn trang không có một hình nào. Ba thay đổi dưới đây, không đụng câu
   chữ thương hiệu. */

/* 1) Icon SVG thay ô chữ. .eco-icon svg đã có luật 26px ở phần mockup gốc,
      ở đây chỉ cần ô icon của .featured (thẻ 01 nền xanh) không bị chìm. */
.featured .eco-icon svg{color:#fff}

/* 2) Sơ đồ bốn bước "Tri thức → Dữ liệu → Giải pháp → Giá trị" ở khối mở đầu. */
.about-flow{list-style:none;display:flex;justify-content:center;align-items:flex-start;gap:0;margin:38px auto 0;padding:0;max-width:760px}
.about-flow li{flex:1;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;text-align:center}
.about-flow strong{font:700 14px/1.3 Montserrat,Inter,sans-serif;color:var(--dark)}
.flow-icon{width:56px;height:56px;border-radius:18px;background:#fff;border:1px solid var(--line);color:var(--green);display:grid;place-items:center;box-shadow:0 6px 18px rgba(5,107,67,.08)}
.flow-icon svg{width:26px;height:26px;display:block}
/* Mũi tên nối: vẽ ở mép TRÁI của mỗi bước trừ bước đầu, nên số mũi tên luôn
   bằng số bước trừ 1 dù sau này thêm hay bớt bước. */
.about-flow li:not(:first-child):before{content:"";position:absolute;top:27px;right:50%;left:-50%;height:2px;background:linear-gradient(90deg,#cfe6da,#8fcfae);z-index:-1}
.about-flow li:not(:first-child):after{content:"";position:absolute;top:23px;left:-10px;width:8px;height:8px;border-top:2px solid #8fcfae;border-right:2px solid #8fcfae;transform:rotate(45deg)}

/* 3) Khối Quy mô nền đậm — cắt dải ba khối trắng liên tiếp ở cuối trang. */
.quy-mo{background:linear-gradient(135deg,var(--deep),#076144);color:#fff}
.quy-mo .eyebrow{color:#a7ef72}
.quy-mo .section-heading h2{color:#fff}
.quy-mo .about-metrics strong{color:#fff}
.quy-mo .about-metrics span{color:#cfe8dc}

/* Thẻ "MẠNG LƯỚI HỖ TRỢ" chỉ có tiêu đề + dòng liệt kê, không có đoạn mô tả
   như 11 thẻ còn lại (tài liệu thương hiệu cũng không có câu nào cho nó).
   Bỏ min-height ép cứng ở lưới này để thẻ co theo nội dung thay vì chừa một
   khoảng trắng cao bằng thẻ dài nhất. */
.resource-grid .eco-card{min-height:0}
.resource-grid .eco-card p:last-child{margin-bottom:0}


/* .cta-box của mockup chỉ có <span> + <h2>; câu kết thương hiệu có thêm một
   dòng <p> bên dưới. */
.cta-box p{margin:14px 0 0;font-size:14px;color:#d5f1e6;max-width:640px}

/* /lien-he — dùng lại lưới .market-layout, nhưng cột thông tin là cột CHÍNH
   nên đảo tỉ lệ và căn trên đầu thay vì căn giữa. */
.contact{background:var(--bg)}
.contact .market-layout{grid-template-columns:1.1fr .9fr;gap:64px;align-items:start}
.contact-copy h1{font:800 clamp(30px,3.6vw,44px)/1.14 Montserrat,Inter,sans-serif;color:var(--dark);letter-spacing:-.035em;margin:13px 0}
.contact-copy>p{color:var(--muted);font-size:16px;margin:0 0 30px}
.contact-list{margin:0;display:grid;gap:12px}
.contact-list>div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.contact-list dt{font-size:10px;font-weight:800;letter-spacing:.09em;color:var(--muted);text-transform:uppercase}
.contact-list dd{margin:6px 0 0;font:700 15px/1.45 Montserrat,Inter,sans-serif;color:var(--dark)}
.contact-list dd a{color:var(--green)}
.contact-list dd a:hover{text-decoration:underline}
.contact .solution-panel{box-shadow:var(--shadow)}
.contact .cta-actions{margin-top:24px}

@media(max-width:820px){
  .partner-grid{grid-template-columns:repeat(2,1fr)}
  .about-intro{padding:56px 0 50px}
  .about-flow{gap:18px;margin-top:30px}
  .flow-icon{width:48px;height:48px;border-radius:15px}
  .flow-icon svg{width:23px;height:23px}
  .about-flow strong{font-size:13px}
  .about-metrics{gap:28px;flex-wrap:wrap}
  .about-metrics strong{font-size:32px}
  .contact .market-layout{grid-template-columns:1fr;gap:40px}
}

@media(max-width:600px){
  .partner-grid,.resource-grid{grid-template-columns:1fr}
  .about-intro h1{font-size:26px}
  /* Bốn bước xuống lưới 2x2. Mũi tên nối CHỈ đúng khi các bước nằm một hàng
     ngang — ở lưới 2x2 nó sẽ chỉ sai hướng, nên tắt hẳn. */
  .about-flow{display:grid;grid-template-columns:1fr 1fr;gap:22px 12px}
  .about-flow li:not(:first-child):before,
  .about-flow li:not(:first-child):after{display:none}
  .about-metrics{justify-content:space-between;gap:14px}
  .about-metrics strong{font-size:26px}
  .about-metrics span{font-size:11px}
  .contact-list dd{font-size:14px}
  .cta-box p{font-size:13px}
}

/* Logo thật của NSV thay cho ảnh placeholder của mockup. Mockup đặt khung ảnh
   66x40 (tỉ lệ 1,65:1) nhưng dấu hiệu NSV là 2,84:1, nên giữ nguyên kích thước
   cũ sẽ để lại hai dải trống hai bên và logo bị co nhỏ. Chỉnh khung cho khớp
   tỉ lệ thật. */
.brand img{width:96px;height:34px}
@media(max-width:600px){.brand img{width:82px;height:29px}}
/* Footer nền xanh đậm (--deep). File logo là JPG nền TRẮNG ĐẶC, không trong
   suốt, nên đặt vào đây sẽ thành một ô trắng chữ nhật giữa nền tối. Footer
   dùng phần chữ (đã tô trắng sẵn) thay cho ảnh — xem _Layout.cshtml. Muốn có
   logo ở footer thì cần bản PNG nền trong suốt hoặc bản một màu trắng. */

/* ==========================================================================
   TIẾP CẬN & KHẢ ĐỌC — luật đè, KHÔNG sửa phần gốc phía trên.

   Người dùng chính là nông dân và hợp tác xã, phần lớn vào bằng điện thoại,
   độ tuổi trung niên trở lên, nhiều người xem ngoài trời nắng. Cỡ chữ và độ
   tương phản ở đây quyết định người ta có đọc được giá nông sản hay không.

   Khối này nằm CUỐI file nên thắng cả các luật trong @media ở phần gốc
   (cùng độ ưu tiên, sau thì thắng). Mỗi giá trị có biến thể responsive đều
   phải đè lại đúng biến thể đó — xem các @media ở cuối khối này.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A1. Tương phản — bốn chỗ trượt WCAG AA 4,5:1 (tính theo công thức WCAG:
   sRGB sang tuyến tính, L = 0,2126R + 0,7152G + 0,0722B, rồi
   (Ls+0,05)/(Lt+0,05)).
   -------------------------------------------------------------------------- */

/* --muted #667a73 trên --bg #f4f8f5 chỉ đạt 4,26:1 -> 5,14:1 với #5a6d66.
   Đổi THẲNG giá trị biến thay vì đè theo từng ngữ cảnh: đã rà toàn bộ nơi
   dùng var(--muted) (hero-copy p, hero-proof span, live-card small,
   price-card b em, section-heading p, eco-card p, story-copy p,
   side-stories small, market-metrics span, board-head small, board-row.head,
   ticker span, project-card p, modal-box p, success span, modal-close,
   contact-list dt, commodity-price span, board-empty) — TẤT CẢ đều nằm trên
   nền sáng (#fff, #fbfdfb, --bg #f4f8f5, gradient hero #f2faf5). Hai chỗ duy
   nhất nằm trên nền tối đã có luật riêng đè sẵn trong file gốc
   (.featured p{color:#dcf4ec}, .solution-intro p{color:#bfd9cf}) nên không
   bị ảnh hưởng. Vì chỉ làm ĐẬM hơn, mọi chỗ dùng đều tăng tương phản:
   trên #fff 5,51:1 · trên #fbfdfb 5,39:1 · trên #f4f8f5 5,14:1. */
:root{--muted:#5a6d66}

/* .up #149c63 trên trắng chỉ 3,52:1 -> #0a7a4a đạt 5,39:1 (trên #fbfdfb của
   dải .signal 5,27:1; trên nền badge #e1f4e8 của .commodity-price 4,70:1).
   Vẫn là xanh lá đậm — giữ nguyên quy ước xanh-tăng của bảng giá. */
.up{color:#0a7a4a}
/* .down #e05c57 trên trắng chỉ 3,60:1 -> #c62f2a đạt 5,47:1 (trên #fbfdfb
   5,35:1; trên nền badge #fdeceb của .commodity-price 4,78:1).
   Vẫn là đỏ — giữ nguyên quy ước đỏ-giảm. */
.down{color:#c62f2a}

/* .eco-no #a3b2ac trên trắng chỉ 2,21:1 — tệ nhất cả trang. Dùng lại đúng
   --muted mới (#5a6d66) -> 5,51:1, và giữ được sắc xám-xanh của mockup.
   .featured .eco-no (#ffffff85 trên nền gradient xanh đậm) không đụng tới:
   nó có luật riêng trong file gốc và nằm trên nền tối. */
.eco-no{color:var(--muted)}

/* --------------------------------------------------------------------------
   A2. Sàn cỡ chữ: tối thiểu 11px; 12px cho mọi chỗ chứa dữ liệu người dùng
   cần đọc (giá, ngày, biến động, tên mặt hàng, đơn vị).
   Nhãn trang trí toàn chữ hoa có letter-spacing rộng giữ ở 11px.
   -------------------------------------------------------------------------- */

/* 9px -> 12px. Hai thẻ nổi trên ảnh hero. Ở .price-card thẻ <small> chứa TÊN
   MẶT HÀNG và NGÀY GHI NHẬN — đúng loại dữ liệu phải đọc được. Nới
   letter-spacing xuống .04em để bù phần chữ to ra. */
.live-card small{font-size:12px;letter-spacing:.04em}
/* .price-card định vị absolute nên bề rộng do nội dung quyết định: chữ to hơn
   mà không chặn thì thẻ tràn khỏi .image-frame. Chặn bề rộng để <small> xuống
   dòng thay vì tràn; thẻ cao thêm một dòng, bố cục không vỡ. */
.price-card{max-width:calc(100% - 42px)}
/* Đơn vị (đ/kg) 10px -> 12px; badge biến động 10px -> 12px (dữ liệu). */
.price-card b em{font:500 12px Inter}
.price-card span{font-size:12px}

/* Dải giá đầu trang — toàn bộ là dữ liệu giá. */
.ticker span{font-size:12px}   /* tên mặt hàng, 11px -> 12px */
.ticker em{font-size:12px}     /* biến động, 10px -> 12px */
.signal-title span{font-size:11px}   /* nhãn chữ hoa, 10px -> 11px */

/* Bảng giá: hàng tiêu đề cột và ô biến động là dữ liệu -> 12px. */
.board-row.head{font-size:12px}
.board-row em{font-size:12px}
.board-head small{font-size:11px}   /* nhãn chữ hoa letter-spacing .09em */
.board-head>span{font-size:12px}    /* badge chứa NGÀY cập nhật -> dữ liệu */

/* Thẻ cơ hội giao thương. */
.trade-card small{font-size:11px}   /* nhãn chữ hoa "CƠ HỘI GIAO THƯƠNG" */
.trade-card span{font-size:12px}    /* khu vực + thời gian giao -> dữ liệu */

/* Nhãn chữ hoa có letter-spacing rộng: 9–10px -> 11px. */
.project-type{font-size:11px}
.panel-mark{font-size:11px}
.cta-box span{font-size:11px}
.story-copy>span,.side-stories article span{font-size:11px}
.contact-list dt{font-size:11px}
.solution-panel li:before{font-size:11px}   /* dấu ✓ trong vòng tròn 18px */

/* Chữ thường/dữ liệu: 10px -> 11–12px. */
.quick small{font-size:11px}
.market-metrics span{font-size:12px}
.copyright{font-size:12px}          /* câu bản quyền đầy đủ, không phải nhãn */
.brand strong{font-size:11px}       /* 10px, và 8px ở ≤600px — đè cả hai */

/* --------------------------------------------------------------------------
   A3. Trạng thái focus bàn phím (WCAG 2.4.7). Trước đây CSS không có một luật
   :focus hay outline nào — người dùng bàn phím mất hoàn toàn dấu vị trí.

   Viền hai lớp: vòng xanh đậm #0a7a4a thấy rõ trên nền sáng (5,39:1 trên
   trắng), quầng sáng #f5fbf7 ở khe outline-offset thấy rõ trên nền tối
   (14,28:1 trên --deep #032d22 của footer và khối Giải pháp). Tương phản
   giữa hai lớp với nhau là 5,14:1 nên vòng viền luôn tự tách khỏi nền.

   Dùng :focus-visible chứ không :focus — bấm chuột không hiện viền.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nav-cta:focus-visible,
.menu-btn:focus-visible,
.solution-tabs button:focus-visible,
.trade-card button:focus-visible,
.quick>a:focus-visible,
.quick>button:focus-visible,
.socials a:focus-visible,
.modal-close:focus-visible{
  outline:3px solid #0a7a4a;
  outline-offset:3px;
  box-shadow:0 0 0 3px #f5fbf7;
  border-radius:6px;
}
/* Ô nhập trong modal đã có bo góc 11px — giữ đúng hình dạng khi focus. */
.modal-box input:focus-visible,.modal-box select:focus-visible{border-radius:11px;border-color:#0a7a4a}

/* --------------------------------------------------------------------------
   A6. Skip link — bỏ qua dải trên cùng và 6 mục menu để tới thẳng <main>.
   Ẩn ngoài màn hình khi chưa focus, hiện rõ khi focus bằng bàn phím.
   Dùng :focus (không :focus-visible) vì liên kết này CHỈ tới được bằng bàn
   phím — không có đường nào bấm chuột vào nó.
   -------------------------------------------------------------------------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--green);color:#fff;font-size:14px;font-weight:700;padding:12px 18px;border-radius:0 0 12px 0}
.skip-link:focus{left:0;outline:3px solid #f5fbf7;outline-offset:-6px}
/* <main tabindex="-1"> nhận focus bằng chương trình sau khi bấm skip link.
   Không vẽ viền quanh cả trang — người dùng đã thấy trang cuộn tới nội dung. */
main:focus{outline:none}

/* --------------------------------------------------------------------------
   A7. Thông báo lỗi form ngay trong modal, thay cho alert() của trình duyệt.
   Màu chữ #b3261e trên nền #fdeceb đạt 5,72:1.
   -------------------------------------------------------------------------- */
.form-error{margin:0;padding:11px 13px;border-radius:11px;background:#fdeceb;border:1px solid #f4c9c6;color:#b3261e;font-size:13px;font-weight:600;line-height:1.5}
.form-error[hidden]{display:none}

/* --------------------------------------------------------------------------
   A5. prefers-reduced-motion.
   .reveal mặc định opacity:0 và chỉ mở khi app.js gắn class 'visible'.
   Ở đây phải ép .reveal HIỆN ĐẦY ĐỦ NGAY, không chờ JS — nếu chỉ tắt
   transition thì nội dung sẽ vô hình vĩnh viễn.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    transition-delay:0s!important;
  }
  html{scroll-behavior:auto}
  .reveal,.reveal.visible{opacity:1!important;transform:none!important;transition:none!important}
  .delay{transition-delay:0s!important}
  .eco-card:hover,.nav-cta:hover,.btn.primary:hover{transform:none}
}

/* --------------------------------------------------------------------------
   A4 + A2 (biến thể responsive). Mọi luật dưới đây đều đè lại một luật @media
   của phần gốc — bắt buộc phải nằm trong @media cùng điểm ngắt và đứng SAU,
   nếu không bản điện thoại ăn nhầm giá trị desktop.
   -------------------------------------------------------------------------- */
@media(max-width:820px){
  /* A4 — mục menu điện thoại: file gốc để `padding:11px 4px` trên thẻ <a>
     INLINE, nên chiều cao vùng bấm chỉ bằng hộp chữ (~20px) + 22px đệm ~ 42px.
     display:block để line-height 1.6 tính vào chiều cao (14px x 1,6 = 22,4px),
     cộng đệm 13px hai đầu = 48,4px; min-height 44px là chốt chặn cuối. */
  .nav.open .navlinks a{display:block;padding:13px 4px;min-height:44px}
  /* A4 — biểu tượng mạng xã hội 34x34px -> 44x44px trên màn hình cảm ứng. */
  .socials a{width:44px;height:44px;border-radius:12px}
}

@media(max-width:600px){
  /* Đè `.brand strong{font-size:8px}` và `.brand b{font-size:10px}` của gốc.
     .brand b có white-space:nowrap ở gốc: ở 11px chuỗi "NÔNG NGHIỆP SỐ VIỆT
     NAM" cộng logo và nút menu vượt bề ngang máy 320–360px. Cho phép xuống
     dòng thay vì tràn — header cao 68px, hai dòng 11px vẫn dư chỗ. */
  .brand strong{font-size:11px}
  .brand b{font-size:11px;white-space:normal}
  /* Đè `.orbit-label{font-size:9px}` của gốc. */
  .orbit-label{font-size:11px}
  /* Đè `.board-row{font-size:11px}` và `.commodity-history .board-row{font-size:11px}`.
     Lưới vẫn đúng 3 cột 1.4fr 1fr .6fr của gốc, chỉ chữ to hơn 1px. */
  .board-row{font-size:12px}
  .commodity-history .board-row{font-size:12px}
  /* Đè `.about-metrics span{font-size:11px}` ở khối /gioi-thieu. */
  .about-metrics span{font-size:12px}
  /* .board-head là flex justify-between; badge ngày ở 12px cộng tiêu đề vượt
     bề ngang bảng trên máy 360px. Cho xuống dòng thay vì tràn. */
  .board-head{flex-wrap:wrap;gap:8px}
  /* .price-card sát mép hơn ở đây (right:10px) — nới chỗ cho <small> 12px. */
  .price-card{max-width:calc(100% - 24px)}
}

/* ---------------------------------------------------------------------------
   Lối vào Học viện số dưới lưới khối Tri thức (.knowledge-more)
   ---------------------------------------------------------------------------
   Class KHÔNG có trong mockup: mockup chỉ có liên kết "Xem toàn bộ thư viện →"
   ở .section-heading.row, mà luật gốc `.section-heading.row>a{display:none}`
   trong @media(max-width:600px) ẩn nó trên điện thoại. Người dùng chính của
   site vào bằng điện thoại, nên lối vào /khoa-hoc phải là một hàng riêng hiện
   ở MỌI bề ngang. Đặt ở phần bổ sung, không đụng phần gốc.
   .btn/.btn.secondary đã có sẵn ở gốc nên chỉ cần canh vị trí hàng. */
.knowledge-more{display:flex;justify-content:center;margin-top:28px}
@media(max-width:600px){
  /* Nút full-width trên điện thoại, cùng cách .hero-actions .btn của gốc xử lý. */
  .knowledge-more{margin-top:22px}
  .knowledge-more .btn{width:100%}
}

/* ==========================================================================
   KHỐI HỆ SINH THÁI — dựng lại phần bề mặt thẻ
   Hai lần sửa trước đều hỏng vì đi sai gốc: chỉ chỉnh màu viền và bóng đổ,
   trong khi vấn đề thật là THẺ TRẮNG NẰM TRÊN SECTION TRẮNG. Đo trên nền
   trắng: viền `--line #dce9e2` đạt 1,25:1 và nền chip `--bg #f4f8f5` đạt
   1,07:1 — không màu viền nào cứu được chuyện đó mà vẫn giữ được vẻ thoáng
   (phải tới ~#6fa78d mới đạt 3:1, nhìn nặng như kẻ ô).
   Cách đúng là tách hai BỀ MẶT: section đổ nền `--bg`, thẻ giữ trắng, cộng
   bóng đổ thật. Mảng lớn chỉ cần chênh rất ít là mắt đã phân biệt được —
   khác hẳn đường kẻ 1px. Mockup đã dùng đúng cặp này cho `.knowledge` và
   `.projects`, nên đây là ngôn ngữ sẵn có của thiết kế chứ không phải phát
   minh mới.
   ========================================================================== */
.ecosystem{background:var(--bg)}
.eco-card{background:#fff;border-color:#e6f0ea;
          box-shadow:0 1px 3px rgba(5,61,46,.05),0 10px 26px rgba(5,61,46,.09);
          transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.eco-card:hover{box-shadow:0 6px 12px rgba(5,61,46,.07),0 22px 48px rgba(5,61,46,.16)}
.eco-card.featured{border-color:transparent;box-shadow:0 14px 36px rgba(5,107,67,.26)}
/* Chip icon lấy đúng #e1f4e8 mà mockup đã dùng cho `.qicon.green` — cùng ngôn
   ngữ màu, và chữ `--green` trên nền này đạt 5,74:1. */
.eco-icon{background:#e1f4e8}
/* Ba module Chuyên gia, Bản đồ số, Truy xuất nguồn gốc chưa dựng nên thẻ của
   chúng không có liên kết, làm ba trong sáu thẻ hụt mất dòng cuối và hàng thẻ
   so le. Nhãn này giữ lại nhịp thị giác mà vẫn nói thật, thay vì một liên kết
   bấm vào không đi đâu. Dùng chung khuôn với `.eco-card a`. */
.eco-soon{margin-top:auto;align-self:flex-start;color:var(--muted);font-size:13px;font-weight:600}
.featured .eco-soon{color:#dcf4ec}
/* Tiêu đề canh giữa hay rớt một chữ xuống dòng cuối ("... Nhiều giá / trị").
   `text-wrap:balance` chia đều các dòng; trình duyệt cũ bỏ qua, không hỏng gì. */
.section-heading h2,.solution-intro h2,.market-copy h2{text-wrap:balance}
/* Ô icon nay chứa <svg> thay cho hai chữ viết tắt. `currentColor` để nó thừa
   hưởng màu từ `.eco-icon` (xanh thương hiệu) và `.featured .eco-icon` (trắng)
   mà không cần luật riêng. 26px trên ô 50px giữ đúng tỉ lệ quang học của ô chữ cũ. */
.eco-icon svg{width:26px;height:26px;display:block}
/* Ô icon khối truy cập nhanh cũng chuyển từ chữ viết tắt sang SVG, dùng chung
   partial với khối Hệ sinh thái. Để một khối dùng icon còn khối kia dùng chữ
   thì hai khối nằm sát nhau trên trang chủ sẽ lệch hẳn ngôn ngữ thị giác.
   22px trên ô 44px, cùng tỉ lệ quang học với 26px trên ô 50px của .eco-icon. */
.qicon svg{width:22px;height:22px;display:block}

/* ==========================================================================
   KHỐI TRI THỨC — mảng ảnh minh hoạ
   Mockup viết cứng `class="story-art rice"`, và CHỈ `.rice` mới có nền. View
   render động thì không có modifier đó, nên mảng ảnh không nền, mà chữ bên
   trong lại là `color:#fff` — trắng trên trắng, vô hình hoàn toàn. Nửa trái
   thẻ chính trống trơn. Thêm biến thể nền theo màu chuyên mục, dùng chung bộ
   green/orange/blue với `.mini-art`.
   ========================================================================== */
.story-art.green,.story-art.rice{background:linear-gradient(150deg,#c1eb65,#55ba36)}
.story-art.orange{background:linear-gradient(150deg,#f7c76a,#e08a26)}
.story-art.blue{background:linear-gradient(150deg,#7fc9f0,#1b86c9)}
/* Chưa có ảnh thật: hình cây trồng chìm + tên chuyên mục, xếp dọc giữa mảng.
   `.story-art` của mockup là display:grid + place-items:center, nên hai phần tử
   con tự xếp thành hai hàng và `gap` là đủ — KHÔNG dùng flex-direction ở đây,
   nó không có tác dụng trên grid. */
.story-art{gap:14px}
.story-art-hoa{width:132px;height:132px;color:#fff;opacity:.34;z-index:1}
.story-art>span{max-width:80%;text-align:center;line-height:1.3}
/* ⚠️ Mockup không có ảnh thật nên không có luật nào cho <img> ở đây. Thiếu nó
   thì ảnh admin tải lên sẽ render theo kích thước gốc và phá vỡ ô. */
.story-art img{width:100%;height:100%;object-fit:cover}
.mini-art img{width:100%;height:100%;object-fit:cover;border-radius:14px}
.mini-art svg{width:30px;height:30px;display:block}
@media(max-width:600px){.story-art-hoa{width:104px;height:104px}}

/* --------------------------------------------------------------------------
   FOOTER — biến thể responsive. Phải nằm CUỐI file: các @media của phần gốc
   (820px / 600px) đứng sau khối footer nên chỉ luật ở đây mới đè được chúng.
   Không đụng tới `.socials a{width:44px...}` của A4 — luật đó vẫn đúng và vẫn
   phải giữ nguyên vị trí (có test chốt thứ tự).
   -------------------------------------------------------------------------- */
@media(max-width:820px){
  /* Cột Liên hệ trải hết bề ngang (luật gốc `>div:last-child{grid-column:1/-1}`)
     nên danh sách liên hệ xếp 2 cột cho khỏi thành một dải dài lệch trái. */
  .footer-contact{grid-template-columns:1fr 1fr;gap:14px 34px}
  /* Xếp hai cột thì vạch ngăn không còn nghĩa (hai nhóm nằm cạnh nhau chứ
     không trên dưới) — bỏ đi cho khỏi thành một gạch lửng giữa lưới. */
  .footer-contact .fc-sep{margin-top:0;padding-top:0;border-top:0}
  .footer-grid{gap:38px}
  footer:after{right:-220px;top:-190px}
}
@media(max-width:600px){
  footer{padding-top:54px}
  /* Vùng bấm ngón tay: dòng chữ 13px cao ~21px là quá nhỏ. Giãn gap thành
     đệm dọc trong chính thẻ <a> để cả ô đều bấm được, không chỉ hàng chữ. */
  .footer-links{gap:0}
  .footer-links a{min-height:42px;padding:6px 0}
  .footer-contact{grid-template-columns:1fr}
  .footer-contact a{min-height:32px;display:inline-flex;align-items:center}
  .copyright{align-items:flex-start;gap:12px;margin-top:38px}
  .copyright .legal{gap:18px;flex-wrap:wrap}
  /* Vòng loang trang trí tràn ra mép phải trên máy hẹp — thu lại cho vừa. */
  footer:after{width:320px;height:320px;right:-140px;top:-120px}
}