/* ======== HERO SHOWCASE ======== */
.navi-hero-showcase{padding:1.75rem 0 2.25rem}
.navi-hero-showcase-grid{display:grid;gap:1.5rem;align-items:center}
.navi-hero-showcase .navi-hero-content{order:1}

/* Hero visual - ẩn trên mobile */
.navi-hero-visual{display:none}

@media(min-width:1024px){
  .navi-hero-showcase{padding:3rem 0}
  .navi-hero-showcase-grid{grid-template-columns:1.15fr 1fr;gap:3rem}
  .navi-hero-showcase .navi-hero-content{order:1}

  .navi-hero-visual{
    display:block;
    order:2;
    position:relative;
    border-radius:var(--navi-radius-lg);
    overflow:hidden;
    aspect-ratio:4/5;
    max-height:520px
  }
  .navi-hero-visual img{width:100%;height:100%;object-fit:cover;display:block}

  /* Badge floating trên ảnh */
  .navi-hero-visual-badge{
    position:absolute;bottom:1.25rem;left:1.25rem;
    background:white;border-radius:var(--navi-radius-md);
    padding:.7rem .9rem;
    display:flex;align-items:center;gap:.6rem;
    box-shadow:0 6px 20px rgba(0,0,0,.18);
    max-width:calc(100% - 2.5rem)
  }
  .navi-hero-visual-badge svg{color:var(--navi-amber-400);flex-shrink:0}
  .navi-hero-visual-badge-label{font-size:13px;font-weight:700;color:var(--navi-text);line-height:1.2}
  .navi-hero-visual-badge-sublabel{font-size:11px;color:var(--navi-text-2);margin-top:2px;line-height:1.3}

  /* v1.1.9: Placeholder mới - SVG illustration full cover */
  .navi-hero-visual-placeholder{
    background:transparent;
    border:none;
    display:block;
    overflow:hidden
  }
  .navi-hero-visual-placeholder svg{
    width:100%;
    height:100%;
    display:block
  }
  .navi-hero-placeholder-overlay{
    position:absolute;
    bottom:0;left:0;right:0;
    background:linear-gradient(to top,rgba(255,255,255,.95),rgba(255,255,255,0));
    padding:2rem 1rem 1rem;
    display:flex;
    justify-content:center
  }
  .navi-hero-placeholder-text{
    background:white;
    border:1px solid var(--navi-border);
    border-radius:var(--navi-radius-md);
    padding:.55rem .85rem;
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    font-size:11px;
    color:var(--navi-text-2);
    line-height:1.4;
    max-width:90%
  }
  .navi-hero-placeholder-text svg{
    color:var(--navi-amber-400);
    flex-shrink:0
  }
  .navi-hero-placeholder-text strong{color:var(--navi-text);font-weight:600}
}

