*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--fp-font-body);
  background:var(--fp-color-bg);
  color:var(--fp-color-text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--fp-font-heading);color:var(--fp-color-secondary);font-weight:700;letter-spacing:-.01em}
.fp-container{max-width:var(--fp-container-w);margin:0 auto;padding:0 24px}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--fp-color-primary);margin-bottom:14px;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--fp-color-cta)}

/* ===== NOTICE BANNER (prototype note) ===== */
.proto-note{
  background:var(--fp-color-secondary);color:#fff;font-size:13px;
  text-align:center;padding:9px 16px;
}
.proto-note b{color:#7fd9cd}


/* ===================== HERO — MOTION ===================== */
.fp-hero{
  position:relative;overflow:hidden;
  padding:calc(var(--fp-space-section) * .9) 0 var(--fp-space-section);
  text-align:center;
}
.fp-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;z-index:0;animation:drift 16s ease-in-out infinite;}
.fp-blob--1{width:420px;height:420px;background:var(--fp-color-primary);top:-160px;left:-120px;animation-delay:0s}
.fp-blob--2{width:360px;height:360px;background:var(--fp-color-cta);top:40px;right:-140px;animation-delay:-5s}
.fp-blob--3{width:300px;height:300px;background:#7fd9cd;bottom:-160px;left:38%;animation-delay:-9s}

/**
 * TỐI ƯU HIỆU NĂNG DI ĐỘNG — nguyên nhân chính kéo điểm Performance mobile
 * xuống 68 (LCP 10.3s, Speed Index 7.1s) trong khi desktop vẫn 100.
 *
 * Ba khối tròn trên có `filter: blur(60px)` trên diện tích rất lớn (420px,
 * 360px, 300px) VÀ chạy animation lặp vô hạn. Làm mờ diện rộng là thao tác
 * cực nặng với GPU máy phổ thông (Lighthouse mobile giả lập Moto G Power);
 * cộng thêm animation lặp mãi khiến khung hình LIÊN TỤC phải vẽ lại, trang
 * không bao giờ "đứng yên" về mặt thị giác — đó chính là thứ Speed Index đo,
 * nên chỉ số này hỏng nặng dù Total Blocking Time vẫn 0ms.
 *
 * Trên di động: bỏ hẳn làm mờ + animation, thay bằng dải màu chuyển sắc mềm
 * cho ra hiệu ứng thị giác tương đương mà gần như không tốn chi phí vẽ.
 * Desktop giữ nguyên hiệu ứng gốc vì máy đủ khoẻ và đang đạt 100 điểm.
 */
@media (max-width:900px){
  .fp-blob{filter:none;animation:none;opacity:.22}
}

/**
 * Tôn trọng thiết lập "giảm chuyển động" của hệ điều hành — người dùng bị
 * rối loạn tiền đình hoặc nhạy cảm chuyển động đã chủ động bật tuỳ chọn này.
 * Đây cũng là tiêu chí Accessibility mà Lighthouse chấm.
 */
@media (prefers-reduced-motion: reduce){
  .fp-blob{animation:none}
}
@keyframes drift{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(30px,-20px) scale(1.08)}
}
.fp-hero .fp-container{position:relative;z-index:1}
.fp-hero__title{
  font-size:var(--fp-fs-hero);max-width:780px;margin:0 auto 20px;
  opacity:0;transform:translateY(16px);animation:riseIn .7s var(--fp-ease) .05s forwards;
}
.fp-hero__sub{
  font-size:var(--fp-fs-sub);color:var(--fp-color-text-muted);max-width:600px;margin:0 auto 34px;
  opacity:0;transform:translateY(16px);animation:riseIn .7s var(--fp-ease) .18s forwards;
}
.fp-hero__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
  opacity:0;transform:translateY(16px);animation:riseIn .7s var(--fp-ease) .3s forwards;}
@keyframes riseIn{to{opacity:1;transform:translateY(0)}}

.fp-stats{
  display:flex;justify-content:center;gap:clamp(24px,6vw,64px);flex-wrap:wrap;
  margin-top:64px;padding-top:40px;border-top:1px solid var(--fp-color-border);
}
.fp-stat{text-align:center}
.fp-stat__num{font-family:var(--fp-font-heading);font-weight:700;font-size:clamp(28px,4vw,40px);color:var(--fp-color-primary)}
.fp-stat__label{font-size:13.5px;color:var(--fp-color-text-muted);margin-top:4px}

