/* =========================================================
   Suriya9 — Service detail page (บริการของเรา / จัดงานศพจีน พิธีกงเต๊ก)
   โหลดเฉพาะ template-service.php — คลาส sv-* กันชนกับหน้าอื่น
   Desktop-first ตาม Figma (canvas 1440)
   ========================================================= */

/* หน้านี้ hero เข้ม → เมนูขาวค้างไว้จนเลื่อน "พ้น hero" (.is-past-hero) ค่อยเป็นสีดำ
   (ไฟล์นี้โหลดเฉพาะหน้าบริการ จึงไม่กระทบหน้าอื่น) */
.s9-header:not(.is-past-hero) .s9-nav__menu > li > a { color: #fff; }
.s9-header:not(.is-past-hero) .s9-nav__menu > li > a:hover { color: #ffe6a8; }
.s9-header:not(.is-past-hero) .s9-nav__menu > li > a.is-active { color: #fff; }
/* ลูกศร dropdown ใช้ currentColor อยู่แล้ว → เป็นขาวตามอัตโนมัติ
   ส่วนลิงก์ในกล่อง dropdown (.sub-menu a) ไม่โดน เพราะ selector เจาะ > li > a เท่านั้น */

.sv {
  position: relative;
  background: #fff;
  overflow: hidden;
}

/* พื้นหลัง texture — ไล่มาตั้งแต่ช่วงล่างของ hero ทะลุหลัง quote + บริการ (ตามต้นฉบับ top:360) */
.sv-texture {
  position: absolute;
  top: 265px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 700px;
  object-fit: cover;
  pointer-events: none;
  opacity: 0.1;
  z-index: 0;
}

/* ─── HERO ─── */
.sv-hero {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 500px;
  border-radius: 0 0 60px 60px;
  overflow: hidden;
}
.sv-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sv-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(75.71deg, #000 0%, rgba(0, 0, 0, 0) 61.9%);
}
.sv-hero__title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 0 64px;
}
.sv-hero__h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}
.sv-hero__divider {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 1312px;
}
.sv-hero__divider .ln {
  flex: 1;
  height: 1.5px;
  background: #fff;
}
.sv-hero__divider img {
  width: 56px;
  height: 8px;
  display: block;
}

/* ─── QUOTE ─── */
.sv-quote {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 64px;
}
.sv-quote p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.2;
  color: #8c0e0f;
  text-align: center;
  white-space: nowrap;
}

/* ─── BODY ─── */
.sv-body {
  position: relative;
  z-index: 1;
}

