:root {
  --green: #2D7D32;
  --green-dark: #1B5E20;
  --green-mid: #1F5C25;
  --green-ink: #14401A;
  --tint-1: #F4F7F3;
  --tint-2: #F1F5F0;
  --tint-3: #DCE3DC;
  --tint-4: #D7E8D9;
  --tint-5: #CFE3CF;
  --yellow: #F9A825;
  --gold: #B8862E;
  --gold-soft: #E6C874;
  --ink: #1B1F1C;
  --ink-soft: #465049;
  --ink-mute: #69736B;
  --line: #E1E7E0;
  --card-bg: #FFFFFF;
  --radius: 14px;
  --radius-sm: 6px;
  --maxw: 1160px;
  --shadow-sm: 0 2px 8px rgba(20,40,20,.06);
  --shadow-md: 0 10px 28px rgba(20,40,20,.09);
  --shadow-lg: 0 18px 44px rgba(20,40,20,.14);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .25 0 0 0 0 .1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  --font-head: "Fraunces", "Songti SC", "STSong", Georgia, serif;
  --font-body: "Be Vietnam Pro", "Segoe UI", "Helvetica Neue", "Noto Sans SC", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #FFFFFF;
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a, button { touch-action: manipulation; -webkit-tap-highlight-color: rgba(45,125,50,.15); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
section[id], #main { scroll-margin-top: 84px; }
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 8px;
  background: var(--green-dark); color: #fff; font-weight: 700; text-decoration: none; transition: top .15s ease;
}
.skip-link:focus { top: 12px; }
table.data-table td, .price-row { font-variant-numeric: tabular-nums; }
h1, h2, h3 { font-family: var(--font-head); line-height: 1.22; margin: 0 0 .5em; color: var(--ink); font-weight: 600; text-wrap: balance; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); text-align: center; letter-spacing: -.02em; line-height: 1.12; font-weight: 600; }
h2.section-title { margin-bottom: 34px; }
h2.section-title::after {
  content: ""; display: block; width: 46px; height: 2px; background: var(--gold);
  margin: 16px auto 0;
}
/* Section rộng: tiêu đề căn đầu dòng (start — tự đảo khi RTL) thay vì căn giữa, phá thế đối xứng
   đồng loạt. Section hẹp (.wrap.narrow: câu chuyện, cẩm nang, đặt hàng) vẫn căn giữa. */
