/* myFNB landing page styles.
   Single source for every size and colour on the page: markup carries class names only.
   Values follow 01-tokens.md and 02-landing-page.md. Media queries override plain classes,
   so no !important is needed anywhere in this file. Keep it that way. */

:root {
  /* Bảng màu lấy từ bản vẽ `design/myfnb-landing-page/parts/landing.css` (cam đất của ngành ăn
     uống). Tên thẻ giữ theo khuôn myHRM để mọi luật bố cục dưới đây dùng lại được nguyên.
     🔴 Khai ĐỦ ở đây, giá trị đỡ trong `var()` chỉ là lưới an toàn chứ không phải chỗ định nghĩa:
     bẫy myHRM trả giá 23/09/2026 là thẻ dùng mà chưa khai, nền sáng đúng màu nên không ai biết,
     tới nền tối thì chữ đỏ còn 2,09. */
  --page: #FAF7F5;
  --page-blur: rgba(250,247,245,0.92);
  --surface: #FFFFFF;
  --surface-2: #F5F0EC;
  --border: #E4D9D2;
  --border-strong: #D6C6BD;
  --rule: #E4D9D2;
  /* 🔴 Nền hàng rê chuột ở nền sáng là TRẮNG, không phải sắc đậm hơn nền trang như myHRM: bên vẽ
     đo `#C4470A` trên `#F5F0EC` chỉ ra 4,36, trượt ngưỡng 4,5 của chữ "Xem chi tiết"; lên trắng
     thì 4,94 (tờ `design/myfnb-landing-page/07-doi-chieu-khuon-myhrm-trang-tinh-nang.md`). */
  --row-hover: #FFFFFF;
  --sh-card: rgba(36,26,20,0.06);
  --text: #241A14;
  --text-2: #5E504A;
  --text-3: #7A6B62;
  --action: #C4470A;
  --action-on: #FFFFFF;
  --action-soft: #FFF4EA;
  --brand: #E0762A;
  /* Nút gọi việc giữ MỘT cặp màu ở cả hai nền, bản vẽ đo ra `#C4470A` chữ trắng ở nền tối lẫn
     nền sáng. Dùng `--action` thì nền tối đổi sang `#EE8449`, chữ trắng chỉ còn 2,61. */
  --cta: #C4470A;
  --cta-on: #FFFFFF;
  --action-text: #C4470A;
  --focus: rgba(224,118,42,0.24);
  --hero: #241A14;
  /* Thẻ tối của khối 05 giữ nguyên một mã ở CẢ HAI nền - bản vẽ đo ra `#241A14` ở nền sáng lẫn
     nền tối, nên không mượn `--hero` (nền tối đổi thành `#0F0B0B` thì thẻ chìm vào trang). */
  --panel: #241A14;
  --panel-text-2: #D6C6BD;
  --panel-accent: #F0A87F;
  --panel-rule: #F7F1ED;
  --panel-row: rgba(255,255,255,0.06);
  --panel-row-border: rgba(255,255,255,0.12);
  --hero-rule: #3A2A20;
  --hero-border: #4C382C;
  --hero-text-2: #EFE3DB;
  --hero-accent: #F3CBAB;
  --hero-cta: #E0762A;
  --hero-cta-text: #241A14;
  --hero-outline: #6A5044;
  --hero-label: #C9B4A7;
  --shell: min(1200px, 100%);
  --gutter: 24px;
  --band: clamp(64px, 8vw, 104px);
  /* Bộ trạng thái của các khung điện thoại giả lập, lấy đúng bộ của bản vẽ myFNB. */
  --danger: #8F1C16;
  --danger-on: #FFFFFF;
  --danger-text: #8F1C16;
  --success: #0F5730;
  --success-text: #0F5730;
  --success-bg: #E7F5EE;
  --info: #1E4F86;
  --info-text: #1E4F86;
  --info-bg: #EDF3FB;
  --warning: #6B4A00;
  --warning-text: #6B4A00;
  --warning-bg: #FDF4DE;
  color-scheme: light;
}