/* ===================== GLASS CARD BASE ===================== */
.glass-card{
  background:var(--fp-glass-bg);
  backdrop-filter:blur(var(--fp-blur-glass));
  -webkit-backdrop-filter:blur(var(--fp-blur-glass));
  border:1px solid var(--fp-glass-border);
  border-radius:var(--fp-radius-xl);
  box-shadow:var(--fp-shadow-sm);
}

/* ===================== SECTION 2 — SERVICES HUB ===================== */
.fp-section{padding:var(--fp-space-section) 0}
.fp-section-head{max-width:600px;margin:0 auto 48px;text-align:center}
.fp-section-head h2{font-size:var(--fp-fs-h2);margin-bottom:12px}
.fp-section-head p{color:var(--fp-color-text-muted);font-size:var(--fp-fs-sub)}

.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--fp-space-gap)}
.service-card{
  padding:30px 26px;transition:transform var(--fp-dur-2) var(--fp-ease), box-shadow var(--fp-dur-2) var(--fp-ease), background var(--fp-dur-2) var(--fp-ease);
  text-decoration:none !important;color:inherit !important;display:block;
}
.service-card:hover{transform:translateY(-2px);box-shadow:var(--fp-glow-primary);background:rgb(255 255 255 / 82%)}
.service-icon{
  width:48px;height:48px;border-radius:14px;
  background:linear-gradient(135deg,var(--fp-color-primary),var(--fp-color-cta));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;margin-bottom:18px;
}
/**
 * Biến thể dùng tranh minh hoạ thay emoji.
 *
 * BỎ nền gradient xanh: các tranh trong Thư viện Media là minh hoạ nền
 * trắng/nét màu, đặt lên nền xanh sẽ chỏi màu và mất chi tiết. Để tranh
 * đứng riêng trên nền thẻ cho sạch.
 *
 * GIỮ NGUYÊN 48x48 như ô emoji (không phóng to) để các thẻ trong cùng
 * một hàng có tiêu đề <h3> thẳng nhau — hiện còn 2 thẻ chưa có tranh nên
 * 2 kiểu icon vẫn đang hiển thị xen kẽ.
 */
.service-icon--img{background:none;border-radius:0;overflow:hidden}
/**
 * max-width/max-height là LỚP CHẶN CỨNG chống tràn.
 *
 * Đã từng xảy ra sự cố: ảnh icon bung ra kích thước gốc, đè lên tiêu đề
 * thẻ. Nguyên nhân là thẻ <img> mang width/height lớn trong khi CSS chưa
 * kịp áp dụng (hoặc trình duyệt còn giữ bản CSS cũ trong bộ nhớ đệm).
 * Cặp max-* cộng overflow:hidden ở trên đảm bảo ảnh KHÔNG THỂ vượt khỏi ô
 * 48px trong mọi tình huống, kể cả khi CSS tải thiếu.
 */
.service-icon--img img{
  width:100%;height:100%;max-width:100%;max-height:100%;
  object-fit:contain;display:block;
}
.service-card h3{font-size:17px;margin-bottom:8px}
.service-card p{font-size:14px;color:var(--fp-color-text-muted)}

/* ===== Top cơ sở y tế nổi bật ===== */
.top-facilities-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.top-facility-card{
  display:block;padding:22px;text-decoration:none !important;color:inherit !important;
  transition:transform var(--fp-dur-2) var(--fp-ease), box-shadow var(--fp-dur-2) var(--fp-ease);
}
.top-facility-card:hover{transform:translateY(-2px);box-shadow:var(--fp-glow-primary)}
.top-facility-card__type{
  display:inline-block;font-size:10.5px;font-weight:700;color:#fff;background:var(--fp-color-primary);
  padding:3px 10px;border-radius:999px;margin-bottom:12px;
}
.top-facility-card h3{font-size:15px;margin-bottom:6px}
.top-facility-card p{font-size:12.5px;color:var(--fp-color-text-muted);margin-bottom:10px}
.top-facility-card__badges{display:flex;gap:8px}
.top-facility-card__badges span{font-size:10.5px;font-weight:700;color:var(--fp-color-success);background:rgb(34 197 94/.12);padding:3px 9px;border-radius:999px}