@media (min-width: 760px) {
  .section > .wrap:not(.narrow) > h2.section-title { text-align: start; }
  .section > .wrap:not(.narrow) > h2.section-title::after { margin-inline: 0; }
  #market .wrap > p.narrow, #trade-policy .wrap > p.narrow { margin-inline: 0; max-width: 62ch; }
}
#market .wrap > p.narrow, #trade-policy .wrap > p.narrow { margin-bottom: 28px; }
b, strong { font-weight: 600; }
p { margin: 0 0 1em; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 780px; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(27,94,32,.05);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 12px 24px; }
.logo { height: 50px; width: auto; filter: grayscale(1) brightness(0); }
.lang-switch { display: flex; gap: 0; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--tint-1); }
.lang-btn {
  border: none; border-right: 1px solid var(--line); background: transparent; color: var(--ink-soft);
  padding: 7px 14px; font-size: .76rem; cursor: pointer; letter-spacing: .03em; font-weight: 600;
  transition: background .15s, color .15s;
}
.lang-btn:last-child { border-right: none; }
.lang-btn.is-active { background: var(--green); color: #fff; }
.lang-btn:not(.is-active):hover { background: var(--tint-4); color: var(--green-dark); }
.lang-btn:focus-visible { outline-offset: -3px; }

/* Hero — bố cục dạng banner ngang: ảnh dài (panorama) phía trên, thông tin mô tả căn giữa phía dưới. */
.hero { padding: 44px 0 60px; background: var(--noise), radial-gradient(ellipse 60% 70% at 50% 0%, #fff 0%, transparent 70%), var(--tint-1); }
.hero-inner { display: flex; flex-direction: column; align-items: center; gap: 30px; }

.hero-banner {
  position: relative; width: 100%; max-width: 920px; margin: 0 auto;
  aspect-ratio: 1.9 / 1; border-radius: 16px;
  background: radial-gradient(ellipse 72% 88% at 50% 46%, #fff 0%, var(--tint-4) 58%, var(--tint-1) 100%);
  box-shadow: inset 0 0 0 1px rgba(27,94,32,.06);
}
/* Dải slogan đối xứng bên trái (điểm nhấn màu) cân bằng với cột ảnh phụ thu nhỏ bên phải
   (ly + 2 huy hiệu + made-in-vietnam). Cột giữa (.hb-center) xếp dọc: logo → 2 master view cạnh
   nhau → headline, dùng flex space-between để tự chia đều khoảng trống, không cần tính tay từng %. */
.hb-slogan { position: absolute; left: 3%; top: 8%; height: 84%; width: auto; z-index: 2; filter: drop-shadow(0 14px 18px rgba(27,94,32,.24)); }
.hb-center {
  position: absolute; left: 14%; right: 14%; top: 4%; bottom: 4%; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
}
.hb-logo { width: 32%; height: auto; filter: drop-shadow(0 5px 8px rgba(0,0,0,.14)); }
.hb-masters-row { width: 100%; display: flex; direction: ltr; align-items: flex-end; justify-content: center; gap: 4%; }
.hb-masters-row img { height: auto; filter: drop-shadow(0 14px 18px rgba(27,94,32,.24)); }
.hb-master-10 { width: 44%; }
.hb-master-3 { width: 36%; position: relative; aspect-ratio: 1 / 1; }
/* 🆕 29/09/2026 — ly cà phê đá: bóng đổ ấm màu nâu-hổ phách (thay bóng xanh dùng chung ở trên) +
   lớp đọng sương/giọt nước, mask theo kênh alpha của chính ảnh đang hiện (biến CSS --cup-mask, JS cập
   nhật khi đổi ảnh) nên chỉ hiện trong vùng ly, không tràn ra nền trong suốt xung quanh.
   🆕 30/09/2026 — ảnh ly đổi luân phiên 4 kiểu (nóng có đĩa/đá × Sấy Đông Khô/Sầu Riêng, xem app.js
   `heroCupRotator`). Ảnh + mask đổi đồng bộ qua JS; lớp đọng sương CHỈ hiện khi đang là ly đá.
   🆕 30/09/2026 (v2) — chuyển sang crossfade thật (2 ảnh xếp chồng position:absolute, object-fit:contain
   trong khung vuông cố định — tránh khoảng trống/giật layout khi đổi giữa ảnh vuông và ảnh cao), thêm
   scale rất nhẹ (1 → 1.015) đồng bộ với opacity cho cảm giác mượt/cao cấp, thời lượng 1.15s (chậm hơn
   hẳn bản fade-to-blank .4s cũ) theo yêu cầu "chuyên nghiệp, chậm hơn, không giật cục". */
.hb-cup-wrap img.hb-master {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 16px 20px rgba(120,72,24,.4));
  opacity: 0; transform: scale(1.015);
  transition: opacity 1.15s cubic-bezier(.22,1,.36,1), transform 1.15s cubic-bezier(.22,1,.36,1);
}
.hb-cup-wrap img.hb-master.is-active { opacity: 1; transform: scale(1); }
.hb-cup-wrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity 1.15s cubic-bezier(.22,1,.36,1);
  background-image:
    radial-gradient(circle at 22% 80%, rgba(255,255,255,.95) 0 3px, transparent 4px),
    radial-gradient(circle at 68% 84%, rgba(255,255,255,.9) 0 2.4px, transparent 3.4px),
    radial-gradient(circle at 40% 68%, rgba(255,255,255,.85) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 58%, rgba(255,255,255,.9) 0 2.4px, transparent 3.4px),
    radial-gradient(circle at 30% 48%, rgba(255,255,255,.8) 0 1.8px, transparent 2.8px),
    radial-gradient(circle at 58% 40%, rgba(255,255,255,.85) 0 2px, transparent 3px),
    radial-gradient(circle at 16% 58%, rgba(255,255,255,.75) 0 1.6px, transparent 2.6px),
    radial-gradient(circle at 87% 74%, rgba(255,255,255,.8) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 88%, rgba(255,255,255,.9) 0 2.4px, transparent 3.4px),
    radial-gradient(circle at 25% 33%, rgba(255,255,255,.7) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 72% 34%, rgba(255,255,255,.65) 0 1.4px, transparent 2.4px),
    linear-gradient(to top, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 42%);
  -webkit-mask-image: var(--cup-mask, url("assets/img/gallery/iced-durian-cup-hero-crop.webp"));
  mask-image: var(--cup-mask, url("assets/img/gallery/iced-durian-cup-hero-crop.webp"));
  -webkit-mask-mode: alpha; mask-mode: alpha;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.hb-cup-wrap.is-iced::after { opacity: 1; }
.hb-side-right {
  position: absolute; right: 3%; top: 8%; bottom: 8%; width: 9.5%; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
}
.hb-side-right img { width: 100%; height: auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.18)); }
@media (prefers-reduced-motion: no-preference) {
  .hb-master-3 { animation: heroFloat 6s ease-in-out infinite; }
}
@keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Headline thu nhỏ, nằm dưới cùng cột giữa banner (dưới 2 master view). */
.hb-headline {
  margin: 0; text-align: center; font-family: var(--font-head); font-weight: 700; color: var(--green-dark);
  line-height: 1.26; text-wrap: balance; font-size: clamp(.6rem, 1.35vw, .88rem);
  text-shadow: 0 1px 3px rgba(255,255,255,.8), 0 0 16px rgba(255,255,255,.55);
}
@media (prefers-reduced-motion: no-preference) {
  .hb-headline { animation: hbHeadlineIn .85s cubic-bezier(.2,.7,.3,1) both; }
}
@keyframes hbHeadlineIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .hb-logo { animation: hbLogoIn .7s cubic-bezier(.2,.7,.3,1) both; }
}
@keyframes hbLogoIn {
  from { opacity: 0; transform: translateY(-10px) scale(.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.hero-text { max-width: 680px; width: 100%; min-width: 0; text-align: center; }
.eyebrow {
  display: inline-block; text-transform: uppercase; letter-spacing: .08em; font-size: .74rem;
  color: #fff; font-weight: 700; margin-bottom: 16px; background: var(--green); padding: 6px 14px;
  border-radius: 999px;
}
.hero-sub { color: var(--ink-soft); font-size: .96rem; line-height: 1.6; max-width: 640px; margin-left: auto; margin-right: auto; }
/* Mỗi câu (ngăn bởi \n trong dữ liệu) luôn nằm trên đúng 1 dòng — cỡ chữ co giãn theo bề rộng màn
   hình (không dùng cỡ cố định) để câu dài (VD "Gốc rễ từ đất đỏ...") không bao giờ ngắt dòng giữa
   chừng, kể cả trên điện thoại hẹp. */
.hero-sub .text-line { display: block; white-space: nowrap; font-size: clamp(.48rem, 2.35vw, .96rem); }
.hero-sub .text-line + .text-line { margin-top: .35em; }
.btn {
  display: inline-block; padding: 13px 28px; border-radius: 8px; text-decoration: none;
  font-weight: 700; font-size: .92rem; letter-spacing: .01em;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary { background: var(--green); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--green-dark); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(27,94,32,.28); }
.btn:active, .btn-handbook:active, .lang-btn:active, .pack-option:active, .gallery-thumb:active { transform: translateY(1px) scale(.98); transition-duration: .06s; }

/* Sections */
.section { padding: 76px 0 88px; }
.section.alt-bg { background: var(--noise), var(--tint-2); }

/* Story */
.story-quote { font-style: italic; color: var(--ink-soft); }
.story blockquote {
  margin: 20px 0; padding: 20px 26px; border-left: 3px solid var(--gold);
  background: var(--tint-1); border-radius: 0 var(--radius) var(--radius) 0; font-style: italic;
  font-family: var(--font-head); font-size: 1.08rem; color: var(--green-ink);
}
.name-meaning-title { text-align: center; font-size: 1.15rem; margin-top: 34px; }
.name-block { margin-top: 10px; }
.name-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden;
}
/* 4 âm tiết đọc liền thành chữ VINACANOFI — 1 dải chia cột bằng đường mảnh, không phải 4 thẻ rời. */
.name-card { padding: 28px 22px 26px; text-align: start; position: relative; transition: background .2s ease; }
.name-card + .name-card { border-inline-start: 1px solid var(--line); }
.name-card:hover { background: var(--tint-1); }
.name-card .syllable {
  display: block; font-family: var(--font-head); font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 600;
  color: var(--green-dark); letter-spacing: -.02em; line-height: 1;
}
.name-card .syllable::after { content: ""; display: block; width: 22px; height: 2px; background: var(--gold); margin: 14px 0 12px; }
.name-card .gloss { display: block; font-weight: 600; font-size: .88rem; margin: 0 0 6px; color: var(--ink); }
.name-card .implication { font-size: .82rem; color: var(--ink-soft); line-height: 1.55; }

/* Why-this reason list (compact, inline within product card) */
.why-this-title { font-size: .95rem; color: var(--green-dark); margin: 20px 0 10px; border-top: 1px solid var(--line); padding-top: 16px; font-weight: 700; }
.reason-list-inline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.reason-list-inline li { border-left: 3px solid var(--gold); background: var(--tint-1); padding: 10px 14px; border-radius: 0 6px 6px 0; }
.reason-list-inline .reason-head { display: block; font-weight: 700; font-size: .86rem; }
.reason-list-inline .reason-evidence { font-size: .78rem; color: var(--ink-soft); }

/* Generic data table (used across market/why-choose/product/company sections) */
.table-wrap { overflow-x: auto; margin: 0 0 8px; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
table.data-table { width: 100%; border-collapse: collapse; background: #fff; font-size: .9rem; }
table.data-table caption { text-align: left; font-weight: 700; padding: 8px 0; color: var(--green-dark); }
table.data-table th, table.data-table td {
  padding: 12px 15px; border: 1px solid var(--line); text-align: left; vertical-align: top;
}
/* 🆕 01/10/2026 — hàng tiêu đề (nền xanh đậm/chữ trắng) trước đây còn in đậm (font-weight 600) — nền
   màu + chữ trắng đã đủ tạo phân cấp thị giác rõ ràng với phần thân bảng, không cần thêm đậm (quy tắc
   chung cho MỌI bảng dùng table.data-table: Stone Village Lab, bảng spec sản phẩm, bảng so sánh chân
   trang). */
table.data-table thead th {
  background: var(--green-dark); color: #fff; font-weight: 400;
  font-size: .84rem; letter-spacing: .01em; border-color: var(--green-dark);
}
table.data-table tbody tr:nth-child(even) { background: var(--tint-1); }
table.data-table tbody tr:hover { background: var(--tint-4); }
table.data-table td:first-child, table.data-table th:first-child { font-weight: 600; white-space: nowrap; }

/* Status badge (chứng nhận: Đã có / Held / 已获得...) — thay cho emoji ✅ thô, xem renderRows() trong
   app.js: tự tách ký tự ✅ đầu chuỗi và bọc phần còn lại vào badge này, icon check vẽ bằng CSS thuần. */
.status-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 8px;
  background: #E8F3EA; color: var(--green-dark); border-radius: 999px; font-weight: 600; font-size: .86em;
  line-height: 1.4;
}
.status-badge::before {
  content: ""; flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; background: var(--green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/62% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/62% no-repeat;
}
[dir="rtl"] .status-badge::before { -webkit-mask-position: center; }
/* Biến thể chấm tròn đặc (thay emoji 🟢) — dùng cho dòng đánh giá/xếp hạng (VD CQI/SCA Very Good),
   khác về ngữ nghĩa với "đã có chứng nhận" nên không dùng icon check. */
.status-badge-dot::before { mask-image: none; -webkit-mask-image: none; width: 9px; height: 9px; margin: 0 2.5px; }

/* Why choose — 2 column */
.why-grid { display: grid; gap: 30px 56px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.why-col h3 { font-size: 1.1rem; color: var(--green-dark); border-bottom: 2px solid var(--gold); padding-bottom: 8px; margin-bottom: 16px; }
/* 🆕 30/09/2026 — thay danh sách chấm vàng bằng thẻ có icon nhận diện (khớp .market-card/.policy-item
   đã có) — mỗi lý do 1 thẻ viền/bo góc riêng, icon bên trái + nội dung bên phải, tự đảo chiều đúng
   dưới [dir="rtl"] nhờ flexbox. */
.why-col ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.why-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); transition: box-shadow .2s ease, transform .2s ease;
}
.why-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.why-icon {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 36px; height: 36px; border-radius: 50%; background: var(--tint-3); color: var(--green-dark);
}
.why-item-body { min-width: 0; }
.why-col .reason-head { display: block; font-weight: 700; margin-bottom: 4px; font-size: .92rem; color: var(--green-ink); }
.why-col .reason-evidence { font-size: .82rem; color: var(--ink-soft); }

/* Products */
.product-card {
  display: flex; gap: 36px; align-items: flex-start; flex-wrap: wrap;
  padding: 40px 0; border-bottom: 1px solid var(--line);
}
.product-card:last-child { border-bottom: none; }
/* Product gallery */
/* 🆕 29/09/2026 — .product-media bám theo khi cuộn (position:sticky) trong lúc đọc .product-info dài
   hơn bên cạnh, tự nhả ra khi chạm đáy .product-card (đúng hành vi CSS sticky chuẩn, không cần JS).
   top:90px chừa chỗ cho .site-header (position:sticky, cao ~74px) + khoảng đệm. Tắt hẳn trên mobile
   (xem media query max-width:640px) vì bố cục ở đó xếp dọc, sticky không có ý nghĩa. */
.product-media { flex: 0 0 380px; max-width: 100%; position: sticky; top: 90px; align-self: flex-start; }
.iced-preview {
  display: block; width: 100%; height: auto; margin-top: 14px;
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  background: radial-gradient(circle at 50% 42%, #fff 0%, var(--tint-1) 68%, var(--tint-3) 100%);
}
.gallery-stage {
  position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 42%, #fff 0%, var(--tint-1) 68%, var(--tint-3) 100%);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
}
.gallery-main { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 16px rgba(27,94,32,.18)); }
.gallery-main.is-swapping { animation: galleryIn .35s ease; }
@keyframes galleryIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.gallery-thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; margin-top: 10px; }
.gallery-thumb {
  aspect-ratio: 1 / 1; padding: 2px; background: var(--tint-1); border: 2px solid var(--line);
  border-radius: 6px; cursor: pointer; transition: border-color .15s, transform .15s;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: contain; }
.gallery-thumb:hover { transform: translateY(-2px); border-color: var(--green); }
.gallery-thumb.is-active { border-color: var(--green); background: #fff; }
.gallery-thumb:focus-visible, .pack-option:focus-visible { outline: 3px solid var(--yellow); outline-offset: 1px; }
.gallery-hint { margin: 8px 0 0; font-size: .74rem; color: var(--ink-mute); text-align: center; }

/* Pack format picker */
.pack-picker { margin: 14px 0 6px; }
.pack-label { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .01em; color: var(--green-dark); margin-bottom: 8px; }
.pack-options { display: flex; flex-wrap: wrap; gap: 10px; }
.pack-option {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; text-align: left;
  font-family: inherit; color: inherit; transition: border-color .15s, box-shadow .15s, background .15s;
}
.pack-option img { width: 46px; height: 46px; object-fit: contain; background: var(--tint-1); border-radius: 4px; }
.pack-option .pack-name { display: block; font-weight: 700; font-size: .88rem; }
.pack-option .pack-size { display: block; font-size: .76rem; color: var(--ink-soft); }
.pack-option:hover { border-color: var(--green); }
.pack-option.is-active { border-color: var(--green); background: var(--tint-1); box-shadow: 0 0 0 2px rgba(45,125,50,.2); }
.product-info { flex: 1 1 420px; min-width: 300px; }
.flagship-tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--gold); color: #fff; font-size: .68rem; font-weight: 700;
  padding: 5px 13px; border-radius: 999px; letter-spacing: .03em; white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.product-slogan { font-style: italic; color: var(--ink-soft); font-family: var(--font-head); font-size: 1.05rem; }
.product-position { background: var(--tint-1); border-left: 3px solid var(--gold); padding: 11px 15px; font-size: .9rem; border-radius: 0 6px 6px 0; }
.agrade-badge {
  display: inline-block; background: var(--green-dark); color: #fff; font-size: .7rem;
  font-weight: 700; padding: 4px 12px; border-radius: 999px; margin-bottom: 10px; letter-spacing: .02em;
}
.price-row { font-weight: 700; color: var(--green-dark); margin: 8px 0 14px; font-size: 1.1rem; font-family: var(--font-head); }

.line-durian .product-slogan, .line-durian h3 { color: var(--green-dark); }

/* 🆕 30/09/2026 — Market & target customers: lưới 5 thẻ (icon nhận diện phân khúc + ảnh cốc sản phẩm
   hướng đúng đối tượng), thay cho bảng 3 cột thuần văn bản cũ — mô phỏng theo đúng khuôn
   .cert-highlight-grid bên dưới (đã kiểm chứng tự dồn 1 cột trên mobile qua auto-fit, không cần thêm
   breakpoint riêng). Icon/ảnh dùng flex space-between nên tự đảo chiều đúng dưới [dir="rtl"], không cần
   CSS riêng cho tiếng Ả Rập. */
.market-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); margin-top: 34px; }
.market-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 26px 22px; box-shadow: var(--shadow-sm); min-width: 0;
  display: flex; flex-direction: column;
}
.market-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.market-icon {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%; background: var(--tint-3); color: var(--green-dark);
}
.market-cup { flex: 0 0 auto; width: 76px; height: 82px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(120,72,24,.4)); }
.market-card-title { font-size: 1.05rem; margin: 0 0 14px; line-height: 1.35; }
.market-card-meta { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.market-meta-row { display: flex; gap: 8px; font-size: .86rem; padding: 3px 0; }
.market-meta-row dt { flex: 0 0 auto; font-weight: 600; color: var(--ink-mute); margin: 0; }
.market-meta-row dd { margin: 0; color: var(--ink-soft); }

/* Certs */
/* 🆕 01/10/2026 — bảng 6 chứng nhận chính chuyển sang lưới thẻ có icon (khớp .market-card/.why-item/
   .policy-item đã có), thay bảng 3 cột thuần văn bản. Giữ nguyên .status-badge (check/chấm xanh) bên
   trong mỗi thẻ — không đổi ý nghĩa, chỉ đổi khung chứa. */
.certs-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 34px; margin-bottom: 8px; }
.cert-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); transition: box-shadow .2s ease, transform .2s ease;
}
.cert-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.cert-icon {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 52px; height: 52px; border-radius: 50%; background: var(--tint-3); color: var(--green-dark);
}
/* Huy hiệu thật (GACC/FDA/HACCP/ISO 22000) — ảnh tự thân đã là 1 con dấu tròn hoàn chỉnh, không cần
   nền tint phía sau (tránh chồng 2 lớp hình tròn nhìn rối), chỉ cần đúng kích thước khớp các icon khác. */
