/* Biomass Vietnam: CSS dùng chung cho mọi trang. */

/* Cuộn mượt (Lenis): tắt scroll-behavior gốc để hai cơ chế không chồng nhau */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
/* Bảng màu đã duyệt (video báo cáo Q3/2026): xanh lá, xanh dương, navy. */
:root {
  --sc-canvas:     #0E2233;
  --sc-surface:    #12304A;
  --sc-ink:        #F3F8F1;
  --sc-ink-soft:   #B8CCDA;
  --sc-accent:     #8CD46F;
  --sc-accent-ink: #0E2233;
  --sc-font-display: "Be Vietnam Pro", system-ui, sans-serif;
  --sc-font-text:    "Be Vietnam Pro", system-ui, sans-serif;

  --bv-sky:   #BFDAF3;
  --bv-mint:  #E6F2E1;
  --bv-leaf:  #4B7F3F;
}

body { background: var(--sc-canvas); }

/* ---------- Thanh điều hướng ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; gap: var(--sc-5);
  padding: var(--sc-4) var(--sc-gutter);
  background: linear-gradient(180deg, rgb(14 34 51 / 0.72), rgb(14 34 51 / 0));
}
.bar__mark img { display: block; height: 50px; width: auto; filter: brightness(0) invert(1); }
.bar__nav { display: flex; gap: var(--sc-5); margin-left: auto; }
.bar__nav a, .lang button {
  color: var(--sc-ink); text-decoration: none; font-size: var(--sc-t-sm); font-weight: 700;
  padding: var(--sc-2) 0; opacity: 0.9; transition: opacity var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out);
}
.bar__nav a:hover, .lang button:hover { opacity: 1; }
.bar__nav a[aria-current="page"] { opacity: 1; color: var(--sc-accent); box-shadow: inset 0 -2px 0 var(--sc-accent); }
.bar__nav .bar__nav-m { display: none; }
.bar__login {
  display: inline-flex; align-items: center; gap: var(--sc-2); min-height: 44px; padding: 0 var(--sc-4); border-radius: var(--sc-r-pill);
  color: var(--sc-ink); font-size: var(--sc-t-sm); font-weight: 700; text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 0 0 1.5px rgb(243 248 241 / 0.5); transition: box-shadow var(--sc-d-fast) var(--sc-ease-out);
}
.bar__login svg { width: 18px; height: 18px; }
.bar__login:hover, .bar__login[aria-current="page"] { box-shadow: inset 0 0 0 1.5px var(--sc-ink); }
.bar__menu { display: none; }
@media (max-width: 1180px) { .bar__cta-long { display: none; } }
.lang { display: flex; gap: var(--sc-1); padding-left: var(--sc-4); border-left: 1px solid var(--sc-hairline-strong); }
.lang button {
  font-weight: 600; background: none; border: 0; cursor: pointer; font-family: inherit;
  min-width: 44px; min-height: 44px; border-radius: var(--sc-r-sm);
}
.lang button[aria-pressed="true"] { opacity: 1; color: var(--sc-accent); font-weight: 700; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sc-2);
  min-height: 48px; padding: 0 var(--sc-5); border-radius: var(--sc-r-pill);
  font-weight: 700; font-size: var(--sc-t-sm); text-decoration: none; white-space: nowrap;
  transition: transform var(--sc-d-fast) var(--sc-ease-out), background-color var(--sc-d-fast) var(--sc-ease-out);
}
.btn--primary { background: var(--sc-accent); color: var(--sc-accent-ink); box-shadow: var(--sc-e2); }
.btn--primary:hover { background: #9EDD84; transform: translateY(-1px); }
.btn--ghost { color: var(--sc-ink); box-shadow: inset 0 0 0 1.5px rgb(243 248 241 / 0.5); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--sc-ink); }
.btn:focus-visible, .bar a:focus-visible, .lang button:focus-visible { outline: 2px solid var(--bv-sky); outline-offset: 3px; }

/* ---------- Hero: 4 lớp chiều sâu ----------
   Lớp 1 (xa nhất): footage băng tải đổ nhiên liệu, phóng chậm theo cuộn
   Lớp 2: chữ tiêu đề
   Lớp 3: khung video cận cảnh mẫu nhiên liệu, trôi lên nhanh hơn
   Lớp 4 (gần nhất): lá logo, trôi nhanh nhất */
/* Nền video dùng chung cho Hero và "Biomass là gì": cố định theo màn hình,
   clip-path của .hero-wrap giới hạn nó trong 2 phần này. --bp = tiến độ cuộn Hero (JS đặt). */
.hero-wrap { position: relative; clip-path: inset(0); }
.backdrop { position: fixed; left: 0; right: 0; top: -6vh; height: 112vh; z-index: 0; pointer-events: none; }
.backdrop video, .backdrop__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: translateY(calc(var(--bp, 0) * 6vh)) scale(calc(1.04 + var(--bp, 0) * 0.14));
  transform-origin: 62% 40%;
}
/* Ảnh nền hiện ngay khi tải trang; video tải sau, hiện mờ dần lên trên ảnh khi đã chạy */
.backdrop video { opacity: 0; transition: opacity 600ms var(--sc-ease-out); }
.backdrop video.is-playing { opacity: 1; }
.backdrop::after { /* tối dần khi cuộn để nhịp thứ hai và phần dưới đọc rõ */
  content: ""; position: absolute; inset: 0; background: var(--sc-canvas);
  opacity: calc(0.18 + var(--bp, 0) * 0.5);
}
.hero-wrap > section { position: relative; z-index: 1; }
/* Lớp tối góc trái của Hero tan dần khi cuộn, để cuối Hero khớp với phần dưới */
.hero .sc-scrim--lead { opacity: calc(1 - var(--sc-p, 0)); }
.hero .sc-scrim--lead { z-index: 2; }

/* Chữ Hero hiện ngay từ lần vẽ đầu, không chờ JavaScript (giúp LCP); JS chỉ làm mờ dần khi cuộn đi */
.hero .hero__copy[data-sc-cue] { opacity: 1; }
.hero__copy {
  position: absolute; z-index: 10; left: var(--sc-gutter); bottom: clamp(3rem, 13vh, 9rem);
  max-width: min(46rem, 62vw);
}
.hero h1 { font-weight: 800; font-size: min(clamp(2.6rem, 1.4rem + 4.6vw, 5.6rem), 9.2vh); line-height: 1.02; }
.hero h1 em { font-style: normal; color: var(--sc-accent); }
.hero__lede { margin: var(--sc-5) 0 0; max-width: 38rem; font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink); opacity: 0.9; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sc-3); margin-top: var(--sc-6); }

.hero__beat2 {
  position: absolute; z-index: 10; left: var(--sc-gutter); top: 50%; translate: 0 -50%;
  max-width: min(40rem, 60vw);
}
.hero h1, .hero__beat2 p { text-wrap: balance; }
.hero__beat2 p { margin: 0; font-weight: 700; font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.6rem); line-height: 1.12; letter-spacing: var(--sc-track-snug); }
.hero__beat2 p + p { margin-top: var(--sc-3); color: var(--sc-accent); }

/* 3 thẻ nhiên liệu xếp chồng. Khi cuộn, chồng thẻ xoè ra (--p) và nhiên liệu rơi xuống (canvas). */
.fuels-wrap { position: absolute; z-index: 12; right: calc(var(--sc-gutter) + 3vw); top: 27vh; }
.fuels {
  --p: var(--sc-p, 0);
  --w: clamp(170px, 15vw, 240px); --step-x: -38px; --step-y: -46px;
  position: relative; width: var(--w); aspect-ratio: 9 / 13; margin: 0; padding: 0; list-style: none;
}
.fuel {
  position: absolute; inset: 0; border-radius: var(--sc-r-lg); overflow: hidden; background: var(--sc-surface);
  box-shadow: 0 24px 60px -12px rgb(4 12 20 / 0.62), 0 0 0 1px rgb(243 248 241 / 0.16);
  transform:
    translate(calc(var(--i) * var(--step-x) * (1 + var(--p) * 0.9)), calc(var(--i) * var(--step-y) * (1 + var(--p) * 0.7)))
    rotate(calc(var(--r) + var(--p) * var(--rs)));
  transform-origin: 50% 100%;
}
.fuel:nth-child(1) { --i: 2; --r: -9deg; --rs: -7deg; z-index: 1; }
.fuel:nth-child(2) { --i: 1; --r: -3deg; --rs: -3deg; z-index: 2; }
.fuel:nth-child(3) { --i: 0; --r: 4deg;  --rs: 6deg;  z-index: 3; }
.fuel video, .fuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fuel:not(:last-child)::after { /* thẻ phía sau tối hơn một chút để tách lớp */
  content: ""; position: absolute; inset: 0; background: rgb(14 34 51 / 0.22); pointer-events: none;
}
.fuel span {
  position: absolute; z-index: 1; left: var(--sc-3); top: var(--sc-3);
  padding: var(--sc-1) var(--sc-3); border-radius: var(--sc-r-pill);
  background: rgb(14 34 51 / 0.8); color: var(--sc-ink); font-size: var(--sc-t-xs); font-weight: 600;
}
.hero__fall { position: absolute; inset: 0; z-index: 9; /* rơi phía sau chữ để tiêu đề luôn đọc rõ */ width: 100%; height: 100%; pointer-events: none; }

