/* ==========================================================
   HMT Clean - modern & minimal theme
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --hmt-primary: #0f172a;      /* almost black - modern */
  --hmt-accent:  #2563eb;      /* one blue accent */
  --hmt-accent-2:#1d4ed8;
  --hmt-warning: #f59e0b;      /* used only for CTAs */
  --hmt-text:    #1f2937;
  --hmt-muted:   #6b7280;
  --hmt-border:  #e5e7eb;
  --hmt-surface: #ffffff;
  --hmt-soft:    #f8fafc;
}

/* Base */
* { -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  color: var(--hmt-text);
  background: var(--hmt-surface);
  line-height: 1.65;
  font-size: 15.5px;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  color: var(--hmt-primary);
  letter-spacing: -.015em;
}
h1 { letter-spacing: -.03em; }
h2 { letter-spacing: -.02em; }
a { color: var(--hmt-accent); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--hmt-accent-2); }

.text-primary-hmt { color: var(--hmt-accent) !important; }
.bg-primary-hmt   { background-color: var(--hmt-primary) !important; color: #fff; }
.bg-dark-hmt      { background-color: var(--hmt-primary) !important; color: #fff; }
.bg-light-hmt     { background-color: var(--hmt-soft) !important; }

.btn-primary-hmt {
  background: var(--hmt-primary);
  border: 1px solid var(--hmt-primary);
  color: #fff;
  font-weight: 500;
  padding: .7rem 1.5rem;
  border-radius: 8px;
  transition: all .2s ease;
}
.btn-primary-hmt:hover { background: #000; border-color: #000; color: #fff; }
.btn-outline-hmt {
  background: transparent;
  border: 1px solid var(--hmt-border);
  color: var(--hmt-primary);
  font-weight: 500;
  padding: .7rem 1.5rem;
  border-radius: 8px;
  transition: all .2s ease;
}
.btn-outline-hmt:hover { border-color: var(--hmt-primary); background: var(--hmt-primary); color: #fff; }
.btn-cta-warning {
  background: var(--hmt-accent);
  color: #fff;
  border: 1px solid var(--hmt-accent);
  font-weight: 500;
  padding: .75rem 1.6rem;
  border-radius: 8px;
}
.btn-cta-warning:hover { background: var(--hmt-accent-2); border-color: var(--hmt-accent-2); color: #fff; }

/* ================= Top bar ================= */
.topbar {
  background: transparent;
  color: var(--hmt-muted);
  font-size: .82rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--hmt-border);
}
.topbar a { color: var(--hmt-muted); }
.topbar a:hover { color: var(--hmt-primary); }
.topbar .social a { margin-left: .75rem; }

/* ================= Navbar ================= */
.navbar-hmt {
  background: #fff;
  border-bottom: 1px solid var(--hmt-border);
  padding: .85rem 0;
}
.navbar-hmt.sticky { position: sticky; top: 0; z-index: 1030; }
.navbar-hmt .navbar-brand {
  padding: 0;
  display: inline-flex;
  align-items: center;
}
.navbar-hmt .navbar-brand img { height: 46px; width: auto; display: block; }
@media (max-width: 575.98px) {
  .navbar-hmt .navbar-brand img { height: 38px; }
}
.navbar-hmt .nav-link {
  color: var(--hmt-text);
  font-weight: 500;
  font-size: .95rem;
  padding: .55rem 1rem !important;
  position: relative;
}
.navbar-hmt .nav-link:hover { color: var(--hmt-primary); }
.navbar-hmt .nav-link.active { color: var(--hmt-primary); font-weight: 600; }
.navbar-hmt .nav-link.active::after {
  content: '';
  position: absolute;
  left: 1rem; right: 1rem; bottom: 0;
  height: 2px; background: var(--hmt-primary);
}
.navbar-hmt .dropdown-menu {
  border: 1px solid var(--hmt-border);
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
  border-radius: 10px;
  padding: .5rem;
  min-width: 260px;
  margin-top: .5rem !important;
}
.navbar-hmt .dropdown-item {
  border-radius: 6px;
  padding: .55rem .8rem;
  font-weight: 500;
  font-size: .92rem;
  color: var(--hmt-text);
}
.navbar-hmt .dropdown-item:hover {
  background: var(--hmt-soft);
  color: var(--hmt-primary);
}
.navbar-hmt .dropdown-item i { opacity: .55; }
.navbar-hmt .btn-hotline {
  background: var(--hmt-accent);
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  padding: .55rem 1.15rem;
  font-size: .9rem;
  border: none;
}
.navbar-hmt .btn-hotline:hover { background: var(--hmt-accent-2); color: #fff; }
.navbar-hmt .btn-hotline i { margin-right: .35rem; }

/* ================= Hero ================= */
.hero {
  position: relative;
  background: var(--hmt-soft);
  color: var(--hmt-primary);
  overflow: hidden;
  padding: 6rem 0 5rem;
  border-bottom: 1px solid var(--hmt-border);
}
.hero .container { position: relative; z-index: 2; }
.hero h1 {
  color: var(--hmt-primary);
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 800; line-height: 1.08;
  margin-bottom: 1.25rem;
}
.hero h1 em {
  font-style: normal;
  color: var(--hmt-accent);
}
.hero .tagline {
  display: inline-block;
  background: transparent;
  padding: 0;
  color: var(--hmt-muted);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .78rem;
  margin-bottom: 1.25rem;
}
.hero .tagline .dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--hmt-accent); margin-right: .5rem; vertical-align: middle;
}
.hero p.lead {
  color: var(--hmt-muted);
  font-size: 1.05rem;
  max-width: 540px;
  font-weight: 400;
}
.hero .hero-img {
  border-radius: 12px;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border: 1px solid var(--hmt-border);
}
.hero-stats { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--hmt-border); }
.hero-stats .stat h3 { color: var(--hmt-primary); font-size: 1.75rem; font-weight: 700; margin: 0; letter-spacing: -.02em;}
.hero-stats .stat p { color: var(--hmt-muted); margin: 0; font-size: .82rem; }

/* Page hero (inner pages) */
.page-hero {
  background: var(--hmt-soft);
  color: var(--hmt-primary);
  padding: 3.5rem 0 2.5rem;
  border-bottom: 1px solid var(--hmt-border);
}
.page-hero h1 { color: var(--hmt-primary); margin-bottom: .5rem; font-size: 2rem; }
.page-hero .breadcrumb {
  --bs-breadcrumb-divider-color: var(--hmt-muted);
  --bs-breadcrumb-item-active-color: var(--hmt-muted);
  margin: 0; background: transparent; font-size: .88rem;
}
.page-hero .breadcrumb a { color: var(--hmt-muted); }
.page-hero .breadcrumb a:hover { color: var(--hmt-primary); }

/* ================= Section utilities ================= */
.section { padding: 5rem 0; }
.section-sm { padding: 3.5rem 0; }
.section-title { text-align: center; margin-bottom: 3rem; max-width: 720px; margin-left: auto; margin-right: auto; }
.section-title span.eyebrow {
  display: inline-block;
  color: var(--hmt-accent); font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; font-size: .75rem; margin-bottom: .75rem;
}
.section-title h2 {
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  margin: 0;
  font-weight: 700;
}
.section-title p { margin: 1rem auto 0; color: var(--hmt-muted); font-size: 1rem; }

/* ================= Service cards ================= */
.service-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--hmt-border);
  transition: all .25s ease;
  height: 100%;
}
.service-card:hover {
  border-color: var(--hmt-primary);
  transform: translateY(-2px);
}
.service-card .thumb {
  aspect-ratio: 16/10;
  overflow: hidden;
  position: relative;
  background: var(--hmt-soft);
}
.service-card .thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.service-card:hover .thumb img { transform: scale(1.04); }
.service-card .thumb .icon-badge {
  position: absolute; left: 1rem; top: 1rem;
  width: 40px; height: 40px; border-radius: 8px;
  background: #fff; color: var(--hmt-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  border: 1px solid var(--hmt-border);
}
.service-card .card-body { padding: 1.5rem; }
.service-card h5 { margin-bottom: .5rem; font-size: 1.05rem; font-weight: 600; }
.service-card p { color: var(--hmt-muted); font-size: .92rem; margin-bottom: 1rem; }
.service-card .read-more {
  font-weight: 500; color: var(--hmt-primary);
  font-size: .88rem;
  display: inline-flex; align-items: center; gap: .35rem;
}
.service-card .read-more:hover { gap: .55rem; }