/* ===== Trạng thái rỗng — tin tức trang chủ ===== */
.news-empty{
  grid-column:1/-1;text-align:center;padding:56px 24px;
  background:rgba(255,255,255,0.45);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.25);box-shadow:0 8px 32px 0 rgba(0,0,0,0.05);border-radius:12px;
}
.news-empty__icon{font-size:32px;margin-bottom:12px}
.news-empty p{font-size:14px;color:var(--fp-color-text-muted);font-weight:600}

/* ===================== GIAN HÀNG TÀI TRỢ ===================== */
.sponsors-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--fp-space-gap)}
.sponsor-card{
  padding:24px 20px;text-align:center;transition:transform var(--fp-dur-2) var(--fp-ease), box-shadow var(--fp-dur-2) var(--fp-ease);
}
.sponsor-card:hover{transform:translateY(-2px);box-shadow:var(--fp-glow-primary)}
.sponsor-mark{
  width:52px;height:52px;border-radius:14px;margin:0 auto 14px;
  background:linear-gradient(135deg,var(--fp-color-primary),var(--fp-color-cta));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:17px;
}
.sponsor-card h3{font-size:14.5px;margin-bottom:4px}
.sponsor-card p{font-size:12.5px;color:var(--fp-color-text-muted)}
.sponsor-card .tag{display:inline-block;margin-top:10px}

/* ===================== NEWS ===================== */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--fp-space-gap)}
.news-card{
  background:var(--fp-color-surface);border:1px solid var(--fp-color-border);border-radius:var(--fp-radius-xl);
  overflow:hidden;transition:transform var(--fp-dur-2) var(--fp-ease), box-shadow var(--fp-dur-2) var(--fp-ease);
}
.news-card:hover{transform:translateY(-2px);box-shadow:var(--fp-glow-primary)}
.news-thumb{height:150px;position:relative;background:linear-gradient(135deg,var(--fp-color-primary),var(--fp-color-cta));display:block;overflow:hidden}
.news-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.news-card h3 a,.news-card > a{text-decoration:none !important;color:inherit !important}
.news-card h3:hover{color:var(--fp-color-primary)}
.news-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.18),transparent 60%)}
.news-tag{position:absolute;top:12px;left:12px;background:#fff;color:var(--fp-color-cta);font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;z-index:1}
.news-body{padding:20px}
.news-date{font-size:12px;color:var(--fp-color-text-muted);margin-bottom:8px}
.news-body h3{font-size:15.5px;margin-bottom:8px;line-height:1.4}
.news-body p{font-size:13px;color:var(--fp-color-text-muted)}

/* ===================== SECTION 3 — MAP DASHBOARD ===================== */
.map-dashboard{
  display:grid;grid-template-columns:1.4fr 1fr;gap:var(--fp-space-gap);align-items:stretch;
}
.map-visual{
  position:relative;min-height:420px;border-radius:var(--fp-radius-xl);overflow:hidden;
  background:#eaf5f3;border:1px solid var(--fp-color-border);
}
#homeMiniMap{position:absolute;inset:0;background:#eaf5f3}

/* Marker Leaflet màu theo loại cơ sở — dùng chung công thức với page-map.php */
.fp-map-pin span{
  display:block;width:100%;height:100%;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  box-shadow:0 2px 6px rgba(0,0,0,.3),0 0 0 2px #fff;
}
.leaflet-popup-content-wrapper{
  background:rgba(255,255,255,0.75);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.35);border-radius:16px;box-shadow:0 12px 34px rgba(0,0,0,.14);
}
.leaflet-popup-tip{background:rgba(255,255,255,0.75)}
.leaflet-popup-content{margin:14px 16px;width:200px !important}
.fp-map-popup .mp-type{display:inline-block;font-size:10px;font-weight:700;color:#fff;padding:3px 9px;border-radius:999px;margin-bottom:8px}
.fp-map-popup h3{font-size:14px;margin:0 0 6px;color:var(--fp-color-secondary)}
.fp-map-popup p{font-size:12px;color:var(--fp-color-text-muted);margin:0}
.leaflet-top,.leaflet-bottom{z-index:15 !important}

.map-badge{
  position:absolute;top:18px;left:18px;background:var(--fp-glass-bg);backdrop-filter:blur(10px);
  padding:10px 14px;border-radius:12px;border:1px solid var(--fp-glass-border);font-size:13px;font-weight:600;
  display:flex;align-items:center;gap:8px;box-shadow:var(--fp-shadow-sm);z-index:20;
}
.dot-live{width:8px;height:8px;border-radius:50%;background:var(--fp-color-success);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}


.map-panel{display:flex;flex-direction:column;gap:var(--fp-space-gap)}
.panel-block{padding:22px}
.panel-block h3{font-size:15px;margin-bottom:16px}
.facility-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 0;border-bottom:1px solid var(--fp-color-border);font-size:13.5px;
}
.facility-row:last-child{border-bottom:none}
.tag{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;background:rgb(13 148 136/10%);color:var(--fp-color-cta)}
.chart-bars{display:flex;align-items:flex-end;gap:10px;height:90px}
.chart-bar{flex:1;background:linear-gradient(180deg,var(--fp-color-primary),var(--fp-color-cta));border-radius:6px 6px 0 0;
  transform:scaleY(0);transform-origin:bottom;transition:transform .8s var(--fp-ease);}
