/*
  Trang module Fields (Dịch vụ, Khuyến mãi) theo template EGA:
    FieldsCategory/FieldsCategoryDetail.cshtml  -> .fd-hero, .fd-subcats, .fd-grid, .fd-card, .fd-pager
    FieldsItem/FieldsItemDetail.cshtml          -> .fd-detail, .fd-contact, .fd-related
  1rem = 10px (html { font-size: 62.5% }). Màu chính lấy từ theme (--color-primary).
*/
.fd-section {
  --fd-navy: #0B2D66;
  --fd-text: #1b2433;
  --fd-muted: #5f6b7a;
  --fd-line: #e6eaf0;
  --fd-soft: #EEF3FB;
  padding: 2.4rem 0 5rem;
  color: var(--fd-text);
}
.fd-section a { text-decoration: none; }

/* ===== Hero danh mục ===== */
.fd-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 2.4rem; margin-bottom: 2.4rem; }
.fd-hero__text { min-width: 0; max-width: 78rem; }
.fd-hero__title { margin: 0; font-size: clamp(2.4rem, 3vw, 3.6rem); line-height: 1.2; font-weight: 800; color: var(--fd-navy); }
.fd-hero__desc { margin-top: .8rem; color: var(--fd-muted); font-size: 1.5rem; line-height: 1.6; }
.fd-hero__desc p { margin: 0; }
.fd-hero__cta { flex: 0 0 auto; }
.fd-hero__cta .btn { display: inline-flex; align-items: center; gap: .8rem; }

