/* Giao diện trang tổng (index.html) và landing vị trí (vi-tri.html)
   Bố cục học theo apple.com: nền trắng / xám nhạt xen kẽ, chữ lớn căn giữa, nút bo tròn, không viền, không bóng.
   Màu lấy từ logo: xám #7d7e81, xanh ngọc #21a9bc. */
:root {
  --bg: #ffffff; --bg2: #f5f5f7; --tx: #1d1d1f; --mut: #6e6e73; --line: #d2d2d7;
  --brand: #21a9bc; --acc: #0b7d8c; --acc-h: #096c79; --grey: #7d7e81;
  --dark: #000000; --dark-mut: #a1a1a6;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; background: var(--bg); color: var(--tx); font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased }
a { color: inherit }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 22px }
h1, h2, h3 { line-height: 1.1; margin: 0; letter-spacing: -.02em; font-weight: 700 }
h2 { font-size: clamp(30px, 4.6vw, 48px) }
h3 { font-size: 21px; letter-spacing: -.01em; line-height: 1.25; margin-bottom: 8px }
ul { margin: 0; padding-left: 20px } li { margin: 6px 0 }
.muted { color: var(--mut); font-size: 14px }
.hl { color: var(--brand) }

/* nút: viên thuốc như Apple */
.btn { display: inline-block; background: var(--acc); color: #fff; font-weight: 500; font-size: 17px; text-decoration: none; padding: 12px 24px; border-radius: 980px; border: 0; transition: background .2s }
.btn:hover { background: var(--acc-h) }
.btn.sm { padding: 6px 14px; font-size: 13px }
.btn.big { font-size: 19px; padding: 15px 30px }
.link { color: var(--acc); text-decoration: none; font-size: 17px }
.link:hover { text-decoration: underline }
.link::after { content: ' ›' }

/* thanh điều hướng mờ */
.nav { position: sticky; top: 0; z-index: 10; background: #ffffffcc; backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid #0000000f }
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 52px; gap: 12px }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap }
.brand img { width: 30px; height: 30px; border-radius: 6px }
.brand small { font-weight: 400; color: var(--mut); font-size: 13px; padding-left: 10px; border-left: 1px solid var(--line) }
.nav-links { display: flex; align-items: center; gap: 22px; font-size: 13px }
.nav-links a:not(.btn) { text-decoration: none; color: var(--tx); opacity: .8 }
.nav-links a:not(.btn):hover { opacity: 1 }

/* hero căn giữa */
.hero { text-align: center; padding: 72px 0 64px }
.eyebrow { display: block; font-size: 17px; font-weight: 600; color: var(--brand); margin-bottom: 10px; letter-spacing: 0 }
.hero h1 { font-size: clamp(38px, 6.6vw, 72px); max-width: 920px; margin: 0 auto }
.hero .lead { color: var(--mut); font-size: clamp(19px, 2.2vw, 24px); line-height: 1.4; margin: 20px auto 0; max-width: 720px }
.explain { max-width: 680px; margin: 22px auto 0; font-size: 15px; color: var(--mut); background: var(--bg2); border-radius: 18px; padding: 14px 20px }
.explain b { color: var(--tx) }
.applied { display: inline-block; margin: 18px auto 0; font-size: 15px; color: var(--tx); background: var(--bg2); border-radius: 999px; padding: 8px 16px }
.applied[hidden] { display: none }
.cta-row { display: flex; gap: 26px; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 30px }
.fine { font-size: 13px; color: var(--mut); margin: 16px auto 0; max-width: 640px }

/* các con số nổi bật */
.chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; max-width: 860px; margin: 52px auto 0 }
.chip { padding: 6px 18px; border-left: 1px solid var(--line) }
.chip:first-child { border-left: 0 }
.chip b { display: block; font-size: clamp(32px, 4.4vw, 48px); font-weight: 700; letter-spacing: -.02em; line-height: 1.1 }
.chip span { font-size: 14px; color: var(--mut) }