.cert-icon-badge { background: none; object-fit: contain; }
.cert-item-body { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cert-item-name { font-weight: 700; font-size: .92rem; color: var(--green-ink); }
.cert-item-number { font-size: .78rem; color: var(--ink-mute); font-variant-numeric: tabular-nums; }

.cert-highlight-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); margin-top: 34px; }
.cert-highlight { min-width: 0; }
.cert-highlight table.data-table td:first-child, .cert-highlight table.data-table th:first-child { white-space: normal; }
/* 🆕 01/10/2026 — quy ước chung "cột đầu in đậm" (table.data-table td:first-child) hợp với bảng 2 cột
   nhãn/giá trị (VD bảng spec sản phẩm), nhưng ở bảng Stone Village Lab cả 3 cột (Mẫu/Final Score/Xếp
   hạng) đều là dữ liệu ngang hàng — chỉ cột "Mẫu" đậm trong khi 2 cột kia thường trông lệch, không nhất
   quán. Bỏ đậm riêng cho bảng này, giữ nguyên quy ước đậm cột đầu ở mọi bảng khác (spec sản phẩm, bảng
   so sánh chân trang). */
.cert-highlight table.data-table td:first-child { font-weight: 400; }
.cert-highlight { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow-sm); }
/* 🆕 01/10/2026 — gạch chân vàng dưới tiêu đề mỗi khối kiểm nghiệm, khớp phong cách "báo cáo khoa học"
   đã dùng cho .why-col h3 — phân tách rõ 2 khối Stone Village Lab/Việt Tín khỏi phần thân bên dưới. */