.hero__leaves-wrap { position: absolute; z-index: 14; right: -3vw; top: 6vh; pointer-events: none; }
.hero__leaves { width: clamp(120px, 15vw, 230px); height: auto; display: block; rotate: calc(var(--sc-p, 0) * 18deg); }

/* Nút hướng dẫn trượt: hiện ra mỗi khi khách dừng cuộn, ẩn ngay khi cuộn tiếp */
.nav-hint {
  position: fixed; z-index: var(--sc-z-chrome); right: var(--sc-gutter); bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: var(--sc-r-pill);
  background: rgb(14 34 51 / 0.88); backdrop-filter: blur(8px); color: var(--sc-ink);
  box-shadow: 0 0 0 1px rgb(243 248 241 / 0.2), var(--sc-e3);
  opacity: 0; translate: 0 12px; pointer-events: none;
  transition: opacity 280ms var(--sc-ease-out), translate 280ms var(--sc-ease-out);
}
.nav-hint.is-shown { opacity: 1; translate: 0 0; pointer-events: auto; }
.nav-hint__txt { padding: 0 var(--sc-2) 0 var(--sc-3); font-size: var(--sc-t-xs); font-weight: 600; white-space: nowrap; }
.nav-hint__btn {
  display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgb(243 248 241 / 0.12); color: var(--sc-ink);
}
.nav-hint__btn[data-dir="1"] { background: var(--sc-accent); color: var(--sc-accent-ink); }
.nav-hint__btn[hidden] { display: none; }
.nav-hint__btn:focus-visible { outline: 2px solid var(--bv-sky); outline-offset: 2px; }
.nav-hint__btn svg { width: 18px; height: 18px; }
.nav-hint.is-shown .nav-hint__btn[data-dir="1"] svg { animation: hint-bob 1.6s ease-in-out infinite; }
.hint-inline { display: inline-flex; align-items: center; gap: var(--sc-2); margin: var(--sc-3) 0 0; font-size: var(--sc-t-xs); font-weight: 600; }
.hint-inline::after { content: "↓"; display: inline-block; animation: hint-bob 1.6s ease-in-out infinite; }
.hint-inline--side::after { content: "→"; animation-name: hint-nudge; }
@keyframes hint-bob { 50% { translate: 0 4px; } }
@keyframes hint-nudge { 50% { translate: 4px 0; } }
.map-head .hint-inline { color: var(--bv-sky); transition: opacity var(--sc-d-fast) var(--sc-ease-out); }
.map-sec[data-step="3"] .map-head .hint-inline { opacity: 0; }

/* Thanh điều hướng chuyển nền đặc khi rời Hero để đọc rõ trên nền sáng */
/* Khi cuộn, thanh điều hướng thu lại thành khung bo tròn nổi (kiểu viên thuốc) */
.bar {
  transition: top 320ms var(--sc-ease-out), left 320ms var(--sc-ease-out), right 320ms var(--sc-ease-out),
    padding 320ms var(--sc-ease-out), border-radius 320ms var(--sc-ease-out), background-color 320ms var(--sc-ease-out), box-shadow 320ms var(--sc-ease-out);
}
.bar__mark img { transition: height 320ms var(--sc-ease-out); }
.bar.is-solid {
  top: 12px; left: max(12px, calc(var(--sc-gutter) - 24px)); right: max(12px, calc(var(--sc-gutter) - 24px));
  padding: 6px 8px 6px var(--sc-5); border-radius: var(--sc-r-pill);
  background: rgb(14 34 51 / 0.9); backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgb(243 248 241 / 0.12), 0 18px 40px -16px rgb(4 12 20 / 0.6);
}
.bar.is-solid .bar__mark img { height: 40px; }

/* ---------- Dùng chung cho các phần ---------- */
/* Tiêu đề kiểu ximitech: IN HOA rất đậm, 2 tông màu, nét bút xanh lá dưới chữ chính.
   Hero giữ kiểu đã duyệt, không dùng lớp này. */