/* dải sứ mệnh + số liệu công ty */
.mission { background: var(--bg2); text-align: center; padding: 80px 0 }
.mission .quote { font-size: clamp(24px, 3.4vw, 36px); font-weight: 600; letter-spacing: -.015em; line-height: 1.25; max-width: 820px; margin: 0 auto }
.mission .quote-by { color: var(--mut); font-size: 15px; margin: 14px 0 0 }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 52px }
.stats div { background: var(--bg); border-radius: 22px; padding: 26px 18px }
.stats b { display: block; font-size: clamp(30px, 3.6vw, 40px); letter-spacing: -.02em; color: var(--brand); line-height: 1.1 }
.stats span { font-size: 14px; color: var(--mut) }
.ticks { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: center; margin-top: 26px; font-size: 15px; color: var(--mut) }
.ticks li { margin: 0 } .ticks li::before { content: '✓ '; color: var(--brand); font-weight: 700 }

/* section */
.sec { padding: 96px 0 }
.sec.alt { background: var(--bg2) }
.sec-head { text-align: center; max-width: 760px; margin: 0 auto 48px }
.kicker { display: block; font-size: 17px; font-weight: 600; color: var(--brand); margin-bottom: 8px }
.sec-lead { color: var(--mut); font-size: 19px; line-height: 1.45; margin: 16px auto 0 }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px }
.card { background: var(--bg2); border-radius: 22px; padding: 30px 28px }
.sec.alt .card { background: var(--bg) }
.card p { color: var(--mut); margin: 0; font-size: 16px }
.card ul { color: var(--mut); font-size: 16px; padding-left: 18px }
.card .ic { display: none }
.jd { margin-top: 56px }
.jd:first-of-type { margin-top: 0 }
.jd-head { text-align: center; margin-bottom: 24px }
.jd-head h3 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -.02em; margin: 6px 0 0 }
.pill { display: inline-block; font-size: 13px; font-weight: 600; color: var(--grey); letter-spacing: .04em }
.item { background: var(--bg); border-radius: 18px; padding: 22px 24px }
.sec:not(.alt) .item { background: var(--bg2) }
.item b { font-size: 17px; font-weight: 600 }
.item p { color: var(--mut); margin: 6px 0 0; font-size: 15.5px }
.truth .card h3 { font-size: 24px }
.truth .bad h3 { color: var(--tx) } .truth .good h3 { color: var(--acc) }

