/* Red River — website B2B v1
   Màu, font, bo góc lấy đúng từ design-tokens.css (bộ bàn giao thiết kế). */
:root {
  --rr-red: #ED1A3E;
  --rr-red-ink: #C8102E;
  --rr-red-hover: #9E0B23;
  --rr-red-tint: #FDECEF;
  --rr-ink: #333132;
  --rr-muted: #5E5A5B;
  --rr-line: #E6E2DF;
  --rr-line-strong: #D9D4D0;
  --rr-paper: #FFFFFF;
  --rr-warm: #FAF8F6;
  --rr-placeholder: #F3F0EC;
  --rr-olive: #8FAE5E;
  --rr-olive-ink: #4A6328;
  --rr-olive-tint: #EEF3E6;
  --rr-olive-soft: #E2EAD6;
  --rr-olive-line: #DDE6CF;
  --rr-olive-text: #3F4A33;
  --rr-progress-bg: #FFF3E0;
  --rr-progress-ink: #8A4B00;
  --rr-error-bg: #FFF4F6;
  --rr-error-ink: #8C0A20;
  --rr-font-heading: 'Source Serif 4', Georgia, 'Noto Sans TC', serif;
  --rr-font-body: 'Be Vietnam Pro', 'Noto Sans TC', system-ui, sans-serif;
  --rr-font-zh: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --rr-h1: clamp(36px, 4.6vw, 60px);
  --rr-h2: clamp(30px, 3.2vw, 42px);
  --rr-section-y: clamp(56px, 7vw, 104px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--rr-font-body); color: var(--rr-ink); background: var(--rr-paper); font-size: 16px; line-height: 1.6; overflow-x: hidden; }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