html[data-theme="dark"] {
  --page: #141010;
  --page-blur: rgba(20,16,16,0.92);
  --surface: #1E1917;
  --surface-2: #282220;
  --border: #332B27;
  --border-strong: #473D37;
  --rule: #332B27;
  --row-hover: var(--surface-2);
  --sh-card: rgba(0,0,0,0.45);
  --text: #F7F1ED;
  --text-2: #C4B4AB;
  --text-3: #A2938B;
  --action: #EE8449;
  --action-on: #241A14;
  --action-soft: #33211A;
  --brand: #E0762A;
  --cta: #C4470A;
  --cta-on: #FFFFFF;
  --action-text: #FF9A63;
  --focus: rgba(238,132,73,0.35);
  --hero: #0F0B0B;
  --panel: #241A14;
  --panel-text-2: #D6C6BD;
  --panel-accent: #F0A87F;
  --panel-rule: #F7F1ED;
  --panel-row: rgba(255,255,255,0.06);
  --panel-row-border: rgba(255,255,255,0.12);
  --hero-rule: #332B27;
  --hero-border: #473D37;
  --hero-text-2: #E3D6CE;
  --hero-accent: #F3CBAB;
  --hero-cta: #EE8449;
  --hero-cta-text: #241A14;
  --hero-outline: #6A5044;
  --hero-label: #C4B4AB;
  /* Bậc CHỮ ở nền tối lấy đúng bộ của vỏ (`saas/plugins/saas/resources/js/styles/tokens.css`)
     để cả nhà một bảng màu, không tự pha màu mới.
     🔴 Mảng TÔ ĐẦY phải đổi mực: chữ trắng trên sắc nhạt chỉ còn 2,26 nên huy hiệu đọc `--danger-on`. */
  --danger: #F1938A;
  --danger-on: #141010;
  --danger-text: #F1938A;
  --success: #5EBB8F;
  --success-text: #5EBB8F;
  --success-bg: rgba(94,187,143,0.18);
  --info: #66BAD5;
  --info-text: #66BAD5;
  --info-bg: rgba(102,186,213,0.18);
  --warning: #F0A85A;
  --warning-text: #F0A85A;
  --warning-bg: rgba(240,168,90,0.18);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

a { color: var(--action-text); }
a:hover { color: var(--action); }

.lnk { color: inherit; text-decoration: none; }

summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

input:focus, select:focus, textarea:focus {
  border-color: var(--action);
  box-shadow: 0 0 0 3px var(--focus);
  outline: none;
}

/* Shared layout ------------------------------------------------------------ */

/* 1180px là bề ngang NỘI DUNG, lề ngoài nằm NGOÀI con số ấy. Lấy 1180 làm bề ngang ngoài thì
   mọi khối co lại đúng hai lề. 🪤 Lề là số CỐ ĐỊNH 24px, không phải `clamp` co theo khổ: bản vẽ
   đo ra 24px ở cả 1440, 1024 lẫn 390 (soi 24/09/2026), để `clamp(18px,3.6vw,44px)` thì khổ rộng
   lệch 20px mỗi bên còn khổ 390 lệch 6px. */
.shell {
  max-width: calc(1180px + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Sections below the fold are skipped during the first paint and drawn when scrolled into
   view. contain-intrinsic-size keeps the scrollbar honest so nothing jumps. The hero and the
   top bar are left out on purpose: they are visible immediately. */
.band { padding: var(--band) 0; }

/* Mảng Tính năng chính dày hơn 4px ở trần so với tám mảng kia. Bản vẽ khai đúng như vậy
   (`clamp(64px, 8vw, 108px)` chỉ ở mảng này), nên giữ theo bản vẽ chứ không san bằng. */
#features.band { padding: clamp(64px, 8vw, 108px) 0; }

/* Sticky top bar is 66px tall, so anchored sections need clearance or their heading
   lands underneath it after a jump. */
section[id] { scroll-margin-top: 78px; }

.band-navy {
  background: var(--hero);
  color: #FFFFFF;
}

/* 🔴 NHỊP NỀN CỦA BẢN VẼ, đo 24/09/2026 trên `myFNB - LANDING PAGE.dc.html` ở cả ba khổ và cả hai
   nền: khối 01 Tính năng chính, 03 Triển khai, 06 Dùng thử và 07 Hỏi đáp đứng trên GIẤY TRẮNG
   `--surface`, bốn khối còn lại đứng trên nền trang. Thiếu lớp này thì cả trang phẳng một màu kem,
   mất hẳn nhịp sáng tối mà anh Trân soi bằng mắt. */
.band-paper { background: var(--surface); }

.num { font-variant-numeric: tabular-nums; }

.eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--action-text);
}

/* Handover layout: the block number sits in its own left column and the label plus heading
   are indented next to it. Stacking them makes every block start 83px further left than
   the drawing at 1440px. Below 720px the number goes back on top of the text. */
.section-head {
  border-top: 2px solid var(--text);
  padding-top: 20px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(16px, 2.2vw, 30px);
  align-items: start;
  margin-bottom: clamp(20px, 2.1vw, 30px);
}
.section-head > .section-no { grid-row: 1 / span 3; }
.section-head > :not(.section-no) { grid-column: 2; }
/* The label drops to sit level with the foot of the number, as in the drawing. */
.section-head > .eyebrow { margin-top: clamp(15px, 1.9vw, 27px); }

.section-no {
  font-size: clamp(30px, 3vw, 44px);
  /* 🔴 Bậc chữ 400 chứ KHÔNG phải 700: bản vẽ không khai `font-weight` cho ô số nên nó ăn bậc
     thường. Tờ `11` của bên vẽ chốt hai trang một công thức, cửa saas đo 23/09 bắt đúng chỗ này. */
  font-weight: 400;
  line-height: 1;
  color: var(--action);
}

.h2 {
  margin: 10px 0 0;
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -1px;
  text-wrap: pretty;
}

/* Đúng MỘT tiêu đề chạy cỡ nhỏ hơn: khối Dữ liệu và quyền, câu dài nhất trang. Bản vẽ khai riêng
   cho nó chứ đây không phải luật chung, nên lớp này chỉ dùng ở đó. */
.h2-sm { font-size: clamp(24px, 3.2vw, 36px); line-height: 1.18; letter-spacing: -0.9px; }

.lead {
  margin: 12px 0 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-2);
}

/* Câu dẫn của mảng Tính năng chính chạy to hơn một bậc, bản vẽ khai riêng cho đúng mảng này. */
#features .section-head .lead { font-size: 17px; }

/* Rows separated by hairlines, the only grouping device the design allows. */
/* Danh sách quy tắc dài hơn cột tiêu đề, nên tiêu đề dính đầu để khách cuộn tới quy tắc thứ
   sáu vẫn biết đang đọc mục nào. Chỉ dính ở khổ rộng, khổ hẹp hai cột xếp dọc thì vô nghĩa. */
@media (min-width: 900px) {
  .feature-rules .section-head { position: sticky; top: 24px; align-self: start; }
}

.rule-list { display: flex; flex-direction: column; }
.rule-row { border-top: 1px solid var(--rule); padding: 15px 0; }
.rule-row b { font-size: 16px; font-weight: 600; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(28px, 4vw, 60px); align-items: center; }
/* Hàng dẫn sang mục lục tính năng. Kẻ ngang trên và dưới để nó đọc như một hàng của lưới phía
   trên chứ không phải một cái nút lạc lõng. Khổ hẹp giữ vùng bấm cao ít nhất 72px. */
.index-link { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; margin-top: 26px; padding: 20px 14px; margin-left: -14px; margin-right: -14px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); color: inherit; text-decoration: none; transition: background-color 0.15s ease; }
.index-link:hover, .index-link:focus-visible { background: var(--row-hover); }
.index-link b { display: block; font-size: clamp(19px, 1.8vw, 23px); font-weight: 600; }
.index-link em { display: block; margin-top: 6px; font-size: 14px; font-style: normal; line-height: 1.55; color: var(--text-2); }
.index-link svg { flex-shrink: 0; color: var(--action); transition: transform 0.15s ease; }
.index-link:hover svg, .index-link:focus-visible svg { transform: translateX(4px); }

/* Hàng dẫn khi nằm trong lưới mục 02: bỏ kẻ dưới và lề trên để nó thẳng hàng với các ô cùng hàng,
   rồi ăn nốt số ô còn hở. Số ô hở do view tính sẵn theo số mảng đang bật, mỗi nhánh cột một số:
   ba cột từ 1062px, hai cột từ 677px, hẹp hơn thì một cột nên trải hết bề ngang.
   Hai mốc này bám theo chỗ lưới auto-fit thật sự đổi số cột, đo lại nếu đổi cột nhỏ nhất hoặc gap. */
.grid-6 > .index-link { grid-column: 1 / -1; margin-top: 0; padding: 22px 14px; border-bottom: 0; }
@media (min-width: 677px) { .grid-6 > .index-link { grid-column: span var(--index-span-2, 2); } }
@media (min-width: 1062px) { .grid-6 > .index-link { grid-column: span var(--index-span-3, 3); } }

.grid-wide { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 0 clamp(28px, 4vw, 56px); }

.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(24px, 3vw, 40px); }
/* Mục lục tính năng đứng riêng khỏi .grid-6 của trang chủ: cột rộng hơn vì mỗi hàng có thêm
   dòng dẫn, và có nhánh gọn cho site bật nhiều gói. */
.band:has(.grid-index) .section-head .h2 { letter-spacing: -0.7px; }
.grid-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 0 clamp(28px, 4vw, 56px); }
.grid-index.is-compact { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.grid-index.is-compact .module { padding: 13px 0; }
/* Bản vẽ để tên mảng ở 600, nhẹ hơn một bậc so với ô mảng của trang chủ. */
/* Mục lục tính năng dùng bậc 600 và KHÔNG giãn âm - bản vẽ trang tính năng khai vậy, khác với
   mảng mục lục ở trang chủ (19/700, giãn -0,3). */
.grid-index .module h3 { margin-bottom: 0; font-weight: 600; letter-spacing: 0; }

.grid-6 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }

/* Buttons ------------------------------------------------------------------ */