/* ================= Feature / Why choose us ================= */
.feature-item {
  display: flex; gap: 1rem;
  padding: 1.4rem;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--hmt-border);
  transition: border-color .2s ease;
  height: 100%;
}
.feature-item:hover { border-color: var(--hmt-primary); }
.feature-item .icon {
  flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--hmt-soft);
  color: var(--hmt-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  border: 1px solid var(--hmt-border);
}
.feature-item h5 { font-size: 1rem; margin-bottom: .25rem; font-weight: 600; }
.feature-item p { color: var(--hmt-muted); margin: 0; font-size: .9rem; }

/* Vertical variant used on About + Franchise */
.feature-item.flex-column .icon { margin: 0 0 1rem; }

/* ================= Stats bar ================= */
.stats-bar {
  background: var(--hmt-primary);
  color: #fff;
  padding: 3.5rem 0;
}
.stats-bar .stat { text-align: center; }
.stats-bar .stat h3 { color: #fff; font-size: 2.25rem; font-weight: 700; margin: 0; letter-spacing: -.02em;}
.stats-bar .stat p { margin: .25rem 0 0; color: rgba(255,255,255,.65); font-weight: 400; font-size: .88rem; }

/* ================= Testimonials ================= */
.testimonial-card {
  background: #fff;
  border-radius: 12px;
  padding: 1.75rem;
  border: 1px solid var(--hmt-border);
  height: 100%;
}
.testimonial-card .stars {
  color: var(--hmt-warning);
  margin-bottom: .75rem;
  font-size: .9rem;
  display: flex; gap: 2px;
}
.testimonial-card p {
  color: var(--hmt-text);
  font-style: normal;
  font-size: .96rem;
  line-height: 1.65;
}
.testimonial-card .who { display: flex; align-items: center; gap: .75rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--hmt-border); }
.testimonial-card .who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.testimonial-card .who strong { display: block; color: var(--hmt-primary); font-size: .92rem; font-weight: 600; }
.testimonial-card .who small { color: var(--hmt-muted); font-size: .8rem; }