.chart-bar.in-view{transform:scaleY(1)}

/* ===================== SECTION 4 — AI ASSISTANT HUB ===================== */
.ai-hub{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
.chat-mock{padding:0;overflow:hidden;display:flex;flex-direction:column;height:460px}
.chat-mock__head{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--fp-glass-border)}
.chat-mock__head .service-icon{width:32px;height:32px;margin:0;font-size:15px;border-radius:10px}
.chat-mock__head strong{font-size:14.5px}
.chat-mock__head span{display:block;font-size:12px;color:var(--fp-color-success)}
.chat-mock__body{flex:1;padding:20px;display:flex;flex-direction:column;gap:12px;overflow-y:auto}
.msg{max-width:78%;padding:11px 15px;border-radius:16px;font-size:13.5px;line-height:1.5;
  opacity:0;transform:translateY(8px);animation:msgIn .5s var(--fp-ease) forwards;}
.msg.user{align-self:flex-end;background:var(--fp-color-cta);color:#fff;border-bottom-right-radius:4px;animation-delay:.1s}
.msg.bot{align-self:flex-start;background:#fff;border:1px solid var(--fp-color-border);border-bottom-left-radius:4px;animation-delay:.5s}
@keyframes msgIn{to{opacity:1;transform:translateY(0)}}
.typing{align-self:flex-start;display:flex;gap:4px;padding:12px 16px;background:#fff;border:1px solid var(--fp-color-border);border-radius:16px;border-bottom-left-radius:4px;animation-delay:.9s;opacity:0;animation:msgIn .5s var(--fp-ease) forwards}
.typing span{width:6px;height:6px;border-radius:50%;background:var(--fp-color-text-muted);animation:blink 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.chat-mock__input{display:flex;gap:8px;padding:14px 16px;border-top:1px solid var(--fp-glass-border)}
.chat-mock__input input{flex:1;border:1px solid var(--fp-color-border);border-radius:var(--fp-radius-md);padding:10px 14px;font-size:13.5px;background:#fff}
.chat-mock__input button{width:38px;height:38px;border-radius:10px;background:var(--fp-color-cta);color:#fff;border:none;cursor:pointer}

.ai-hub-copy h2{margin-bottom:14px}
.ai-hub-copy p{color:var(--fp-color-text-muted);margin-bottom:24px}
.ai-feature-list{display:flex;flex-direction:column;gap:14px;margin-bottom:28px}
.ai-feature{display:flex;gap:12px;align-items:flex-start;font-size:14px}
.ai-feature .dot{width:20px;height:20px;border-radius:6px;background:rgb(13 148 136/12%);color:var(--fp-color-cta);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;margin-top:2px}

/* Toast */
.toast-demo-btn{margin-top:4px}
.toast{
  position:fixed;bottom:28px;right:28px;z-index:1200;
  background:var(--fp-color-secondary);color:#fff;padding:14px 20px;border-radius:14px;
  display:flex;align-items:center;gap:10px;font-size:13.5px;box-shadow:0 12px 30px rgba(28,61,58,.28);
  transform:translateY(20px);opacity:0;pointer-events:none;transition:all var(--fp-dur-3) var(--fp-ease);
}
.toast.show{transform:translateY(0);opacity:1}
.toast .dot-live{background:#7fd9cd}

/* ===================== SECTION 5 — TRUST & UTILITY ===================== */
.timeline{display:flex;justify-content:space-between;gap:20px;position:relative;margin-top:20px}
.timeline::before{content:"";position:absolute;top:22px;left:0;right:0;height:2px;background:var(--fp-color-border);z-index:0}
.tl-step{flex:1;text-align:center;position:relative;z-index:1}
.tl-num{
  width:44px;height:44px;border-radius:50%;background:#fff;border:2px solid var(--fp-color-primary);
  color:var(--fp-color-primary);font-weight:700;font-family:var(--fp-font-heading);
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px;
}
.tl-step h3{font-size:15px;margin-bottom:6px}
.tl-step p{font-size:13px;color:var(--fp-color-text-muted);max-width:200px;margin:0 auto}

.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:56px}
.price-card{
  padding:30px 26px;display:flex;flex-direction:column;
  transition:transform .4s var(--fp-ease), box-shadow .4s var(--fp-ease);
}
.price-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,.08)}
.price-card.featured{background:linear-gradient(160deg,var(--fp-color-secondary),#0f2b28);color:#fff;border:none;box-shadow:0 12px 32px rgba(15,43,40,.28)}
.price-card.featured:hover{box-shadow:0 24px 48px rgba(15,43,40,.36)}
.price-card.featured .price-card__desc,.price-card.featured li{color:rgb(255 255 255/72%)}
.price-card__badge{align-self:flex-start;font-size:11px;font-weight:700;background:var(--fp-color-cta);color:#fff;padding:4px 10px;border-radius:999px;margin-bottom:14px}
.price-card h3{font-size:17px;margin-bottom:6px}
.price-card.featured h3{color:#fff}
.price-card__desc{font-size:13px;color:var(--fp-color-text-muted);margin-bottom:18px}
.price-card__amount{font-family:var(--fp-font-heading);font-weight:700;font-size:32px;margin-bottom:4px}
.price-card__amount span{font-size:13px;font-weight:500;color:var(--fp-color-text-muted)}
.price-card.featured .price-card__amount span{color:rgb(255 255 255/60%)}
.price-card ul{list-style:none;margin:20px 0 26px;font-size:13.5px;display:flex;flex-direction:column;gap:10px}
.price-card li{display:flex;gap:8px}
.price-card .fp-btn{margin-top:auto}

.faq-list{max-width:720px;margin:56px auto 0;display:flex;flex-direction:column;gap:12px}
.faq-item{padding:0;overflow:hidden}
.faq-item summary{
  list-style:none;cursor:pointer;padding:18px 22px;font-weight:600;font-size:14.5px;
  display:flex;justify-content:space-between;align-items:center;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:20px;font-weight:400;color:var(--fp-color-primary);transition:transform var(--fp-dur-2) var(--fp-ease)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{padding:0 22px 18px;font-size:13.5px;color:var(--fp-color-text-muted)}

footer{padding:40px 0;text-align:center;font-size:13px;color:var(--fp-color-text-muted)}

/* ===================== RESPONSIVE (chỉ nội dung riêng trang chủ — logic bật/tắt header nằm ở site-header.css) ===================== */
@media (max-width:1023px){
  .sponsors-grid{grid-template-columns:repeat(2,1fr)}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .news-grid{grid-template-columns:repeat(2,1fr)}
  .map-dashboard,.ai-hub{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr}
  .timeline{flex-direction:column;gap:28px}
  .timeline::before{display:none}
}
@media (max-width:560px){
  .services-grid{grid-template-columns:1fr}
  .news-grid{grid-template-columns:1fr}
  .sponsors-grid{grid-template-columns:1fr}
  .fp-stats{gap:28px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}