/* thu nhập: dải tối như Apple */
.money { background: var(--dark); color: #f5f5f7 }
.money .kicker { color: var(--brand) }
.money .sec-lead { color: var(--dark-mut) }
.table-wrap { overflow-x: auto; border-radius: 22px; background: #1d1d1f; max-width: 820px; margin: 0 auto }
table { width: 100%; border-collapse: collapse }
th, td { text-align: left; padding: 18px 24px; border-bottom: 1px solid #ffffff14 }
tr:last-child td { border-bottom: 0 }
th { font-size: 13px; color: var(--dark-mut); font-weight: 500 }
td { font-size: 16px }
td b { color: #fff; font-size: 22px; letter-spacing: -.01em; font-weight: 700 }
td:nth-child(2):not(:last-child) { color: var(--dark-mut); font-size: 17px }
th:last-child, td:last-child { text-align: right }
.notes { color: var(--dark-mut); font-size: 14.5px; max-width: 820px; margin: 26px auto 0 }

.steps { counter-reset: s }
.steps .num { font-size: 40px; font-weight: 700; color: var(--brand); letter-spacing: -.02em; line-height: 1; margin-bottom: 14px }
.final { text-align: center; padding: 110px 0 }
.final h2 { font-size: clamp(36px, 5.6vw, 64px) }
.final p { color: var(--mut); font-size: 21px; margin: 14px 0 32px }
.final .fine a { color: var(--acc) }
.foot { background: var(--bg2); color: var(--mut); font-size: 12.5px; padding: 26px 0 34px; line-height: 1.9; border-top: 1px solid #0000000d }
.foot b { color: var(--tx); font-weight: 600 }

/* trang tổng: thẻ vị trí */
.roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px }
.role { display: flex; flex-direction: column; background: var(--bg2); border-radius: 26px; padding: 34px 30px; text-decoration: none; transition: transform .3s ease }
.role:hover { transform: scale(1.015) }
.role .en { font-size: 13px; font-weight: 600; color: var(--brand); letter-spacing: .02em; margin: 0 }
.role h3 { font-size: 24px; margin: 6px 0 8px }
.role .who { color: var(--mut); font-size: 15px; margin: 0 0 22px }
.role .money-line { margin-bottom: 26px }
.role .money-line b { display: block; font-size: 34px; letter-spacing: -.02em; line-height: 1.1 }
.role .money-line span { font-size: 14px; color: var(--mut) }
.role .go { margin-top: auto; color: var(--acc); font-size: 17px }

/* ---------- ảnh & bố cục ít chữ ---------- */
.center { text-align: center }
.hero { padding-bottom: 72px }
.hero-img { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: 28px; margin-top: 48px }
.hero .explain { background: none; padding: 0; margin-top: 18px; font-size: 17px }
.hero .stats { margin-top: 40px }
.hero .stats div { background: var(--bg2) }

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px }
.tile { background: var(--bg); border-radius: 26px; overflow: hidden; display: flex; flex-direction: column }
.tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block }
.tile-tx { padding: 24px 26px 28px }
.tile-tx p { color: var(--mut); margin: 0; font-size: 15.5px }

details.item { cursor: pointer }
details.item summary { list-style: none; font-weight: 600; font-size: 17px; display: flex; justify-content: space-between; gap: 12px; align-items: center }
details.item summary::-webkit-details-marker { display: none }
details.item summary::after { content: '+'; color: var(--acc); font-size: 24px; font-weight: 400; line-height: 1 }
details.item[open] summary::after { content: '−' }
details.item p { margin-top: 10px }
.jd .grid2 { align-items: start }

.split { background: var(--bg2); padding: 96px 0 }
.split-in { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center }
.split-in img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 28px; display: block }
.split h2 { font-size: clamp(28px, 3.6vw, 40px) }
.split h2.mt { margin-top: 36px }
.list { list-style: none; padding: 0; margin-top: 16px; font-size: 17px }
.list li { padding: 10px 0; border-bottom: 1px solid var(--line) }
.list li:last-child { border-bottom: 0 }
.list.bad li::before { content: '— '; color: var(--mut) }
.list.good li::before { content: '✓ '; color: var(--brand); font-weight: 700 }

details.more { max-width: 820px; margin: 22px auto 0; color: var(--dark-mut); font-size: 15px }
details.more summary { cursor: pointer; color: var(--brand); text-align: center; list-style: none; font-size: 17px }
details.more summary::-webkit-details-marker { display: none }
details.more summary::after { content: ' ›' }
details.more p { margin: 18px 0 8px }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center }
.steps p { color: var(--mut); margin: 0; font-size: 15.5px }

.final { position: relative; color: #fff; background: #000 var(--bg-img, none) center / cover no-repeat }
.final::before { content: ''; position: absolute; inset: 0; background: linear-gradient(#0000008c, #000000b3) }
.final .wrap { position: relative }
.final p { color: #e8e8ed }
.final .fine a { color: #fff }

.role { padding: 0; overflow: hidden }
.role img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block }
.role-tx { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1 }
.sec.alt .role { background: var(--bg) }
.values .card h3 { font-size: 19px }

@media (max-width: 900px) {
  .grid3, .roles, .tiles, .split-in { grid-template-columns: 1fr }
  .steps { grid-template-columns: repeat(2, 1fr) }
  .split-in img { aspect-ratio: 4 / 3 }
  .grid4, .stats { grid-template-columns: repeat(2, 1fr) }
  .hero { padding: 52px 0 48px }
  .sec { padding: 72px 0 }
}
@media (max-width: 560px) {
  .wrap { padding: 0 16px }
  .grid2, .grid4 { grid-template-columns: 1fr }
  .nav-links a:not(.btn) { display: none }
  .brand small { display: none }
  .chips { grid-template-columns: 1fr; gap: 18px }
  .hero-img { aspect-ratio: 4 / 3; border-radius: 20px; margin-top: 32px }
  .chip { border-left: 0; padding: 0 }
  .sec { padding: 60px 0 }
  .card { padding: 24px 22px }
  th, td { padding: 14px 16px }
  td b { font-size: 18px }
}