/* ======== TRUST SIGNALS ======== */
.navi-trust-section{padding:2rem 0;background:white;border-bottom:1px solid var(--navi-border)}
.navi-trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.navi-trust-card{display:flex;align-items:flex-start;gap:.7rem;padding:.85rem;background:var(--navi-bg-2);border-radius:var(--navi-radius-md);border:1px solid var(--navi-border);transition:border-color .2s,background .2s}
.navi-trust-card:hover{border-color:var(--navi-amber-100);background:var(--navi-amber-50)}
.navi-trust-icon{width:36px;height:36px;border-radius:var(--navi-radius-md);background:var(--navi-amber-50);color:var(--navi-amber-400);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.navi-trust-icon svg{width:18px;height:18px}
.navi-trust-card:hover .navi-trust-icon{background:white}
.navi-trust-text{flex:1;min-width:0}
.navi-trust-title{font-size:13px;font-weight:700;margin:0 0 .2rem;line-height:1.3;color:var(--navi-text)}
.navi-trust-desc{font-size:11px;color:var(--navi-text-2);margin:0;line-height:1.5}
@media(min-width:768px){
  .navi-trust-section{padding:2.5rem 0}
  .navi-trust-grid{grid-template-columns:repeat(4,1fr);gap:1rem}
  .navi-trust-card{padding:1.1rem;gap:.85rem}
  .navi-trust-icon{width:42px;height:42px}
  .navi-trust-icon svg{width:22px;height:22px}
  .navi-trust-title{font-size:14px}
  .navi-trust-desc{font-size:12px}
}

/* ======== BOOKING SECTION ======== */
.navi-booking-section{padding:2.5rem 0;background:var(--navi-teal-50);scroll-margin-top:80px}
.navi-booking-grid{display:grid;gap:1.5rem;align-items:start}
.navi-booking-info-desc{font-size:14px;color:var(--navi-teal-800);line-height:1.65;margin:0 0 1.25rem}
.navi-booking-benefits{list-style:none;padding:0;margin:0 0 1.5rem;display:flex;flex-direction:column;gap:.65rem}
.navi-booking-benefits li{display:flex;align-items:flex-start;gap:.55rem;font-size:14px;color:var(--navi-teal-900);line-height:1.5}
.navi-booking-benefits svg{flex-shrink:0;margin-top:3px}
.navi-booking-channels{padding-top:1.25rem;border-top:1px solid var(--navi-teal-100)}
.navi-booking-channels-label{font-size:12px;color:var(--navi-teal-600);font-weight:500;margin-bottom:.6rem}
.navi-booking-channels-list{display:flex;flex-wrap:wrap;gap:.5rem}
.navi-booking-channel{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .9rem;background:white;color:var(--navi-teal-600);border-radius:var(--navi-radius-md);font-size:13px;font-weight:600;text-decoration:none;border:1px solid var(--navi-teal-100);transition:background .2s,border-color .2s}
.navi-booking-channel:hover{background:var(--navi-teal-100);color:var(--navi-teal-800);border-color:var(--navi-teal-400)}
.navi-booking-form-wrap{background:white;border-radius:var(--navi-radius-lg);padding:1.25rem;border:1px solid var(--navi-teal-100)}
@media(min-width:1024px){
  .navi-booking-section{padding:4rem 0}
  .navi-booking-grid{grid-template-columns:1fr 1.05fr;gap:3rem;align-items:center}
  .navi-booking-form-wrap{padding:1.75rem}
  .navi-booking-info-desc{font-size:15px}
  .navi-booking-benefits li{font-size:14px}
}

/* ======== SERVICES ======== */
.navi-services-section{padding:2.5rem 0}
.navi-services-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.navi-service-card{border:1px solid var(--navi-border);border-radius:var(--navi-radius-lg);padding:1rem;background:white;color:var(--navi-text);transition:border-color .2s,background .2s;display:block}
.navi-service-card:hover{border-color:var(--navi-amber-400);background:var(--navi-amber-50);color:var(--navi-text)}
.navi-service-icon{width:40px;height:40px;border-radius:var(--navi-radius-md);display:flex;align-items:center;justify-content:center;margin-bottom:.75rem}
.navi-service-icon svg{width:22px;height:22px}
.navi-icon-amber{background:var(--navi-amber-50);color:var(--navi-amber-800)}
.navi-icon-coral{background:var(--navi-coral-50);color:var(--navi-coral-800)}
.navi-icon-purple{background:var(--navi-purple-50);color:var(--navi-purple-800)}
.navi-icon-teal{background:var(--navi-teal-50);color:var(--navi-teal-600)}
.navi-service-title{font-size:15px;font-weight:700;margin:0 0 .4rem;line-height:1.3}
.navi-service-excerpt{font-size:13px;color:var(--navi-text-2);line-height:1.55;margin-bottom:.5rem}
.navi-service-link{font-size:12px;font-weight:600}
.navi-service-amber .navi-service-link{color:var(--navi-amber-800)}
.navi-service-coral .navi-service-link{color:var(--navi-coral-800)}
.navi-service-purple .navi-service-link{color:var(--navi-purple-800)}
.navi-service-teal .navi-service-link{color:var(--navi-teal-600)}
@media(min-width:768px){.navi-services-section{padding:3.5rem 0}.navi-services-grid{grid-template-columns:repeat(4,1fr);gap:1rem}.navi-service-card{padding:1.25rem}}

/* ======== WHY ======== */
.navi-why-section{background:var(--navi-bg-2);padding:2.5rem 0}
.navi-why-grid{display:grid;gap:1.5rem}
.navi-why-points{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.navi-why-point{background:white;border-radius:var(--navi-radius-md);padding:.9rem;border:1px solid var(--navi-border)}
.navi-why-point h4{font-size:13px;font-weight:700;margin:0 0 .25rem}
.navi-why-point p{font-size:11px;color:var(--navi-text-2);margin:0;line-height:1.5}
@media(min-width:768px){.navi-why-grid{grid-template-columns:1fr 1.4fr;align-items:center;gap:2rem}}

/* ======== PROCESS ======== */
.navi-process-section{padding:2.5rem 0}
.navi-process-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.navi-process-step{text-align:center}
.navi-step-num{width:40px;height:40px;border-radius:50%;background:var(--navi-teal-50);color:var(--navi-teal-600);display:flex;align-items:center;justify-content:center;margin:0 auto .6rem;font-weight:700;font-size:14px}
.navi-process-step h4{font-size:13px;font-weight:700;margin:0 0 .25rem}
.navi-process-step p{font-size:11px;color:var(--navi-text-2);margin:0;line-height:1.5}
@media(min-width:768px){.navi-process-grid{grid-template-columns:repeat(4,1fr)}}

/* ======== DOCTORS ======== */
.navi-doctors-section{padding:2.5rem 0;background:var(--navi-bg-2)}
.navi-doctors-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.navi-doctor-card{background:white;border:1px solid var(--navi-border);border-radius:var(--navi-radius-lg);padding:1.25rem;text-align:center}
.navi-doctor-photo{width:80px;height:80px;border-radius:50%;margin:0 auto .75rem;object-fit:cover}
.navi-doctor-photo-fallback{background:var(--navi-teal-50);color:var(--navi-teal-600);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700}
.navi-doctor-name{font-size:15px;font-weight:700;margin:0 0 .25rem}
.navi-doctor-title{font-size:12px;color:var(--navi-teal-600);margin:0 0 .4rem;font-weight:500}
.navi-doctor-exp{font-size:11px;color:var(--navi-text-3);margin:0 0 .5rem}
.navi-doctor-excerpt{font-size:12px;color:var(--navi-text-2);line-height:1.55}
@media(min-width:768px){.navi-doctors-grid{grid-template-columns:repeat(3,1fr);gap:1rem}}

/* ======== TESTIMONIALS ======== */
.navi-testimonials-section{padding:2.5rem 0}
.navi-testimonials-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.navi-testimonial-card{border:1px solid var(--navi-border);border-radius:var(--navi-radius-lg);padding:1.25rem}
.navi-rating{display:flex;gap:2px;margin-bottom:.5rem}
.navi-testimonial-quote{font-family:Georgia,"Times New Roman",serif;font-size:14px;color:var(--navi-text);line-height:1.6;margin:0 0 .75rem}
.navi-testimonial-author{display:flex;align-items:center;gap:.6rem}
.navi-testimonial-avatar{width:36px;height:36px;border-radius:50%;background:var(--navi-bg-2);color:var(--navi-text-2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.navi-testimonial-name{font-size:13px;font-weight:700}
.navi-testimonial-location{font-size:11px;color:var(--navi-text-3)}
@media(min-width:768px){.navi-testimonials-grid{grid-template-columns:1fr 1fr}}

/* ======== BLOG FEED ======== */
/* v1.1.9: thêm padding-top lớn hơn để TÁCH với CTA banner phía trên */
/* CTA banner kết thúc với background dark, blog feed bắt đầu với bg-2 sáng */
/* → cần spacing để mắt nhận biết "đây là section khác" */
.navi-blog-feed-section{
  background:var(--navi-bg-2);
  padding:3rem 0 2.5rem; /* Trước: 2.5rem 0 — giờ tăng top lên 3rem */
  border-top:6px solid white /* white spacer giữa CTA dark và blog feed gray */
}
.navi-section-header-row{text-align:left;display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem;align-items:flex-start;padding:0}
.navi-section-link-all{font-size:13px;font-weight:600;color:var(--navi-amber-400);transition:color .2s}
.navi-section-link-all:hover{color:var(--navi-amber-800)}
.navi-blog-feed-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.navi-blog-feed-card{background:white;border:1px solid var(--navi-border);border-radius:var(--navi-radius-lg);overflow:hidden;transition:border-color .2s;display:flex;flex-direction:column}
.navi-blog-feed-card:hover{border-color:var(--navi-amber-400)}
.navi-blog-feed-thumb{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--navi-bg-2)}
.navi-blog-feed-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.navi-blog-feed-card:hover .navi-blog-feed-thumb img{transform:scale(1.03)}
.navi-blog-feed-thumb-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--navi-amber-50),var(--navi-amber-100));color:var(--navi-amber-800)}
.navi-blog-feed-body{padding:1rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.navi-blog-feed-cat{display:inline-block;background:var(--navi-amber-50);color:var(--navi-amber-800);font-size:10px;font-weight:600;padding:.25rem .55rem;border-radius:4px;letter-spacing:.02em;align-self:flex-start;text-transform:uppercase}
.navi-blog-feed-title{font-size:15px;font-weight:700;line-height:1.4;margin:0;letter-spacing:-0.01em}
.navi-blog-feed-title a{color:var(--navi-text)}
.navi-blog-feed-title a:hover{color:var(--navi-amber-800)}
.navi-blog-feed-excerpt{font-size:13px;color:var(--navi-text-2);line-height:1.55;margin:0;flex:1}
.navi-blog-feed-meta{font-size:11px;color:var(--navi-text-3);display:flex;align-items:center;gap:.4rem;margin-top:.25rem}
.navi-bf-sep{color:var(--navi-text-3)}
.navi-blog-feed-cta-mobile{margin-top:1.25rem}
.navi-section-header-row .navi-section-link-all{display:none}
@media(min-width:600px){.navi-blog-feed-grid{grid-template-columns:1fr 1fr;gap:1rem}}
@media(min-width:1024px){
  .navi-blog-feed-section{padding:4rem 0 3.5rem}
  .navi-blog-feed-grid{grid-template-columns:repeat(3,1fr);gap:1.25rem}
  .navi-section-header-row{flex-direction:row;justify-content:space-between;align-items:flex-end;text-align:left;margin-bottom:1.75rem}
  .navi-section-header-row .navi-section-link-all{display:inline-block;flex-shrink:0;font-size:14px}
  .navi-blog-feed-cta-mobile{display:none}
  .navi-blog-feed-body{padding:1.15rem 1.15rem 1.25rem}
  .navi-blog-feed-title{font-size:16px}
}