/* 🔴 BO GÓC: bản vẽ để nút chính 14px và ô nhập, nút phụ 12px. Trang thật từng để 6px khắp nơi,
   nhìn cứng hơn hẳn bản vẽ mà không bộ đo chữ nào bắt được (đo tay 24/09/2026). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
}

.btn-primary { height: 52px; padding: 0 24px; background: var(--cta); color: var(--cta-on); border: 1px solid var(--cta); font-size: 16.5px; font-weight: 600; }
/* Nút gọi việc trên thanh trên cùng: bản vẽ để nền `--action`, chữ hoa 13,5px bậc 700, giãn 0,8. */
.btn-navy { height: 44px; padding: 0 20px; background: var(--cta); color: var(--cta-on); border: 1px solid var(--cta); font-size: 13.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; }
.btn-outline { height: 48px; padding: 0 20px; background: transparent; color: inherit; border: 1px solid var(--border-strong); font-size: 15px; }

/* Top bar ------------------------------------------------------------------ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 66px;
  background: var(--page-blur);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.topbar-inner { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); height: 68px; }

/* Tap target stays 44px tall even though the mark itself is 28px. */
/* The 44px floor is a tap-target rule for the header link. The footer mark is not a link, so
   it keeps the drawing's 28px and the tagline sits where the drawing puts it. */
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-height: 44px; }
.footer-cols .brand { min-height: 0; }
.brand-mark { width: 28px; height: 28px; }
.brand-name { font-size: 22px; }
.brand-name b { font-weight: 700; }
.brand-name span { font-weight: 400; }

.topnav { display: flex; flex: 1; min-width: 0; height: 60px; align-items: center; gap: clamp(14px, 2vw, 30px); overflow-x: auto; scrollbar-width: none; }
.topnav::-webkit-scrollbar { display: none; }
.topnav a { display: flex; align-items: center; align-self: stretch; font-size: 13.5px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
.topnav a:hover { color: var(--action); }
/* Dải neo của trang con chỉ còn đường Hướng dẫn sử dụng: chữ thường, không giãn, không hoa. */
.topnav-sub { flex: 0 0 auto; margin-left: auto; }
.topnav-sub a { font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; }

.topbar .btn-navy { flex-shrink: 0; margin-left: auto; }

/* Hero --------------------------------------------------------------------- */

.hero { background: var(--hero); color: #FFFFFF; padding: clamp(44px, 6vw, 84px) 0 clamp(52px, 6vw, 88px); }
/* Khối đầu TRANG CON: bản vẽ để nền trang, chữ đen, nút thấp hơn trang chủ một bậc. Ghi đè phải
   đi hai lớp `.hero.hero-page` chứ không một lớp: `.hero .eyebrow` cũng hai lớp, một lớp là thua
   theo thứ tự tệp rồi chữ nhấn tụt còn 1,70 (bẫy đã trả giá ở myHRM 24/09/2026). */
.hero.hero-page { background: transparent; color: var(--text); padding: 48px 0 0; }
.hero.hero-page .crumbs { font-size: 14px; padding-bottom: 16px; }
.hero.hero-page .crumbs, .hero.hero-page .crumbs a { color: var(--text-2); }
.hero.hero-page .crumbs > span:last-child { color: var(--text); }
.hero.hero-page .eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: 2.2px; color: var(--action); }
.hero.hero-page h1 { margin-top: 16px; line-height: 1.08; letter-spacing: -1.4px; }
.hero.hero-page .hero-lead { margin-top: 16px; font-size: 17px; line-height: 1.62; color: var(--text-2); }
.hero.hero-page .hero-cta { margin-top: 22px; }
.hero.hero-page .hero-cta > a { height: 52px; padding: 0 22px; font-size: 15px; }
.hero.hero-page .btn-primary { background: var(--action); border-color: var(--action); color: var(--action-on); font-weight: 700; }
.hero.hero-page .btn-outline { border-color: var(--border-strong); color: var(--text); font-weight: 600; }
.hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(32px, 4vw, 60px); align-items: center; }

.chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  margin-bottom: 22px;
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  font-size: 13px;
  font-weight: 600;
  color: var(--hero-text-2);
}

.hero h1 {
  margin: 16px 0 0;
  font-size: clamp(27px, 3.7vw, 43px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -1.1px;
  text-wrap: balance;
}

.hero .chip + h1 { margin-top: 0; }
.hero-lead { margin: 22px 0 0; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.65; color: var(--hero-text-2); }

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
/* `white-space: nowrap`: lúc phông Be Vietnam Pro chưa tải xong, chữ đo bằng phông đỡ rộng hơn
   nên nút "Đặt lịch demo" gãy hai dòng rồi tràn khỏi ô cao 52px. */
.hero-cta > a { height: 52px; padding: 0 24px; border-radius: 14px; display: flex; align-items: center; font-size: 16px; white-space: nowrap; }
/* Nút tô của khối đầu trang đi `--action` chữ trắng bậc 600 (bản vẽ, cả hai nền). Trắng trên
   `#C4470A` ra 4,93 nên vẫn qua ngưỡng AA. */
.hero-cta .is-fill { background: var(--cta); color: var(--cta-on); font-weight: 600; }
.hero-cta .is-ghost { border: 1px solid rgba(255,255,255,0.32); color: #FFFFFF; font-weight: 600; }

.hero-points { margin-top: 6px; display: flex; flex-direction: column; }
.hero-points > div { padding: 15px 0; border-top: 1px solid var(--hero-rule); display: flex; gap: 16px; align-items: baseline; }
.hero-points b { font-size: 15px; font-weight: 400; color: var(--hero-accent); flex-shrink: 0; }
.hero-points span { font-size: 14.5px; line-height: 1.55; color: var(--hero-text-2); }

/* Two phone frames, always on one row, scaled down together on narrow screens. */
.heropair { position: relative; display: flex; flex-wrap: nowrap; justify-content: center; align-items: flex-end; gap: 10px; padding: 20px 0; }

.ph-a { width: 234px; height: 506px; position: relative; z-index: 1; flex-shrink: 0; }
.ph-a > div { transform: scale(0.6); }
.ph-b { width: 176px; height: 381px; position: relative; z-index: 1; flex-shrink: 0; margin-bottom: 34px; }
.ph-b > div { transform: scale(0.451); }

.phone-shell {
  position: absolute;
  top: 0;
  left: 0;
  width: 390px;
  height: 844px;
  transform-origin: top left;
  border-radius: 44px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.phone-light { background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text); }
.phone-dark { background: #0B1524; border: 1px solid #33496A; color: #F2F5F9; }

/* Feature blocks (section 01) ---------------------------------------------- */

.feature { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(32px, 4vw, 56px); align-items: center; padding: clamp(14px, 1.5vw, 22px) 0; }
.feature + .feature { border-top: 1px solid var(--rule); }
.feature h3 { margin: 18px 0 0; font-size: clamp(21px, 2.3vw, 27px); font-weight: 700; line-height: 1.25; letter-spacing: -0.5px; }
/* Nhãn mảng trong khối Tính năng chính là một VIÊN THUỐC nền cam nhạt, không phải chữ trơn
   (bản vẽ: 12px/600, giãn 1,8, nền `--action-soft`, bo tròn hẳn, đệm 6/12). */
/* Nền nhạt đi MỘT thẻ `--action-soft` cho cả sản phẩm: `#C4470A` trên `#FFF0E4` cũ ra 4,43,
   trượt ngưỡng 4,5 của chữ 12px; `#FFF4EA` ra 4,56. Bên vẽ chốt mã này ở tờ 25 mục 3. */
.feature .eyebrow { display: inline-block; align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: var(--action-soft); color: var(--action-text); font-size: 12px; font-weight: 600; letter-spacing: 1.8px; }
.feature p { margin: 18px 0 0; font-size: 15px; line-height: 1.65; color: var(--text-2); }
/* Bản vẽ kẻ MỘT đường trên đầu danh sách rồi để các dòng trơn, cách nhau 11px - không phải mỗi
   dòng một đường kẻ. Tờ 25 mục 4 chốt kiểu trơn cho CẢ BA mảng, khay trắng của mảng Chống thất
   thu đã bỏ. 🪤 Chấm tròn 7px là hình, không phải chữ, nên hai bộ đo chữ đều mù với nó: bản vẽ
   có chấm suốt từ đầu mà bộ đo vẫn ĐẠT. Màu chấm là `--brand`, không phải `--action`. */
.feature .rule-list { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 11px; }
.feature .rule-row { border-top: 0; padding: 0; display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.6; color: var(--text); }
.feature .rule-row::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-top: 8px; border-radius: 999px; background: var(--brand); }

/* Payroll block swaps to text first, image second, on narrow screens. */
.flip { display: flex; justify-content: center; order: var(--flip, 0); }

/* Remaining modules (section 02) ------------------------------------------- */

/* Handover layout: the icon takes its own left column and the name sits beside it, not under
   it. Stacking them pushes the name 34px left of the drawing and adds a row of height. */
.module { border-top: 1px solid var(--rule); padding: 22px 0; display: grid; grid-template-columns: 34px 1fr; align-items: start; }
.module-icon { width: 20px; height: 20px; color: var(--action); grid-row: 1 / span 3; }
.module > :not(.module-icon) { grid-column: 2; }
.module h3 { margin: 0 0 10px; font-size: 19px; font-weight: 700; letter-spacing: -0.3px; }
.module p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--text-2); }