.sec-title {
  margin: 0; font-weight: 800; font-size: var(--sc-t-2xl); line-height: 1.06; letter-spacing: -0.025em;
  text-transform: uppercase; text-wrap: balance;
}
.sec-title .t-alt { color: #5E7488; }
:is(.def-sec, .map-sec, .rep-sec, .page-head, .teaser--dark, .proc) .sec-title .t-alt { color: #8FA9BF; }
/* Trên nền xanh lá (phần Liên hệ): tông phụ xanh lá đậm, nét bút navy để không chìm */
.contact .sec-title .t-alt { color: #2E5A24; }
.contact .sec-title .hl {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 45 4, 110 2, 197 6 C 150 7, 80 9, 12 12' stroke='%230E2233' stroke-width='5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.sec-title .hl {
  padding-bottom: 0.1em; white-space: nowrap;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 45 4, 110 2, 197 6 C 150 7, 80 9, 12 12' stroke='%238CD46F' stroke-width='5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") left bottom / 100% 0.26em no-repeat;
}
.sec-lede { margin: var(--sc-4) 0 0; max-width: 40rem; font-size: var(--sc-t-base); line-height: 1.6; text-wrap: pretty; }
.chip-period {
  display: inline-block; margin-bottom: var(--sc-4); padding: var(--sc-1) var(--sc-3); border-radius: var(--sc-r-pill);
  font-size: var(--sc-t-xs); font-weight: 700; background: var(--sc-canvas); color: var(--sc-accent);
}
.chip-period--dark { background: rgb(140 212 111 / 0.16); }
.src { margin: var(--sc-4) 0 0; font-size: var(--sc-t-xs); line-height: 1.5; opacity: 0.75; }
/* Ô chờ số liệu: chỉ hiện ở bản xem trước, để thấy chỗ cần điền */
.todo {
  display: inline-block; padding: 2px var(--sc-2); border-radius: var(--sc-r-sm);
  border: 1px dashed currentColor; font-size: var(--sc-t-xs); font-weight: 600; opacity: 0.7;
}

/* ---------- 2 · Thị trường ---------- */
/* Nằm trên trang Nhiên liệu, giữa danh mục và thẻ liên hệ cuối: cùng nền xanh dương nhạt */
.mkt { background: var(--bv-sky); color: var(--sc-canvas); padding-block: 0 clamp(3.5rem, 6vw, 6rem); }
/* Đầu mục kiểu trang báo cáo: tiêu đề trái, lời dẫn và nguồn phải, đường kẻ mảnh bên dưới */
.mkt__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: var(--sc-4) var(--sc-7); align-items: end;
  padding-bottom: var(--sc-5); border-bottom: 1.5px solid var(--sc-canvas);
}
.mkt__aside p { margin: 0; max-width: 32rem; font-size: var(--sc-t-base); line-height: 1.55; color: #3B5163; }
.mkt__src { display: inline-block; margin-top: var(--sc-2); font-size: var(--sc-t-xs); font-weight: 700; color: var(--bv-leaf); text-decoration: none; }
.mkt__src:hover { text-decoration: underline; }
.mkt .sec-lede { color: #3B5163; }
/* Biomass là gì: ảnh bãi nhiên liệu thật phủ lớp navy, chữ trắng bên trái */
/* Biomass là gì: trong suốt, nằm trên nền video chung (.backdrop). Lớp tối bên trái
   hiện dần từ mép trên để không tạo vệt nối với Hero. */
.def-sec { position: relative; isolation: isolate; overflow-x: clip; color: var(--sc-ink); padding-block: clamp(4rem, 8vw, 8rem); }
.def-sec::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgb(14 34 51 / 0.65) 0%, rgb(14 34 51 / 0) 70%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 35%); mask-image: linear-gradient(180deg, transparent 0, #000 35%);
}
/* Lớp vẽ mảnh nhiên liệu rơi theo chuột: dưới chữ, trên lớp tối */
.def-sec__fall { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.def-sec .def { position: relative; z-index: 1; }
.def-sec__leaves { position: absolute; right: 4vw; bottom: 8%; width: clamp(110px, 12vw, 190px); rotate: -8deg; pointer-events: none; }
.def { max-width: 1280px; }
.def .sec-title { font-size: var(--sc-t-3xl); }
.def__lead { max-width: 40rem; margin: var(--sc-4) 0 0; font-size: var(--sc-t-xl); line-height: 1.35; font-weight: 500; text-wrap: balance; }
.def__lead b { font-weight: 800; }
.def__lead em { font-style: normal; color: var(--sc-accent); font-weight: 700; }
.def__ex { display: flex; flex-wrap: wrap; gap: var(--sc-2); max-width: 36rem; margin: var(--sc-6) 0 0; padding: 0; list-style: none; }
.def__ex li {
  padding: 6px var(--sc-3); border-radius: var(--sc-r-pill); font-size: var(--sc-t-sm); font-weight: 600;
  background: rgb(14 34 51 / 0.38); box-shadow: inset 0 0 0 1px rgb(243 248 241 / 0.18);
}
.def__full { max-width: 40rem; margin-top: var(--sc-6); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.def__full summary {
  display: inline-flex; align-items: center; gap: var(--sc-2); min-height: 44px; cursor: pointer; list-style: none;
  color: var(--sc-accent); font-weight: 700;
}
.def__full summary::-webkit-details-marker { display: none; }
.def__full summary::after { content: "+"; font-size: 1.2em; line-height: 1; }
.def__full[open] summary::after { content: "−"; }
.def__full p { margin: var(--sc-2) 0 0; line-height: 1.65; }
.def__full .def__src { font-size: var(--sc-t-xs); opacity: 0.8; }
.def__full summary:focus-visible { outline: 2px solid var(--bv-sky); outline-offset: 3px; border-radius: var(--sc-r-sm); }
.sec-title--sm { font-size: var(--sc-t-xl); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 var(--sc-6); padding: 0; list-style: none; border-bottom: 1px solid rgb(14 34 51 / 0.15); }
.stat { padding: var(--sc-5) var(--sc-5) var(--sc-5) 0; color: var(--sc-canvas); }
.stat + .stat { padding-left: var(--sc-5); border-left: 1px solid rgb(14 34 51 / 0.15); }
.stat b { display: block; white-space: nowrap; font-size: clamp(1.55rem, 1.05rem + 1.35vw, 2.5rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--sc-canvas); font-variant-numeric: tabular-nums; }
.stat small { display: block; margin-top: var(--sc-2); font-size: var(--sc-t-xs); font-weight: 700; color: var(--bv-leaf); }
.stat p { margin: var(--sc-2) 0 0; font-size: var(--sc-t-sm); line-height: 1.45; color: #3B5163; }

.gcal { margin: 0; background: var(--sc-canvas); color: var(--sc-ink); border-radius: var(--sc-r-lg); padding: clamp(1.25rem, 3vw, 2.5rem); box-shadow: var(--sc-e3); }
.gcal figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sc-2) var(--sc-5); align-items: baseline; margin-bottom: var(--sc-5); }
.gcal figcaption strong { font-size: var(--sc-t-lg); }
.gcal figcaption span { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.bars { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sc-3); }
.bars li { display: grid; grid-template-columns: minmax(10rem, 15rem) 1fr; gap: var(--sc-4); align-items: center; font-size: var(--sc-t-sm); }
.bars__name small { display: block; margin-top: 2px; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.bars__track { position: relative; height: 30px; }
.bars__bar {
  position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); border-radius: 0 6px 6px 0;
  background: var(--sc-accent); transform-origin: left; transform: scaleX(0);
  transition: transform 1100ms var(--sc-ease-out) calc(var(--k) * 90ms);
}
.bars__val {
  position: absolute; top: 50%; left: calc(var(--v) * 100% + 10px); translate: 0 -50%;
  font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
  opacity: 0; transition: opacity 400ms var(--sc-ease-out) calc(var(--k) * 90ms + 700ms);
}
/* Giá trị lớn: đặt số vào trong thanh để không tràn ra ngoài */
.bars li[data-in-bar] .bars__val, .bars__track[data-in-bar] .bars__val { left: auto; right: calc((1 - var(--v)) * 100% + 10px); color: var(--sc-canvas); }
/* Biểu đồ theo nhóm: mỗi nhóm 2 thanh, giá bán (xanh dương nhạt) và giá năng lượng (xanh lá) */
.bars--group { gap: var(--sc-5); }
.bars__pair { display: grid; gap: 6px; }
.bars__track.is-kg .bars__bar { background: var(--bv-sky); }
.legend { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sc-2) var(--sc-3); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: -4px; }
.legend .lg-kg { background: var(--bv-sky); }
.legend .lg-kwh { background: var(--sc-accent); margin-left: var(--sc-2); }
.gcal__more { margin-top: var(--sc-6); padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline); }
.gcal__more summary {
  display: inline-flex; align-items: center; gap: var(--sc-2); min-height: 44px; cursor: pointer; list-style: none;
  font-size: var(--sc-t-sm); font-weight: 700; color: var(--sc-accent);
}
.gcal__more summary::-webkit-details-marker { display: none; }
.gcal__more summary::after { content: "+"; font-size: 1.2em; line-height: 1; }
.gcal__more[open] summary::after { content: "−"; }
.gcal__more summary:focus-visible { outline: 2px solid var(--bv-sky); outline-offset: 3px; border-radius: var(--sc-r-sm); }
.gcal__more .bars { margin-top: var(--sc-4); }
.gcal.is-on .bars__bar { transform: scaleX(1); }
.gcal.is-on .bars__val { opacity: 1; }
.gcal .src { color: var(--sc-ink-soft); opacity: 1; }

/* ---------- 3 · Bản đồ: cuộn là đi dọc Việt Nam ---------- */
.map-sec { background: var(--sc-canvas); }
.map-stage {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--sc-6);
  height: 100%; max-width: 1280px; margin-inline: auto; padding: 12vh var(--sc-gutter) 5vh;
}
/* Bản đồ 3D nhẹ: mặt phẳng nghiêng phối cảnh, đất liền có độ dày (nhiều lớp chồng lệch),
   miền đang xem nhô lên màu xanh lá, cột ghim mọc lên ở vùng cung chính. */
.map {
  display: block; width: 100%; height: min(78vh, 740px); overflow: visible;
  transform: perspective(1500px) rotateX(30deg) rotateZ(-5deg); transform-origin: 50% 55%;
  filter: drop-shadow(0 28px 26px rgb(0 0 0 / 0.4));
}
.map__grid line { stroke: rgb(191 218 243 / 0.08); stroke-width: 1; }
.map__side { fill: #0A1826; stroke: #0A1826; stroke-width: 1; }
.map__land { fill: url(#gLand); stroke: rgb(191 218 243 / 0.6); stroke-width: 1.1; }
.map__reg { opacity: 0; transition: opacity 500ms var(--sc-ease-out), transform 650ms var(--sc-ease-out); }
.map__reg-side { fill: #3B7A2B; stroke: #3B7A2B; stroke-width: 1; }
.map__reg-top { fill: url(#gReg); stroke: #E2F7D6; stroke-width: 1; }
.map__route { fill: none; stroke: #F3F8F1; stroke-width: 2.2; stroke-linecap: round; opacity: 0.85; }
.map__isl circle { fill: var(--bv-sky); }
.map__isl circle.d { fill: #0A1826; }
.map__lbl { fill: var(--sc-ink-soft); font: 600 13px var(--sc-font-text); }
.map__lbl--sea { font-style: italic; font-weight: 500; opacity: 0.6; letter-spacing: 0.2em; }
.map__hub { opacity: 0; transition: opacity 450ms var(--sc-ease-out); }
.map__hub ellipse { fill: rgb(0 0 0 / 0.35); }
.map__hub line { stroke: #F3F8F1; stroke-width: 2; }
.map__hub circle { fill: var(--sc-accent); stroke: #F3F8F1; stroke-width: 2; }

.map-sec[data-step="0"] .map__reg[data-r="bac"],
.map-sec[data-step="1"] .map__reg[data-r="trung"],
.map-sec[data-step="2"] .map__reg[data-r="nam"] { opacity: 1; transform: translateY(-12px); }
.map-sec[data-step="3"] .map__reg { opacity: 1; transform: translateY(-6px); }
.map-sec[data-step="1"] .map__reg[data-r="bac"],
.map-sec[data-step="2"] .map__reg:is([data-r="bac"], [data-r="trung"]) { opacity: 0.35; }
.map-sec[data-step="0"] .map__hub[data-r="bac"],
.map-sec[data-step="1"] .map__hub[data-r="trung"],
.map-sec[data-step="2"] .map__hub[data-r="nam"] { opacity: 1; }

.map-panel { display: grid; }
.map-head { margin-bottom: var(--sc-5); }
.map-head .sec-title { font-size: var(--sc-t-xl); }
.steps { display: flex; gap: var(--sc-2); margin: var(--sc-4) 0 0; padding: 0; list-style: none; }
.steps li {
  padding: var(--sc-1) var(--sc-3); border-radius: var(--sc-r-pill); font-size: var(--sc-t-xs); font-weight: 600;
  color: var(--sc-ink-soft); box-shadow: inset 0 0 0 1px var(--sc-hairline-strong); transition: all var(--sc-d-fast) var(--sc-ease-out);
}
.map-sec[data-step="0"] .steps li:nth-child(1),
.map-sec[data-step="1"] .steps li:nth-child(2),
.map-sec[data-step="2"] .steps li:nth-child(3),
.map-sec[data-step="3"] .steps li { background: var(--sc-accent); color: var(--sc-accent-ink); box-shadow: none; }

.regs { display: grid; }
.reg {
  grid-area: 1 / 1; align-self: start; background: var(--sc-surface); border-radius: var(--sc-r-lg); padding: clamp(1.25rem, 2.4vw, 2rem);
  box-shadow: 0 0 0 1px var(--sc-hairline); opacity: 0; translate: 0 16px; visibility: hidden;
  transition: opacity 450ms var(--sc-ease-out), translate 450ms var(--sc-ease-out), visibility 0s linear 450ms;
}
.map-sec[data-step="0"] .reg[data-i="0"], .map-sec[data-step="1"] .reg[data-i="1"],
.map-sec[data-step="2"] .reg[data-i="2"], .map-sec[data-step="3"] .reg[data-i="3"] {
  opacity: 1; translate: 0 0; visibility: visible; transition-delay: 0s;
}
.reg h3 { margin: 0; font-size: var(--sc-t-xl); font-weight: 800; }
.reg__vung { margin: var(--sc-1) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.tags { display: flex; flex-wrap: wrap; gap: var(--sc-2); margin: var(--sc-4) 0 0; padding: 0; list-style: none; }
.tags li { padding: 3px var(--sc-3); border-radius: var(--sc-r-pill); font-size: var(--sc-t-xs); font-weight: 600; background: rgb(140 212 111 / 0.16); color: var(--sc-accent); }
.prices { margin: var(--sc-4) 0 0; }
.prices div { display: flex; justify-content: space-between; gap: var(--sc-4); padding: var(--sc-2) 0; border-bottom: 1px solid var(--sc-hairline); font-size: var(--sc-t-sm); }
.prices dt { color: var(--sc-ink-soft); }
.prices dd { margin: 0; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.reg__note { margin: var(--sc-3) 0 0; font-size: var(--sc-t-sm); line-height: 1.5; color: var(--sc-ink-soft); }
.bvbox { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-3); margin-top: var(--sc-4); }
.bvbox div { padding: var(--sc-3); border-radius: var(--sc-r-md); background: rgb(191 218 243 / 0.1); }
.bvbox span { display: block; font-size: var(--sc-t-xs); color: var(--bv-sky); margin-bottom: var(--sc-1); }
.bvbox b { font-size: var(--sc-t-sm); }
.reg .btn { margin-top: var(--sc-5); }

/* ---------- 4 · Nhiên liệu: cuộn ngang ---------- */
.fc {
  position: relative; display: flex; flex-direction: column;
  padding: var(--sc-5); border-radius: var(--sc-r-lg); background: #fff; box-shadow: 0 18px 40px -18px rgb(14 34 51 / 0.35);
}
.fc__tag { align-self: flex-start; padding: 2px var(--sc-3); border-radius: var(--sc-r-pill); font-size: var(--sc-t-xs); font-weight: 700; background: var(--bv-mint); color: var(--bv-leaf); }
.fc h3 { margin: var(--sc-3) 0 0; font-size: var(--sc-t-lg); font-weight: 800; line-height: 1.2; }
/* Giá theo 3 miền trên thẻ nhiên liệu */
.fc__regions { display: grid; margin: var(--sc-4) 0 0; border-radius: var(--sc-r-md); background: #F3F8F1; padding: var(--sc-1) var(--sc-3); }
.fc__regions div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sc-3); padding: var(--sc-2) 0; border-bottom: 1px solid rgb(14 34 51 / 0.08); }
.fc__regions div:last-child { border-bottom: 0; }
.fc__regions dt { font-size: var(--sc-t-sm); color: #3B5163; white-space: nowrap; }
.fc__regions dd { margin: 0; font-size: var(--sc-t-base); font-weight: 800; color: var(--sc-canvas); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fc__regions small { font-size: var(--sc-t-xs); font-weight: 600; color: #3B5163; }
.fc__ask { font-size: var(--sc-t-xs); font-weight: 700; color: var(--bv-leaf); padding: 2px var(--sc-2); border-radius: var(--sc-r-pill); background: var(--bv-mint); }
.price-note {
  display: flex; gap: var(--sc-3); align-items: flex-start; margin: var(--sc-6) 0 0; padding: var(--sc-4) var(--sc-5);
  border-radius: var(--sc-r-md); background: #fff; color: var(--sc-canvas); box-shadow: inset 4px 0 0 var(--sc-accent), 0 10px 24px -18px rgb(14 34 51 / 0.4);
}
.price-note svg { flex: none; width: 22px; height: 22px; color: var(--bv-leaf); margin-top: 1px; }
.price-note p { margin: 0; font-size: var(--sc-t-sm); line-height: 1.6; }
.fc__price { margin: var(--sc-3) 0 0; font-size: var(--sc-t-sm); color: #3B5163; }
.fc__price b { display: block; font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem); font-weight: 800; color: var(--sc-canvas); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.fc dl { margin: var(--sc-4) 0 0; display: grid; gap: var(--sc-2); font-size: var(--sc-t-sm); }
.fc dl div { display: flex; justify-content: space-between; gap: var(--sc-3); border-bottom: 1px solid rgb(14 34 51 / 0.1); padding-bottom: var(--sc-2); }
.fc dt { color: #3B5163; white-space: nowrap; }
.fc dd { margin: 0; font-weight: 700; text-align: right; }
.fc__price--ask b { font-size: var(--sc-t-xl); }
.fc__note { margin: var(--sc-2) 0 0; font-size: var(--sc-t-xs); line-height: 1.4; color: var(--bv-leaf); font-weight: 600; }
.fc__vung { margin: var(--sc-3) 0 0; font-size: var(--sc-t-xs); line-height: 1.5; color: #3B5163; }
.fc__act { display: flex; gap: var(--sc-2); margin-top: auto; padding-top: var(--sc-4); }
.fc__act a {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border-radius: var(--sc-r-pill);
  font-size: var(--sc-t-sm); font-weight: 700; text-decoration: none; color: var(--sc-canvas); box-shadow: inset 0 0 0 1.5px rgb(14 34 51 / 0.25);
}
.fc__act a:first-child { background: var(--sc-canvas); color: var(--sc-ink); box-shadow: none; }
.fc__act a:focus-visible { outline: 2px solid var(--sc-canvas); outline-offset: 2px; }

/* ---------- 5 · Báo cáo: lật 4 trang đầu ---------- */
.rep-sec { background: var(--sc-canvas); }
.rep-stage {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--sc-7);
  height: 100%; max-width: 1280px; margin-inline: auto; padding: 11vh var(--sc-gutter) 5vh;
}
.pages { position: relative; justify-self: center; height: min(72vh, 660px); aspect-ratio: 1241 / 1755; margin: 0; padding: 0; list-style: none; }
.pages > .page {
  --o: clamp(0, (var(--sc-p, 0) - var(--at)) / 0.14, 1);
  position: absolute; inset: 0; border-radius: 10px; overflow: hidden; background: #fff;
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.6);
  transform: translateX(calc(var(--o) * -118%)) rotate(calc(var(--tilt) + var(--o) * -16deg));
  opacity: calc(1 - var(--o)); transform-origin: 50% 100%;
}
.pages > .page img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pages > .page:nth-child(1) { --at: 0.14; --tilt: 0deg;    z-index: 4; }
.pages > .page:nth-child(2) { --at: 0.38; --tilt: 2.5deg;  z-index: 3; }
.pages > .page:nth-child(3) { --at: 0.62; --tilt: -2deg;   z-index: 2; }
.pages > .page:nth-child(4) { --at: 9;    --tilt: 3.5deg;  z-index: 1; }
.pages > .page:nth-child(4)::after { /* trang cuối bản xem trước: mời đọc tiếp */
  content: "Liên hệ để nhận báo cáo đầy đủ"; position: absolute; inset: auto 0 0 0; padding: 30% 8% 7%;
  background: linear-gradient(180deg, rgb(14 34 51 / 0), rgb(14 34 51 / 0.95) 55%);
  color: var(--sc-ink); font-weight: 700; font-size: var(--sc-t-sm); text-align: center;
}
.pages__count {
  position: absolute; z-index: 5; left: 50%; bottom: -2.4rem; translate: -50% 0;
  font-size: var(--sc-t-xs); font-weight: 600; color: var(--sc-ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.rep-copy .sec-lede { color: var(--sc-ink-soft); }
.plan {
  margin-top: var(--sc-6); padding: var(--sc-5); border-radius: var(--sc-r-lg);
  background: var(--sc-surface); box-shadow: 0 0 0 1px var(--sc-hairline);
}
.plan__lead { margin: 0; font-size: var(--sc-t-lg); font-weight: 800; color: var(--sc-accent); }
.plan__text { margin: var(--sc-2) 0 var(--sc-5); font-size: var(--sc-t-sm); line-height: 1.6; color: var(--sc-ink-soft); }
.plan__ctas { display: flex; flex-wrap: wrap; gap: var(--sc-3); }

/* ---------- 6 · Liên hệ ---------- */
.contact { background: var(--sc-accent); color: var(--sc-canvas); padding-block: var(--sc-section); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--sc-6); margin-top: var(--sc-7); align-items: start; }
.form { background: #fff; border-radius: var(--sc-r-lg); padding: clamp(1.25rem, 3vw, 2.5rem); box-shadow: var(--sc-e3); }
.intent { display: flex; flex-wrap: wrap; gap: var(--sc-2); margin: 0 0 var(--sc-5); padding: 0; border: 0; }
.intent legend { font-weight: 700; margin-bottom: var(--sc-3); font-size: var(--sc-t-sm); }
.intent label { position: relative; }
.intent input { position: absolute; opacity: 0; inset: 0; }
.intent span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sc-4); border-radius: var(--sc-r-pill); cursor: pointer;
  font-size: var(--sc-t-sm); font-weight: 600; box-shadow: inset 0 0 0 1.5px rgb(14 34 51 / 0.25);
}
.intent input:checked + span { background: var(--sc-canvas); color: var(--sc-ink); box-shadow: none; }
.intent input:focus-visible + span { outline: 2px solid var(--sc-canvas); outline-offset: 2px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-4); }
.field { display: grid; gap: var(--sc-1); }
.field--full { grid-column: 1 / -1; }
.field[hidden] { display: none; }
.field label { font-size: var(--sc-t-sm); font-weight: 600; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 16px; color: var(--sc-canvas); min-height: 48px; padding: var(--sc-2) var(--sc-3);
  border: 1.5px solid rgb(14 34 51 / 0.2); border-radius: var(--sc-r-md); background: #fff;
}
.field textarea { min-height: 96px; resize: vertical; }
.field :is(input, select, textarea):focus-visible { outline: 2px solid var(--sc-canvas); outline-offset: 1px; border-color: var(--sc-canvas); }
.form .btn { margin-top: var(--sc-5); background: var(--sc-canvas); color: var(--sc-ink); border: 0; cursor: pointer; font-family: inherit; }
.form__hint { margin: var(--sc-3) 0 0; font-size: var(--sc-t-xs); color: #3B5163; }
.direct { background: var(--sc-canvas); color: var(--sc-ink); border-radius: var(--sc-r-lg); padding: clamp(1.25rem, 3vw, 2.5rem); }
.direct h3 { margin: 0 0 var(--sc-4); font-size: var(--sc-t-lg); }
.direct a.big { display: block; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 800; color: var(--sc-accent); text-decoration: none; letter-spacing: -0.01em; }
.direct a.mail { display: inline-block; margin-top: var(--sc-3); color: var(--sc-ink); font-weight: 600; word-break: break-all; }
.direct p { margin: var(--sc-5) 0 0; font-size: var(--sc-t-sm); line-height: 1.6; color: var(--sc-ink-soft); }

/* Footer: 4 cột (giới thiệu + nút gọi, Trang, Nhiên liệu, Liên hệ), dải pháp lý bên dưới,
   chữ BIOMASS VIETNAM lớn mờ làm nền cuối trang */
.foot {
  position: relative; overflow: hidden; color: var(--sc-ink-soft); font-size: var(--sc-t-sm);
  padding: var(--sc-section) var(--sc-gutter) 0;
  background: radial-gradient(50% 70% at 0% 0%, rgb(140 212 111 / 0.12), transparent 70%), #0A1A28;
}
.foot__in { position: relative; z-index: 1; max-width: 1280px; margin-inline: auto; }
.foot__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: var(--sc-7) var(--sc-6); }
.foot__brand img { display: block; height: 52px; width: auto; filter: brightness(0) invert(1); }
.foot__brand p { max-width: 24rem; margin: var(--sc-4) 0 0; line-height: 1.65; }
.foot__ctas { display: flex; flex-wrap: wrap; gap: var(--sc-3); margin-top: var(--sc-5); }
.foot__ctas svg { width: 18px; height: 18px; }
.foot__col { display: grid; align-content: start; gap: var(--sc-3); }
.foot__col h2 { margin: 0 0 var(--sc-1); font-size: var(--sc-t-xs); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-accent); }
.foot__col a, .foot__col span { display: inline-flex; align-items: center; gap: var(--sc-2); min-height: 28px; color: var(--sc-ink); text-decoration: none; word-break: break-word; }
.foot__col a:hover { color: var(--sc-accent); }
.foot__col svg { flex: none; width: 18px; height: 18px; color: var(--sc-accent); }
.foot__col span { color: var(--sc-ink-soft); }
.foot a:focus-visible { outline: 2px solid var(--bv-sky); outline-offset: 3px; border-radius: 4px; }
.foot__bottom {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--sc-3) var(--sc-6); align-items: start;
  margin-top: var(--sc-7); padding-block: var(--sc-5); border-top: 1px solid var(--sc-hairline);
}
.foot__bottom p { margin: 0; line-height: 1.6; font-size: var(--sc-t-xs); }
.foot__copy { white-space: nowrap; }
.foot__mark {
  position: relative; margin: 0; padding: 0 var(--sc-gutter); text-align: center; white-space: nowrap; pointer-events: none;
  font-weight: 800; font-size: clamp(2.4rem, 8.4vw, 9rem); line-height: 0.8; letter-spacing: -0.03em;
  color: transparent; -webkit-text-stroke: 1px rgb(243 248 241 / 0.08);
  background: linear-gradient(180deg, rgb(140 212 111 / 0.14), transparent 85%); -webkit-background-clip: text; background-clip: text;
  translate: 0 18%;
}
@media (max-width: 860px) {
  .foot__top { grid-template-columns: 1fr 1fr; gap: var(--sc-6) var(--sc-4); }
  .foot__brand, .foot__contact { grid-column: 1 / -1; }
  .foot__ctas .btn { flex: 1 1 100%; }
  .foot__bottom { grid-template-columns: 1fr; }
  .foot__mark { font-size: 7.4vw; }
}

/* ---------- Điện thoại: dựng bố cục riêng, không thu nhỏ ---------- */
@media (max-width: 860px) {
  .bar { gap: var(--sc-3); padding: var(--sc-3) var(--sc-4); }
  .bar__mark img { height: 38px; }
  .bar__nav, .bar__cta, .bar__login { display: none; }
  .lang { margin-left: auto; border-left: 0; padding-left: 0; gap: 0; }
  .lang button { min-width: 38px; }
  /* Menu điện thoại: nút 3 gạch mở danh sách trang */
  .bar__menu {
    display: grid; place-items: center; width: 44px; height: 44px; margin-left: var(--sc-1); padding: 0;
    border: 0; border-radius: var(--sc-r-sm); background: none; color: var(--sc-ink); cursor: pointer;
  }
  .bar__menu svg { width: 24px; height: 24px; }
  .bar__menu .i-close, .bar.is-open .bar__menu .i-open { display: none; }
  .bar.is-open .bar__menu .i-close { display: block; }
  .bar.is-solid { top: 8px; left: 8px; right: 8px; padding: 4px 4px 4px var(--sc-4); }
  .bar.is-solid .bar__mark img { height: 32px; }
  /* Mở menu: trở lại thanh ngang đầy đủ để danh sách trang có đủ chỗ */
  .bar.is-open { top: 0; left: 0; right: 0; border-radius: 0; padding: var(--sc-3) var(--sc-4); background: rgb(14 34 51 / 0.98); }
  .bar.is-open .bar__nav {
    display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0;
    padding: 0 var(--sc-4) var(--sc-5); background: rgb(14 34 51 / 0.98); box-shadow: 0 20px 30px -10px rgb(0 0 0 / 0.5);
  }
  .bar.is-open .bar__nav a { padding: var(--sc-4) var(--sc-1); font-size: 1.1rem; border-bottom: 1px solid var(--sc-hairline); box-shadow: none; }
  .bar.is-open .bar__nav .bar__nav-m { display: block; }
  .bar.is-open .bar__nav .bar__nav-cta {
    display: flex; justify-content: center; margin-top: var(--sc-4); border: 0; border-radius: var(--sc-r-pill);
    background: var(--sc-accent); color: var(--sc-accent-ink);
  }

  .hero__copy { left: var(--sc-4); right: var(--sc-4); bottom: clamp(1.5rem, 6vh, 3rem); max-width: none; }
  .hero h1 { font-size: clamp(2.2rem, 1.2rem + 6vw, 3rem); }
  .hero__lede { font-size: var(--sc-t-base); }
  .hero__ctas .btn { flex: 1 1 100%; }
  .hero__beat2 { left: var(--sc-4); right: var(--sc-4); max-width: none; top: 42%; }
  /* Chồng thẻ nhiên liệu bám theo khối chữ Hero: đáy thẻ cách tiêu đề --fuels-gap, nhưng không lên sát header.
     --copy-h là chiều cao khối chữ, site.js đo và cập nhật. */
  .hero {
    --copy-b: calc(clamp(1.5rem, 6vh, 3rem) + 2.25rem); --fw: min(26.5vw, 118px); --fuels-gap: 28px; --fuels-min: 150px;
    --fuels-top: max(var(--fuels-min), calc(100% - var(--copy-b) - var(--copy-h, 24rem) - var(--fuels-gap) - var(--fw) * 13 / 9));
  }
  .fuels-wrap { right: var(--sc-5); top: var(--fuels-top); }
  .fuels { --w: var(--fw); --step-x: -20px; --step-y: -34px; }
  .fuel span { top: var(--sc-2); left: var(--sc-2); padding: 2px var(--sc-2); font-size: 0.72rem; }
  .hero__leaves-wrap { right: -10vw; top: calc(var(--fuels-top) - 9vh); }
  .hero__leaves { width: 26vw; }
  .nav-hint { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .nav-hint__txt { display: none; }
  /* Đầu trang: nút nằm giữa, dưới nút Liên hệ của Hero (chừa chỗ bằng cách nâng chữ Hero lên) */
  .nav-hint[data-at="top"] { right: calc(50% - 28px); bottom: 8px; }
  .hero__copy { bottom: var(--copy-b); }

  .def .sec-title { font-size: 2.4rem; }
  .def__lead { font-size: 1.25rem; }
  .def-sec::before { background: rgb(14 34 51 / 0.35); }
  .def-sec__leaves { width: 22vw; right: -4vw; top: 6%; bottom: auto; }
  .mkt__head { grid-template-columns: 1fr; gap: var(--sc-3); }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat, .stat + .stat { padding: var(--sc-4) var(--sc-3) var(--sc-4) 0; border-left: 0; }
  .stat:nth-child(even) { padding-left: var(--sc-4); border-left: 1px solid rgb(14 34 51 / 0.15); }
  .stat:nth-child(-n+2) { border-bottom: 1px solid rgb(14 34 51 / 0.15); }
  .bars li { grid-template-columns: 1fr; gap: var(--sc-1); }
  .bars__track { height: 24px; }

  /* Bản đồ trên điện thoại: bản đồ thu nhỏ bên phải, thẻ miền ở dưới */
  .map-stage { display: block; position: relative; padding: 0; }
  .map-panel { position: static; }
  .map-head { position: absolute; z-index: 2; top: max(8.5vh, 68px); left: var(--sc-4); right: var(--sc-4); margin: 0; }
  .map-head .sec-title { font-size: 1.3rem; }
  .steps { gap: 6px; margin-top: var(--sc-2); }
  .steps li { padding: 2px var(--sc-2); }
  .map-head .hint-inline { margin-top: var(--sc-2); }
  .map { position: absolute; z-index: 1; top: calc(max(8.5vh, 68px) + 96px); left: 50%; translate: -50% 0; width: auto; height: 38svh; }
  .map__lbl { font-size: 22px; }
  .regs { position: absolute; z-index: 2; left: var(--sc-4); right: var(--sc-4); bottom: 2.5vh; }
  .reg { padding: var(--sc-4); }
  .reg h3 { font-size: 1.3rem; }
  .reg__vung, .reg__note { display: none; }
  .reg .tags { display: none; } /* tên nhiên liệu đã có trong bảng giá; nhường chỗ để bản đồ (gồm Trường Sa) không bị che */
  .prices { margin-top: var(--sc-2); }
  .prices div { padding: 6px 0; font-size: 0.82rem; }
  .bvbox { margin-top: var(--sc-3); }
  .bvbox div { padding: var(--sc-2); }
  .reg .btn { margin-top: var(--sc-3); width: 100%; }

  .fc { padding: var(--sc-4); }

  .rep-stage { display: flex; flex-direction: column; justify-content: flex-start; gap: var(--sc-5); padding: 9vh var(--sc-4) 2vh; }
  .pages { height: 34svh; flex: none; }
  .pages__count { bottom: -1.9rem; }
  .rep-copy { margin-top: var(--sc-3); }
  .rep-copy .sec-title { font-size: 1.5rem; }
  .rep-copy .sec-lede { display: none; }
  .plan { margin-top: var(--sc-4); padding: var(--sc-4); }
  .plan__text { margin-bottom: var(--sc-3); }
  .plan .btn { flex: 1 1 100%; }

  .contact__grid { grid-template-columns: 1fr; }
  .fields { grid-template-columns: 1fr; }
}

/* iPad dọc và điện thoại lớn: thẻ nhiên liệu to hơn cho cân với khối chữ */
@media (min-width: 600px) and (max-width: 860px) {
  .hero { --fw: min(24vw, 180px); --fuels-min: 175px; --fuels-gap: 40px; }
  .fuels { --step-x: -30px; --step-y: -44px; }
  .fuel span { font-size: 0.85rem; }
}

/* Điện thoại màn hình thấp: thu bản đồ để thẻ miền không che Trường Sa */
@media (max-width: 860px) and (max-height: 740px) {
  .map { height: 31svh; }
  /* Hero gọn lại để chữ không chạm chồng thẻ nhiên liệu; nút "Xem báo cáo" nhường chỗ, khách trượt xuống là tới */
  .hero h1 { font-size: 1.95rem; }
  .hero__lede { font-size: 0.95rem; margin-top: var(--sc-3); }
  .hero__ctas { margin-top: var(--sc-4); }
  .hero__ctas .btn--ghost { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .backdrop video { transform: none; }
  .hero__leaves { rotate: none; }
  .fuels { --p: 0; }
  .hero__fall, .def-sec__fall { display: none; }
  .nav-hint__btn svg, .hint-inline::after { animation: none !important; }
  .bars__bar { transform: none; transition: none; }
  .bars__val { opacity: 1; transition: none; }
  .pages > .page { --o: 0; }
}

/* Không có chuyển động: bản đồ và báo cáo hiện tĩnh, đủ nội dung */
.is-static .map-stage, .is-static .rep-stage { height: auto; }
.map-sec.is-static .map-stage { padding-block: var(--sc-section) var(--sc-6); }
.map-sec.is-static :is(.map, .map-panel, .map-head, .regs) { position: static; max-width: none; translate: none; }
.map-sec.is-static .map { margin-inline: auto; }
.map-sec.is-static .regs { gap: var(--sc-4); }
.map-sec.is-static .reg { grid-area: auto; opacity: 1; translate: none; visibility: visible; }
.map-sec.is-static .map__reg { opacity: 1; }
.rep-sec.is-static .rep-stage { display: block; padding-top: calc(var(--sc-section) + 40px); }
.rep-sec.is-static .pages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sc-4); height: auto; aspect-ratio: auto; width: 100%; margin-bottom: var(--sc-6); }
.rep-sec.is-static .page { position: static; transform: none; opacity: 1; aspect-ratio: 1241 / 1755; }
.rep-sec.is-static .pages__count { display: none; }

/* ================= Trang chủ: khối dẫn sang trang Nhiên liệu, Báo cáo ================= */
.teaser { padding-block: var(--sc-section); }
.teaser__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--sc-5); margin-bottom: var(--sc-6); }
.btn--dark { background: var(--sc-canvas); color: var(--sc-ink); }
.btn--dark:hover { background: #1B3C58; transform: translateY(-1px); }
.btn--outline-dark { color: var(--sc-canvas); box-shadow: inset 0 0 0 1.5px rgb(14 34 51 / 0.45); }
.btn--outline-dark:hover { box-shadow: inset 0 0 0 1.5px var(--sc-canvas); }

.teaser--fuel { background: var(--bv-sky); color: var(--sc-canvas); }
.teaser--fuel .sec-lede { color: #2F4A60; }
.gcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-4); margin: 0; padding: 0; list-style: none; }
.gcard {
  position: relative; display: flex; align-items: flex-end; min-height: clamp(300px, 32vw, 440px); overflow: hidden;
  border-radius: var(--sc-r-lg); background: var(--sc-canvas); color: var(--sc-ink); text-decoration: none;
  box-shadow: 0 18px 40px -18px rgb(14 34 51 / 0.45);
}
.gcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--sc-ease-out); }
.gcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(14 34 51 / 0) 25%, rgb(14 34 51 / 0.94) 100%); }
.gcard:hover img { transform: scale(1.05); }
.gcard:focus-visible { outline: 3px solid var(--sc-canvas); outline-offset: 3px; }
.gcard__body { position: relative; z-index: 1; display: grid; gap: var(--sc-2); width: 100%; padding: var(--sc-5); }
/* Cố định chiều cao tiêu đề (2 dòng) và mô tả (2 dòng) để 3 thẻ thẳng hàng dù chữ dài ngắn khác nhau */
.gcard__body b { display: flex; align-items: flex-start; min-height: 2.3em; font-size: var(--sc-t-xl); font-weight: 800; line-height: 1.15; }
.gcard__body > span:nth-of-type(2) { min-height: 3em; line-height: 1.5; }
.gcard__body span { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.gcard__count {
  justify-self: start; padding: 2px var(--sc-3); border-radius: var(--sc-r-pill);
  background: var(--sc-accent); color: var(--sc-accent-ink) !important; font-size: var(--sc-t-xs) !important; font-weight: 700;
}
.gcard__more { color: var(--sc-accent) !important; font-weight: 700; }
.gcard__more::after { content: " →"; }

.teaser--report { background: var(--bv-mint); color: var(--sc-canvas); }
.rteaser { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--sc-7); align-items: center; }
.rteaser__covers { position: relative; justify-self: center; width: min(100%, 320px); aspect-ratio: 1241 / 1755; }
.rteaser__covers img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.6); }
.rteaser__covers img:first-child { rotate: -7deg; translate: -16% 5%; }
.rteaser__covers img:last-child { rotate: 3deg; }
.rteaser .sec-lede { color: #3B5163; }
.rteaser__ctas { display: flex; flex-wrap: wrap; gap: var(--sc-3); margin-top: var(--sc-6); }

/* ================= Trang con: phần đầu trang ================= */
.page-head { position: relative; overflow: hidden; background: var(--sc-canvas); color: var(--sc-ink); padding: calc(var(--sc-section) + 48px) 0 var(--sc-7); }
.page-head h1 { max-width: 16ch; font-size: var(--sc-t-3xl); }
.page-head .sec-lede { color: var(--sc-ink-soft); }
.page-head__leaves { position: absolute; right: -2vw; top: 110px; width: clamp(110px, 13vw, 200px); pointer-events: none; }
.jump { display: flex; flex-wrap: wrap; gap: var(--sc-2); margin: var(--sc-6) 0 0; padding: 0; list-style: none; }
.jump a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sc-4); border-radius: var(--sc-r-pill);
  color: var(--sc-ink); font-size: var(--sc-t-sm); font-weight: 700; text-decoration: none; box-shadow: inset 0 0 0 1.5px rgb(243 248 241 / 0.4);
}
.jump a:hover { color: var(--sc-accent); box-shadow: inset 0 0 0 1.5px var(--sc-accent); }

/* ================= Trang Nhiên liệu ================= */
.fuel-page { background: var(--bv-sky); color: var(--sc-canvas); padding: clamp(2.5rem, 5vw, 4rem) 0 var(--sc-section); }
.fuel-page .price-note { margin-top: 0; }
.fgroup { padding-top: var(--sc-7); scroll-margin-top: 80px; }
.fgroup__head { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); overflow: hidden; margin-bottom: var(--sc-4); border-radius: var(--sc-r-lg); background: var(--sc-canvas); color: var(--sc-ink); }
.fgroup__head img { display: block; width: 100%; height: 100%; min-height: 200px; max-height: 260px; object-fit: cover; }
.fgroup__head div { align-self: center; padding: clamp(1.25rem, 3vw, 2.5rem); }
.fgroup__head .gcard__count { display: inline-block; }
.fgroup__head h2 { margin: var(--sc-3) 0 0; font-size: var(--sc-t-2xl); font-weight: 800; line-height: 1.1; }
.fgroup__head p { margin: var(--sc-2) 0 0; color: var(--sc-ink-soft); }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--sc-4); margin: 0; padding: 0; list-style: none; }
.fuel-note { margin: var(--sc-6) 0 0; font-size: var(--sc-t-xs); line-height: 1.6; color: #2F4A60; }


/* ================= Trang Báo cáo ================= */
.rep-copy h1.sec-title { font-size: var(--sc-t-2xl); }
.issues-sec { background: var(--bv-mint); color: var(--sc-canvas); padding-block: var(--sc-section); }
.issues { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 240px)); gap: var(--sc-5); margin: var(--sc-6) 0 0; padding: 0; list-style: none; }
.issue img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: var(--sc-e3); }
.issue div { display: grid; gap: 4px; margin-top: var(--sc-3); }
.issue b { font-size: var(--sc-t-lg); }
.issue a { color: var(--bv-leaf); font-weight: 700; }
.issue span { font-size: var(--sc-t-sm); color: #3B5163; }
.login-cta {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sc-4);
  margin-top: var(--sc-7); padding: var(--sc-5) var(--sc-6); border-radius: var(--sc-r-lg); background: var(--sc-canvas); color: var(--sc-ink);
}
.login-cta p { margin: 0; font-weight: 600; }

