/* ============================================================
   MONA Dental — Template nha khoa thẩm mỹ
   Style chung cho mọi trang. Responsive, mobile-first.
   ============================================================ */

:root {
  --teal: #14b8a6;
  --teal-d: #0d9488;
  --teal-dd: #0f766e;
  --navy: #102a30;
  --navy-2: #1a3a41;
  --ink: #16323a;
  --muted: #5b757c;
  --soft: #e9f8f6;
  --soft-2: #f3fbfa;
  --line: #e2eeec;
  --white: #ffffff;
  --amber: #ffb020;
  --shadow-sm: 0 4px 16px rgba(16, 42, 48, .06);
  --shadow: 0 18px 50px rgba(16, 42, 48, .12);
  --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.18;
  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(--teal-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(--teal); border-radius: 2px; }

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

/* 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(--teal); color: #fff; box-shadow: 0 12px 26px rgba(20,184,166,.32); }
.btn--primary:hover { background: var(--teal-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(--teal); color: var(--teal-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(--teal-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: #ffe08a; }
.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,.92); 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(--teal), var(--teal-dd));
  display: grid; place-items: center; color: #fff; box-shadow: 0 8px 18px rgba(20,184,166,.4);
}
.logo__mark svg { width: 22px; height: 22px; }
.logo span { color: var(--teal-dd); }

.nav { display: flex; align-items: center; gap: 6px; }
.nav a { padding: 9px 15px; border-radius: 10px; font-weight: 600; font-size: .96rem; color: var(--ink); transition: .18s; }
.nav a:hover { color: var(--teal-dd); background: var(--soft); }
.nav a.active { color: var(--teal-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(--teal-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(20,184,166,.16), 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.6vw, 3.7rem); }
.hero h1 em { font-style: normal; color: var(--teal-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(--teal-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(--teal-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; }

/* ===== 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(--teal-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(--teal-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(--teal-dd); }
.stat small { color: var(--muted); font-weight: 600; }

/* ===== Split (about/treatment) ===== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split--rev .split__media { order: 2; }
.split__media img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow); object-fit: cover; aspect-ratio: 5/4.2; }
.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(--teal); flex: none; margin-top: 2px; }

/* ===== Steps band ===== */
.band { background: linear-gradient(120deg, var(--navy) 0%, var(--teal-dd) 120%); 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,.78); font-size: .95rem; }

/* ===== Doctors ===== */
.doc { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: .25s; }
.doc:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.doc__img { aspect-ratio: 1/1; overflow: hidden; }
.doc__img img { width: 100%; height: 100%; object-fit: cover; }
.doc__body { padding: 20px; text-align: center; }
.doc__body h3 { font-size: 1.16rem; }
.doc__body .role { color: var(--teal-dd); font-weight: 700; font-size: .9rem; margin-top: 3px; }
.doc__social { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.doc__social a { width: 34px; height: 34px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; color: var(--teal-dd); transition: .2s; }
.doc__social a:hover { background: var(--teal); color: #fff; }
.doc__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(--teal); box-shadow: var(--shadow); position: relative; }
.plan--feat::after { content: "Phổ biến"; position: absolute; top: 18px; right: 18px; background: var(--teal); 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 .amt { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 2.4rem; color: var(--navy); margin: 14px 0 4px; }
.plan .amt small { font-size: .95rem; color: var(--muted); font-weight: 600; }
.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(--teal); flex: none; }
.plan .btn { margin-top: auto; width: 100%; }

/* price table */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r); }
.ptable { width: 100%; min-width: 540px; 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(--teal-dd); }
.ptable tr:last-child td { border-bottom: none; }
.ptable tbody tr:hover { background: var(--soft-2); }

/* ===== 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(--teal),var(--teal-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); }

/* ===== Appointment / 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(--teal-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(--teal); background: #fff; }
.field textarea { resize: vertical; min-height: 110px; }

/* ===== Exclusive CTA (luật 3) ===== */
.exclusive { background: linear-gradient(120deg, var(--navy), var(--teal-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,.1), 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,.85); max-width: 620px; 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: 640px; 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(--teal-dd); }

/* ===== Footer ===== */
.footer { background: var(--navy); color: #cfe3e2; 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(--teal); }
.footer p { color: #9fbdbb; 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: #a7c4c2; font-size: .95rem; transition: .18s; }
.footer ul a:hover { color: var(--teal); }
.footer__contact .li { display: flex; gap: 11px; margin-bottom: 13px; font-size: .94rem; color: #b7d2d0; }
.footer__contact svg { width: 18px; height: 18px; color: var(--teal); 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(--teal); }
.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: #8fadab; }
.footer__bottom a { color: var(--teal); }

/* ===== 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; }
}
@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; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; gap: 18px; }
  .split, .hero .container, .appoint { grid-template-columns: 1fr; }
  .split--rev .split__media { order: 0; }
  .appoint { padding: 34px; }
  .nav, .header__phone, .header__cta { 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; }
  .form .row { grid-template-columns: 1fr; }
  .band, .exclusive { padding: 40px 24px; }
  .appoint { 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; }
}

/* ===== 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; }