/* Module box as a link to its own feature page. Keeps the plain box look, adds a quiet cue. */
a.module { display: block; color: inherit; text-decoration: none; }
/* Vùng bấm là CẢ hàng nên nền phải phủ hết hàng, kể cả phần lề của lưới. Padding ngang cộng
   lề âm cùng một số giữ chữ đứng nguyên chỗ cũ, chỉ nền rộng ra. */
a.module { padding-left: 14px; padding-right: 14px; margin-left: -14px; margin-right: -14px; transition: background-color 0.15s ease; }
a.module:hover, a.module:focus-visible { background: var(--row-hover); }
a.module:hover h3, a.module:focus-visible h3 { color: var(--action); }
a.module:hover .module-more, a.module:focus-visible .module-more { color: var(--action); }
a.module:focus-visible { outline: 2px solid var(--action); outline-offset: 4px; }
.module-more { display: inline-block; margin-top: 3px; font-size: 13px; font-weight: 600; color: var(--action-text); }

/* Breadcrumb line on feature pages ------------------------------------------ */

/* Breadcrumbs and the eyebrow sit on the dark hero, so they take hero colors.
   The page-level tokens are tuned for a light background and fail contrast here. */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 18px; font-size: 13.5px; color: var(--hero-text-2); }
.crumbs a { color: var(--hero-text-2); text-decoration: none; }
.crumbs a:hover { color: var(--hero-accent); }

/* Anything sitting on a navy ground takes hero colors. The page-level tokens are tuned for a
   light ground and drop to a 2.4:1 contrast ratio here. */
.hero .eyebrow { color: var(--hero-accent); }
/* Trên nền navy, teal đậm của chế độ sáng gần như chìm vào nền. Dùng teal sáng của hero và
   trả chữ về màu nền navy, đúng luật actionOn trong bộ token. */