.cert-highlight h3 { border-bottom: 2px solid var(--gold); padding-bottom: 8px; margin-bottom: 10px; font-size: 1.05rem; }
.cert-sub { font-size: .83rem; color: var(--ink-soft); }
.cert-footnote { font-size: .77rem; color: var(--ink-mute); font-style: italic; margin-top: 10px; margin-bottom: 0; }
.vt-list { padding-left: 1.1em; font-size: .88rem; }
.vt-list li { margin-bottom: 6px; }

/* Trade policy */
/* 🆕 30/09/2026 — chuyển từ danh sách 4 cột chia bằng border-inline-start (chỉ đẹp khi đúng 1 hàng)
   sang lưới thẻ độc lập (khớp .market-card/.cert-highlight đã có) — nay có 6 mục nên tự xuống dòng,
   mỗi thẻ viền/bo góc riêng nên không còn phụ thuộc vị trí trong hàng, tự nhiên gọn trên mobile qua
   auto-fit mà không cần media query riêng (đã xoá override mobile cũ, không còn cần thiết). */
/* 🆕 01/10/2026 — minmax 260px cho 6 thẻ tự xếp 4+2 không cân — đổi 280px (khớp .market-grid/.certs-grid)
   để đúng 3+3 trên desktop (≥1112px khung nội dung chỉ vừa 3 cột, không đủ chỗ cho cột thứ 4). */
.policy-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 34px; }
.policy-item {
  padding: 22px 22px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); transition: box-shadow .2s ease, transform .2s ease;
}
.policy-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
/* Icon nhận diện điều khoản — cùng khuôn .market-icon (huy hiệu tròn nền tint, màu kế thừa qua currentColor). */
.policy-icon {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; background: var(--tint-3); color: var(--green-dark);
  margin-bottom: 14px;
}
.policy-item .policy-label { display: block; font-weight: 600; color: var(--ink-mute); margin-bottom: 8px; font-size: .8rem; letter-spacing: .01em; }
.policy-item .policy-value { font-family: var(--font-head); font-size: 1.15rem; line-height: 1.4; color: var(--green-ink); }

/* Contact / Company registration */
.contact-card { background: #fff; }
.contact-intro { text-align: center; margin-bottom: 20px; }

/* Bảng so sánh 3 cột: Thông tin | GXGS (nhà phân phối) | BEENAGRI (nhà sản xuất)
   Desktop (>640px): bảng thật, table-layout cố định để không tràn ngang.
   Mobile (<=640px): KHÔNG bẻ bảng thành 9 thẻ-theo-dòng (đọc bị ngắt quãng, phải nhảy qua
   lại giữa 2 công ty ở từng ô) — thay bằng 2 "hồ sơ công ty" liền mạch (.compare-mobile,
   dựng riêng trong JS): mỗi hồ sơ liệt kê đủ 9 trường của đúng 1 công ty theo thứ tự, đọc
   trọn 1 lần thay vì lắp ghép.
   Selector dùng tiền tố "table.compare-table" để khớp/thắng đúng specificity
   của rule chung "table.data-table ..." (bảng này mang cả 2 class). */
table.compare-table { table-layout: fixed; width: 100%; }
table.compare-table th, table.compare-table td { overflow-wrap: break-word; word-break: break-word; vertical-align: top; }
table.compare-table th:first-child, table.compare-table td:first-child { width: 26%; font-weight: 600; white-space: normal; }
table.compare-table th:nth-child(2), table.compare-table td:nth-child(2),
table.compare-table th:nth-child(3), table.compare-table td:nth-child(3) { width: 37%; }
table.compare-table .compare-tag { display: none; }

.compare-mobile { display: none; }

@media (max-width: 640px) {
  .compare-table-wrap { display: none; } /* ẩn bảng thật, nhường chỗ cho .compare-mobile */
  .compare-mobile { display: block; }
  .company-profile { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 16px; }
  .company-profile:last-child { margin-bottom: 0; }
  .company-profile-name { margin: 0; padding: 11px 14px; background: var(--green); color: #fff; font-size: .92rem; font-weight: 700; }
  .company-profile-list { margin: 0; }
  .company-profile-row { padding: 9px 14px; border-top: 1px solid var(--line); }
  .company-profile-row:first-child { border-top: none; }
  .company-profile-row dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); font-weight: 600; }
  .company-profile-row dd { margin: 4px 0 0; font-size: .92rem; }
}

