/* ==========================================================================
   HOME — CSS riêng trang chủ
   ========================================================================== */

/* Giới thiệu ------------------------------------------------------------- */
.home-intro { padding-top: 50px; }
.home-intro__sub {
  text-align: center; margin: 16px 0 24px;
  font: 500 24px/1.2 var(--ff-heading); color: var(--c-primary);
}
.home-intro__gallery { align-items: center; justify-content: center; gap: 30px; margin: 0 -96px; }
.home-intro__side { width: 406px; aspect-ratio: 406 / 284; border-radius: var(--radius-sm); flex: none; }
.home-intro__main { width: 600px; aspect-ratio: 600 / 420; border-radius: var(--radius-sm); flex: none; }
.home-intro__gallery img { width: 100%; height: 100%; object-fit: cover; }
.home-intro__text {
  max-width: 964px; margin: 24px auto 0; text-align: center;
  font: 400 18px/1.45 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #000;
}
.home-intro__mb { margin-top: 22px; }
.home-intro__mb-img { border-radius: 9px; aspect-ratio: 373 / 250; }
.home-intro__mb-img img { width: 100%; height: 100%; object-fit: cover; }
.home-intro__mb p { margin: 24px 0; font: 500 18px/1.33 var(--ff-heading); color: #000; }

/* Dịch vụ nổi bật -------------------------------------------------------- */
.home-services { padding-bottom: 60px; }
@media (min-width: 992px) {
  .svc-swiper .swiper-wrapper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 20px; }
}
.svc-card {
  display: block; height: 100%; padding: 20px 20px 24px;
  border-radius: var(--radius); background: var(--c-gray);
  transition: background var(--t), transform var(--t), box-shadow var(--t);
}
.svc-card__img { display: block; aspect-ratio: 265 / 230; border-radius: var(--radius); overflow: hidden; }
.svc-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.svc-card .btn-tag { margin-top: 22px; }
.svc-card__title {
  margin-top: 14px; font: 700 18px/1.5 var(--ff-heading); letter-spacing: -.2px;
  color: var(--c-primary); transition: color var(--t);
}
/* Hover: card chuyển sang cam như card đang active trong thiết kế */
.svc-card.is-active, .svc-card:hover { background: var(--c-accent); }
.svc-card.is-active .svc-card__title, .svc-card:hover .svc-card__title { color: var(--c-gray); }
.svc-card.is-active .btn-tag, .svc-card:hover .btn-tag { background: var(--c-gray); color: var(--c-primary); }
.svc-card:hover { transform: translateY(-6px); box-shadow: 0 14px 28px rgba(255,134,101,.3); }
.svc-card:hover .svc-card__img img { transform: scale(1.07); }
.svc-swiper:hover .svc-card.is-active:not(:hover) { background: var(--c-gray); }
.svc-swiper:hover .svc-card.is-active:not(:hover) .svc-card__title { color: var(--c-primary); }
.svc-swiper:hover .svc-card.is-active:not(:hover) .btn-tag { background: var(--c-primary); color: #fff; }

/* Đội ngũ bác sĩ ----------------------------------------------------------- */
.home-doctors {
  position: relative; padding: 56px 0 38px; color: #fff;
  background: url(../images/home-doctors.jpg) no-repeat;
}
.home-doctors .swiper-wrapper, .home-csvc .swiper-wrapper{ height:auto }
/*.home-doctors::before { 
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 2px, transparent 2px 160px),
    radial-gradient(40% 60% at 50% 40%, rgba(255,255,255,.14), transparent 70%);
}*/
.home-doctors .container { position: relative; }
.home-doctors .sec-desc { margin-bottom: 34px; }
@media (min-width: 992px) {
  .doctor-swiper .swiper-wrapper { display: grid; grid-template-columns: repeat(4, minmax(0, 296px)); justify-content: center; gap: 39px; }
}

/* Cơ sở vật chất ---------------------------------------------------------- */
.home-csvc { padding-top: 22px; padding-bottom: 36px; }
@media (min-width: 992px) {
  .csvc-swiper .swiper-wrapper { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 18px; }
  .csvc-swiper .swiper-slide { width: auto; flex-shrink: 1; }
}
.csvc-item { margin: 0; text-align: center; }
.csvc-item__img { width: 412px; max-width: 100%; margin: 0 auto; transition: transform .5s var(--ease); }
.csvc-item--main .csvc-item__img { width: 570px; }
.csvc-item figcaption { margin-top: 18px; font: 500 20px/1.2 var(--ff-heading); color: #000; }
.csvc-item:hover .csvc-item__img { transform: translateY(-8px) rotate(-1.5deg); }

/* Đặt hẹn online ---------------------------------------------------------- */
.home-booking { position: relative; overflow: hidden; background: url(../images/home-booking.jpg) no-repeat; color: #fff; }
.home-booking::before { /* họa tiết công nghệ mờ */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    radial-gradient(circle at 12% 60%, transparent 0 90px, rgba(255,255,255,.08) 91px 93px, transparent 94px 150px, rgba(255,255,255,.06) 151px 153px, transparent 154px),
    radial-gradient(circle at 88% 40%, transparent 0 110px, rgba(255,255,255,.08) 111px 113px, transparent 114px 180px, rgba(255,255,255,.06) 181px 183px, transparent 184px);
}
.home-booking__inner { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 46px; min-height: 553px; }
.home-booking__content { width: 586px; padding: 31px 0 62px; }
.home-booking__title { font: 600 37px/1.24 var(--ff-heading); text-align: center; text-transform: capitalize; }
.home-booking__quick { justify-content: center; align-items: center; gap: 10px; margin-top: 9px; }
.booking-pill {
  display: inline-flex; align-items: center; height: 35px; padding: 0 30px;
  border-radius: 24px; background: var(--c-accent); color: #fff;
  font: 700 20px/1 var(--ff-heading); transition: transform var(--t), filter var(--t);
}
.booking-pill:hover { color: #fff; transform: scale(1.04); filter: brightness(1.06); }
.home-booking__quick img { animation: ring 2.6s ease-in-out infinite; }
.home-booking__list { margin: 19px 0 0 46px; }
.home-booking__list li { display: flex; align-items: center; gap: 7px; font: 400 18px/1.55 var(--ff-heading); }
.home-booking__list li + li { margin-top: 7px; }
.home-booking__list li > span:first-child {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--c-accent); display: grid; place-items: center;
  font: 500 11px/1 var(--ff-body);
}
.d_contact--booking {
  width: 520px; max-width: 100%; margin: 7px 0 0 46px; padding: 19px 83px 18px;
  background: #fff; border-radius: 21px; box-shadow: 0 20px 40px rgba(0,0,0,.15);
}
.d_contact--booking > div { gap: 12px; }
.d_contact--booking .title { font: 500 24px/1.2 var(--ff-heading); text-transform: uppercase; margin-bottom: 3px; }
.d_contact--booking input { height: 42px; border-color: var(--c-accent); border-radius: 20px; font: 400 16px var(--ff-body); }
.d_contact--booking .d-send { height: 45px; min-width: 124px; padding: 0 20px; margin-top: 0; font: 600 16px/1 var(--ff-heading); }
.d_contact__hotline { justify-content: center; align-items: center; gap: 10px; }
.home-booking__doctor { width: 317px; flex: none; align-self: center; }
.home-booking__doctor img {
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  animation: floaty 4s ease-in-out infinite;
}

/* Tin tức ------------------------------------------------------------------ */
.home-news { padding-top: 22px; padding-bottom: 20px; }
.news-feature__img { display: block; border-radius: 35px; overflow: hidden; aspect-ratio: 640 / 435; }
.news-feature__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.news-feature__img:hover img { transform: scale(1.05); }
.news-feature__title { margin-top: 41px; font: 700 24px/1.4 'Helvetica Neue', Arial, sans-serif; color: var(--c-primary); }
.news-feature__title a:hover { color: var(--c-accent); }
.news-feature__desc { margin-top: 12px; font: 400 20px/1.75 var(--ff-alt); color: #0B0B0B; }

.news-list { display: flex; flex-direction: column; gap: 33px; }
.news-item { display: grid; grid-template-columns: 227px 1fr; gap: 33px; align-items: start; }
.news-item__img { position: relative; display: block; aspect-ratio: 227 / 200; border-radius: 20px; overflow: hidden; }
.news-item__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.news-item__btn {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  height: 34px; padding: 0 22px; border-radius: 80px; display: inline-flex; align-items: center;
  background: var(--c-accent); color: #fff; font: 400 18px/1 var(--ff-alt); white-space: nowrap;
  transition: background var(--t), bottom var(--t);
}
.news-item__img:hover img { transform: scale(1.07); }
.news-item__img:hover .news-item__btn { background: var(--c-primary); bottom: 24px; }
.news-item__title { font: 700 24px/1.4 'Helvetica Neue', Arial, sans-serif; color: var(--c-primary); }
.news-item__title a:hover { color: var(--c-accent); }
.news-item__desc { margin-top: 18px; font: 400 18px/1.45 'Helvetica Neue', Arial, sans-serif; color: #000; }

/* RESPONSIVE --------------------------------------------------------------- */
@media (max-width: 1399.98px) {
  .home-intro__gallery { margin: 0; gap: 20px; }
  .home-intro__side { width: auto; flex: 0 1 30%; }
  .home-intro__main { width: auto; flex: 0 1 40%; }
  .csvc-item__img { width: 340px; }
  .csvc-item--main .csvc-item__img { width: 470px; }
}
@media (max-width: 1199.98px) {
  .doctor-swiper .swiper-wrapper { grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; }
  .svc-swiper .swiper-wrapper { gap: 20px 16px !important; }
  .svc-card__title { font-size: 16px; }
  .csvc-item__img { width: 280px; }
  .csvc-item--main .csvc-item__img { width: 380px; }
  .d_contact--booking { margin-left: 0; padding: 19px 40px 18px; }
  .home-booking__list { margin-left: 0; }
  .news-item { grid-template-columns: 180px 1fr; gap: 20px; }
  .news-item__title { font-size: 20px; }
  .news-item__desc { font-size: 16px; margin-top: 10px; }
}
@media (max-width: 991.98px) {
  .home-intro { padding-top: 22px; }
  .home-services { padding-bottom: 30px; }
  .svc-swiper { overflow: hidden; }
  .svc-card { padding: 24px 24px 36px; }
  .svc-card__img { aspect-ratio: 330 / 286; }
  .svc-card .btn-tag { margin-top: 30px; padding: 10px 24px; font-size: 17px; background: var(--c-gray); color: var(--c-primary); }
  .svc-card__title { margin-top: 24px; font-size: 20px; }

  .home-doctors { padding: 40px 0 30px; }
  .home-doctors .sec-desc { font-size: 20px; margin-bottom: 24px; }
  .doctor-swiper { overflow: hidden; padding: 0 2px 16px; margin: 0 -2px; }
  .doctor-swiper .doctor-card { max-width: 360px; margin: 0 auto; border-radius: 24px; padding: 12px 16px 28px; }
  .doctor-swiper .doctor-card__name { font-size: 24px; color: #3E4958; }
  .doctor-swiper .doctor-card__spec { font-size: 19px; }
  .doctor-swiper .doctor-card__btn { width: 264px; height: 40px; font-size: 18px; margin-top: 20px; }

  .csvc-swiper { overflow: hidden; margin-top: 20px; }
  .csvc-item__img, .csvc-item--main .csvc-item__img { width: 362px; }
  .csvc-item figcaption { font-size: 14px; }

  .home-booking__inner { display: block; min-height: 0; }
  .home-booking__content { width: auto; max-width: 414px; margin: 0 auto; padding: 36px 0 60px; }
  .home-booking__title { font-size: 37px; text-align: left; padding-right: 76px; position: relative; }
  .home-booking__title::after { /* bác sĩ thu nhỏ cạnh tiêu đề như bản mobile */
    content: ""; position: absolute; right: 0; top: 0; width: 57px; height: 92px;
    background: url(../images/bs-booking.png) center / contain no-repeat;
  }
  .home-booking__list { margin: 24px 0 0 16px; }
  .home-booking__list li { font-size: 18px; }
  .d_contact--booking { margin: 26px 0 0; padding: 30px 30px 28px; }
  .d_contact--booking > div { gap: 16px; }
  .d_contact__hotline { display: flex; }
  .d_contact__hotline .booking-pill { padding: 0 34px; font-size: 20px; }
  .d_contact--booking .d-send { font-size: 17px; }
  .home-booking__doctor { display: none; }

  .home-news { padding-top: 34px; }
  .news-list { gap: 24px; }
  .news-item { grid-template-columns: 154px 1fr; gap: 26px; }
  .news-item__img { aspect-ratio: 1; border-radius: 20px; }
  .news-item__btn { display: none; }
  .news-item__title { font: 600 18px/1.45 var(--ff-body); }
  .news-item__desc { font: 400 13px/1.5 var(--ff-body); margin-top: 8px; color: #333; }
}
@media (max-width: 575.98px) {
  .home-booking__title { font-size: 32px; }
  .d_contact--booking { padding: 26px 18px 24px; }
  .news-item { grid-template-columns: 120px 1fr; gap: 16px; }
  .news-item__title { font-size: 16px; }
}