.band-navy .btn-primary { background: var(--hero-accent); border-color: var(--hero-accent); color: var(--hero); }
.band-navy .btn-outline { border-color: var(--hero-outline); color: #FFFFFF; }

.band-navy .eyebrow { color: var(--hero-label); }
.band-navy .lead { color: #C4B4AB; }
/* Nhãn nhỏ trên tiêu đề đi màu chữ phụ `#5E504A`, không phải `#7A6B62`: bản vẽ đo 24/09/2026. */
.section-head .eyebrow { color: var(--text-2); }
/* On the navy ground the rule above a block takes the lighter outline color. */
.band-navy .section-head { border-top-color: var(--hero-outline); }
.band-navy .section-head .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0; color: #C4B4AB; }
.band-navy .section-head .h2 { margin-top: 14px; line-height: 1.2; letter-spacing: -0.7px; color: #F7F1ED; }
.band-navy .section-head .lead { font-size: 16px; line-height: 1.6; color: #C4B4AB; }

/* Thẻ tối của khối 05 Dữ liệu và quyền ------------------------------------- */

/* Bản vẽ không để khối này phẳng trên nền trang: nó nằm trong một thẻ tối bo góc, ba dòng quyền
   là ba khay nhạt nổi trên thẻ. Số đo lấy thẳng từ bản vẽ, ba khổ:
   đệm 60 / 45,06 / 30 → `clamp(30px, 4.4vw, 60px)`; khe 56 / 40,96 / 30 → `clamp(30px, 4vw, 56px)`. */
.panel-dark {
  background: var(--panel);
  color: #FFFFFF;
  border-radius: 26px;
  padding: clamp(30px, 4.4vw, 60px);
  gap: clamp(30px, 4vw, 56px);
}
.panel-dark .section-head { border-top-color: var(--panel-rule); }
.panel-dark .section-head .eyebrow { color: var(--panel-text-2); }
.panel-dark .section-no { color: var(--panel-accent); }
.panel-dark .h2 { color: #FFFFFF; }
.panel-dark .lead { color: var(--panel-text-2); }
.panel-dark .rule-list { gap: 12px; }
.panel-dark .rule-row {
  border: 1px solid var(--panel-row-border);
  border-radius: 16px;
  background: var(--panel-row);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.panel-dark .rule-row b { color: #FFFFFF; }
/* Câu dẫn trong khay quyền đi cao dòng 1,6; câu dẫn dưới tiêu đề khối vẫn 1,65 (bản vẽ). */
.panel-dark .rule-row .lead { margin: 0; line-height: 1.6; }

/* Rollout steps (section 03) ----------------------------------------------- */

.step { display: flex; gap: 18px; align-items: baseline; border-top: 1px solid var(--rule); padding: 22px 0; }
.step b { width: 74px; flex-shrink: 0; font-size: clamp(26px, 2.6vw, 36px); font-weight: 700; color: var(--action); }
/* Câu của mỗi bước giữ NGUYÊN 16px ở cả ba khổ - bản vẽ không cho nó nở theo bề ngang. */
.step span { font-size: 16px; font-weight: 600; line-height: 1.45; }

/* Comparison rows (section 04) --------------------------------------------- */

/* Ba cột chứ không phải hai cột đều nhau: tên cách làm cũ ngắn nên chiếm một cột, câu giải
   thích dài nên chiếm hai cột còn lại. Chia đều là câu giải thích xuống dòng sớm, cột trái
   thừa chỗ trống. */
/* Bản vẽ mới dựng khối này thành THẺ, không còn hàng hai cột kẻ vạch trên. Ba thẻ một hàng ở
   khổ rộng, hai thẻ ở 700-900, một thẻ từ 640 xuống - đúng `minmax(300px, 1fr)` khe 16px. */
.compare-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.compare { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.compare h3 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -0.3px; }
.compare p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }

/* Trial band (section 06) -------------------------------------------------- */

/* Câu nói rõ app dành cho ai, đứng ngay trên hai nút tải app. */
.app-note { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: var(--hero-text-2); }

/* Khay tài khoản demo, số lấy thẳng từ bản vẽ: nền `--action-soft`, bo 18, đệm 22, tên khay
   13/600 màu nhấn, nhãn nhỏ 12/400 chữ nhạt đứng TRÊN giá trị 16/600 chữ chính. */
.demo-card { margin-top: 22px; padding: 22px; border-radius: 18px; background: var(--action-soft); display: flex; flex-direction: column; }
.demo-card-title { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 600; letter-spacing: 0.4px; color: var(--action-text); }
.demo-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 10px 0 0; }
.demo-row > span { display: flex; flex-direction: column; gap: 2px; }
.demo-label { font-size: 12px; font-weight: 400; color: var(--text-3); }
.demo-row b { font-size: 16px; font-weight: 600; color: var(--text); }
.demo-copy { height: 44px; padding: 0 18px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); color: var(--text); font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; }

/* Hai nút mang tên đầy đủ của từng app nên chữ dài; cho chúng tự xuống dòng khi cột hẹp hơn
   260px, thay vì cắt mất đuôi chữ. Khối Dùng thử nay chia hai cột nên cột trái hẹp hẳn đi. */
/* Nút cửa hàng xếp THEO APP: nhãn tên app ở trên, hàng nút ở dưới (bản vẽ khối 06 và chân trang). */
.store-apps { display: flex; flex-direction: column; gap: 22px; margin-top: 22px; }
.store-app-name { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 400; color: var(--text-3); }
.store-app-name .brand-name { color: var(--text); }
.store-app-name .brand-name b { font-weight: 700; }
.store-row { display: flex; flex-wrap: wrap; gap: 12px; }
.store-row > a { gap: 8px; }
.store-row svg { flex-shrink: 0; }
.store-row > a { height: 48px; padding: 0 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font-size: 13.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; white-space: nowrap; flex: 1 1 160px; }

.warn { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.warn span { font-size: 13.5px; line-height: 1.5; color: var(--text-2); }

/* Pricing (section 07) ----------------------------------------------------- */

.price { border-top: 1px solid var(--border-strong); padding: 20px 0 0; }
.price.is-pick { border-top: 3px solid var(--action); padding-top: 18px; }
.price h3 { margin: 0 0 18px; font-size: 19px; font-weight: 700; letter-spacing: -0.3px; }
.price p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
/* Giá và câu "Liên hệ báo giá" đi màu nhấn, giãn -0,6 (bản vẽ). */
.price-value { margin-top: 0; margin-bottom: 18px; font-size: 24px; font-weight: 700; letter-spacing: -0.6px; color: var(--action-text); }
/* Quote button on the light plan cards: outlined, unlike the navy-ground outline button. */
.price .btn { margin-top: 18px; width: 100%; }
.price .btn-primary { height: 48px; font-size: 15px; }
.btn-quote { height: 50px; padding: 0 20px; border: 1px solid var(--border-strong); background: transparent; color: var(--text); font-size: 15px; }
.btn-quote:hover { border-color: var(--action); color: var(--action-text); }

/* FAQ (section 08) --------------------------------------------------------- */

/* Bản vẽ để mỗi câu hỏi là một KHAY nền kem bo góc, không phải một hàng kẻ ngang. */
.shell.shell-narrow { max-width: calc(900px + var(--gutter) * 2); }
.faq-stack { display: flex; flex-direction: column; gap: 34px; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq { background: var(--page); border: 1px solid var(--border); border-radius: 16px; padding: 4px 22px; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; font-size: 17px; font-weight: 600; line-height: 1.45; }
.faq-plus { flex-shrink: 0; font-size: 22px; font-weight: 400; line-height: 1; color: var(--action-text); }
.faq p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.65; color: var(--text-2); }

/* Demo form (section 09) --------------------------------------------------- */

/* Dải liên hệ của khối cuối: số gọi to nhất, Zalo cỡ chữ thân, giờ làm việc nhỏ hơn một bậc. */
.contact-strip { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 22px; }
.contact-phone { font-size: 17px; font-weight: 600; color: var(--action-text); }
.contact-zalo { font-size: 16px; font-weight: 400; color: var(--text-2); }
.contact-hours { font-size: 14.5px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }

.form-box { border: 1px solid var(--border); padding: clamp(20px, 2.4vw, 30px); background: var(--surface); }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--text); }
.field input, .field select, .field textarea {
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--page);
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
}
.field textarea { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.55; resize: vertical; }
.field.is-bad input, .field.is-bad select, .field.is-bad textarea { border-color: #C0362C; }
.form-note { margin: 12px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-3); }
.form-box .btn-primary { width: 100%; margin-top: 4px; }

.sent { text-align: center; padding: clamp(24px, 3vw, 38px) 0; }
.sent-tick { width: 46px; height: 46px; margin: 0 auto; border-radius: 10px; background: #E8F6F1; color: #12805C; display: flex; align-items: center; justify-content: center; }
.sent h3 { margin: 16px 0 0; font-size: 21px; font-weight: 700; }
.sent p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }

/* Footer ------------------------------------------------------------------- */

.padbot { background: var(--hero); color: #FFFFFF; padding: clamp(48px, 6vw, 76px) 0 96px; }
/* Bề ngang tính như .shell: 1180px là bề ngang NỘI DUNG, lề ngoài nằm ngoài con số ấy. */
.padbot-inner { max-width: calc(1180px + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-direction: column; gap: 40px; }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 196px), 1fr)); gap: 36px; }
/* 🪤 HAI DÒNG NÀY TỪNG MẶC MÀU CỦA myHRM. `#9BAEC6` là `textMuted` nền tối của myHRM, màu xanh
   xám, lạc vào chân trang của một sản phẩm bảng màu NÂU, gần như chắc là chép nguyên khối chân
   trang từ `hrm-landing` sang. Bản vẽ khai `#A2938B` và bản vẽ đúng (cửa saas bắt 24/09/2026). */
