/* ==========================================================================
   ALL DOCTOR — CSS riêng
   ========================================================================== */

/* Giới thiệu đội ngũ ---------------------------------------------------------- */
.doc-intro { padding: 44px 0 20px; }
.doc-intro__img { border-radius: 17px; aspect-ratio: 700 / 468; }
.doc-intro__img img { width: 100%; height: 100%; object-fit: cover; }
.doc-intro__title { font: 600 29px/1.4 var(--ff-body); color: #000; text-transform: uppercase; }
.doc-intro__text { margin: 14px 0 14px; font: 500 20px/1.65 var(--ff-heading); color: #000; }
.doc-intro__btns { justify-content: flex-end; }

/* Thanh tìm kiếm --------------------------------------------------------------- */
.doc-search { background: var(--c-primary); padding: 15px 0 23px; }
.doc-search__title { text-align: center; font: 600 20px/1.75 var(--ff-body); color: var(--c-gray); text-transform: uppercase; margin-bottom: 10px; }
.doc-search__form { display: grid; grid-template-columns: repeat(4, 1fr) 235px; gap: 16px; max-width: 1443px; margin: 0 auto; }
.doc-filter {
  position: relative; display: flex; align-items: center; gap: 18px;
  height: 50px; padding: 0 14px; border-radius: var(--radius-sm); background: #fff;
  cursor: pointer; transition: box-shadow var(--t);
}
.doc-filter img { width: auto; height: 24px; flex: none; }
.doc-filter select {
  flex: 1; height: 100%; border: 0; background: transparent; appearance: none; -webkit-appearance: none;
  font: 400 16px var(--ff-body); color: #000; cursor: pointer; padding-right: 26px;
}
.doc-filter select:focus { outline: 0; }
.doc-filter::after { /* mũi tên tam giác */
  content: ""; position: absolute; right: 22px; top: 50%; margin-top: -4px; pointer-events: none;
  border: 6px solid transparent; border-top: 9px solid var(--c-primary); border-bottom: 0;
  transition: transform var(--t);
}
.doc-filter:hover, .doc-filter:focus-within { box-shadow: 0 0 0 3px rgba(255,134,101,.55); }
.doc-filter:focus-within::after { transform: rotate(180deg); }
.doc-search__btn {
  display: flex; align-items: center; justify-content: space-between;
  height: 50px; padding: 0 16px 0 14px; border: 0; border-radius: var(--radius-sm);
  background: var(--c-accent); color: #fff; font: 400 16px var(--ff-body);
  transition: background var(--t), transform var(--t);
}
.doc-search__btn:hover { background: #ff7650; transform: translateY(-2px); }
.doc-search__btn img { transition: transform var(--t); }
.doc-search__btn:hover img { transform: scale(1.15) rotate(-10deg); }

/* Danh sách bác sĩ ------------------------------------------------------------- */
.doc-list { padding: 60px 0 50px; }
@media (min-width: 992px) {
  .doclist-swiper .swiper-wrapper { display: grid; grid-template-columns: repeat(4, minmax(0, 296px)); justify-content: center; gap: 40px 39px; }
}
.doc-list .doctor-card__name { color: #3E4958; }
.doc-list__pager { justify-content: center; }

/* RESPONSIVE ---------------------------------------------------------------------- */
@media (max-width: 1399.98px) {
  .doc-intro__text { font-size: 17px; }
}
@media (max-width: 1199.98px) {
  .doc-search__form { grid-template-columns: repeat(2, 1fr); }
  .doc-search__btn { grid-column: span 2; }
  .doclist-swiper .swiper-wrapper { grid-template-columns: repeat(4, 1fr) !important; gap: 30px 20px !important; }
}
@media (max-width: 991.98px) {
  .doc-intro { padding: 24px 0 24px; }
  .doc-intro__img { border-radius: 9px; aspect-ratio: 373 / 250; }
  .doc-intro__title { font: 500 24px/1.3 var(--ff-heading); text-transform: none; }
  .doc-intro__text { font-size: 18px; line-height: 1.33; margin-top: 10px; }
  .doc-intro__btns { justify-content: center; }

  .doc-search { padding: 18px 0 26px; }
  .doc-search__title { font: 500 22px/1.6 var(--ff-heading); margin-bottom: 16px; }
  .doc-search__form { grid-template-columns: 1fr; max-width: 303px; gap: 16px; }
  .doc-search__btn { grid-column: auto; width: 235px; justify-self: center; font-size: 17px; }
  .doc-filter { background: #EFEFEF; }

  .doc-list { padding: 36px 0 30px; }
  .doclist-swiper { overflow: hidden; padding: 0 2px 16px; margin: 0 -2px; }
  .doclist-swiper .doctor-card { max-width: 360px; margin: 0 auto; border-radius: 24px; padding: 12px 16px 28px; }
  .doclist-swiper .doctor-card__name { font-size: 24px; }
  .doclist-swiper .doctor-card__spec { font-size: 19px; }
  .doclist-swiper .doctor-card__btn { width: 264px; height: 40px; font-size: 18px; margin-top: 20px; }
}