h1, h2, h3 { font-family: var(--rr-font-heading); font-weight: 600; letter-spacing: -0.01em; margin: 0; }
p { margin: 0; }
a { color: var(--rr-red-ink); }
a:hover { color: var(--rr-red-hover); }
:lang(zh-Hant) body, :lang(zh-Hant) { font-family: var(--rr-font-zh); }
:lang(zh-Hant) h1, :lang(zh-Hant) h2, :lang(zh-Hant) h3, :lang(zh-Hant) .serif { font-family: var(--rr-font-zh); line-height: 1.3; letter-spacing: 0; }
:focus-visible { outline: 3px solid #F6C3CD; outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--rr-ink); color: #fff; padding: 10px 16px; border-radius: 8px; }
.skip:focus { top: 12px; color: #fff; }

/* ---------- Layout ---------- */
.wrap { max-width: 1240px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.sec { padding-top: var(--rr-section-y); padding-bottom: var(--rr-section-y); }
.sec-sm { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; flex-wrap: wrap; }
.gap-8 { gap: 8px; } .gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; } .gap-40 { gap: 40px; } .gap-48 { gap: 48px; } .gap-56 { gap: 56px; }
.center { align-items: center; }
.between { justify-content: space-between; }
.grow { min-width: 0; }
.grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 260px), 100%), 1fr)); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.span-2 { grid-column: span 2; }
.bg-warm { background: var(--rr-warm); border-top: 1px solid var(--rr-line); border-bottom: 1px solid var(--rr-line); }
.bg-olive { background: var(--rr-olive-tint); }
.bg-olive-soft { background: #F6F8F2; border-top: 1px solid var(--rr-olive-line); border-bottom: 1px solid var(--rr-olive-line); }
.bg-dark { background: var(--rr-ink); color: #fff; }
.bg-red { background: var(--rr-red); color: #fff; }
.muted { color: var(--rr-muted); }
.olive-text { color: var(--rr-olive-text); }
.small { font-size: 14px; }
.xsmall { font-size: 13px; }
.bold { font-weight: 600; }
.bolder { font-weight: 700; }
.italic { font-style: italic; }
.mw-560 { max-width: 560px; } .mw-640 { max-width: 640px; } .mw-680 { max-width: 680px; } .mw-720 { max-width: 720px; } .mw-860 { max-width: 860px; } .mw-900 { max-width: 900px; }

/* ---------- Type ---------- */
.eyebrow { font-size: 13px; font-weight: 600; color: var(--rr-red-ink); text-transform: uppercase; letter-spacing: 0.08em; }
.eyebrow--olive { color: var(--rr-olive-ink); }
.eyebrow--pink { color: #FF8FA2; }
.h1 { font-size: var(--rr-h1); line-height: 1.08; }
.h1-page { font-size: clamp(36px, 4.4vw, 58px); line-height: 1.1; }
.h2 { font-size: var(--rr-h2); line-height: 1.15; }
.h2-sm { font-size: clamp(28px, 3vw, 38px); line-height: 1.15; }
.h2-xs { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; }
.h3 { font-size: 22px; line-height: 1.25; }
.lead { font-size: clamp(17px, 1.5vw, 19px); color: var(--rr-muted); }
.serif { font-family: var(--rr-font-heading); }
.stat { font-family: var(--rr-font-heading); font-size: 40px; font-weight: 600; color: var(--rr-red-ink); line-height: 1.1; }
.stat--olive { color: var(--rr-olive-ink); font-size: clamp(28px, 3vw, 40px); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 28px; border-radius: 999px; font-weight: 600; font-size: 16px; text-decoration: none; border: 0; font-family: inherit; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.btn--md { min-height: 48px; padding: 0 24px; font-size: 15px; }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 14px; }
.btn--primary { background: var(--rr-red-ink); color: #fff; }
.btn--primary:hover { background: var(--rr-red-hover); color: #fff; }
.btn--outline { border: 1.5px solid var(--rr-ink); color: var(--rr-ink); background: #fff; }
.btn--outline:hover { background: var(--rr-ink); color: #fff; }
.btn--olive { background: var(--rr-olive-ink); color: #fff; }
.btn--olive:hover { background: #33461B; color: #fff; }
.btn--olive-outline { border: 1.5px solid var(--rr-olive-ink); color: var(--rr-olive-ink); background: transparent; }
.btn--olive-outline:hover { background: var(--rr-olive-ink); color: #fff; }
.btn--white { background: #fff; color: #B00D28; font-weight: 700; }
.btn--white:hover { background: #FDECEF; color: #8C0A20; }
.btn--dark { background: var(--rr-ink); color: #fff; }
.btn--dark:hover { background: #1E1D1D; color: #fff; }
.btn[disabled] { background: #8E5A63; cursor: wait; }
.link-arrow { font-weight: 600; font-size: 15px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; align-self: flex-start; }
.link-arrow:hover { text-decoration: underline; }

/* ---------- Pills / tags ---------- */
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; align-self: flex-start; }
.pill--red { background: var(--rr-red); color: #fff; }
.pill--tint { background: var(--rr-red-tint); color: var(--rr-red-ink); }
.pill--olive { background: var(--rr-olive-tint); color: var(--rr-olive-ink); }
.pill--grey { background: #F1EFEC; color: var(--rr-muted); }
.pill--progress { background: var(--rr-progress-bg); color: var(--rr-progress-ink); }
.pill--hero { padding: 6px 14px; font-size: 13px; }
.chip { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--rr-line-strong); font-size: 14px; }
.chip--solid { padding: 8px 16px; background: var(--rr-ink); color: #fff; border-color: var(--rr-ink); font-weight: 600; }
.chip--outline { padding: 8px 16px; border-color: #B9B1AA; font-weight: 600; }

/* Ghi chú nội dung chờ chị Hiền bổ sung (giữ đúng quy ước thiết kế) */
.ph { display: inline; background: #FFF8E8; color: #7A4A00; border-radius: 4px; padding: 0 4px; font-weight: 600; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ---------- Cards ---------- */
.card { background: #fff; border: 1px solid var(--rr-line); border-radius: 20px; padding: 32px; }
.card--pad24 { padding: 24px; }
.card--red { border: 1.5px solid var(--rr-red); }
.card-link { text-decoration: none; color: var(--rr-ink); display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s; }
.card-link:hover { color: var(--rr-ink); box-shadow: 0 10px 28px rgba(51,49,50,0.10); transform: translateY(-2px); }
.icon-box { width: 48px; height: 48px; border-radius: 14px; background: var(--rr-red-tint); color: var(--rr-red-ink); display: inline-flex; align-items: center; justify-content: center; flex: none; }

/* Khung ảnh/video thật — chờ ảnh của chị Hiền */
.ph-box { background: var(--rr-placeholder); border: 1px dashed #B9B1AA; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--rr-muted); font-size: 13px; text-align: center; padding: 16px; width: 100%; }
.ph-box--olive { background: var(--rr-olive-soft); border-color: var(--rr-olive); color: var(--rr-olive-text); }
.ph-box--dark { background: #262425; border-color: #6B6667; color: #D9D4D0; }
.ph-box strong { font-weight: 600; }
.ar-5-4 { aspect-ratio: 5 / 4; } .ar-4-3 { aspect-ratio: 4 / 3; } .ar-16-9 { aspect-ratio: 16 / 9; } .ar-16-10 { aspect-ratio: 16 / 10; } .ar-1 { aspect-ratio: 1; } .ar-4-5 { aspect-ratio: 4 / 5; }
.r-24 { border-radius: 24px; } .r-18 { border-radius: 18px; } .r-16 { border-radius: 16px; }

/* ---------- Header ---------- */
.site-header { background: #fff; border-bottom: 1px solid var(--rr-line); position: sticky; top: 0; z-index: 40; }
.site-header .bar { height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; flex: none; }
.brand img { height: 46px; width: auto; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font-size: 15px; font-weight: 500; color: var(--rr-ink); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav a:hover { color: var(--rr-red-ink); }
.nav a[aria-current="page"] { font-weight: 600; color: var(--rr-red-ink); border-bottom-color: var(--rr-red); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.lang { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rr-line-strong); background: #fff; color: var(--rr-ink); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.lang-btn:hover { border-color: var(--rr-ink); }
.lang-menu { position: absolute; right: 0; top: 52px; width: 220px; background: #fff; border: 1px solid var(--rr-line); border-radius: 14px; box-shadow: 0 12px 32px rgba(51,49,50,0.16); padding: 6px; display: none; flex-direction: column; z-index: 60; }
.lang.open .lang-menu { display: flex; }
.lang-menu a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 6px 12px; border-radius: 10px; color: var(--rr-ink); text-decoration: none; font-size: 15px; font-weight: 500; }
.lang-menu a:hover { background: var(--rr-warm); color: var(--rr-ink); }
.lang-menu .note { display: block; font-size: 12px; color: var(--rr-muted); }
.cta-wide { min-height: 44px; padding: 0 20px; font-size: 15px; }
.burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--rr-line-strong); background: #fff; color: var(--rr-ink); cursor: pointer; }
.mobile-nav { display: none; border-top: 1px solid var(--rr-line); padding: 8px 24px 20px; flex-direction: column; background: #fff; }
.mobile-nav.open { display: flex; }
.mobile-nav a.m-link { display: flex; align-items: center; min-height: 52px; font-size: 17px; font-weight: 600; color: var(--rr-ink); text-decoration: none; border-bottom: 1px solid #F0ECE9; }
.mobile-nav a.m-link[aria-current="page"] { color: var(--rr-red-ink); }
.mobile-nav .btn { margin-top: 16px; }
@media (max-width: 980px) {
  .nav, .cta-wide { display: none; }
  .burger { display: inline-flex; }
}
@media (max-width: 420px) {
  .brand img { height: 38px; }
  .site-header .bar { gap: 10px; }
  .lang-btn { padding: 0 10px; gap: 6px; }
}
.draft-bar { background: var(--rr-progress-bg); color: #5C3300; font-size: 13px; text-align: center; padding: 6px 16px; border-bottom: 1px solid #F3C98B; }

/* ---------- Footer ---------- */
.site-footer { background: var(--rr-ink); color: #E9E6E4; font-size: 15px; }
.site-footer .inner { padding-top: 64px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 40px; }
.site-footer a { color: #E9E6E4; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.f-col-title { font-size: 13px; font-weight: 600; color: #fff; text-transform: uppercase; letter-spacing: 0.08em; padding-bottom: 6px; }
.f-nav a { min-height: 36px; display: flex; align-items: center; }
.f-bottom { border-top: 1px solid #4A4748; padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; color: #B5AFAB; }
.f-bottom a { color: #B5AFAB; }

/* Nút chat nổi */
.quick-chat { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; z-index: 50; }
.qc { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: 0 6px 20px rgba(0,0,0,0.18); }
.qc--zalo { background: #fff; color: var(--rr-ink); border: 1px solid var(--rr-line); }
.qc--zalo:hover { color: var(--rr-ink); background: var(--rr-warm); }
.qc--wa { min-height: 52px; padding: 0 20px; background: var(--rr-red-ink); color: #fff; box-shadow: 0 6px 20px rgba(200,16,46,0.35); }
.qc--wa:hover { background: var(--rr-red-hover); color: #fff; }
@media (max-width: 600px) {
  .quick-chat { right: 12px; bottom: 12px; gap: 8px; }
  .qc { min-height: 44px; padding: 0 14px; font-size: 14px; gap: 6px; }
}

/* ---------- Components ---------- */
.hero-badge { position: absolute; left: 20px; bottom: 20px; background: #fff; border-radius: 16px; padding: 16px 20px; box-shadow: 0 8px 28px rgba(51,49,50,0.14); display: flex; flex-direction: column; gap: 4px; max-width: calc(100% - 40px); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 32px; padding-top: 40px; padding-bottom: 40px; }
.prod-card { border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid var(--rr-line); }
.prod-card.core { border: 1.5px solid var(--rr-red); }
.prod-card .ph-box { border-radius: 0; border: 0; position: relative; }
.prod-card .body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.region { font-size: 13px; color: var(--rr-olive-ink); font-weight: 600; }
.timeline-olive { display: flex; flex-direction: column; border-left: 3px solid var(--rr-olive); }
.timeline-olive > div { padding: 10px 0 10px 20px; display: flex; flex-direction: column; }
.spec-list { display: flex; flex-direction: column; border: 1px solid var(--rr-line); border-radius: 16px; overflow: hidden; }
.spec-list > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 14px 20px; border-bottom: 1px solid var(--rr-line); }
.spec-list > div:last-child { border-bottom: 0; }
.cert { border: 1px solid var(--rr-line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.quote { margin: 0; font-family: var(--rr-font-heading); font-size: 20px; line-height: 1.5; }
.mk-label { font-size: 13px; font-weight: 600; color: var(--rr-muted); width: 130px; }
.principle { border-top: 3px solid var(--rr-red); padding-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.dl { margin: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rr-line); border-radius: 16px; overflow: hidden; }
.dl > div { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 14px 20px; border-bottom: 1px solid var(--rr-line); }
.dl > div:last-child { border-bottom: 0; }
.dl dt { width: 160px; color: var(--rr-muted); font-size: 14px; }
.dl dd { margin: 0; font-weight: 600; flex: 1 1 200px; }
.milestones { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; border-left: 2px solid var(--rr-line); }
.milestones li { position: relative; padding: 0 0 24px 28px; }
.milestones li:last-child { padding-bottom: 0; }
.milestones .dot { position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--rr-red); }
.milestones .dot--open { background: #fff; border: 2px solid var(--rr-red); }
.milestones .when { font-size: 13px; font-weight: 600; color: var(--rr-red-ink); }

/* Bảng thông số */
.table-wrap { overflow-x: auto; border: 1px solid var(--rr-line); border-radius: 16px; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; vertical-align: top; }
.spec-table { min-width: 420px; font-size: 15px; }
.spec-table caption { text-align: left; padding: 14px 18px 0; font-weight: 700; font-size: 14px; color: var(--rr-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.spec-table thead th { padding: 12px 18px; border-bottom: 1px solid var(--rr-line); font-size: 13px; color: var(--rr-muted); font-weight: 600; }
.spec-table tbody th, .spec-table tbody td { padding: 12px 18px; border-bottom: 1px solid #F0ECE9; }
.spec-table tbody th { font-weight: 600; }
.spec-table tbody tr:last-child th, .spec-table tbody tr:last-child td { border-bottom: 0; }
.spec-table td.note { color: var(--rr-muted); }
.form-tile { background: var(--rr-warm); border: 1px solid var(--rr-line); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.form-tile--link { background: var(--rr-red-tint); border-color: #F6C3CD; text-decoration: none; color: var(--rr-ink); }
.form-tile--link:hover { color: var(--rr-ink); border-color: var(--rr-red-ink); }
.mini-spec { border-top: 1px solid var(--rr-line); padding-top: 10px; }
.mini-spec .k { display: block; font-size: 13px; color: var(--rr-muted); }
.mini-spec .v { font-weight: 600; }
.cat-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--rr-line-strong); color: var(--rr-ink); font-size: 15px; font-weight: 600; text-decoration: none; }
.cat-nav a:hover { border-color: var(--rr-ink); color: var(--rr-ink); }
.cat-nav a.on { background: var(--rr-ink); color: #fff; border-color: var(--rr-ink); }
.oil-table { font-size: 15px; }
.oil-table th, .oil-table td { padding: 12px 0; border-top: 1px solid #F0ECE9; }
.oil-table tr:last-child th, .oil-table tr:last-child td { border-bottom: 1px solid #F0ECE9; }
.oil-table th { font-weight: 600; width: 50%; padding-right: 12px; }
.note-warn { display: flex; gap: 14px; align-items: flex-start; background: var(--rr-progress-bg); border: 1px solid #F3C98B; border-radius: 16px; padding: 18px 22px; color: #5C3300; }

/* Origin */
.region-card { background: #fff; border: 1px solid var(--rr-olive-line); border-radius: 18px; padding: 20px; display: flex; gap: 16px; align-items: flex-start; }
.pin { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--rr-olive); display: inline-flex; align-items: center; justify-content: center; }
.pin--dark { background: var(--rr-olive-ink); }
.steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px; }
.steps li { background: #fff; border: 1px solid var(--rr-olive-line); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.steps li.last { background: var(--rr-olive-ink); border-color: var(--rr-olive-ink); color: #fff; }
.steps .n { width: 36px; height: 36px; border-radius: 50%; background: var(--rr-olive-tint); color: var(--rr-olive-ink); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.steps li.last .n { background: #fff; }
.steps .who { margin-top: auto; font-size: 12px; font-weight: 600; color: var(--rr-olive-ink); }
.steps li.last .who { color: #fff; }
.steps li.last .muted { color: #E7EEDD; }
.trace { border: 1px solid var(--rr-olive-line); border-radius: 28px; overflow: hidden; display: flex; flex-wrap: wrap; }
.trace > div { flex: 1 1 420px; padding: clamp(24px, 4vw, 44px); display: flex; flex-direction: column; gap: 16px; }
.trace > div + div { background: var(--rr-warm); border-left: 1px solid var(--rr-olive-line); }
.check-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; }
.check-list svg { flex: none; margin-top: 2px; }
.prosper { flex: 1 1 240px; background: #fff; border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.prosper-arrow { display: flex; align-items: center; justify-content: center; color: var(--rr-olive-ink); font-size: 24px; padding: 0 4px; }
.map-box { background: var(--rr-olive-soft); border: 1px solid var(--rr-olive-line); border-radius: 24px; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.map-box svg { width: 100%; height: auto; }

/* Founder */
.founder { display: flex; flex-wrap: wrap; gap: 48px; align-items: stretch; background: var(--rr-warm); border: 1px solid var(--rr-line); border-radius: 28px; padding: clamp(24px, 4vw, 56px); }
.founder-quote { font-family: var(--rr-font-heading); font-size: clamp(22px, 2.2vw, 28px); line-height: 1.45; }

/* Video (YouTube lazy) */
.yt { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #262425; border: 1px dashed #6B6667; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-btn { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #D9D4D0; font-size: 14px; text-align: center; padding: 24px; text-decoration: none; background: none; border: 0; font-family: inherit; cursor: pointer; width: 100%; }
.yt-btn:hover { color: #fff; }
.yt-play { width: 72px; height: 72px; border-radius: 50%; background: var(--rr-red); display: inline-flex; align-items: center; justify-content: center; transition: transform .15s; }
.yt-btn:hover .yt-play { transform: scale(1.06); }

/* ---------- Contact form ---------- */
.form-card { background: #fff; border: 1px solid var(--rr-line); border-radius: 24px; padding: clamp(20px, 3.5vw, 40px); }
.form-card fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.form-card legend { font-weight: 700; font-size: 15px; padding: 0 0 10px; }
.type-btn { min-height: 48px; padding: 0 20px; border-radius: 12px; border: 1px solid var(--rr-line-strong); background: #fff; color: var(--rr-ink); font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.type-btn[aria-pressed="true"] { border: 2px solid var(--rr-red-ink); background: var(--rr-red-tint); color: var(--rr-red-hover); font-weight: 600; }
.check-tile { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border: 1px solid var(--rr-line-strong); border-radius: 12px; cursor: pointer; }
.check-tile input { width: 20px; height: 20px; accent-color: var(--rr-red-ink); flex: none; }
.check-tile:has(input:checked) { border-color: var(--rr-red-ink); background: #FFF9FA; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-weight: 600; font-size: 14px; }
.req { color: var(--rr-red-ink); }
.input { min-height: 48px; padding: 0 14px; border: 1px solid #BDB5AE; border-radius: 12px; background: #fff; font-family: inherit; font-size: 16px; color: var(--rr-ink); width: 100%; min-width: 0; }
select.input { padding: 0 10px; }
textarea.input { padding: 12px 14px; resize: vertical; line-height: 1.5; min-height: 120px; }
.input:focus { outline: 3px solid #F6C3CD; outline-offset: 1px; border-color: var(--rr-red-ink); }
.qty-row { display: flex; gap: 8px; }
.qty-row .input:first-child { flex: 1 1 auto; }
.qty-row select { flex: 0 0 140px; }
.err-msg { display: none; font-size: 13px; color: var(--rr-error-ink); font-weight: 600; }
.has-error .input:not(select[name="unit"]), .has-error .check-tile { border-color: #B00D28; border-width: 2px; }
.has-error .err-msg { display: block; }
.alert-err { border: 1px solid #F2B8C2; background: var(--rr-error-bg); border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@keyframes rrspin { to { transform: rotate(360deg); } }
.spin { animation: rrspin 0.8s linear infinite; }
.chan { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 20px; border-radius: 16px; font-weight: 600; text-decoration: none; flex-wrap: wrap; }
.chan--wa { background: var(--rr-red-ink); color: #fff; }
.chan--wa:hover { background: var(--rr-red-hover); color: #fff; }
.chan--zalo { background: #fff; color: var(--rr-ink); }
.chan--zalo:hover { color: var(--rr-ink); background: var(--rr-warm); }
.chan--mail { border: 1px solid #6B6667; color: #fff; }
.chan--mail:hover { color: #fff; border-color: #fff; }
.num-dot { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--rr-red-tint); color: var(--rr-red-ink); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }

/* Blog */
.filter-btn { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--rr-line-strong); background: #fff; color: var(--rr-ink); font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.filter-btn[aria-pressed="true"] { background: var(--rr-ink); color: #fff; border-color: var(--rr-ink); font-weight: 600; }
.empty { border: 1px dashed var(--rr-line-strong); border-radius: 28px; padding: clamp(32px, 6vw, 72px) 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; background: var(--rr-warm); }
.empty-icon { width: 72px; height: 72px; border-radius: 50%; background: #fff; border: 1px solid var(--rr-line); display: inline-flex; align-items: center; justify-content: center; color: var(--rr-red-ink); }

/* Privacy */
.toc { flex: 0 1 260px; display: flex; flex-direction: column; gap: 2px; border-left: 2px solid var(--rr-line); padding-left: 16px; align-self: flex-start; }
.toc a { color: var(--rr-ink); text-decoration: none; min-height: 36px; display: flex; align-items: center; }
.toc a:hover { color: var(--rr-red-ink); }
.legal { flex: 999 1 560px; min-width: 0; max-width: 760px; display: flex; flex-direction: column; gap: 28px; line-height: 1.7; }
.legal section { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 100px; }

@media (max-width: 560px) {
  .grid-2 { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .trace > div + div { border-left: 0; border-top: 1px solid var(--rr-olive-line); }
  .card { padding: 24px; }
  .prosper-arrow { width: 100%; transform: rotate(90deg); }
  .qty-row select { flex-basis: 120px; }
  .mk-label { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}