.footer-lead { max-width: 340px; font-size: 14.5px; line-height: 1.6; color: #D6C6BD; text-wrap: pretty; }
.footer-label { font-size: 12px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: #A2938B; }
/* 🪤 Chữ chân trang đi `#D6C6BD` chứ không `--hero-text-2` (#EFE3DB): bản vẽ để chân trang nhạt
   hơn một bậc so với chữ phụ trên khối đầu trang. Hai mã lệch nhau đúng 20 chỗ khi đo 24/09. */
.footer-cols a, .footer-cols span { font-size: 14.5px; color: #D6C6BD; }
/* Dòng chữ (địa chỉ, câu dẫn) có cao dòng; đường dẫn một dòng thì không. */
.footer-cols span { line-height: 1.6; }
/* Tên thương hiệu ở chân trang giữ đúng cỡ của nó: luật chung phía trên nhắm mọi span trong
   chân trang nên đặc hiệu cao hơn .brand-name, không chặn lại là logo teo còn 14.5px. */
.footer-cols .brand-name, .footer-cols .brand-name span, .footer-cols .brand-name b { font-size: 22px; color: #FFFFFF; }
/* Column rhythm from the handover file: 12px under the label and 29px between rows.
   A flex column with one gap gives both, so the label no longer sits on the first row. */
.footer-cols .rule-list { display: flex; flex-direction: column; gap: 12px; }
.footer-cols a { padding: 0; }
.footer-end a { padding: 4px 0; }
/* Tên nhà làm ở chân trang đi màu nhấn nhạt và bậc thường, bản vẽ khai vậy. */
.footer-end a b { font-weight: 400; color: var(--panel-accent); }
/* Khối TẢI APP là HÀNG RIÊNG giữa chân trang, kẻ một đường ngang bên trên, đúng bản vẽ. Nhãn
   nút chỉ còn tên cửa hàng vì tên app đã nằm ở dòng trên. */
.footer-apps { border-top: 1px solid var(--hero-rule); padding-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.footer-apps-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 348px)); justify-content: center; gap: 24px; }
.footer-app { display: flex; flex-direction: column; align-items: center; gap: 10px; }
/* 🪤 Tên app ở chân trang là TÊN THƯƠNG HIỆU GHÉP: `my` bậc thường, phần còn lại bậc 700, rồi
   vai trò app cỡ 13 màu nhạt. Hai bộ đo chữ đều mù với chỗ này - lớp bọc có ba con nên bị loại,
   còn con giữa "FNB Rider" thì ghép nhầm vào tên app trong ảnh điện thoại (25px). Bắt tay 24/09. */
.footer-app-name { display: block; font-size: 14.5px; font-weight: 400; color: #FFFFFF; }
.footer-app-name b { font-weight: 700; }
.footer-app-name small { font-size: 13px; font-weight: 400; line-height: normal; color: #A2938B; }
.footer-store { display: flex; flex-wrap: wrap; gap: 10px; }
.footer-store > a { height: 56px; padding: 0 14px; border: 1px solid rgba(255,255,255,0.16); border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; font-size: 14.5px; font-weight: 600; color: #FFFFFF; flex: 1 1 0; min-width: 0; }
.footer-store svg { flex-shrink: 0; }

/* Contact rows carry a leading icon, as in the handover file. The icon keeps the muted label
   color while the text stays readable; the pin nudges down so it lines up with a two-line address. */
.footer-contact { display: flex; align-items: flex-start; gap: 10px; }
.footer-contact svg { flex-shrink: 0; margin-top: 2px; color: var(--hero-label); }
.footer-end { border-top: 1px solid var(--hero-rule); padding-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; font-size: 13.5px; color: #A2938B; }

/* Floating action buttons -------------------------------------------------- */

.fabstack {
  position: fixed;
  right: clamp(14px, 2vw, 26px);
  bottom: calc(clamp(18px, 2.4vw, 28px) + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}
.fab {
  width: 52px;
  height: 52px;
  border-radius: 26px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
  box-shadow: 0 6px 20px rgba(23,41,72,0.14);
  font-family: inherit;
  cursor: pointer;
  transition: width .22s ease, padding .22s ease;
}
.fab.is-call { background: var(--action); border-color: var(--action); color: var(--action-on); box-shadow: 0 6px 20px rgba(12,135,165,0.32); }
.fab:hover { width: auto; padding: 0 18px; justify-content: flex-start; }
.fab-label { max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; font-size: 14.5px; font-weight: 600; transition: max-width .22s ease, opacity .18s ease, padding .22s ease; }
.fab:hover .fab-label { max-width: 210px; opacity: 1; padding-left: 10px; }

/* Bottom tab bar, phone only ----------------------------------------------- */

.mnav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  /* 🔴 Nền ĐỤC, không phải nền mờ 92%. Tám phần trăm lọt qua đủ kéo nền từ `#FAF7F5` xuống
     `#E9E5E3` khi phía sau thanh là khung điện thoại, và chữ nút "Thêm" rơi từ 4,63 còn 3,94 -
     Lighthouse di động bắt đúng chỗ này, trợ năng tụt 100 xuống 96. */
  background: var(--page);
  border-top: 1px solid var(--border);
  padding: 8px 4px calc(6px + env(safe-area-inset-bottom, 0px));
}
.mnav > a, .mnav > button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
}
.mnav span { font-size: 10.5px; font-weight: 600; }
/* Luật hai sắc teal của bên vẽ (`01-tokens.md` mục 56): mọi chữ teal đặt trên nền trắng hay nền trang dùng
   teal 700. Nhãn này 10.5px nên teal 600 chỉ cho 4,04. */
.mnav .is-more { color: var(--action-text); }
.mnav .is-more span { font-weight: 700; }

/* The More tray covers the full width and sits flush on top of the tab bar. */
.tray {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  z-index: 56;
  background: var(--hero);
  border-top: 1px solid var(--hero-border);
  padding: 6px var(--gutter) 12px;
}
.tray.is-open { display: block; }
.tray a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--hero-rule); color: #FFFFFF; font-size: 15px; font-weight: 600; }
.tray a:last-child { border-bottom: 0; }

.is-hidden { display: none; }

/* Breakpoints -------------------------------------------------------------- */

@media (max-width: 900px) {
  .topnav { display: none; }
  /* 🪤 Bản vẽ để đường Hướng dẫn sử dụng ở khổ hẹp mang bề ngang ĐÚNG 0 - tức nó ẩn, chỉ còn
     nằm trong cây. Trang thật ẩn hẳn cho gọn; nhìn ra màn thì hai bên giống nhau, chỉ khác là
     bộ đo mất một cặp ghép nên câu ấy rơi về mục chân trang, ra 1 dòng lệch ở khổ 390. */
  .topnav-sub { display: none; }
  .topbar-inner { gap: 8px; }
  .topbar .shell { padding-left: 16px; padding-right: 16px; }
  .mnav { display: flex; }
  /* Buttons shrink so the stack does not eat the screen height, and lift clear of the tab bar.
     Bottom 96px and footer padding 100px come from 02-landing-page.md. Those numbers only clear
     the footer text while the right side gutter below is kept, so do not drop the gutter. */
  .fabstack { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); gap: 10px; }
  .fab { width: 44px; height: 44px; border-radius: 22px; }
  .fab svg { width: 18px; height: 18px; }
  .padbot { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
  .padbot-inner { padding-right: 62px; }
  .footer-lead { max-width: none; }
  /* Hero buttons share one row; wrapping pushes the second button below the fold. */
  .hero-cta { flex-wrap: nowrap; gap: 10px; }
  .hero-cta > a { flex: 1 1 0; min-width: 0; padding: 0 12px; justify-content: center; text-align: center; }
}

@media (max-width: 700px) {
  .flip { order: 1; }

}

@media (max-width: 560px) {
  .heropair { gap: 6px; }
  .ph-a { width: 190px; height: 411px; }
  .ph-a > div { transform: scale(0.487); }
  .ph-b { width: 143px; height: 310px; margin-bottom: 26px; }
  .ph-b > div { transform: scale(0.367); }
}

@media (max-width: 430px) {
  .ph-a { width: 156px; height: 338px; }
  .ph-a > div { transform: scale(0.4); }
  .ph-b { width: 117px; height: 254px; margin-bottom: 21px; }
  .ph-b > div { transform: scale(0.301); }
}

@media (max-width: 360px) {
  .hero-cta > a { padding: 0 8px; }
}

/* Khung điện thoại ---------------------------------------------------------- */
/* Hai khung ở đầu trang dựng lại hai màn app bằng markup. Mọi cỡ nằm ở đây để partial Blade chỉ
   chở cấu trúc. Lớp `.ph-*` là hộp ngoài, `.pm` là khổ thật 390x844 thu nhỏ cho vừa hộp. */

.ph-c { width: 234px; height: 506px; position: relative; flex-shrink: 0; }
.ph-c > .pm { transform: scale(0.6); }
.ph-d { width: 250px; height: 540px; position: relative; flex-shrink: 0; }
.ph-d > .pm { transform: scale(0.64); }

.pm {
  position: absolute;
  top: 0;
  left: 0;
  width: 390px;
  height: 844px;
  transform-origin: top left;
  border-radius: 44px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
}

/* Mực theo thẻ chứ không gõ cứng trắng như khuôn myHRM chép sang: khung myFNB nền sáng nên chữ
   trắng ra tương phản 1,00, tức mất hẳn đồng hồ và cột sóng. */
.pm-status { height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; font-size: 14px; font-weight: 600; color: var(--text); }
.pm-signal { display: flex; align-items: center; gap: 5px; }
.pm-signal i { display: block; width: 17px; height: 11px; border-radius: 2px; background: currentColor; }
.pm-signal i + i { width: 15px; opacity: .9; }
.pm-battery { width: 24px; height: 12px; border-radius: 3px; border: 1.5px solid currentColor; padding: 1.5px; }
.pm-battery span { display: block; width: 70%; height: 100%; border-radius: 1px; background: currentColor; }

.pm-home-bar { height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.pm-home-bar i { display: block; width: 134px; height: 5px; border-radius: 3px; background: var(--text); opacity: .28; }

.pm-battery { width:24px; height:12px; border-radius:3px; border:1.5px solid currentColor; padding:1.5px; }
.pm-signal { display:flex; align-items:center; gap:5px; }

/* Calendar cells on the schedule screen. State comes from the server, colour stays here. */

/* Hai màn app dựng lại trong khung điện thoại ------------------------------ */
/* Chép bố cục từ `design/myfnb-landing-page/parts/AppScreen.dc.html`, hai cảnh `ban-hang` và
   `so-do-ban`. Bản vẽ gõ cứng màu vì nó vẽ ảnh chụp app; ở đây đọc thẻ màu của trang như khuôn
   myHRM, nên khung tự hợp cả nền sáng lẫn nền tối mà không đẻ màu mới.
   Mọi cỡ tính theo khổ thật 390x844, khung ngoài `.ph-a` `.ph-b` lo việc thu nhỏ. */

.pf-top { padding: 8px 16px 12px; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pf-top svg { color: var(--action); flex-shrink: 0; }
.pf-top b { font-size: 17px; font-weight: 700; }

.pf-body { flex: 1; overflow: hidden; padding: 0 16px; display: flex; flex-direction: column; gap: 10px; }

.pf-search { border: 1px solid var(--border); background: var(--surface); border-radius: 14px; padding: 12px; display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 15px; }

.pf-chips { display: flex; gap: 8px; overflow: hidden; }
.pf-chip { background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; white-space: nowrap; }
.pf-chip.is-on { background: var(--action); color: var(--action-on); }

.pf-list { display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.pf-dish { background: var(--surface); border-radius: 14px; padding: 12px; display: flex; align-items: center; gap: 12px; box-shadow: 0 4px 12px var(--sh-card); }
.pf-dish > div { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-dish b { font-size: 15px; font-weight: 600; }
.pf-dish small { font-size: 12.5px; color: var(--text-3); }
.pf-dish span { font-size: 14.5px; font-weight: 700; white-space: nowrap; }
.pf-dish span.is-out { color: var(--text-3); font-weight: 600; }

/* Khay đơn: dán đáy màn, đúng chỗ bản vẽ đặt. */
.pf-cart { flex-shrink: 0; background: var(--surface); border-top: 1px solid var(--border); padding: 12px 16px 0; display: flex; flex-direction: column; gap: 10px; }
.pf-line { display: flex; align-items: center; gap: 10px; }
.pf-line > b { flex: 1; font-size: 14.5px; font-weight: 600; }
.pf-line > span { font-size: 14.5px; font-weight: 700; white-space: nowrap; }
.pf-step { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border-radius: 999px; padding: 4px 10px; }
.pf-step i { display: flex; }
.pf-step b { font-size: 14px; font-weight: 700; min-width: 14px; text-align: center; }

.pf-sum { border-top: 1px solid var(--border); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.pf-sum div { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--text-2); }
.pf-sum div.is-total { font-size: 15.5px; font-weight: 700; color: var(--text); }

.pf-split { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--action-text); }
.pf-split svg { color: var(--action); }

.pf-btns { display: flex; gap: 8px; }
.pf-btn { flex: 1; height: 44px; border-radius: 12px; border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; font-size: 14.5px; font-weight: 600; }
.pf-pay { height: 50px; border-radius: 14px; background: var(--action); color: var(--action-on); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; margin-bottom: 8px; }

/* Màn Sơ đồ bàn ------------------------------------------------------------ */

.pf-modes { display: flex; gap: 8px; }
.pf-mode { flex: 1; border: 1px solid var(--border); border-radius: 12px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; }
.pf-mode svg { color: var(--action); }

.pf-filters { display: flex; gap: 8px; overflow: hidden; }

.pf-zone { font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }

.pf-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pf-table { border: 1px solid var(--border); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 3px; min-height: 84px; }
.pf-table b { font-size: 15px; font-weight: 700; }
.pf-table span { font-size: 12.5px; color: var(--text-3); }
.pf-table.is-busy { border-color: var(--action); background: var(--action-soft); }
/* Chữ trạng thái đọc thẻ CHỮ chứ không thẻ màu nhấn: `#C4470A` trên nền cam nhạt đo được 4,43,
   trượt ngưỡng. Nền và viền vẫn cam nên ô bận vẫn nhận ra ngay. */
.pf-table.is-busy span { color: var(--text-2); font-weight: 600; }
.pf-table strong { font-size: 14px; font-weight: 700; }
.pf-table small { font-size: 11.5px; color: var(--text-3); }
.pf-table-head { display: flex; align-items: center; gap: 6px; }
.pf-table-head svg { color: var(--warning); flex-shrink: 0; }

.pf-tabs { flex-shrink: 0; border-top: 1px solid var(--border); display: flex; padding: 8px 4px 0; }
.pf-tabs > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--text-3); }
.pf-tabs > div.is-on { color: var(--action-text); }

/* Bốn màn còn lại và màn đăng nhập trong khung điện thoại ------------------- */

.pf-card { border: 1px solid var(--border); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.pf-card small { font-size: 12px; line-height: 1.5; color: var(--text-3); }
.pf-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pf-card-head b { font-size: 14.5px; font-weight: 700; }
.pf-card-head > .num { font-size: 12.5px; color: var(--text-3); }

.pf-tags { display: flex; gap: 6px; }
.pf-tag { font-size: 11.5px; font-weight: 700; padding: 4px 8px; border-radius: 8px; }
.pf-tag.is-warn { background: var(--warning-bg); color: var(--warning-text); }
.pf-tag.is-bad { background: var(--action-soft); color: var(--danger-text); }

.pf-bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.pf-bar i { display: block; height: 100%; background: var(--action); }

.pf-input { border: 1px solid var(--border-strong); border-radius: 10px; padding: 9px 12px; font-size: 14px; font-weight: 600; }
.pf-input.is-empty { color: var(--text-3); font-weight: 400; }

.pf-foot { flex-shrink: 0; border-top: 1px solid var(--border); padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.pf-btn.is-primary { background: var(--action); color: var(--action-on); border-color: var(--action); }

.pf-alert { display: flex; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.pf-alert > i { flex-shrink: 0; display: flex; color: var(--text-3); }
.pf-alert.is-new > i { color: var(--action); }
.pf-alert > div { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-alert b { font-size: 14px; font-weight: 700; }
.pf-alert span { font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.pf-alert small { font-size: 11.5px; color: var(--text-3); }

.pf-count { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.pf-count > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pf-count b { font-size: 14px; font-weight: 600; }
.pf-count .pf-input { min-width: 92px; text-align: right; }
.pf-count small { font-size: 11.5px; color: var(--text-3); }
.pf-count small.is-ok { color: var(--success-text); font-weight: 600; }
.pf-count small.is-off { color: var(--danger-text); font-weight: 600; }

.pf-login { flex: 1; padding: 24px 22px; display: flex; flex-direction: column; gap: 22px; justify-content: center; }
.pf-login-head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.pf-login-name { font-size: 25px; letter-spacing: -.5px; color: var(--action-text); }
.pf-login-name span { font-weight: 400; }
.pf-login-name b { font-weight: 700; }
.pf-login-head small { font-size: 13.5px; color: var(--text-2); }
.pf-fields { display: flex; flex-direction: column; gap: 12px; }
.pf-label { font-size: 12px; font-weight: 400; color: var(--text-3); display: block; margin-bottom: 5px; }
.pf-remember { display: flex; align-items: center; gap: 7px; }
.pf-remember i { width: 17px; height: 17px; border-radius: 5px; background: var(--action); color: var(--action-on); display: flex; align-items: center; justify-content: center; }
.pf-remember small, .pf-link { font-size: 12.5px; color: var(--text-2); }
.pf-link { font-weight: 600; color: var(--action-text); }
.pf-version { flex-shrink: 0; padding: 0 0 16px; display: flex; justify-content: center; }
.pf-version small { font-size: 11.5px; color: var(--text-3); }

/* Cặp khung đứng cạnh nhau ở khối 01, mỗi khung một dòng nhãn dưới chân. */
.phonepair { display: flex; flex-wrap: nowrap; justify-content: center; align-items: flex-start; gap: clamp(10px, 1.4vw, 20px); }
.phonecap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.phonecap > span { font-size: 12.5px; color: var(--text-3); text-align: center; }

@media (max-width: 560px) {
  .ph-c { width: 176px; height: 381px; }
  .ph-c > .pm { transform: scale(0.451); }
}

/* Nhãn dưới khung ở dải tối phải đổi mực, chữ xám của nền sáng chìm hẳn. */
.band-navy .phonecap > span { color: var(--hero-label); }

/* Dải Dùng thử chia hai cột như khối 01: chữ bên trái, cặp khung bên phải. */
.band-navy .shell:has(.phonepair) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(24px, 3vw, 46px); align-items: center; }

/* Dưới 1024px thì khối có cặp khung về một cột: hai khung cạnh nhau cần 488px, mà ở khổ ấy lưới
   hai cột chỉ chừa cho cột phải khoảng 330px nên khung thò ra ngoài và cả trang trôi ngang. */
@media (max-width: 1023px) {
  .feature,
  .band-navy .shell:has(.phonepair) { grid-template-columns: 1fr; }
}

/* Trang chi tiết một mảng ---------------------------------------------------- */

/* 🪤 BẢN VẼ CHO TRANG CHI TIẾT MỘT THANG CHỮ RIÊNG, không phải thang của trang chủ. Chữ thân bài
   to hơn MỘT bậc (15,5 thay vì 14,5) còn tên ô ở khối mảng khác lại nhỏ hơn hai bậc (17/600 thay
   vì 19/700). Đo từng khổ rồi mới sửa: gộp ba khổ lại mà đọc là ra hai họ ngược nhau, bẫy đã trả
   giá ở myHRM 24/09/2026. Mọi luật dưới đây đo ở `myFNB - TRANG TINH NANG.dc.html` cảnh chi tiết. */
.feature-detail .hero.hero-page h1 { line-height: 1.1; letter-spacing: -1.2px; }
/* 🔴 Số thứ tự ba ý chính ĐỔI MÀU THEO NỀN: `--hero-accent` là màu cam NHẠT dành cho dải tối, đặt
   lên nền sáng của trang con ra 1,41 (bộ `chung-soi-landing.js` bắt 24/09/2026, 135 chỗ). Bản vẽ
   trang chi tiết khai 13/700 `#C4470A`. */
.feature-detail .hero.hero-page .hero-points b { font-size: 13px; font-weight: 700; color: var(--action); }
.feature-detail .hero.hero-page .hero-points span { line-height: 1.62; color: var(--text-2); }
.feature-detail .hero.hero-page .hero-points > div { border-top-color: var(--rule); }
.feature-detail .step span { font-size: 15.5px; font-weight: 400; line-height: 1.55; }
.feature-detail .compare h3 { font-size: 21px; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.feature-detail .compare p { font-size: 15.5px; line-height: 1.62; }
.feature-detail .section-head .h2 { line-height: 1.2; letter-spacing: -0.7px; }
.feature-detail .faq summary { line-height: 1.4; }
.feature-detail .faq p { font-size: 15.5px; line-height: 1.65; }
.feature-detail .section-head .lead { font-size: 15px; line-height: 1.6; }
.feature-detail .section-head .lead b { font-weight: 400; }
.feature-detail .grid-3 .module h3 { font-size: 17px; font-weight: 600; letter-spacing: 0; }