/* ================= CTA banner ================= */
.cta-banner {
  background: var(--hmt-primary);
  color: #fff;
  padding: 3rem 2rem;
  border-radius: 16px;
}
.cta-banner h3 { color: #fff; font-weight: 700; letter-spacing: -.01em; }
.cta-banner p { color: rgba(255,255,255,.7); margin: 0; }

/* ================= About / content ================= */
.content-img {
  border-radius: 12px;
  width: 100%;
  border: 1px solid var(--hmt-border);
}
.check-list { list-style: none; padding: 0; }
.check-list li {
  padding-left: 1.75rem; position: relative; margin-bottom: .55rem;
  color: var(--hmt-text);
}
.check-list li::before {
  content: "\F26A"; /* bi-check-circle-fill */
  font-family: "bootstrap-icons";
  position: absolute; left: 0; top: 1px;
  color: var(--hmt-accent); font-size: 1rem;
}

/* Price table */
.price-table {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--hmt-border);
}
.price-table th {
  background: var(--hmt-soft);
  color: var(--hmt-primary);
  font-weight: 600;
  border-color: var(--hmt-border);
}
.price-table td { border-color: var(--hmt-border); }
.price-table td, .price-table th { padding: .9rem 1.1rem; vertical-align: middle; font-size: .93rem; }

/* Process steps */
.step { text-align: center; padding: 1.5rem 1rem; }
.step .num {
  width: 44px; height: 44px; margin: 0 auto 1.25rem;
  background: var(--hmt-primary);
  color: #fff;
  border: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 600;
}
.step h5 { font-size: 1rem; font-weight: 600; margin-bottom: .5rem; }

/* ================= Sticky sidebar (service detail) ================= */
@media (min-width: 992px) {
  .spahome-sticky-aside {
    position: sticky;
    top: 90px;
    align-self: flex-start;
  }
}

/* ================= Contact ================= */
.contact-card {
  background: #fff; border-radius: 12px; padding: 1.5rem;
  border: 1px solid var(--hmt-border); height: 100%;
  transition: border-color .2s ease;
}
.contact-card:hover { border-color: var(--hmt-primary); }
.contact-card .icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--hmt-soft); color: var(--hmt-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; margin-bottom: 1rem;
  border: 1px solid var(--hmt-border);
}
.form-control, .form-select {
  border-radius: 8px;
  padding: .7rem .95rem;
  border: 1px solid var(--hmt-border);
  font-size: .95rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--hmt-primary);
  box-shadow: 0 0 0 3px rgba(15,23,42,.06);
}
label.form-label { font-weight: 500; color: var(--hmt-primary); font-size: .9rem; }

/* ================= Accordion ================= */
.accordion-item {
  border: 1px solid var(--hmt-border);
  border-radius: 10px !important;
  margin-bottom: .5rem;
  overflow: hidden;
}
.accordion-button {
  font-weight: 500; color: var(--hmt-primary);
  background: #fff;
  padding: 1rem 1.25rem;
  font-size: .95rem;
}
.accordion-button:not(.collapsed) {
  color: var(--hmt-primary); background: var(--hmt-soft); box-shadow: none;
}
.accordion-button:focus { box-shadow: none; border-color: var(--hmt-border); }
.accordion-body { color: var(--hmt-muted); font-size: .93rem; padding: 0 1.25rem 1.25rem; }