[dir="rtl"] table.compare-table td:first-child { text-align: right; }
[dir="rtl"] .company-profile-row dt, [dir="rtl"] .company-profile-row dd { text-align: right; }

/* Footer — 24/09/2026 v4: gộp khối logo/tagline (.footer-brand) và thông tin liên hệ (.footer-contact)
   vào chung 1 hàng phân bổ (.footer-flex) thay vì xếp chồng 2 khối riêng có border-top ngăn cách —
   "đẩy" phần liên hệ lên ngang hàng tagline, giảm thêm chiều cao chân trang. Mã QR WeChat đã dời sang
   section #order (xem .order-wechat trong file này). */
.site-footer { background: var(--ink); color: #D7DBD7; padding: 44px 0; }
.footer-flex { display: flex; gap: 40px; align-items: flex-start; justify-content: center; flex-wrap: wrap; }
.footer-brand { flex: 0 0 auto; max-width: 220px; text-align: center; }
.footer-logo { height: 42px; width: auto; margin: 0 auto 12px; filter: brightness(0) invert(1); }
.footer-brand p { margin: 0 0 4px; font-size: .78rem; color: #A9B3A9; }
.footer-since { letter-spacing: .14em; font-size: .72rem; color: var(--gold-soft); font-family: var(--font-head); }

/* Đăng ký doanh nghiệp & liên hệ — nay là cột bên phải trong cùng hàng với .footer-brand, không còn
   border-top/margin-top ngăn cách như trước. Bảng thật (#contactCompareTable) VẪN nằm trong DOM vì
   renderCompareTable() ghi vào đó, nhưng ẩn hẳn — chỉ hiển thị bản .compare-mobile (vốn đã là list,
   không phải bảng). 🆕 Bỏ nền trắng (24/09/2026) — chữ nằm thẳng trên nền tối của footer, màu chữ đổi
   sang tông sáng (kế thừa `color: #D7DBD7` từ .site-footer cho dd, xám nhạt hơn cho dt, vàng cho tên
   công ty) thay vì bọc trong card nền trắng như trước. */
.footer-contact { flex: 1 1 620px; max-width: 700px; text-align: left; }
.footer-contact-title {
  font-family: var(--font-head); font-size: .74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: #fff; margin: 0 0 8px;
}
.footer-contact-card {
  display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap;
}
.footer-contact-card .compare-table-wrap { display: none; }
.footer-contact-card .compare-mobile { display: flex !important; gap: 24px; flex-wrap: wrap; width: 100%; }
.footer-contact-card .company-profile { border: none; border-radius: 0; overflow: visible; margin: 0; flex: 1 1 260px; min-width: 220px; }
.footer-contact-card .company-profile-name {
  background: none; color: var(--gold-soft); padding: 0 0 2px; margin: 0 0 2px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid rgba(255,255,255,.18);
  /* font-size đặt ở rule cuối file (dòng ~836, "bỏ chữ in hoa chân trang") — nguồn thật duy nhất,
     tránh khai 2 nơi cho cùng thuộc tính (nơi này trước đó ghi .56rem nhưng luôn bị rule sau ghi đè). */
}
/* Mỗi mục xuống dòng riêng ("Nhãn: Giá trị").
   🆕 01/10/2026 — .56rem/.5rem (≈9px/8px) quá nhỏ để đọc thoải mái, nhất là với dãy số dài (mã ĐKKD,
   số điện thoại) — tăng lên .74rem/.72rem (≈11.8px/11.5px), vẫn đủ gọn cho khối liên hệ chân trang
   nhưng dễ đọc hơn hẳn, đúng tinh thần "chuyên nghiệp, đảm bảo thẩm mỹ". */
.footer-contact-card .company-profile-list { font-size: .72rem; }
.footer-contact-card .company-profile-row { display: block; line-height: 1.5; padding: 0; }
.footer-contact-card .company-profile-row dt { display: inline; color: #A9B3A9; font-weight: 700; }
.footer-contact-card .company-profile-row dt::after { content: ": "; }
.footer-contact-card .company-profile-row dd { display: inline; margin: 0; color: #D7DBD7; }
@media (max-width: 860px) {
  .footer-flex { justify-content: flex-start; }
  .footer-contact { flex-basis: 100%; max-width: none; }
}
@media (max-width: 640px) {
  .footer-flex { flex-direction: column; align-items: center; }
  .footer-brand { max-width: none; }
  .footer-contact-card { flex-direction: column; align-items: stretch; }
  .footer-contact-card .compare-mobile { flex-direction: column; gap: 8px; }
}
[dir="rtl"] .footer-contact { text-align: right; }
[dir="rtl"] .footer-contact-card .company-profile-row dt::after { content: ""; }
[dir="rtl"] .footer-contact-card .company-profile-row dt::before { content: ":"; }

/* Responsive */
@media (max-width: 640px) {
  .hero { padding: 28px 0 36px; }
  .hero-inner { gap: 22px; }
  .hero-banner { aspect-ratio: 1.35 / 1; border-radius: 12px; }
  .hb-slogan { left: 2%; height: 80%; }
  .hb-center { left: 12%; right: 12%; }
  .hb-logo { width: 38%; }
  /* 🆕 01/10/2026 — bỏ override .56rem (≈9px, nhỏ hơn cả mức sàn .6rem mà clamp() ở rule gốc đã tính
     toán) — để clamp(.6rem, 1.35vw, .88rem) tự lo, đúng tinh thần "đảm bảo thẩm mỹ" (dòng giới thiệu
     thương hiệu ngay dưới banner cần đọc được thoải mái, không phải chữ trang trí). */
  .hb-side-right { right: 2%; width: 12%; }
  .product-card { flex-direction: column; align-items: stretch; text-align: left; }
  .product-media { flex-basis: auto; width: 100%; max-width: 420px; margin: 0 auto; position: static; }
  .name-grid { grid-template-columns: repeat(2, 1fr); }
  .name-card { padding: 20px 16px; }
  .name-card:nth-child(3) { border-inline-start: none; }
  .name-card:nth-child(n+3) { border-top: 1px solid var(--line); }
  .pack-option { flex: 1 1 100%; }
  body { font-size: 14.5px; }
}

/* Mobile table normalization: list-style tables wrap instead of forcing
   horizontal scroll; label/value "definition" tables become stacked cards. */
@media (max-width: 640px) {
  table.data-table { font-size: .84rem; }
  table.data-table th, table.data-table td { padding: 7px 9px; }
  table.data-table td:first-child, table.data-table th:first-child { white-space: normal; }

  table.def-table, table.def-table tbody, table.def-table tr { display: block; width: 100%; }
  table.def-table tbody { display: flex; flex-direction: column; gap: 8px; }
  table.def-table tr {
    border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff;
  }
  table.def-table td { display: block; border: none; padding: 7px 11px; }
  table.def-table td:first-child {
    background: var(--tint-3); color: var(--green-dark); font-weight: 700;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; white-space: normal;
  }
  table.def-table td:last-child { padding-top: 7px; font-size: .92rem; }
  [dir="rtl"] table.def-table td:first-child { text-align: right; }
}

@media (prefers-reduced-motion: reduce) { .gallery-main.is-swapping { animation: none; } .gallery-thumb { transition: none; } }

/* Language-specific typography */
:lang(ja) { --font-head: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "Songti SC", serif; --font-body: "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif; }
:lang(ko) { --font-head: "AppleMyungjo", "Batang", "Noto Serif KR", serif; --font-body: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; }
:lang(ar) { --font-head: "Geeza Pro", "Traditional Arabic", "Noto Naskh Arabic", "Times New Roman", serif; --font-body: "Geeza Pro", "Segoe UI", "Tahoma", "Noto Sans Arabic", sans-serif; }
:lang(ja) body, :lang(ko) body { word-break: keep-all; overflow-wrap: anywhere; line-height: 1.75; }
:lang(ar) body { line-height: 1.85; }
:lang(ar) .eyebrow, :lang(ar) .pack-label, :lang(ar) .policy-item .policy-label { letter-spacing: 0; text-transform: none; }

/* Right-to-left (Arabic) */
[dir="rtl"] .story blockquote, [dir="rtl"] .product-position { border-left: none; border-right: 4px solid var(--green); border-radius: var(--radius) 0 0 var(--radius); }
[dir="rtl"] .product-position { border-right-width: 3px; }
[dir="rtl"] .reason-list-inline li { border-left: none; border-right: 3px solid var(--gold); border-radius: 4px 0 0 4px; }
[dir="rtl"] table.data-table th, [dir="rtl"] table.data-table td, [dir="rtl"] table.data-table caption { text-align: right; }
[dir="rtl"] .pack-option { text-align: right; padding: 8px 8px 8px 14px; }
[dir="rtl"] .flagship-tag { left: auto; right: 10px; }
[dir="rtl"] .vt-list { padding-left: 0; padding-right: 1.1em; }
[dir="rtl"] .lang-btn { border-right: none; border-left: 1px solid var(--green); }
[dir="rtl"] .lang-btn:last-child { border-left: none; }
[dir="rtl"] .product-card { text-align: right; }

@media (max-width: 640px) {
  .header-inner { padding: 8px 14px; }
  .logo { height: 42px; }
  .lang-switch { width: 100%; }
  .lang-btn { flex: 1; padding: 7px 4px; font-size: .74rem; }
}

:lang(ar) *, [dir="rtl"] * { font-style: normal !important; }

/* Stone Village certificate scans — 🆕 01/10/2026 (v3) bỏ khung "stage" phóng to (đã thử nới hết cỡ
   nhưng bảng điểm chi tiết trong biên bản vẫn không đủ rõ để đọc trực tiếp) — quay lại ĐÚNG bản gốc:
   chỉ còn hàng thumbnail nhỏ, bấm vào mở thẳng lightbox phóng to toàn màn hình. */
.cert-scan-gallery { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.cert-scan-btn {
  border: 1px solid var(--line); border-radius: 4px; padding: 0; background: #fff; cursor: pointer;
  width: 64px; overflow: hidden; transition: border-color .15s, transform .15s;
}
.cert-scan-btn img { width: 100%; height: 84px; object-fit: cover; object-position: top; display: block; }
.cert-scan-btn:hover { border-color: var(--green); transform: translateY(-2px); }
.cert-scan-btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 1px; }
.cert-scan-label { display: block; font-size: .62rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; padding: 3px 2px; color: var(--ink-soft); background: var(--tint-1); }

.lightbox {
  position: fixed; inset: 0; z-index: 100; background: rgba(15, 25, 15, .88); overscroll-behavior: contain;
  display: flex; align-items: center; justify-content: center; padding: 30px 16px;
}
.lightbox-img { max-width: min(92vw, 640px); max-height: 90vh; border-radius: 4px; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.lightbox-close {
  position: absolute; top: 16px; right: 20px; width: 40px; height: 40px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.15); color: #fff; font-size: 1.6rem; line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover { background: rgba(255,255,255,.28); }
[dir="rtl"] .lightbox-close { right: auto; left: 20px; }

/* B2B handbook download */
.handbook { background: var(--noise), radial-gradient(ellipse 70% 120% at 50% 0%, #2B6E30 0%, transparent 70%), var(--green-dark); }
.handbook-inner { text-align: center; }
.handbook .section-title { color: #fff; }
.handbook .section-title::after { background: var(--gold-soft); }
.handbook-desc { color: #DCE8DC; max-width: 56ch; margin: 0 auto 22px; }
.btn-handbook {
  display: inline-flex; align-items: center; gap: 12px; background: #fff; color: var(--green-dark);
  padding: 12px 22px; border-radius: var(--radius); text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.btn-handbook:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.2); }
.handbook-icon { display: flex; flex: 0 0 auto; color: var(--green); }
.handbook-btn-text { text-align: left; }
.handbook-btn-label { display: block; font-weight: 700; font-size: .96rem; }
.handbook-btn-meta { display: block; font-size: .74rem; color: var(--ink-mute); }
.handbook-note { margin: 14px 0 0; font-size: .8rem; color: #B9C9B9; font-style: italic; }
[dir="rtl"] .handbook-btn-text { text-align: right; }

/* 🆕 24/09/2026 — Cutover: #order giờ chỉ là 2 nút CTA dẫn sang shop.vinacanofi.com (Next.js + Supabase),
   không còn form tại chỗ. Toàn bộ CSS .order-form/.order-panel/.order-step... phía dưới thuộc form cũ
   đã bỏ, giữ lại trong file phòng khi cần tham khảo (không có HTML nào còn dùng tới, vô hại). */
.order-intro { text-align: center; max-width: 62ch; margin: 0 auto 26px; color: var(--ink-soft); }
.order-cta-wrap { text-align: center; }
.order-cta-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 8px; }
.btn-secondary { background: var(--yellow); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { filter: brightness(0.97); transform: translateY(-2px); box-shadow: var(--shadow-md); }
[dir="rtl"] .order-cta-buttons { flex-direction: row-reverse; }

.order-form { max-width: 640px; margin: 0 auto; }

/* Chỉ báo 2 bước — Bước 1 Đăng Ký Thành Viên PHẢI xong (is-done) mới sang Bước 2 Chi Tiết Đơn Hàng
   (is-active). Thuần chỉ báo trực quan, logic khoá thật nằm ở việc #orderPanelDetails có [hidden]. */
.order-steps { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 300px; margin: 0 auto 24px; }
.order-step {
  display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 50%; border: 2px solid var(--line); background: #fff; color: var(--ink-mute);
  font-weight: 700; font-size: .9rem; flex: 0 0 auto; transition: border-color .2s, background .2s, color .2s;
}
.order-step.is-active { border-color: var(--green); color: var(--green); }
.order-step.is-done { border-color: var(--green); background: var(--green); color: #fff; }
.order-step-line { flex: 1 1 auto; height: 2px; background: var(--line); }

.order-registered-as {
  background: var(--tint-1); border: 1px solid var(--tint-4); border-radius: var(--radius);
  padding: 10px 14px; font-size: .86rem; font-weight: 600; color: var(--green-dark); margin: 0 0 20px;
}

.order-fieldset { border: none; padding: 0; margin: 0 0 26px; }
.order-fieldset-title {
  font-family: var(--font-head); font-size: 1.05rem; color: var(--green-dark);
  border-bottom: 2px solid var(--yellow); padding: 0 0 6px; margin: 0 0 16px;
}
.order-row { display: grid; gap: 16px; grid-template-columns: 1fr; }
.order-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.order-field label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.order-form input[type="text"], .order-form input[type="email"], .order-form input[type="tel"],
.order-form textarea {
  width: 100%; font-family: var(--font-body); font-size: .95rem; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; background: #fff;
}
.order-form textarea { resize: vertical; min-height: 76px; }
.order-form input:focus, .order-form textarea:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(45,125,50,.14);
}
/* Honeypot — ẩn khỏi thị giác/tab order nhưng vẫn nằm trong DOM để bẫy bot điền tự động */
.order-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Chuyển đổi 2 chế độ Bước 1 — Khách hàng mới (đăng ký) / Đã có mã khách hàng (tra cứu) — tái dùng
   đúng ngôn ngữ hình khối "pill" đã có (trước đây cho radio Email/SĐT, nay chuyển sang <button> thật
   vì không còn form field nhị phân, chỉ là chuyển đổi hiển thị 2 khối). */
.order-mode-toggle { display: flex; gap: 10px; margin-bottom: 20px; }
.order-mode-btn {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 14px; border: 1px solid var(--line); background: #fff; border-radius: 999px;
  font-size: .86rem; font-weight: 600; color: var(--ink-soft); cursor: pointer;
  font-family: var(--font-body); transition: background .15s, border-color .15s, color .15s;
}
.order-mode-btn.is-active { background: var(--green); border-color: var(--green); color: #fff; }

.order-items { margin-bottom: 14px; }
.order-items-hint { font-size: .84rem; color: var(--ink-soft); margin: -6px 0 14px; }
.order-item-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
/* Nhãn 2 dòng: tên sản phẩm + quy cách (đậm) rồi tới mã SKU (nhỏ, tách biệt trực quan) — mỗi dòng
   trong 5 dòng SKU giờ là 1 mã sản phẩm cụ thể, không còn gộp chung 2 quy cách 1 dòng như trước. */
.order-item-row label { display: flex; flex-direction: column; gap: 2px; }
.order-item-name { font-size: .86rem; font-weight: 600; color: var(--ink); }
.order-item-sku { font-size: .74rem; font-weight: 700; color: var(--green-dark); letter-spacing: .02em; }
/* Ô số lượng + nhãn đơn vị cố định "thùng"/carton gắn liền ngay sau — khách chỉ gõ số, đơn vị không
   phải gõ và không thể xoá nhầm (khác placeholder biến mất khi gõ). type="number" nên trình duyệt tự
   chặn ký tự không phải số, kèm bàn phím số trên di động. */
.order-qty-group { display: flex; }
.order-qty-group input {
  flex: 1 1 auto; min-width: 0; font-family: var(--font-body); font-size: .95rem; border: 1px solid var(--line);
  border-right: none; border-radius: var(--radius) 0 0 var(--radius); padding: 10px 12px;
}
.order-qty-group input:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(45,125,50,.14); position: relative; z-index: 1;
}
.order-qty-unit {
  flex: 0 0 auto; display: flex; align-items: center; padding: 0 14px; white-space: nowrap;
  background: var(--tint-1); border: 1px solid var(--line); border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .86rem; font-weight: 600; color: var(--ink-soft);
}
[dir="rtl"] .order-qty-group input {
  border-right: 1px solid var(--line); border-left: none; border-radius: 0 var(--radius) var(--radius) 0;
}
[dir="rtl"] .order-qty-unit { border-radius: var(--radius) 0 0 var(--radius); }

.order-status {
  padding: 10px 14px; border-radius: var(--radius); font-size: .9rem; margin: 0 0 14px; font-weight: 600;
}
.order-status.is-sending { background: var(--tint-1); color: var(--ink-soft); }
.order-status.is-success { background: #E6F4EA; color: var(--green-dark); }
.order-status.is-error { background: #FDECEA; color: #B3261E; }

.order-continue { width: 100%; border: none; font-size: 1rem; padding: 13px 22px; cursor: pointer; }
.order-actions { display: flex; align-items: center; gap: 14px; }
.order-back {
  flex: 0 0 auto; background: none; border: none; color: var(--ink-mute); font-size: .86rem;
  font-weight: 600; cursor: pointer; padding: 8px 4px; text-decoration: underline;
}
.order-back:hover { color: var(--green-dark); }
.order-submit { flex: 1 1 auto; border: none; font-size: 1rem; padding: 13px 22px; cursor: pointer; }
.order-submit:disabled { opacity: .65; cursor: default; }
.order-mailto-fallback { text-align: center; font-size: .8rem; color: var(--ink-mute); margin: 16px 0 0; }
.order-mailto-fallback a { color: var(--green-dark); font-weight: 600; }

@media (min-width: 640px) {
  .order-row { grid-template-columns: 1fr 1fr; }
}

[dir="rtl"] .order-field label, [dir="rtl"] .order-item-row label,
[dir="rtl"] .order-items-hint, [dir="rtl"] .order-mailto-fallback,
[dir="rtl"] .order-fieldset-title, [dir="rtl"] .order-registered-as { text-align: right; }

/* Fixes oversized ™ glyph in some CJK heading fonts (e.g. Korean AppleMyungjo/Batang) */
.tm-fix { font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }

/* WeChat QR trong section #order (24/09/2026 — dời từ chân trang lên đây, ảnh đã cắt bỏ phần
   tên/logo sao vàng, chỉ còn đúng mã QR). Mã phóng to, chữ chú thích thu nhỏ. */
.order-wechat { margin: 22px auto 0; max-width: 150px; text-align: center; }
.order-wechat-img { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.1); }
.order-wechat-caption { margin: 8px 0 0; font-size: .7rem; color: var(--ink-mute); }

/* Hiện dần khi cuộn tới — chỉ bật khi JS đã chạy (html.js-reveal) và người dùng không tắt chuyển động,
   nên nội dung không bao giờ bị ẩn nếu JS lỗi.
   🆕 30/09/2026 — thêm scale rất nhẹ (.97→1) đồng bộ cùng opacity/translateY, cùng ngôn ngữ chuyển động
   đã dùng cho ảnh ly cà phê ở hero (settle-into-place), thay vì chỉ trượt lên đơn thuần. */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .reveal { opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); transition-delay: calc(var(--i, 0) * 70ms); }
  .js-reveal .reveal.is-in { opacity: 1; transform: none; }

  /* 🆕 30/09/2026 — gạch chân tiêu đề section "vẽ" từ 0 → đủ độ rộng khi tiêu đề cuộn vào khung nhìn,
     thay vì hiện sẵn tĩnh. Chỉ áp cho h2.section-title đang mang .reveal (mọi tiêu đề section chính). */
  .js-reveal h2.section-title.reveal::after {
    width: 0; transition: width .6s cubic-bezier(.2,.7,.3,1) .2s;
  }
  .js-reveal h2.section-title.reveal.is-in::after { width: 46px; }
}

/* Logo = liên kết về đầu trang */
.logo-link { display: inline-flex; border-radius: 6px; transition: opacity .15s ease; }
.logo-link:hover { opacity: .75; }
.footer-brand .logo-link { justify-content: center; }

/* Hàng cuối chân trang: bản quyền + chính sách bảo mật */
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px;
  margin-top: 32px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12);
  font-size: .78rem; color: #A9B3A9;
}
.footer-bottom a { color: #D7DBD7; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.3); }
.footer-bottom a:hover { color: var(--gold-soft); text-decoration-color: currentColor; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Trang văn bản (chính sách bảo mật, 404) */
.doc-page { padding: 56px 0 88px; background: var(--noise), var(--tint-1); min-height: calc(100dvh - 75px); }
.doc-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: clamp(24px, 5vw, 56px); }
.doc-card h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); letter-spacing: -.02em; line-height: 1.1; margin-bottom: 10px; }
.doc-meta { color: var(--ink-mute); font-size: .88rem; margin-bottom: 28px; }
.doc-card h2 { font-size: 1.25rem; text-align: start; letter-spacing: -.01em; margin: 34px 0 10px; }
.doc-card p, .doc-card li { max-width: 68ch; color: var(--ink-soft); }
.doc-card ul { padding-inline-start: 1.2em; }
.doc-card li { margin-bottom: 6px; }
.doc-card a:not(.btn) { color: var(--green-dark); font-weight: 600; }
.doc-lang { display: flex; gap: 8px; margin-bottom: 26px; }
.doc-lang a { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-soft); text-decoration: none; font-size: .82rem; font-weight: 600; background: #fff; }
.doc-lang a.is-active { background: var(--green); border-color: var(--green); color: #fff; }
.nf-code { font-family: var(--font-head); font-size: clamp(5rem, 16vw, 9rem); line-height: 1; color: var(--green-dark); letter-spacing: -.04em; margin: 0; }
.nf-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

/* Chân trang: bỏ chữ in hoa toàn bộ (đồng bộ với tiêu đề kiểu câu trên toàn trang) */
.footer-contact-title { text-transform: none; letter-spacing: 0; font-size: 1rem; }
.footer-contact-card .company-profile-name { text-transform: none; letter-spacing: .01em; font-size: .78rem; }
.footer-contact-card .company-profile-row dt { text-transform: none; letter-spacing: 0; font-weight: 600; }

/* Nút thứ 3 (Subscription) — viền xanh, không thêm màu nhấn mới (giữ 2 màu xanh + vàng) */
.btn-outline { background: #fff; color: var(--green-dark); box-shadow: inset 0 0 0 2px var(--green); }
.btn-outline:hover { background: var(--tint-1); transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--green-dark), var(--shadow-md); }

/* 🆕 03/10/2026 — Phân tích cupping chi tiết (cupping.js): dải số liệu + 2 thẻ mẫu, dữ liệu dạng HTML thật
   (không dùng ảnh) để đọc được ngay. Logical properties để đúng khi RTL. */
.cupping-analysis { margin-top: 34px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow-sm); }
.cup-title { border-bottom: 2px solid var(--gold); padding-bottom: 8px; margin: 0 0 10px; font-size: 1.05rem; }
.cup-stats { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.cup-stat { background: var(--tint-2); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.cup-stat strong { font-family: var(--font-head); font-size: 1.5rem; line-height: 1.1; color: var(--green-dark); font-variant-numeric: tabular-nums; }
.cup-stat span { font-size: .78rem; color: var(--ink-soft); line-height: 1.35; }
.cup-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.cup-card { border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.cup-card h4 { margin: 0; font-size: .98rem; color: var(--green-dark); }
.cup-score { margin: 4px 0 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cup-score strong { font-family: var(--font-head); font-size: 1.7rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.cup-score span { font-size: .78rem; color: var(--ink-soft); }
.cup-origin { margin: 0; font-size: .78rem; color: var(--ink-mute); }
.cup-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.cup-table th, .cup-table td { padding: 6px 0; text-align: start; border-bottom: 1px solid var(--line); font-weight: 400; vertical-align: middle; }
.cup-table thead th { font-size: .72rem; color: var(--ink-mute); letter-spacing: .02em; }
.cup-table tbody th { color: var(--ink); padding-inline-end: 10px; white-space: nowrap; }
.cup-bar-cell { display: flex; align-items: center; gap: 10px; }
.cup-bar { flex: 1; min-width: 40px; height: 6px; border-radius: 3px; background: var(--tint-3); overflow: hidden; display: block; }
.cup-bar i { display: block; height: 100%; background: var(--green); border-radius: 3px; }
.cup-bar-cell b { font-weight: 600; min-width: 2.6em; font-variant-numeric: tabular-nums; }
.cup-sd { color: var(--ink-soft); font-variant-numeric: tabular-nums; width: 1%; white-space: nowrap; padding-inline-start: 10px; }
.cup-fixed, .cup-totals { margin: 0; font-size: .78rem; color: var(--ink-soft); }
.cup-notes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: auto; padding-top: 4px; }
.cup-notes-label { font-size: .72rem; color: var(--ink-mute); margin-inline-end: 4px; }
.cup-note { background: var(--tint-3); color: var(--green-dark); border-radius: 999px; padding: 3px 10px; font-size: .75rem; }
@media (max-width: 640px) { .cupping-analysis { padding: 20px 18px; } .cup-card { padding: 16px; } }
.cup-table thead th:last-child { white-space: nowrap; padding-inline-start: 10px; }

/* 🆕 22/10/2026 — Thư viện cà phê: link đầu trang + section giới thiệu 3 bài (giữa #handbook và #order) */
.header-lib-link { margin-inline-start: auto; margin-inline-end: 12px; font-weight: 600; font-size: .9rem; color: var(--green-dark); text-decoration: none; padding: 6px 4px; border-bottom: 2px solid transparent; }
.header-lib-link:hover { border-bottom-color: var(--gold); }
.library-intro { max-width: 62ch; margin: -14px 0 28px; color: var(--ink-mute); }
.library-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.library-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; }
.library-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(27,94,32,.16); }
.library-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.library-card-body { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; flex: 1; }
.library-card-title { font-weight: 700; font-size: 1.02rem; line-height: 1.35; color: var(--green-ink); }
.library-card-more { margin-top: auto; font-size: .85rem; font-weight: 600; color: var(--gold); }
.library-note { margin: 16px 0 0; font-size: .82rem; color: var(--ink-mute); font-style: italic; }
.library-cta { margin-top: 28px; }
@media (max-width: 860px) { .library-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .header-lib-link { font-size: .82rem; margin-inline-end: 0; } }