/* ─── SERVICE ─── */
.sv-service {
  display: flex;
  gap: 32px;
  align-items: center;
  justify-content: center;
  padding: 0 64px;
  margin: 0 auto;
}
.sv-service__img {
  width: 528px;
  height: 417px;
  border-radius: 0 100px 0 100px;
  border: 4px solid #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  flex-shrink: 0;
}
.sv-service__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sv-service__content {
  width: 640px;
  min-height: 417px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
}
.sv-service__desc {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.2px;
  color: #8c0e0f;
  margin: 0;
  line-height: 1.6;
}
.sv-service__desc strong { font-weight: 600; }
.sv-service__btns {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 24px;
}
.sv-btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 36px;
  border: 1px solid #fff;
  border-radius: 100px;
  background: linear-gradient(93.55deg, #a67c1e 1.52%, #d4af37 99.43%);
  box-shadow: 0 10px 12px rgba(166, 124, 30, 0.4);
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.16px;
  color: #fffdf6;
  white-space: nowrap;
}
.sv-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 56px;
  background: #fff;
  border: 1px solid #cea934;
  border-radius: 100px;
  box-shadow: 0 10px 12px rgba(166, 124, 30, 0.4);
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.16px;
  color: #bd9a4b;
  white-space: nowrap;
}
.sv-service__thumbs {
  display: flex;
  gap: 8px;
  align-items: center;
}
.sv-service__thumb {
  width: 200px;
  height: 158px;
  border-radius: 0 20px 0 20px;
  border: 2px solid #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  flex-shrink: 0;
}
.sv-service__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── STEPS ─── */
.sv-steps {
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: center;
  margin: 120px auto 0;
  max-width: 1307px;
  padding: 0 24px;
}
.sv-steps__head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  max-width: 1015px;
  text-align: center;
}
.sv-steps__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.2;
  color: #8c0e0f;
}
.sv-steps__sub {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.18px;
  color: #000;
  line-height: 1.6;
}
.sv-steps__grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}
.sv-steps__row {
  display: flex;
  gap: 19px;
  align-items: stretch;
  width: 100%;
}
.sv-step {
  border: 1px solid #d1d1d1;
  padding: 24px;
  flex: 1;
  min-width: 0;
}
.sv-step__head {
  display: flex;
  gap: 22px;
  align-items: center;
  margin-bottom: 22px;
}
.sv-step__num {
  width: 40px;
  height: 40px;
  border-radius: 100px;
  background: linear-gradient(90.82deg, #a67c1e 1.52%, #d4af37 99.43%);
  border: 1px solid #fff;
  box-shadow: 0 10px 12px rgba(166, 124, 30, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 0.24px;
  color: #fff;
}
.sv-step__label {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0.24px;
  color: #8c0e0f;
  line-height: 1.2;
}
.sv-step__desc {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.18px;
  color: #000;
  line-height: 1.5;
}
.sv-steps__note {
  text-align: center;
}
.sv-steps__note p {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.18px;
  color: #000;
  line-height: 1.6;
}

/* ─── GALLERY ─── */
.sv-gallery {
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: center;
  margin-top: 100px;
}
.sv-gallery__head {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 64px;
}
.sv-gallery__corner {
  width: 112px;
  height: 118px;
  overflow: hidden;
  position: relative;
}
.sv-gallery__corner img {
  position: absolute;
  height: 354.63%;
  left: -7.14%;
  top: 0;
  width: 374.13%;
  max-width: none;
}
.sv-gallery__corner--r { transform: rotate(180deg) scaleY(-1); }
.sv-gallery__title {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  pointer-events: none;
}
.sv-gallery__title h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.2;
  color: #8c0e0f;
}
.sv-gallery__grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}
.sv-gallery__row {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
}
.sv-gallery__row--2 { gap: 24px; }
.sv-gallery__img {
  width: 269px;
  height: 269px;
  flex-shrink: 0;
  overflow: hidden;
}
.sv-gallery__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── ORNAMENT DIVIDER ─── */
.sv-orn-divider {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 48px 64px;
  margin: 100px auto 0;
}
.sv-orn-divider .ln {
  flex: 1;
  height: 1.5px;
  background: linear-gradient(to right, #bd9a4b, #d1ab35);
}
.sv-orn-divider__c {
  width: 150px;
  height: 73px;
  overflow: hidden;
  position: relative;
  transform: rotate(180deg);
}
.sv-orn-divider__c img {
  position: absolute;
  height: 410.83%;
  left: -52.01%;
  top: -98.9%;
  width: 200.78%;
  max-width: none;
}

/* ─── HISTORY ─── */
.sv-history {
  display: flex;
  gap: 48px;
  align-items: center;
  justify-content: center;
  padding: 10px 64px 100px;
  margin: 0 auto;
}
.sv-history__img {
  width: 528px;
  height: 727px;
  border-radius: 0 100px 0 100px;
  overflow: hidden;
  flex-shrink: 0;
}
.sv-history__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sv-history__content {
  width: 640px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  flex-shrink: 0;
}
.sv-history__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.2;
  color: #8c0e0f;
}
.sv-history__text {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.18px;
  color: #333;
  line-height: 1.7;
  white-space: pre-line;
}
.sv-history__text strong { font-weight: 600; }

/* ─── กันล้นจอเล็ก ─── */
@media (max-width: 1480px) {
  .sv-gallery__grid { transform: scale(0.92); }
}