.fd-subcats { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2.4rem; }
.fd-subcat { padding: .7rem 1.4rem; border: 1px solid var(--fd-line); border-radius: 99rem; font-size: 1.4rem; color: var(--fd-text); transition: border-color .2s, color .2s; }
.fd-subcat:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ===== Lưới thẻ ===== */
.fd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem; }
.fd-card {
  display: flex; flex-direction: column; min-width: 0;
  background: #fff; border: 1px solid var(--fd-line); border-radius: 1.6rem; overflow: hidden;
  transition: box-shadow .25s, transform .25s;
}
.fd-card:hover { box-shadow: 0 1.2rem 3rem rgba(11, 45, 102, .1); transform: translateY(-2px); }
.fd-card__image { display: block; aspect-ratio: 3 / 2; background: #f3f4f6; overflow: hidden; }
.fd-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.fd-card:hover .fd-card__image img { transform: scale(1.04); }
.fd-card__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: .8rem; padding: 1.8rem 2rem 2rem; }
.fd-card__title { margin: 0; font-size: 1.8rem; font-weight: 700; line-height: 1.35; }
.fd-card__title a { color: var(--fd-navy); }
.fd-card__title a:hover { color: var(--color-primary); }
.fd-card__sub { margin: 0; color: var(--color-primary); font-size: 1.4rem; font-weight: 600; }
.fd-card__desc {
  margin: 0; color: var(--fd-muted); font-size: 1.4rem; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.fd-card__actions { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; margin-top: auto; padding-top: .8rem; }
.fd-card__more { display: inline-flex; align-items: center; gap: .6rem; font-size: 1.4rem; font-weight: 600; color: var(--fd-navy); }
.fd-card__more:hover { color: var(--color-primary); }
.fd-card__book { padding: .8rem 1.8rem; font-size: 1.4rem; }

.fd-empty { padding: 4rem 1.6rem; text-align: center; color: var(--fd-muted); border: 1px dashed var(--fd-line); border-radius: 1.2rem; }

/* ===== Phân trang ===== */
.fd-pager { margin-top: 3.2rem; text-align: center; }
.fd-pager .pagination { display: inline-flex; align-items: center; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.fd-pager .page-link {
  display: flex; align-items: center; justify-content: center; min-width: 3.6rem; height: 3.6rem; padding: 0 .6rem;
  border: 1px solid transparent; border-radius: .6rem; color: var(--fd-text);
}
.fd-pager a.page-link:hover { background: #f2f2f2; }
.fd-pager .page-link.is-current { border-color: var(--fd-navy); font-weight: 600; }
.fd-pager .page-link--gap { min-width: 2rem; color: var(--fd-muted); }

/* ===== Chi tiết ===== */
.fd-detail { display: grid; grid-template-columns: minmax(0, 1fr) 34rem; gap: 4rem; align-items: start; }
.fd-detail__title { margin: 0; font-size: clamp(2.4rem, 3vw, 3.4rem); line-height: 1.25; font-weight: 800; color: var(--fd-navy); }
.fd-detail__sub { margin: .8rem 0 0; color: var(--color-primary); font-size: 1.6rem; font-weight: 600; }
.fd-detail__image { margin-top: 2rem; border-radius: 1.6rem; overflow: hidden; background: #f3f4f6; }
.fd-detail__image img { display: block; width: 100%; height: auto; max-height: 52rem; object-fit: cover; }
.fd-detail__lead { margin-top: 2rem; font-size: 1.7rem; line-height: 1.7; color: var(--fd-text); }
.fd-detail__content { margin-top: 1.6rem; font-size: 1.6rem; line-height: 1.75; }
.fd-detail__content :is(h2, h3) { margin: 2.4rem 0 1rem; color: var(--fd-navy); line-height: 1.3; }
.fd-detail__content img, .fd-detail__lead img { max-width: 100%; height: auto; border-radius: 1rem; }
.fd-detail__content ul, .fd-detail__content ol { padding-left: 2rem; }
.fd-detail__content table { display: block; max-width: 100%; overflow-x: auto; }

.fd-detail__aside { position: sticky; top: 11rem; }
.fd-contact {
  display: flex; flex-direction: column; gap: 1.2rem;
  padding: 2.4rem; border-radius: 1.6rem;
  background: var(--fd-soft); border: 1px solid #CFDCF0;
}
.fd-contact__title { margin: 0; font-size: 2rem; font-weight: 800; color: var(--fd-navy); }
.fd-contact__text { margin: 0; color: var(--fd-muted); font-size: 1.4rem; line-height: 1.6; }
.fd-contact .btn { display: inline-flex; align-items: center; justify-content: center; gap: .8rem; }
.fd-contact__call { background: #fff; border: 1px solid var(--fd-navy); color: var(--fd-navy); font-weight: 600; }
.fd-contact__call:hover { background: var(--fd-navy); color: #fff; }
.fd-contact__hours { margin: 0; font-size: 1.3rem; color: var(--fd-muted); text-align: center; }

.fd-related { margin-top: 5rem; }
.fd-related__title { margin: 0 0 2rem; font-size: 2.4rem; font-weight: 800; color: var(--fd-navy); }

/* ===== Responsive ===== */
@media (max-width: 1023px) {
  .fd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; }
  .fd-detail { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
  .fd-detail__aside { position: static; }
}
@media (max-width: 767px) {
  .fd-section { padding: 1.6rem 0 3.2rem; }
  .fd-hero { flex-direction: column; align-items: stretch; gap: 1.6rem; margin-bottom: 1.6rem; }
  .fd-hero__cta .btn { width: 100%; justify-content: center; }
}
@media (max-width: 575px) {
  .fd-grid { grid-template-columns: minmax(0, 1fr); }
  .fd-card__body { padding: 1.6rem; }
  .fd-detail__lead { font-size: 1.6rem; }
  .fd-contact { padding: 2rem 1.6rem; }
}

/* =====================================================================
   Trang giới thiệu DỊCH VỤ (FieldsCategory/_ServiceLanding.cshtml) - tiền tố .sv-
   ===================================================================== */
.sv-btn { display: inline-flex; align-items: center; justify-content: center; gap: .8rem; padding: 1.2rem 2.4rem; border-radius: 99rem; font-weight: 700; font-size: 1.5rem; }
.sv-btn--ghost { border: 1px solid rgba(255, 255, 255, .7); color: #fff; background: rgba(255, 255, 255, .08); }
.sv-btn--ghost:hover { background: #fff; color: #0B2D66; }
.sv-btn--light { background: #fff; color: #0B2D66; border: 1px solid #fff; }
.sv-btn--light:hover { background: transparent; color: #fff; }

/* 1. Banner */
.sv-hero {
  position: relative; color: #fff; padding: 8rem 0 9rem;
  background: linear-gradient(90deg, rgba(11, 45, 102, .94) 0%, rgba(11, 45, 102, .78) 45%, rgba(11, 45, 102, .25) 100%), var(--sv-hero-image) center / cover no-repeat, #0B2D66;
}
.sv-hero__content { max-width: 64rem; }
.sv-hero__eyebrow { display: inline-block; padding: .5rem 1.4rem; border-radius: 99rem; background: rgba(242, 101, 34, .18); color: #FF8A50; font-size: 1.3rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sv-hero__title { margin: 1.6rem 0 0; font-size: clamp(3rem, 4.4vw, 5.2rem); line-height: 1.1; font-weight: 800; color: #fff; }
.sv-hero__desc { margin-top: 1.6rem; font-size: 1.7rem; line-height: 1.7; color: rgba(255, 255, 255, .85); }
.sv-hero__desc p { margin: 0; }
.sv-hero__actions { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 3.2rem; }
.sv-hero__hours { margin: 1.6rem 0 0; font-size: 1.3rem; color: rgba(255, 255, 255, .65); }

/* 2. Cam kết (nổi lên mép dưới banner) */
.sv-commit { position: relative; z-index: 2; margin-top: -4.8rem; }
.sv-commit__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; background: #fff; border-radius: 1.6rem; box-shadow: 0 1.6rem 4rem rgba(11, 45, 102, .12); overflow: hidden; }
.sv-commit__item { display: flex; align-items: center; gap: 1.4rem; padding: 2.2rem 2.4rem; }
.sv-commit__item + .sv-commit__item { border-left: 1px solid #eef1f5; }
.sv-commit__icon { flex: 0 0 4.8rem; width: 4.8rem; height: 4.8rem; padding: 1.1rem; border-radius: 1.2rem; background: #EEF3FB; color: var(--color-primary); }
.sv-commit__icon .menu-icon { display: block; width: 100%; height: 100%; }
.sv-commit__item b { display: block; font-size: 1.5rem; color: #0B2D66; }
.sv-commit__item small { display: block; margin-top: .2rem; font-size: 1.3rem; color: #5f6b7a; }

/* 3. Lưới dịch vụ */
.sv-services { padding-top: 6.4rem; }
.sv-head { max-width: 72rem; margin: 0 auto 3.2rem; text-align: center; }
.sv-head__title { margin: 0; font-size: clamp(2.6rem, 3vw, 3.6rem); font-weight: 800; color: #0B2D66; }
.sv-head__title span { color: var(--color-primary); }
.sv-head__text { margin: 1rem 0 0; font-size: 1.5rem; color: #5f6b7a; line-height: 1.6; }
.sv-services .fd-subcats { justify-content: center; }

/* 4. Khối widget dùng chung - giữ khoảng cách đều */
.sv-blocks > section:first-child { margin-top: 0; }

/* 5. Kêu gọi đặt lịch */
.sv-cta { padding: 2.4rem 0 6.4rem; }
.sv-cta__box {
  display: flex; align-items: center; justify-content: space-between; gap: 3.2rem;
  padding: 4rem 4.8rem; border-radius: 2rem; color: #fff;
  background: linear-gradient(120deg, #F26522 0%, #D9501A 100%);
  box-shadow: 0 2rem 4.8rem rgba(242, 101, 34, .3);
}
.sv-cta__text h2 { margin: 0; font-size: clamp(2.2rem, 2.6vw, 3rem); font-weight: 800; color: #fff; }
.sv-cta__text p { margin: .8rem 0 0; font-size: 1.5rem; line-height: 1.6; color: rgba(255, 255, 255, .92); max-width: 64rem; }
.sv-cta__actions { display: flex; flex-wrap: wrap; gap: 1.2rem; flex: 0 0 auto; }
.sv-cta .btn--primary { background: #0B2D66; border-color: #0B2D66; color: #fff; }

@media (max-width: 1023px) {
  .sv-commit__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-commit__item:nth-child(3) { border-left: 0; }
  .sv-commit__item:nth-child(n + 3) { border-top: 1px solid #eef1f5; }
  .sv-cta__box { flex-direction: column; align-items: flex-start; padding: 3.2rem; }
}
@media (max-width: 575px) {
  .sv-hero { padding: 4.8rem 0 7.2rem; background: linear-gradient(180deg, rgba(11, 45, 102, .82), rgba(11, 45, 102, .95)), var(--sv-hero-image) center / cover no-repeat, #0B2D66; }
  .sv-hero__actions .sv-btn, .sv-hero__actions portal-opener { width: 100%; }
  .sv-commit__list { grid-template-columns: minmax(0, 1fr); }
  .sv-commit__item { padding: 1.6rem; }
  .sv-commit__item + .sv-commit__item { border-left: 0; border-top: 1px solid #eef1f5; }
  .sv-services { padding-top: 4rem; }
  .sv-cta__box { padding: 2.4rem 1.8rem; }
  .sv-cta__actions, .sv-cta__actions portal-opener, .sv-cta__actions .sv-btn { width: 100%; }
}