/* ============================================================
   MONA Fit — Template phòng tập Gym & Fitness
   Style chung cho mọi trang. Responsive, mobile-first.
   ============================================================ */

:root {
  --orange: #f97316;
  --orange-d: #ea580c;
  --orange-dd: #c2410c;
  --ink: #1b1f27;
  --navy: #14171d;
  --navy-2: #20242d;
  --muted: #6b7280;
  --soft: #fff2e9;
  --soft-2: #fdf7f2;
  --line: #ececec;
  --white: #ffffff;
  --amber: #fbbf24;
  --shadow-sm: 0 4px 16px rgba(20, 23, 29, .06);
  --shadow: 0 18px 50px rgba(20, 23, 29, .16);
  --r: 18px;
  --r-lg: 28px;
  --maxw: 1200px;
  --bar-h: 46px;
  --head-h: 76px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: 'Plus Jakarta Sans', 'Be Vietnam Pro', sans-serif;
  color: var(--navy);
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -.02em;
}

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--orange-dd); font-weight: 700; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .14em; margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--orange); border-radius: 2px; }
.eyebrow--light { color: #ffd9bf; }
.eyebrow--light::before { background: var(--orange); }

.section { padding: 90px 0; }
.section--soft { background: var(--soft-2); }
.section--dark { background: var(--navy); }
.section-head { max-width: 700px; margin: 0 auto 54px; text-align: center; }
.section-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.section-head--dark h2 { color: #fff; }
.section-head p { color: var(--muted); margin-top: 14px; font-size: 1.05rem; }
.section-head--dark p { color: #aab1bd; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 700; font-size: .98rem; padding: 14px 28px; border-radius: 999px;
  cursor: pointer; border: 2px solid transparent; transition: .22s ease;
  font-family: inherit; white-space: nowrap;
}
.btn--primary { background: var(--orange); color: #fff; box-shadow: 0 12px 26px rgba(249,115,22,.34); }
.btn--primary:hover { background: var(--orange-dd); transform: translateY(-2px); }
.btn--dark { background: var(--navy); color: #fff; }
.btn--dark:hover { background: var(--navy-2); transform: translateY(-2px); }
.btn--ghost { background: #fff; color: var(--navy); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--orange); color: var(--orange-dd); }
.btn--lg { padding: 16px 34px; font-size: 1.02rem; }

/* ===== Top exclusive bar (luật 4) ===== */
.topbar {
  position: sticky; top: 0; z-index: 200;
  background: linear-gradient(90deg, var(--navy) 0%, var(--orange-dd) 100%);
  color: #fff; min-height: var(--bar-h);
  display: flex; align-items: center;
}
.topbar .container {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  flex-wrap: wrap; padding-top: 7px; padding-bottom: 7px; text-align: center;
}
.topbar__txt { font-weight: 600; font-size: .92rem; }
.topbar__txt strong { color: #ffd27a; }
.topbar__btn {
  background: #ffffff; color: var(--navy); font-weight: 800; font-size: .82rem;
  padding: 8px 18px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px;
  transition: .2s ease; letter-spacing: .01em;
}
.topbar__btn:hover { background: var(--amber); transform: translateY(-1px); }

/* ===== Header ===== */
.header {
  position: sticky; top: var(--bar-h); z-index: 150;
  background: rgba(255,255,255,.93); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header .container { display: flex; align-items: center; justify-content: space-between; height: var(--head-h); }
.logo { display: flex; align-items: center; gap: 11px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.32rem; color: var(--navy); letter-spacing: -.02em; }
.logo__mark {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, var(--orange), var(--orange-dd));
  display: grid; place-items: center; color: #fff; box-shadow: 0 8px 18px rgba(249,115,22,.42);
}
.logo__mark svg { width: 23px; height: 23px; }
.logo span { color: var(--orange-dd); }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a { padding: 9px 14px; border-radius: 10px; font-weight: 600; font-size: .95rem; color: var(--ink); transition: .18s; }
.nav a:hover { color: var(--orange-dd); background: var(--soft); }
.nav a.active { color: var(--orange-dd); }

.header__cta { display: flex; align-items: center; gap: 14px; }
.header__phone { display: flex; align-items: center; gap: 9px; font-weight: 700; color: var(--navy); font-size: .96rem; }
.header__phone svg { width: 18px; height: 18px; color: var(--orange-dd); }

.burger { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.burger span { display: block; width: 20px; height: 2px; background: var(--navy); margin: 4px auto; border-radius: 2px; transition: .25s; }

/* ===== Hero ===== */
.hero { background: linear-gradient(160deg, var(--soft) 0%, #fff 70%); position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; right: -120px; top: -120px; width: 460px; height: 460px; background: radial-gradient(circle, rgba(249,115,22,.18), transparent 65%); border-radius: 50%; }
.hero .container { display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: center; padding-top: 70px; padding-bottom: 70px; }
.hero h1 { font-size: clamp(2.2rem, 4.8vw, 3.8rem); }
.hero h1 em { font-style: normal; color: var(--orange-dd); }
.hero p.lead { color: var(--muted); font-size: 1.12rem; margin: 22px 0 30px; max-width: 520px; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__trust { display: flex; align-items: center; gap: 26px; margin-top: 36px; flex-wrap: wrap; }
.hero__trust .t { font-weight: 800; font-size: 1.6rem; color: var(--navy); font-family: 'Plus Jakarta Sans', sans-serif; }
.hero__trust small { display: block; color: var(--muted); font-weight: 600; font-size: .82rem; }
.hero__media { position: relative; }
.hero__media img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow); object-fit: cover; aspect-ratio: 4/4.3; }
.hero__badge {
  position: absolute; background: #fff; border-radius: 16px; box-shadow: var(--shadow); padding: 14px 18px;
  display: flex; align-items: center; gap: 12px;
}
.hero__badge--tl { top: 22px; left: -18px; }
.hero__badge--br { bottom: 26px; right: -14px; }
.hero__badge .ic { width: 42px; height: 42px; border-radius: 12px; background: var(--soft); display: grid; place-items: center; color: var(--orange-dd); }
.hero__badge b { display: block; font-size: 1.02rem; color: var(--navy); font-family: 'Plus Jakarta Sans', sans-serif; }
.hero__badge small { color: var(--muted); font-size: .8rem; }

/* strip under hero */
.strip { background: var(--orange-dd); color: #fff; }
.strip .container { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 16px 22px; flex-wrap: wrap; text-align: center; font-weight: 600; }
.strip svg { width: 20px; height: 20px; }
.strip a { text-decoration: underline; font-weight: 800; }

/* logos / partners row */
.logos { display: flex; align-items: center; justify-content: center; gap: 38px; flex-wrap: wrap; opacity: .8; }
.logos span { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--muted); letter-spacing: .02em; }

/* ===== Feature cards ===== */
.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 30px 26px; transition: .25s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.card__ic { width: 56px; height: 56px; border-radius: 15px; background: var(--soft); display: grid; place-items: center; color: var(--orange-dd); margin-bottom: 18px; }
.card__ic svg { width: 28px; height: 28px; }
.card h3 { font-size: 1.22rem; margin-bottom: 9px; }
.card p { color: var(--muted); font-size: .96rem; }
.card .more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--orange-dd); font-weight: 700; font-size: .92rem; }
.card .more:hover { gap: 10px; }

/* stats row */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 56px; }
.stat { text-align: center; padding: 26px 16px; border-radius: var(--r); background: var(--soft-2); }
.stat .n { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 2.2rem; color: var(--orange-dd); }
.stat small { color: var(--muted); font-weight: 600; }
.stats--dark .stat { background: var(--navy-2); }
.stats--dark .stat small { color: #aab1bd; }

/* ===== Split (about/program) ===== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split--rev .split__media { order: 2; }
.split__media { position: relative; }
.split__media img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow); object-fit: cover; aspect-ratio: 5/4.2; }
.split__media .float {
  position: absolute; bottom: -18px; left: -18px; background: var(--orange); color: #fff;
  border-radius: var(--r); padding: 16px 22px; box-shadow: var(--shadow);
}
.split__media .float b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.8rem; display: block; line-height: 1; }
.split__media .float small { font-size: .8rem; opacity: .92; }
.split__body h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
.split__body p { color: var(--muted); margin: 18px 0; font-size: 1.04rem; }
.ticks { list-style: none; display: grid; gap: 12px; margin: 22px 0 28px; }
.ticks li { display: flex; align-items: flex-start; gap: 12px; font-weight: 600; color: var(--ink); }
.ticks li svg { width: 22px; height: 22px; color: var(--orange); flex: none; margin-top: 2px; }

/* ===== Steps band ===== */
.band { background: linear-gradient(120deg, var(--navy) 0%, var(--orange-dd) 130%); color: #fff; border-radius: var(--r-lg); padding: 56px 44px; }
.band h2 { color: #fff; text-align: center; margin-bottom: 40px; font-size: clamp(1.7rem,3vw,2.4rem); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.step { text-align: center; }
.step .num { width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.14); display: grid; place-items: center; margin: 0 auto 16px; font-weight: 800; font-size: 1.3rem; font-family: 'Plus Jakarta Sans', sans-serif; border: 2px solid rgba(255,255,255,.3); }
.step h3 { color: #fff; font-size: 1.18rem; margin-bottom: 8px; }
.step p { color: rgba(255,255,255,.8); font-size: .95rem; }

/* ===== Classes (programs grid with image) ===== */
.prog { border-radius: var(--r-lg); overflow: hidden; position: relative; box-shadow: var(--shadow-sm); display: block; min-height: 320px; }
.prog img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: .4s ease; }
.prog:hover img { transform: scale(1.06); }
.prog__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,23,29,0) 30%, rgba(20,23,29,.86) 100%); }
.prog__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px; color: #fff; }
.prog__body .tag { display: inline-block; background: var(--orange); color: #fff; font-size: .72rem; font-weight: 800; padding: 5px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.prog__body h3 { color: #fff; font-size: 1.3rem; }
.prog__body p { color: rgba(255,255,255,.82); font-size: .92rem; margin-top: 6px; }

/* ===== Schedule table ===== */
.sched-wrap { overflow-x: auto; border-radius: var(--r); box-shadow: var(--shadow-sm); }
.sched { width: 100%; border-collapse: collapse; background: #fff; min-width: 720px; }
.sched th, .sched td { padding: 15px 16px; text-align: center; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.sched th { background: var(--navy); color: #fff; font-weight: 700; font-family: 'Plus Jakarta Sans', sans-serif; font-size: .92rem; }
.sched td:first-child, .sched th:first-child { text-align: left; background: var(--soft-2); font-weight: 700; color: var(--navy); }
.sched .cls { display: block; font-weight: 700; color: var(--navy); font-size: .94rem; }
.sched .cls small { display: block; font-weight: 600; color: var(--orange-dd); font-size: .78rem; }
.sched .cls--alt small { color: var(--muted); }
.sched tr:last-child td { border-bottom: none; }

/* ===== Trainers ===== */
.coach { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: .25s; }
.coach:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.coach__img { aspect-ratio: 1/1; overflow: hidden; position: relative; }
.coach__img img { width: 100%; height: 100%; object-fit: cover; transition: .4s; }
.coach:hover .coach__img img { transform: scale(1.05); }
.coach__num { position: absolute; top: 14px; left: 14px; background: var(--orange); color: #fff; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; }
.coach__body { padding: 20px; text-align: center; }
.coach__body h3 { font-size: 1.16rem; }
.coach__body .role { color: var(--orange-dd); font-weight: 700; font-size: .9rem; margin-top: 3px; }
.coach__body .rate { color: var(--amber); font-size: .85rem; margin-top: 8px; font-weight: 700; }
.coach__body .rate span { color: var(--muted); font-weight: 600; }
.coach__social { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.coach__social a { width: 34px; height: 34px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; color: var(--orange-dd); transition: .2s; }
.coach__social a:hover { background: var(--orange); color: #fff; }
.coach__social svg { width: 16px; height: 16px; }

/* ===== Pricing ===== */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
.plan { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 34px 28px; display: flex; flex-direction: column; }
.plan--feat { border-color: var(--orange); box-shadow: var(--shadow); position: relative; transform: scale(1.02); }
.plan--feat::after { content: "Phổ biến nhất"; position: absolute; top: 18px; right: 18px; background: var(--orange); color: #fff; font-size: .72rem; font-weight: 800; padding: 5px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: .06em; }
.plan h3 { font-size: 1.3rem; }
.plan .sub { color: var(--muted); font-size: .92rem; margin-top: 4px; }
.plan .amt { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 2.4rem; color: var(--navy); margin: 16px 0 4px; }
.plan .amt small { font-size: .95rem; color: var(--muted); font-weight: 600; }
.plan .save { display: inline-block; background: var(--soft); color: var(--orange-dd); font-weight: 800; font-size: .78rem; padding: 4px 12px; border-radius: 999px; margin-bottom: 8px; }
.plan ul { list-style: none; display: grid; gap: 11px; margin: 22px 0 26px; }
.plan li { display: flex; gap: 10px; color: var(--ink); font-size: .96rem; }
.plan li svg { width: 20px; height: 20px; color: var(--orange); flex: none; }
.plan .btn { margin-top: auto; width: 100%; }

/* price/info table */
.ptable { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); }
.ptable th, .ptable td { padding: 16px 22px; text-align: left; border-bottom: 1px solid var(--line); }
.ptable th { background: var(--navy); color: #fff; font-weight: 700; font-family: 'Plus Jakarta Sans', sans-serif; }
.ptable td:last-child, .ptable th:last-child { text-align: right; font-weight: 700; color: var(--orange-dd); }
.ptable tr:last-child td { border-bottom: none; }
.ptable tbody tr:hover { background: var(--soft-2); }

/* ===== Upsell: loyalty / membership tiers ===== */
.loyalty { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 14px; }
.tier { border-radius: var(--r); padding: 26px 22px; color: #fff; position: relative; overflow: hidden; }
.tier h3 { color: #fff; font-size: 1.18rem; }
.tier .pts { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.05rem; margin: 8px 0 12px; opacity: .92; }
.tier ul { list-style: none; display: grid; gap: 8px; }
.tier li { font-size: .88rem; opacity: .92; display: flex; gap: 8px; }
.tier li::before { content: "✦"; }
.tier--bronze { background: linear-gradient(135deg,#b07a4a,#8a5a30); }
.tier--silver { background: linear-gradient(135deg,#8e98a6,#6b7280); }
.tier--gold { background: linear-gradient(135deg,#e0a000,#c2410c); }
.tier--plat { background: linear-gradient(135deg,#2b3140,#14171d); }

/* countdown flash sale */
.flash { background: var(--navy); border-radius: var(--r-lg); padding: 40px; color: #fff; display: grid; grid-template-columns: 1.3fr 1fr; gap: 36px; align-items: center; overflow: hidden; position: relative; }
.flash::before { content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(249,115,22,.3), transparent 65%); }
.flash > * { position: relative; }
.flash h2 { color: #fff; font-size: clamp(1.6rem,3vw,2.3rem); }
.flash p { color: #aab1bd; margin: 12px 0 0; }
.countdown { display: flex; gap: 14px; }
.cd-box { background: var(--navy-2); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 16px 10px; text-align: center; min-width: 72px; }
.cd-box b { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 2rem; font-weight: 800; color: var(--orange); line-height: 1; }
.cd-box small { font-size: .72rem; color: #aab1bd; text-transform: uppercase; letter-spacing: .08em; }

/* ===== Testimonials ===== */
.quote { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 28px 26px; }
.quote .stars { color: var(--amber); margin-bottom: 12px; letter-spacing: 2px; }
.quote p { color: var(--ink); font-size: 1rem; }
.quote .who { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.quote .who .av { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg,var(--orange),var(--orange-dd)); display:grid; place-items:center; color:#fff; font-weight:800; }
.quote .who b { color: var(--navy); display: block; font-size: .96rem; }
.quote .who small { color: var(--muted); }

/* ===== FAQ ===== */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 14px; }
.qa { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.qa summary { list-style: none; cursor: pointer; padding: 20px 24px; font-weight: 700; color: var(--navy); font-family: 'Plus Jakarta Sans', sans-serif; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font-size: 1.5rem; color: var(--orange); font-weight: 400; transition: .2s; }
.qa[open] summary::after { transform: rotate(45deg); }
.qa .ans { padding: 0 24px 20px; color: var(--muted); }

/* ===== Contact / form ===== */
.appoint { background: var(--soft); border-radius: var(--r-lg); padding: 50px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; align-items: center; }
.appoint__info h2 { font-size: clamp(1.7rem,3vw,2.4rem); }
.appoint__info p { color: var(--muted); margin: 16px 0; }
.appoint__info .li { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; font-weight: 600; }
.appoint__info .li .ic { width: 44px; height: 44px; border-radius: 12px; background: #fff; display: grid; place-items: center; color: var(--orange-dd); flex: none; }
.form { background: #fff; border-radius: var(--r); padding: 32px; box-shadow: var(--shadow); }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 7px; color: var(--navy); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; border: 1.5px solid var(--line); border-radius: 12px;
  font-family: inherit; font-size: .96rem; color: var(--ink); background: var(--soft-2); transition: .18s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--orange); background: #fff; }
.field textarea { resize: vertical; min-height: 110px; }

/* map placeholder */
.map { border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.map iframe { width: 100%; height: 320px; border: 0; display: block; }

/* ===== Exclusive CTA (luật 3) ===== */
.exclusive { background: linear-gradient(120deg, var(--navy), var(--orange-dd)); border-radius: var(--r-lg); padding: 60px 50px; text-align: center; color: #fff; position: relative; overflow: hidden; }
.exclusive::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.12), transparent 50%); }
.exclusive > * { position: relative; }
.exclusive h2 { color: #fff; font-size: clamp(1.8rem,3.4vw,2.6rem); }
.exclusive p { color: rgba(255,255,255,.88); max-width: 640px; margin: 16px auto 30px; font-size: 1.08rem; }
.exclusive .btn--ghost { background: #fff; }
.exclusive .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ===== Page hero (inner pages) ===== */
.phero { background: linear-gradient(160deg, var(--soft), #fff); padding: 60px 0; text-align: center; }
.phero h1 { font-size: clamp(2rem, 4vw, 3rem); }
.phero p { color: var(--muted); margin-top: 14px; font-size: 1.08rem; max-width: 660px; margin-left: auto; margin-right: auto; }
.crumb { display: flex; gap: 8px; justify-content: center; margin-top: 16px; color: var(--muted); font-size: .9rem; font-weight: 600; }
.crumb a { color: var(--orange-dd); }

/* ===== Footer ===== */
.footer { background: var(--navy); color: #cfd4dc; padding: 70px 0 28px; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.footer .logo { color: #fff; margin-bottom: 16px; }
.footer .logo span { color: var(--orange); }
.footer p { color: #9aa1ad; font-size: .95rem; }
.footer h4 { color: #fff; font-size: 1.02rem; margin-bottom: 18px; font-family: 'Plus Jakarta Sans', sans-serif; }
.footer ul { list-style: none; display: grid; gap: 11px; }
.footer ul a { color: #a3aab6; font-size: .95rem; transition: .18s; }
.footer ul a:hover { color: var(--orange); }
.footer__contact .li { display: flex; gap: 11px; margin-bottom: 13px; font-size: .94rem; color: #b3bac6; }
.footer__contact svg { width: 18px; height: 18px; color: var(--orange); flex: none; margin-top: 3px; }
.footer__social { display: flex; gap: 10px; margin-top: 18px; }
.footer__social a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; color: #fff; transition: .2s; }
.footer__social a:hover { background: var(--orange); }
.footer__social svg { width: 17px; height: 17px; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 50px; padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .9rem; color: #8a919d; }
.footer__bottom a { color: var(--orange); }

/* ===== Reveal on scroll (safe fallback) ===== */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .hero .container { gap: 36px; }
  .loyalty { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .price-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .plan--feat { transform: none; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; gap: 18px; }
  .split, .hero .container, .appoint, .flash { grid-template-columns: 1fr; }
  .split--rev .split__media { order: 0; }
  .appoint { padding: 34px; }
  .nav, .header__phone { display: none; }
  .burger { display: block; }
  .header.open .nav {
    display: flex; position: absolute; top: var(--head-h); left: 0; right: 0;
    flex-direction: column; background: #fff; padding: 16px; gap: 4px;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
  }
  .header.open .nav a { padding: 12px 14px; }
  .hero__media { max-width: 440px; margin: 0 auto; }
  .hero__badge--tl { left: 6px; }
  .hero__badge--br { right: 6px; }
}
@media (max-width: 560px) {
  .section { padding: 60px 0; }
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .loyalty { grid-template-columns: 1fr; }
  .form .row { grid-template-columns: 1fr; }
  .band, .exclusive { padding: 40px 24px; }
  .appoint, .flash { padding: 24px; }
  .topbar .container { gap: 10px; }
  .topbar__txt { font-size: .82rem; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; }
  .hero__badge { padding: 10px 13px; }
  .countdown { gap: 8px; }
  .cd-box { min-width: 60px; padding: 12px 6px; }
  .header__cta .btn { display: none; }
  .ptable { font-size: .82rem; }
  .ptable th, .ptable td { padding: 9px 8px; }
}

/* ===== MONA SYSTEM FIX (2026-06-07): nav VN không xuống dòng + chữ sáng trên nền tối ===== */
header nav a, header nav li, nav ul li a, nav ul li, .menu a, .menu li, .nav-link,
.navbar a, .navbar-nav a, .main-menu a, .main-nav a, .site-nav a, .site-head a[href]{ white-space: nowrap !important; }
header nav ul, .menu, .navbar-nav, .main-menu, .main-nav ul, .nav-list{ flex-wrap: nowrap !important; }

/* nền tối -> chữ sáng (chỉ text thường + heading; chừa link/nút/accent) */
.bg-dark p, .bg-dark li, .bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5,
.section.dark p, .section.dark li, .section.dark h2, .section.dark h3, .section.dark h4,
.dark p, .dark li, .dark h2, .dark h3, .dark h4, .srv.dark p, .srv.dark li, .srv.dark h2, .srv.dark h3,
footer p, footer li, footer h2, footer h3, footer h4{ color: #ece4d3 !important; }

/* MONA NAVFIX v2 — selector rộng (mọi anchor/li trong header, không phụ thuộc class) */
header a, header li, header nav, header ul, .site-head a, .site-head li, .topbar ~ * nav a{ white-space: nowrap !important; }
header ul, header nav ul, header .menu{ flex-wrap: nowrap !important; }