/* ================= Trang Đăng nhập ================= */
.login-page {
  display: grid; place-items: center; min-height: 100svh; padding: 130px var(--sc-gutter) var(--sc-7);
  background: radial-gradient(circle at 80% 8%, #1F4A36 0, var(--sc-canvas) 55%);
}
.login {
  width: min(100%, 440px); padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: var(--sc-r-lg);
  background: var(--sc-surface); color: var(--sc-ink); box-shadow: 0 0 0 1px var(--sc-hairline), var(--sc-e3);
}
.login h1 { margin: 0; font-size: var(--sc-t-xl); font-weight: 800; }
.login > p { margin: var(--sc-2) 0 0; font-size: var(--sc-t-sm); line-height: 1.6; color: var(--sc-ink-soft); }
.login > .login__soon { margin-top: var(--sc-5); padding: var(--sc-3) var(--sc-4); border-radius: var(--sc-r-md); background: rgb(140 212 111 / 0.14); color: var(--sc-accent); font-weight: 600; }
.login fieldset { display: grid; gap: var(--sc-4); margin: var(--sc-5) 0 0; padding: 0; border: 0; }
.login fieldset:disabled { opacity: 0.5; }
.login label { display: grid; gap: var(--sc-1); font-size: var(--sc-t-sm); font-weight: 600; }
.login input {
  min-height: 48px; padding: 0 var(--sc-3); border: 1.5px solid var(--sc-hairline-strong); border-radius: var(--sc-r-md);
  background: rgb(14 34 51 / 0.5); color: var(--sc-ink); font: inherit; font-size: 16px;
}
.login fieldset .btn { width: 100%; border: 0; font-family: inherit; }
.login__alt { display: grid; gap: var(--sc-3); margin-top: var(--sc-5); padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); }
.login__alt .btn { width: 100%; }