/* ================= Footer ================= */
footer.site-footer {
  background: #fff;
  color: var(--hmt-muted);
  padding: 4rem 0 1rem;
  border-top: 1px solid var(--hmt-border);
}
footer.site-footer h5 {
  color: var(--hmt-primary);
  margin-bottom: 1.25rem;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}
footer.site-footer a { color: var(--hmt-muted); transition: color .18s ease; font-size: .93rem; }
footer.site-footer a:hover { color: var(--hmt-primary); }
footer.site-footer ul { list-style: none; padding: 0; }
footer.site-footer ul li { margin-bottom: .5rem; }
footer.site-footer .brand img { height: 56px; width: auto; display: block; margin-bottom: .5rem; }
footer.site-footer p { font-size: .92rem; }
footer.site-footer .socials a {
  display: inline-flex; width: 36px; height: 36px;
  align-items: center; justify-content: center;
  border: 1px solid var(--hmt-border);
  border-radius: 8px;
  margin-right: .4rem; color: var(--hmt-muted);
  transition: all .2s ease;
}
footer.site-footer .socials a:hover { border-color: var(--hmt-primary); color: var(--hmt-primary); }
.footer-bottom {
  border-top: 1px solid var(--hmt-border);
  padding-top: 1.25rem; margin-top: 2.5rem;
  text-align: center; color: var(--hmt-muted); font-size: .85rem;
}
.footer-bottom a { color: var(--hmt-accent); }

/* ================= Floating buttons ================= */
.float-actions {
  position: fixed; right: 18px; bottom: 18px; z-index: 1050;
  display: flex; flex-direction: column; gap: .5rem;
}
.float-actions a {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.15rem;
  box-shadow: 0 6px 18px rgba(15,23,42,.15);
  transition: transform .18s ease;
}
.float-actions a:hover { transform: translateY(-2px); }
.fa-phone { background: var(--hmt-accent); }
.fa-zalo  { background: #0068ff; font-weight: 600; font-size: .82rem; font-family: 'Inter', sans-serif; letter-spacing: .02em; }
.fa-mess  { background: #7c3aed; }

/* ================= Social brand hover colors ================= */
/* Topbar: icon color turns to brand color */
.topbar .social a[aria-label="Facebook"]:hover  { color: #1877f2; }
.topbar .social a[aria-label="YouTube"]:hover   { color: #ff0000; }
.topbar .social a[aria-label="TikTok"]:hover    { color: #000000; }
.topbar .social a[aria-label="Instagram"]:hover { color: #e4405f; }
.topbar .social a[aria-label="Zalo"]:hover      { color: #0068ff; }

/* Footer squares: background fills with brand color, icon turns white */
footer.site-footer .socials a[aria-label="Facebook"]:hover  { background: #1877f2; border-color: #1877f2; color: #fff; }
footer.site-footer .socials a[aria-label="YouTube"]:hover   { background: #ff0000; border-color: #ff0000; color: #fff; }
footer.site-footer .socials a[aria-label="TikTok"]:hover    { background: #000000; border-color: #000000; color: #fff; }
footer.site-footer .socials a[aria-label="Instagram"]:hover { background: #e4405f; border-color: #e4405f; color: #fff; }
footer.site-footer .socials a[aria-label="Zalo"]:hover      { background: #0068ff; border-color: #0068ff; color: #fff; }

/* Utility: soft chip badges */
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--hmt-soft);
  border: 1px solid var(--hmt-border);
  color: var(--hmt-text);
  padding: .35rem .75rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 500;
}

/* Alerts (softened) */
.alert-primary {
  background: var(--hmt-soft);
  border: 1px solid var(--hmt-border);
  color: var(--hmt-primary);
  border-radius: 10px;
}

/* List group (soft) */
.list-group-item {
  border-color: var(--hmt-border);
  font-size: .92rem;
  padding: .7rem .9rem;
}
.list-group-item:hover { background: var(--hmt-soft); color: var(--hmt-primary); }

/* ================= Responsive ================= */
@media (max-width: 991.98px) {
  .hero { padding: 4rem 0 3rem; text-align: center; }
  .hero .hero-img { margin-top: 2rem; }
  .hero p.lead { margin-left: auto; margin-right: auto; }
  .navbar-hmt .btn-hotline { margin-top: .5rem; width: 100%; text-align: center; }
  .topbar { text-align: center; font-size: .78rem; }
  .topbar .social { margin-top: .35rem; }
  .cta-banner { padding: 2rem 1.5rem; }
}
@media (max-width: 575.98px) {
  .section { padding: 3.5rem 0; }
  .stats-bar .stat h3 { font-size: 1.6rem; }
  .float-actions { right: 12px; bottom: 12px; }
  .float-actions a { width: 42px; height: 42px; font-size: 1rem; }
}