@media (max-width: 860px) {
  .gcards { grid-template-columns: 1fr; }
  .gcard { min-height: 240px; }
  .rteaser { grid-template-columns: 1fr; gap: var(--sc-6); }
  .rteaser__covers { width: 58%; }
  .rteaser__ctas .btn { flex: 1 1 100%; }
  .page-head { padding-top: 120px; }
  .page-head h1 { font-size: 2.2rem; max-width: 80%; }
  .page-head__leaves { width: 22vw; top: 96px; right: -6vw; }
  .fgroup__head { grid-template-columns: 1fr; }
  .fgroup__head img { min-height: 0; max-height: 180px; }
  .fgrid { grid-template-columns: 1fr; }
  .issues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .end-card__btns .btn, .login-cta .btn { flex: 1 1 100%; }
  .rep-copy h1.sec-title { font-size: 1.5rem; }
  .rep-sec.is-static .pages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ================= Trang chủ: Quy trình 4 bước (dừng cuộn, bước sáng dần) ================= */
.proc { background: radial-gradient(70% 60% at 85% 30%, #17405F 0, var(--sc-canvas) 60%); color: var(--sc-ink); }
.proc-stage {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--sc-7); align-items: center;
  height: 100%; max-width: 1280px; margin-inline: auto; padding: 12vh var(--sc-gutter) 6vh;
}
.proc__steps { display: grid; gap: var(--sc-2); margin: var(--sc-6) 0 0; padding: 0; list-style: none; }
.proc__steps li {
  display: flex; gap: var(--sc-4); padding: var(--sc-3) var(--sc-4); border-radius: var(--sc-r-md); opacity: 0.45;
  transition: opacity 400ms var(--sc-ease-out), background-color 400ms var(--sc-ease-out), box-shadow 400ms var(--sc-ease-out);
}
/* Bấm chọn bước (ngoài cách cuộn): mỗi bước là một nút */
.proc__pick { display: flex; gap: var(--sc-4); width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.proc__pick:focus-visible { outline: 2px solid var(--bv-sky); outline-offset: 6px; border-radius: var(--sc-r-sm); }
.proc__txt { display: block; }
.proc__txt > span { display: block; margin: 2px 0 0; font-size: var(--sc-t-sm); line-height: 1.5; color: var(--sc-ink-soft); }
.proc__steps li:hover { opacity: 0.8; background: rgb(243 248 241 / 0.04); }
.proc__n { flex: none; font-weight: 800; color: var(--sc-accent); font-variant-numeric: tabular-nums; }
.proc__steps b { font-size: var(--sc-t-base); }
.proc__steps p { margin: 2px 0 0; font-size: var(--sc-t-sm); line-height: 1.5; color: var(--sc-ink-soft); }
.proc[data-step="0"] li[data-i="0"], .proc[data-step="1"] li[data-i="1"],
.proc[data-step="2"] li[data-i="2"], .proc[data-step="3"] li[data-i="3"] {
  opacity: 1; background: rgb(243 248 241 / 0.06); box-shadow: inset 3px 0 0 var(--sc-accent);
}
.proc__ctas { display: flex; flex-wrap: wrap; gap: var(--sc-3); margin-top: var(--sc-6); }
.proc__panel {
  display: flex; flex-direction: column; min-height: min(56vh, 460px); padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--sc-r-lg);
  background: linear-gradient(160deg, #163A57, #0F2840); box-shadow: 0 0 0 1px rgb(243 248 241 / 0.1), 0 40px 80px -30px rgb(0 0 0 / 0.7);
}
.proc__top { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--sc-t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-soft); }
.proc__top b { font-size: var(--sc-t-2xl); letter-spacing: -0.02em; color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.proc__top b span { color: var(--sc-accent); }
.proc__cards { display: grid; flex: 1; margin-top: var(--sc-5); }
.proc__card { grid-area: 1 / 1; align-self: center; opacity: 0; translate: 0 14px; transition: opacity 450ms var(--sc-ease-out), translate 450ms var(--sc-ease-out); }
.proc[data-step="0"] .proc__card[data-i="0"], .proc[data-step="1"] .proc__card[data-i="1"],
.proc[data-step="2"] .proc__card[data-i="2"], .proc[data-step="3"] .proc__card[data-i="3"] { opacity: 1; translate: 0 0; }
.proc__card svg { display: block; width: 84px; height: 84px; padding: 20px; border-radius: 22px; color: var(--sc-accent); background: rgb(140 212 111 / 0.12); }
.proc__card b { display: block; margin-top: var(--sc-5); font-size: var(--sc-t-xl); font-weight: 800; }
.proc__card p { max-width: 30rem; margin: var(--sc-2) 0 0; line-height: 1.6; color: var(--sc-ink-soft); }
.proc__bar { height: 4px; margin-top: var(--sc-5); overflow: hidden; border-radius: 4px; background: rgb(243 248 241 / 0.12); }
.proc__bar span { display: block; width: calc(var(--pp, 0) * 100%); height: 100%; background: var(--sc-accent); }
/* Điện thoại và chế độ giảm chuyển động: không dừng cuộn, hiện đủ 4 bước */
.proc.is-static .proc-stage { display: block; height: auto; padding: var(--sc-section) var(--sc-gutter); }
.proc.is-static .proc__steps li { opacity: 1; }
.proc.is-static .proc__panel { display: none; }

/* ================= Trang chủ: Hỏi đáp ================= */
.faq { background: #F6FAF4; color: var(--sc-canvas); padding-block: var(--sc-section); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--sc-7); align-items: start; }
.faq__head { position: sticky; top: 110px; }
.faq__head .sec-lede { color: #3B5163; }
.faq__head .btn { margin-top: var(--sc-5); }
.faq__list { display: grid; gap: var(--sc-3); }
.qa { border-radius: var(--sc-r-md); background: #fff; box-shadow: 0 0 0 1px rgb(14 34 51 / 0.08), 0 10px 24px -18px rgb(14 34 51 / 0.35); }
.qa summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sc-4); min-height: 56px;
  padding: var(--sc-4) var(--sc-5); cursor: pointer; list-style: none; font-weight: 700;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--bv-mint); color: var(--bv-leaf); font-weight: 800;
}
.qa[open] summary::after { content: "−"; background: var(--sc-accent); color: var(--sc-accent-ink); }
.qa summary:focus-visible { outline: 2px solid var(--sc-canvas); outline-offset: 2px; border-radius: var(--sc-r-md); }
.qa p { margin: 0; padding: 0 var(--sc-5) var(--sc-5); line-height: 1.65; color: #3B5163; }
.qa a { color: var(--bv-leaf); font-weight: 700; }

/* ================= Thẻ liên hệ cuối trang (trang con) ================= */
.end-cta { background: var(--bv-sky); padding-bottom: var(--sc-section); }
.end-card {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sc-6);
  padding: clamp(1.75rem, 4vw, 3.5rem); border-radius: var(--sc-r-lg); color: var(--sc-ink); box-shadow: var(--sc-e3);
  background: radial-gradient(60% 120% at 100% 0%, #1F4A36, transparent 60%), linear-gradient(135deg, #12304A, var(--sc-canvas));
}
.end-card p { max-width: 34rem; margin: var(--sc-3) 0 0; color: var(--sc-ink-soft); }
.end-card__btns { display: flex; flex-wrap: wrap; gap: var(--sc-3); }

@media (max-width: 860px) {
  /* Cụm chữ có nét bút được xuống dòng trên màn hẹp, mỗi dòng giữ nét bút riêng */
  .sec-title .hl { white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .faq__grid { grid-template-columns: 1fr; gap: var(--sc-5); }
  .faq__head { position: static; }
  .faq__head .btn { width: 100%; }
  .qa summary { padding: var(--sc-4); }
  .qa p { padding: 0 var(--sc-4) var(--sc-4); }
  .proc__ctas .btn { flex: 1 1 100%; }
}