/* =========================================================
   Suriya9 — Responsive (Tablet + Mobile) ทุกหน้า
   โหลดท้ายสุด (หลัง CSS ของทุกหน้า) — desktop ≥1200 ไม่ถูกแตะ
   Breakpoints:
     ≤1199  tablet แนวนอน / จอเล็ก  → เมนู hamburger, ย่อระยะ
     ≤1024  tablet                  → 2 คอลัมน์ → ซ้อนแนวตั้ง
     ≤767   mobile                  → 1 คอลัมน์, ฟอนต์/ระยะมือถือ
   ========================================================= */

/* ขึ้นบรรทัดแยกขนาดจอ (ใช้ทั้งเว็บ)
   <br>                    = ขึ้นบรรทัดทุกขนาด (ข้อมูล เช่น เบอร์โทร/ที่อยู่ หรือเว้นย่อหน้า <br><br>)
   <br class="br-desktop"> = ขึ้นบรรทัดเฉพาะ desktop/tablet (≥768px)
   <br class="br-mobile">  = ขึ้นบรรทัดเฉพาะมือถือ (≤767px) */
.br-mobile { display: none; }
@media (max-width: 767px) {
  .br-desktop { display: none; }
  .br-mobile { display: inline; }
}

/* ปุ่ม hamburger (main.js สร้างให้) — ซ่อนบน desktop */
.s9-burger { display: none; }

/* =========================================================
   ≤1199 — HEADER: เมนู hamburger + ลิ้นชักด้านขวา
   ========================================================= */
@media (max-width: 1199px) {
  :root { --pad-x: 32px; }

  .s9-header { padding: 16px var(--pad-x) 0; }
  .s9-header.is-scrolled { padding-top: 10px; padding-bottom: 10px; }

  /* แถบเดียวทรงกระจกฝ้า: โลโก้ซ้าย + ปุ่ม 3 ขีดขวา (ตามดีไซน์ mobile)
     ใช้ ::before เป็นพื้นกระจก — ถ้าใส่ backdrop-filter ที่ตัว inner เอง
     ลิ้นชัก .s9-nav (position:fixed) จะถูกขังอยู่ในแถบ */
  .s9-header__inner {
    position: relative;
    justify-content: space-between;
    height: 76px;
    padding: 0 22px 0 16px;
  }
  .s9-header__inner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    background: rgba(149, 149, 149, 0.25);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: background 0.25s ease;
  }
  /* เลื่อนลงมาบนพื้นขาว → กระจกขาวขึ้น ขีดเป็นสีทอง ให้มองเห็นชัด */
  .s9-header.is-scrolled .s9-header__inner::before { background: rgba(255, 255, 255, 0.72); }

  .s9-logo {
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  .s9-logo img { width: 50px; height: 56px; opacity: 1; object-position: center; }

  /* ปุ่ม 3 ขีด — ขีดขาว ขีดล่างสั้นชิดขวา */
  .s9-burger {
    position: relative;
    z-index: 120;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 7px;
    width: 48px;
    height: 48px;
    margin-right: -6px;
    padding: 0 6px;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .s9-burger span {
    display: block;
    width: 32px;
    height: 3px;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease, opacity 0.2s ease, width 0.3s ease, background 0.25s ease;
  }
  .s9-burger span:nth-child(3) { width: 18px; }
  .s9-header.is-scrolled .s9-burger span { background: var(--gold-deep); box-shadow: none; }
  /* เปิดเมนู → กลายเป็น X สีทอง (บนลิ้นชักพื้นขาว) */
  .s9-nav-open .s9-burger span { width: 28px; background: var(--gold-deep); box-shadow: none; }
  .s9-nav-open .s9-burger span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
  .s9-nav-open .s9-burger span:nth-child(2) { opacity: 0; }
  .s9-nav-open .s9-burger span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

  /* แถบเมนู → ลิ้นชักเต็มสูงจากขวา */
  .s9-nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 110;
    flex: none;
    width: min(380px, 86vw);
    height: 100vh;
    height: 100dvh;
    padding: 104px 0 32px;
    align-items: flex-start;
    border: 0;
    border-left: 1px solid rgba(206, 169, 52, 0.35);
    border-radius: 24px 0 0 24px;
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(105%);
    visibility: hidden;
    transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.38s;
  }
  .s9-nav-open .s9-nav {
    transform: none;
    visibility: visible;
    transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s;
  }
  /* ฉากหลังมืดตอนเปิดเมนู (main.js สร้าง .s9-nav-backdrop) */
  .s9-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 85; /* ใต้ header (90) ที่มีลิ้นชักอยู่ข้างใน */
    background: rgba(20, 12, 4, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  }
  .s9-nav-open .s9-nav-backdrop { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
  html.s9-nav-open, html.s9-nav-open body { overflow: hidden; }

  .s9-nav__row {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 24px;
    width: 100%;
    padding: 0 24px;
  }
  .s9-nav__menu {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    text-align: left;
    white-space: normal;
    font-size: 18px;
  }
  .s9-nav__menu > li {
    height: auto;
    display: block;
    border-bottom: 1px solid rgba(206, 169, 52, 0.22);
  }
  .s9-nav__menu > li > a { display: block; padding: 14px 4px; }
  /* เมนูในลิ้นชักพื้นขาว → ตัวหนังสือเข้มเสมอ (กันกฎเมนูขาวของหน้า hero เข้ม) */
  .s9-header .s9-nav .s9-nav__menu > li > a,
  .s9-header:not(.is-past-hero) .s9-nav .s9-nav__menu > li > a { color: var(--ink); }
  .s9-header .s9-nav .s9-nav__menu > li > a.is-active,
  .s9-header .s9-nav .s9-nav__menu > li.current-menu-item > a,
  .s9-header .s9-nav .s9-nav__menu > li.current-menu-parent > a,
  .s9-header .s9-nav .s9-nav__menu > li.current-menu-ancestor > a,
  .s9-header:not(.is-past-hero) .s9-nav .s9-nav__menu > li > a.is-active { color: var(--gold-deep); }

  /* เมนูย่อย → กางในลิ้นชักตลอด (ไม่ต้อง hover) */
  .s9-nav__menu > li.menu-item-has-children > a::after { display: none; }
  .s9-nav__menu .sub-menu,
  .s9-nav__menu > li:hover > .sub-menu {
    position: static;
    transform: none;
    min-width: 0;
    margin: -4px 0 10px;
    padding: 0 0 0 14px;
    gap: 0;
    border: 0;
    border-left: 2px solid rgba(206, 169, 52, 0.45);
    border-radius: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .s9-nav__menu .sub-menu::before { display: none; }
  .s9-nav__menu .sub-menu a:hover,
  .s9-nav__menu .sub-menu > li.menu-item-has-children:hover > a { background: none; color: var(--gold-deep); }
  /* ชั้นที่ 3 (สินค้า › หีบศพ › หมวด): หัวกลุ่มเป็นป้าย + รายการย่อยเยื้องเข้าไปอีกชั้น */
  .s9-nav__menu .sub-menu .sub-menu,
  .s9-nav__menu .sub-menu > li:hover > .sub-menu,
  .s9-nav__menu .sub-menu > li:focus-within > .sub-menu {
    position: static;
    transform: none;
    min-width: 0;
    margin: 0 0 6px 10px;
    padding: 0 0 0 12px;
  }
  .s9-nav__menu .sub-menu > li.menu-item-has-children > a { display: block; font-weight: 600; color: var(--ink); }
  .s9-nav__menu .sub-menu > li.menu-item-has-children > a::after { display: none; }
  .s9-nav__menu .sub-menu > li.menu-item-has-children:hover > a { background: none; color: var(--ink); }
  .s9-nav__menu .sub-menu a {
    padding: 8px 10px;
    font-size: 15px;
    white-space: normal;
    color: #545454;
  }

  /* ── เมนูย่อยแบบพับ/กาง (html.s9-acc = main.js ทำงานแล้ว · ไม่มี JS = กางตลอดตามกฎด้านบน) ── */
  .s9-nav__menu li.menu-item-has-children { position: relative; }
  .s9-acc .s9-nav__menu > li.menu-item-has-children > a { padding-right: 56px; }
  .s9-acc .s9-sub-toggle {
    position: absolute;
    top: 0;
    right: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 54px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .s9-acc .s9-sub-toggle::before {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--gold-deep);
    border-bottom: 2px solid var(--gold-deep);
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .s9-acc .s9-nav__menu li.is-open > .s9-sub-toggle::before { transform: translateY(3px) rotate(-135deg); }
  .s9-acc .s9-nav__menu > li.is-open > a { color: var(--gold-deep); }
  .s9-acc .s9-nav__menu .sub-menu { display: none; }
  .s9-acc .s9-nav__menu li.is-open > .sub-menu { display: flex; animation: s9-sub-in 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  /* รายการย่อย: ตัวใหญ่ขึ้น แตะง่ายขึ้น */
  .s9-acc .s9-nav__menu .sub-menu { margin: -2px 0 14px; padding-left: 16px; }
  .s9-acc .s9-nav__menu .sub-menu a { padding: 10px 12px; font-size: 16px; }
  /* กลุ่มชั้นที่ 2 (เช่น หีบศพ) */
  .s9-acc .s9-nav__menu .sub-menu > li.menu-item-has-children > a { padding-right: 52px; }
  .s9-acc .s9-nav__menu .sub-menu .s9-sub-toggle { right: -4px; width: 52px; height: 42px; }
  .s9-acc .s9-nav__menu .sub-menu .s9-sub-toggle::before { width: 7px; height: 7px; }
  .s9-acc .s9-nav__menu .sub-menu .sub-menu { margin: 0 0 6px 12px; padding-left: 12px; }
  .s9-acc .s9-nav__menu .sub-menu .sub-menu a { font-size: 15px; padding: 9px 12px; }

  .s9-btn-contact { width: 100%; padding: 15px 24px; }

  /* ปุ่มลอยติดต่อ — เล็กลง */
  .s9-floating { right: 16px; bottom: 24px; gap: 10px; }
  .s9-floating a, .s9-floating img { width: 68px; height: 68px; }
  .floating-left img, .floating-right img { width: 68px; height: 68px; }
}

/* =========================================================
   ≤1199 — เนื้อหาหน้าแรก (ย่อ canvas 1440 ให้พอดี)
   ========================================================= */
@media (max-width: 1199px) {
  /* ส่วนหัวข้อทั่วไป */
  .s9-section-head { padding: 0 var(--pad-x); }

  /* แพ็กเกจหน้าแรก: 3 ใบยืดตามจอ */
  .s9-packages__grid { width: 100%; justify-content: center; gap: 16px; }
  .s9-pkg-card { flex: 1 1 0; width: auto; min-width: 0; max-width: 421px; height: 380px; }
  .s9-pkg-card__body { top: 96px; gap: 44px; }
  .s9-pkg-card__name { font-size: 30px; }
  .s9-pkg-card__price { font-size: 40px; }

  /* โลงศพคุณภาพ: grid ยืดหยุ่น */
  .s9-products__inner { padding: 0 var(--pad-x); }
  .s9-products__corner { display: none; }
  .s9-products .s9-section-head { margin: 40px 0; padding: 0; }
  .s9-cat__row { gap: 24px; }
  .s9-coffin-grid { flex-wrap: wrap; gap: 16px; }
  .s9-coffin { width: calc((100% - 3 * 16px) / 4); }
  .s9-cat > .s9-coffin-grid .s9-coffin,
  .s9-cat__labelrow + .s9-coffin-grid .s9-coffin { width: calc((100% - 4 * 16px) / 5); }
  .s9-cat__row .s9-coffin-grid { flex: 1; min-width: 0; }
  .s9-coffin__box { width: 100%; height: auto; aspect-ratio: 242 / 233; }
  .s9-coffin__box img { max-width: 90%; max-height: 86%; }
  .s9-coffin__name { font-size: 14px; }

  /* เกี่ยวกับเรา */
  .s9-about__row { gap: 40px; }
  .s9-about__photo { width: 380px; height: 380px; }
  .s9-about__text { padding-top: 16px; font-size: 17px; }
  .s9-about__rose { height: 400px; opacity: 0.6; }

  /* footer */
  .s9-footer__top { flex-direction: column; gap: 40px; }
  .s9-footer__brand { width: 100%; max-width: 560px; }
  .s9-footer__menus { width: 100%; padding-left: 0; }
}

/* =========================================================
   ≤1199 — หน้าอื่น ๆ (ย่อความกว้างคงที่ของ desktop)
   ========================================================= */
@media (max-width: 1199px) {
  /* บริการ (จีน) */
  .sv-service { gap: 28px; padding: 0 var(--pad-x); }
  .sv-service__img { width: 44%; height: auto; aspect-ratio: 528 / 417; flex-shrink: 1; }
  .sv-service__content { width: auto; flex: 1; min-width: 0; min-height: 0; gap: 24px; flex-shrink: 1; }
  .sv-service__desc { font-size: 18px; }
  .sv-service__thumb { width: auto; flex: 1; min-width: 0; height: auto; aspect-ratio: 200 / 158; }
  .sv-quote p { white-space: normal; font-size: 34px; }
  .sv-steps { margin-top: 80px; padding: 0 var(--pad-x); }
  .sv-gallery { margin-top: 72px; }
  .sv-gallery__grid { transform: none; width: 100%; padding: 0 var(--pad-x); }
  .sv-gallery__row { width: 100%; gap: 12px; }
  .sv-gallery__row--2 { gap: 12px; padding: 0 9%; }
  .sv-gallery__img { width: auto; height: auto; flex: 1 1 0; min-width: 0; aspect-ratio: 1; }
  .sv-gallery__head { padding: 0 var(--pad-x); }
  .sv-orn-divider { margin-top: 64px; padding: 40px var(--pad-x); }
  .sv-history { gap: 36px; padding: 10px var(--pad-x) 80px; }
  .sv-history__img { width: 42%; height: auto; aspect-ratio: 528 / 727; flex-shrink: 1; }
  .sv-history__content { width: auto; flex: 1; min-width: 0; flex-shrink: 1; }

  /* ดอกไม้ / รถตู้ */
  .svf-main, .svt-main { padding: 48px var(--pad-x); gap: 48px; }
  .svf-section { gap: 40px; }
  .svf-img, .svf-grid .svf-row:last-child .svf-img { height: 22vw; }
  .svf-orn { padding: 0; }

  /* แพ็กเกจ */
  .pk-row { padding: 0 var(--pad-x); }
  .pk-card { width: calc((100% - 2 * 16px) / 3); max-width: 400px; }
  .pk-card-header { width: 100%; padding: 13px 16px 0; }

  /* สินค้า (หีบศพ) */
  .cf-products { padding: 40px var(--pad-x); }
  .cf-divider { padding: 0 var(--pad-x); }
  .cf-promo-cards { padding: 0 var(--pad-x); }

  /* ผลงาน */
  .wk-stories { padding: 0 var(--pad-x); }
  .wk-gallery__head { padding: 0 var(--pad-x); }

  /* บทความ */
  .title-divider { width: calc(100% - 2 * var(--pad-x)); }

  /* บริจาค */
  .dn-divider { padding-left: var(--pad-x); padding-right: var(--pad-x); }
}

/* =========================================================
   ≤1024 — TABLET
   ========================================================= */
@media (max-width: 1024px) {
  /* ── HERO หน้าแรก ── */
  .s9-hero { height: 600px; }
  .s9-hero__content { top: 200px; height: auto; display: flex; flex-direction: column; align-items: center; gap: 32px; }
  .s9-hero__text { position: static; transform: none; width: auto; max-width: calc(100% - 48px); }
  .s9-hero__title { font-size: 60px; line-height: 1.2; }
  .s9-hero__subtitle { font-size: 22px; }
  .s9-hero__actions { position: static; transform: none; }

  /* ── QUOTE ── */
  .s9-quote__inner { gap: 40px; padding: 0 var(--pad-x); }
  .s9-quote__title { font-size: 34px; white-space: normal; }
  /* แท็บเล็ต: รูป + ข้อความยังวางคู่กัน (รูปย่อ) */
  .s9-quote__row { gap: 32px; width: 100%; }
  .s9-quote__photo { width: 42%; flex-shrink: 1; height: auto; aspect-ratio: 424 / 335; }
  .s9-quote__content { padding-top: 0; }
  .s9-quote__desc { max-width: none; }
  .s9-quote__lead { font-size: 21px; }
  .s9-quote__desc, .s9-quote__list li { font-size: 16px; }

  /* ── PROMOTION slider ── */
  .s9-promo { gap: 32px; }
  .s9-promo__bg { width: 60%; opacity: 0.7; }
  .s9-promo__card { width: 340px; height: auto; aspect-ratio: 410 / 565; }
  .s9-promo__cards.swiper .s9-promo__card--tall,
  .s9-promo__card--tall { height: auto; }

  /* ── แพ็กเกจหน้าแรก: เลื่อนแนวนอน ── */
  .s9-packages__grid {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px var(--pad-x) 16px;
    scrollbar-width: none;
  }
  .s9-packages__grid::-webkit-scrollbar { display: none; }
  .s9-pkg-card { flex: 0 0 340px; height: 360px; scroll-snap-align: center; }

  /* ── โลงศพคุณภาพ ── */
  .s9-cat__row { flex-direction: column; align-items: stretch; gap: 24px; margin-bottom: 24px; }
  .s9-cat__intro { width: 100%; padding-top: 0; gap: 20px; flex-direction: row; align-items: center; }
  .s9-cat__intro p { flex: 1; }
  /* โลงศพ → แถบปัดซ้าย-ขวา (แถวละ 4–5 ใบ ไม่เหลือใบกำพร้า) */
  .s9-coffin-grid {
    flex-wrap: nowrap;
    margin: 0 calc(-1 * var(--pad-x));
    padding: 4px var(--pad-x) 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .s9-coffin-grid::-webkit-scrollbar { display: none; }
  .s9-cat__row .s9-coffin-grid { flex: none; }
  .s9-coffin-grid .s9-coffin,
  .s9-cat > .s9-coffin-grid .s9-coffin,
  .s9-cat__labelrow + .s9-coffin-grid .s9-coffin { flex: 0 0 190px; width: 190px; scroll-snap-align: start; }
  .s9-pkg-card__body { padding: 0 22px; }

  /* ── เกี่ยวกับเรา ── */
  .s9-about__inner { padding: 0 var(--pad-x); }
  .s9-about .s9-section-head { margin-bottom: 40px; padding: 0; }
  .s9-about__row { gap: 32px; }
  .s9-about__photo { width: 40%; flex-shrink: 1; height: auto; aspect-ratio: 1; }
  .s9-about__text { padding-top: 0; font-size: 16px; }
  .s9-about__rose { display: none; }

  /* ── ผลงานหน้าแรก ── */
  .s9-marquee__item { width: 190px; height: 143px; }

  /* ── หัวข้อทั่วไป ── */
  .s9-section-title { font-size: 36px; }
  .s9-section-sub { font-size: 20px; }

  /* ── บริการ (จีน) ── */
  .sv-hero { height: 420px; border-radius: 0 0 40px 40px; }
  .sv-hero__title { bottom: 56px; gap: 24px; padding: 0 var(--pad-x); }
  .sv-hero__h1 { font-size: 42px; white-space: normal; }
  .sv-quote { padding: 32px var(--pad-x); }
  .sv-quote p { font-size: 30px; }
  .sv-service { align-items: flex-start; }
  .sv-service__desc { font-size: 16px; }
  .sv-btn-gold, .sv-btn-outline { padding: 8px 22px; }
  /* ขั้นตอน 9 ข้อ → grid 2 คอลัมน์ (ข้อสุดท้ายเต็มแถว) */
  .sv-steps__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .sv-steps__row { display: contents; }
  .sv-steps__row:last-child .sv-step:last-child { grid-column: 1 / -1; }
  .sv-steps__title { font-size: 32px; }
  .sv-history { align-items: flex-start; }
  .sv-history__title { font-size: 30px; }
  .sv-history__text { font-size: 16px; }
  .sv-gallery__title h2 { font-size: 32px; }
  .sv-texture { height: 520px; }

  /* ── รถตู้ ── */
  .svt-row { flex-direction: column; flex-wrap: nowrap; }
  .svt-img { width: 100%; max-width: 640px; height: auto; aspect-ratio: 528 / 417; }
  .svt-textcol { width: 100%; max-width: 640px; min-height: 0; }
  .svt-desc, .svt-para { font-size: 18px; }

  /* ── ดอกไม้ ── */
  .svf-title { font-size: 24px; }

  /* ── แพ็กเกจ ── */
  .pk-hero { height: 320px; }
  .pk-title { font-size: 42px; }
  .pk-tabs-wrap { margin-top: 32px; padding: 0 var(--pad-x); }
  .pk-tabs { gap: 4px; height: 52px; }
  .pk-tab { padding: 10px 22px; font-size: 17px; }
  .pk-heading { padding-top: 36px; margin-bottom: 36px; }
  .pk-sec-desc { font-size: 20px; padding: 0 var(--pad-x); }
  .pk-row { gap: 56px 20px; }
  .pk-card { width: calc((100% - 20px) / 2); }

  /* ── สินค้า (หีบศพ) ── */
  .cf-hero { height: 320px; }
  .cf-title { font-size: 42px; white-space: normal; padding: 0 var(--pad-x); }
  .cf-subtitle { font-size: 20px; }
  .cf-grid { grid-template-columns: repeat(3, 1fr); }
  .cf-promo-title { font-size: 34px; }
  .cf-promo-sub { font-size: 20px; }

  /* ── ผลงาน ── */
  .wk-photo { width: 100%; max-width: 709px; height: auto; aspect-ratio: 709 / 391; }
  .wk-photo__main { left: 9.9%; width: 90.1%; height: 92.6%; }
  .wk-photo__logo { top: 52.4%; width: 28.2%; height: 44.8%; }
  .wk-text__h { font-size: 30px; }
  .wk-gallery__title h2 { font-size: 32px; }

  /* ── ติดต่อเรา ── */
  .ct-main { padding: 0 var(--pad-x); }
  .ct-intro__brand { font-size: 36px; }
  .ct-intro::before { width: 100vw; opacity: 0.6; }

  /* ── บทความ ── */
  .blog-wrap { width: calc(100% - 2 * var(--pad-x)); }

  /* ── บริจาค ── */
  .dn-hero { height: 360px; border-radius: 0 0 40px 40px; }
  .dn-hero--light { height: 320px; border-radius: 0; }
  .dn-hero__title { padding: 0 var(--pad-x); }
  .dn-hero__h1 { font-size: 40px; }
  .dn-pay { grid-template-columns: 1fr; gap: 24px; }
  .dn-form { padding: 8px var(--pad-x) 20px; }

  /* ── footer ── */
}

/* จุดสไลด์ใต้แพ็กเกจ (main.js/sliders.js สร้าง) — โชว์เฉพาะตอนเป็นแถบเลื่อน ≤1024 */
.s9-pkg-dots { display: none; }
@media (max-width: 1024px) {
  .s9-pkg-dots { display: flex; justify-content: center; gap: 10px; margin-top: -12px; }
  .s9-pkg-dots .s9-dot {
    width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(148, 100, 30, 0.28); cursor: pointer;
    transition: all 0.3s ease;
  }
  .s9-pkg-dots .s9-dot.is-active { background: var(--gold); width: 26px; border-radius: 5px; }
}

/* =========================================================
   ≤767 — MOBILE
   ========================================================= */
@media (max-width: 767px) {
  :root { --pad-x: 16px; }

  /* ── header ── */
  .s9-header { padding: 12px var(--pad-x) 0; }
  .s9-header.is-scrolled { padding-top: 8px; padding-bottom: 8px; }
  .s9-header__inner { height: 64px; padding: 0 16px 0 12px; }
  .s9-header__inner::before { border-radius: 18px; }
  .s9-logo img { width: 42px; height: 48px; }
  .s9-burger { gap: 6px; }
  .s9-burger span { width: 28px; }
  .s9-burger span:nth-child(3) { width: 16px; }
  .s9-nav-open .s9-burger span { width: 26px; }
  .s9-nav-open .s9-burger span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .s9-nav-open .s9-burger span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
  /* มือถือ: เมนูเปิดเต็มจอ (แท็บเล็ต 768–1199 ยังเป็นลิ้นชักด้านขวา) — โลโก้ + ปุ่มปิดลอยอยู่บนแผ่นเมนู */
  .s9-nav {
    width: 100vw;
    padding-top: 104px;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .s9-nav-open .s9-logo { position: relative; z-index: 120; }
  .s9-nav__row { padding: 0 24px; }
  .s9-nav__menu { font-size: 18px; }

  .s9-floating { right: 12px; bottom: 16px; gap: 8px; }
  .s9-floating a, .s9-floating img { width: 54px; height: 54px; }

  /* ── ปุ่มทั่วไป ── */
  .s9-btn { padding: 13px 26px; font-size: 15px; }
  .s9-btn--outline, .s9-btn-contact { width: auto; }

  /* ── เส้นคั่นลายทอง ── */
  .s9-divider { gap: 10px; }
  /* ลายทอง (gold-ornament) คงขนาดเต็ม 150×73 บนมือถือ — ให้เด่นตามดีไซน์ */
  .cf-divider, .svf-orn { gap: 10px; }

  /* ── หัวข้อทั่วไป ── */
  .s9-section-title { font-size: 30px; }
  .s9-section-sub { font-size: 16px; }

  /* ── HERO หน้าแรก ── */
  .s9-hero { height: 560px; background-position: 58% center; }
  .s9-hero__content { top: 150px; gap: 28px; }
  .s9-hero__text { max-width: calc(100% - 32px); gap: 14px; }
  .s9-hero__title { font-size: 46px; -webkit-text-stroke-width: 1px; }
  .s9-hero__subtitle { font-size: 17px; font-weight: 700; }
  .s9-hero__actions { flex-direction: column; gap: 12px; width: calc(100% - 64px); max-width: 300px; }
  .s9-hero__actions .s9-btn { width: 100%; }

  /* ── QUOTE ── */
  /* พื้นหลังดอกไม้ทอง 3D (เฉพาะมือถือ) แทนรูป quote-floral-decoration */
  .s9-quote {
    padding: 32px 0 40px;
    background:
      /* เฟดขาวด้านขวา + ด้านล่างของรูป (รูปสูง 537px) */
      linear-gradient(to right, rgba(255, 255, 255, 0) 40%, #fff 100%),
      linear-gradient(to bottom, rgba(255, 255, 255, 0) 330px, #fff 537px),
      linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)),
      url("../images/home/quote-floral-background.webp") left top / auto 537px no-repeat, /* ขนาดเท่า desktop: สูง 537 (~733 กว้าง) ชิดซ้ายบน */
      #fff;
  }
  .s9-quote__bg { display: none; }
  .s9-quote__inner { gap: 28px; }
  .s9-quote__title { font-size: 26px; line-height: 1.35; }
  .s9-quote__row { flex-direction: column; align-items: center; gap: 24px; }
  .s9-quote__photo { width: 100%; }
  .s9-quote__photo { border-radius: 0 60px 0 60px; }
  .s9-quote__lead { font-size: 20px; }
  .s9-quote__desc, .s9-quote__list li { font-size: 16px; }
  .s9-quote__list li { align-items: flex-start; }
  .s9-quote__list .s9-emblem { margin-top: 4px; }

  /* ── PROMOTION ── */
  .s9-promo { gap: 20px; padding-top: 16px; }
  .s9-promo__body { gap: 12px; width: 100%; }
  .s9-promo__bg { display: none; }
  .s9-promo__card { width: 72vw; max-width: 300px; border-width: 3px; border-radius: 16px; }
  .s9-promo__cards.swiper { padding: 24px 0; }
  .s9-promo__pager { margin-top: 8px; }

  /* ── แพ็กเกจหน้าแรก ── */
  .s9-packages { gap: 28px; padding: 24px 0 32px; }
  .s9-pkg-card { flex: 0 0 78vw; max-width: 320px; height: 330px; }
  .s9-pkg-card__body { top: 84px; gap: 36px; }
  .s9-pkg-card__name { font-size: 28px; }
  .s9-pkg-card__price { font-size: 36px; }
  .s9-pkg-card__desc { font-size: 15px; padding: 0 12px; }
  /* มือถือ: การ์ดเรียงลงมา 3 ใบ ไม่สไลด์ (แท็บเล็ต 768–1024 ยังปัดซ้าย-ขวาตามเดิม) */
  .s9-packages__grid { flex-direction: column; align-items: center; gap: 18px; overflow: visible; scroll-snap-type: none; padding: 0 var(--pad-x); }
  .s9-pkg-card { flex: none; width: 100%; max-width: 420px; height: 300px; scroll-snap-align: none; }
  .s9-pkg-card__body { top: 70px; gap: 32px; }
  .s9-pkg-card--start { border-radius: 72px 0 0 8px; }
  .s9-pkg-card--premium { border-radius: 0 0 72px 0; }
  .s9-pkg-card--start::before { border-radius: 62px 0 0 0; }
  .s9-pkg-card--premium::before { border-radius: 0 0 62px 0; }
  .s9-pkg-dots { display: none; }

  /* ── โลงศพคุณภาพ ── */
  .s9-products { padding: 16px 0; }
  .s9-products .s9-section-head { margin: 28px 0; padding: 0 44px; }
  /* ลายมุมไทย 2 ข้างหัวข้อ */
  .s9-products__corner { display: block; top: 118px; width: 44px; }
  .s9-products__corner--tl { left: 12px; }
  .s9-products__corner--tr { right: 12px; }
  /* หีบศพไทย / จีน — จัดกลางทั้งหมด */
  .s9-cat + .s9-cat { margin-top: 36px; }
  .s9-cat__label { font-size: 22px; margin-bottom: 16px; text-align: center; }
  .s9-cat__labelrow { flex-direction: column; align-items: center; gap: 14px; }
  .s9-cat__intro { flex-direction: column; align-items: center; gap: 16px; text-align: center; }
  .s9-cat__intro .s9-btn { align-self: center; }
  .s9-cat__row { margin-bottom: 0; }
  /* โลงศพ: grid 2×2 แสดง 4 ใบ ที่เหลือซ่อน */
  .s9-coffin-grid,
  .s9-cat__row .s9-coffin-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .s9-coffin-grid .s9-coffin,
  .s9-cat > .s9-coffin-grid .s9-coffin,
  .s9-cat__labelrow + .s9-coffin-grid .s9-coffin { width: auto; max-width: none; gap: 8px; }
  .s9-coffin-grid .s9-coffin:nth-child(n+5) { display: none; }
  .s9-cat__row + .s9-coffin-grid { display: none; } /* แถวที่ 2 ของหีบศพไทย */
  .s9-coffin__box { border-radius: 14px; }
  .s9-coffin__name { font-size: 13px; }
  .s9-products__bottom-divider { margin-top: 28px; }

  /* ── เกี่ยวกับเรา ── */
  /* พื้นหลังดอกไม้ บน-ล่าง (เฉพาะมือถือ) */
  .s9-about {
    margin-top: 0;
    padding: 180px 0 120px;
    background: #fff url("../images/home/about-floral-background.webp") center / 100% 100% no-repeat;
  }
  .s9-about .s9-divider{display:none}
  .s9-about .s9-section-head { margin-bottom: 28px; }
  .s9-about__row { flex-direction: column; align-items: center; gap: 24px; }
  .s9-about__photo { width: 100%; border-radius: 0 60px 8px 60px; }
  .s9-about__text { font-size: 16px; line-height: 1.75; }

  /* ── ผลงานหน้าแรก ── */
  .s9-works__head { margin-bottom: 24px; gap: 10px; }
  /* พื้นหลังดอกไม้ขาวก่อน footer (เฉพาะมือถือ) แทนแถบดอกไม้เดิม */
  .s9-works {
    background:
      url("../images/home/works-floral-background-mobile.webp") center bottom / 100% auto no-repeat,
      linear-gradient(to bottom, #ffffff, #fffefb 60%, #fff9ed);
  }
  .s9-works__flowers { display: none; }
  /* ผลงาน: grid 2 คอลัมน์ 10 รูป (แทนแถบเลื่อน marquee) */
  .s9-works__rows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 8px 36px;
  }
  .s9-marquee, .s9-marquee__track { display: contents; }
  .s9-marquee__item {
    width: auto;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  }
  /* รูปซ้ำ (ออกไว้ 2 รอบให้เลื่อนวน) + แถวที่ 3 ไม่แสดง → แถว 1 ใช้ 6 รูป แถว 2 ใช้ 4 รูป */
  .s9-marquee__track .s9-marquee__item:nth-child(n+7),
  .s9-marquee:nth-child(2) .s9-marquee__item:nth-child(n+5),
  .s9-marquee:nth-child(n+3) .s9-marquee__item { display: none; }
  .s9-works__action { margin-top: 28px; padding-bottom: 32px; }

  /* ── FOOTER ── */
  /* ตามดีไซน์ mobile: แบรนด์จัดกลาง → เมนูเรียงลงคอลัมน์เดียวชิดซ้าย → แถบทอง */
  .s9-footer { padding: 32px 24px 0; }
  .s9-footer__inner { gap: 36px; }
  .s9-footer__top { gap: 36px; }
  .s9-footer__brand { max-width: none; align-items: center; text-align: center; gap: 22px; }
  .s9-footer__logo { flex-direction: column; gap: 12px; }
  .s9-footer__logo img { width: 72px; height: 85px; }
  .s9-footer__logo span { font-size: 18px; }
  .s9-footer__desc { font-size: 13.5px; }
  .s9-footer__social { justify-content: center; flex-wrap: wrap; gap: 12px 14px; }
  .s9-footer__social-label { margin-right: 0; }
  .s9-footer__menus { display: flex; flex-direction: column; gap: 28px; }
  .s9-footer__col { gap: 18px; }
  .s9-footer__col-list { gap: 16px; font-size: 14px; }
  /* "เว็บไซต์" ต่อท้าย (ไม่มีหัวข้อ) — ชิดคอลัมน์ก่อนหน้า */
  .s9-footer__col--more { margin-top: -6px; }
  .s9-footer__line { display: none; }
  .s9-footer__bar { height: 14px; margin: 48px -24px 0; }

  /* =====================================================
     หน้าบริการ (จีน / ดอกไม้ / รถตู้)
     ===================================================== */
  .sv-hero { height: 340px; border-radius: 0 0 28px 28px; }
  .sv-hero__title { bottom: 36px; gap: 16px; }
  .sv-hero__h1 { font-size: 32px; line-height: 1.25; }
  .sv-quote { padding: 28px var(--pad-x) 24px; }
  .sv-quote p { font-size: 21px; line-height: 1.4; }
  .sv-texture { top: 200px; height: 420px; }
  .sv-service, .sv-history { flex-direction: column; align-items: center; gap: 20px; }
  .sv-service__img, .sv-service__content, .sv-history__content { width: 100%; }
  .sv-history__img { width: 100%; aspect-ratio: 9 / 12; }
  .sv-service__img { border-radius: 0 60px 0 60px; }
  .sv-service__desc { text-align:center; font-size: 16px; }
  .sv-service__btns { flex-wrap: wrap; gap: 12px; margin-top: 20px; }
  .sv-btn-gold, .sv-btn-outline { padding: 11px 24px; font-size: 15px; }
  .sv-service__btns a, .svt-btns a { flex: 1 1 auto; }
  /* รูปเล็ก 3 รูปใต้รูปหลัก — ต่อกันชิด ๆ (ตามดีไซน์ mobile) */
  /* ย้ายรูปเล็ก 3 รูปขึ้นมาอยู่ใต้รูปหลักทันที (ข้อความ+ปุ่มตามหลัง) */
  .sv-service__content { display: contents; }
  .sv-service__img { order: 0; }
  .sv-service__thumbs { order: 1; width: 100%; margin-top: -8px; }
  .sv-service__content > div:first-child { order: 2; width: 100%; }
  .sv-service__thumbs { gap: 4px; }
  .sv-service__thumb { border-width: 0; border-radius: 0; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12); }
  .sv-service__thumb { border-radius: 0 10px 0 10px; }
  .sv-steps { margin-top: 56px; gap: 28px; }
  .sv-steps__title { font-size: 26px; }
  .sv-steps__sub, .sv-steps__note p { font-size: 16px; }
  .sv-steps__grid { grid-template-columns: 1fr; gap: 12px; }
  .sv-step { padding: 18px; }
  .sv-step__head { gap: 14px; margin-bottom: 12px; }
  .sv-step__num { width: 36px; height: 36px; font-size: 18px; }
  .sv-step__label { font-size: 21px; }
  .sv-step__desc { font-size: 16px; }
  .sv-gallery { margin-top: 56px; gap: 28px; }
  .sv-gallery__corner { width: 64px; height: 68px; }
  .sv-gallery__title h2 { font-size: 26px; }
  /* แกลเลอรี 5/4/5 → 2 คอลัมน์ */
  .sv-gallery__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .sv-gallery__row, .sv-gallery__row--2 { display: contents; }
  .sv-gallery__img {aspect-ratio: 16 / 9; border-radius: 5px; width: auto; }
  .sv-orn-divider { margin-top: 40px; padding: 28px var(--pad-x); gap: 10px; }
  .sv-history { gap: 24px; padding: 0 var(--pad-x) 56px; }
  .sv-history__img { border-radius: 0 60px 0 60px; }
  .sv-history__title { font-size: 26px; }
  .sv-history__text { font-size: 16px; }

  /* ดอกไม้ */
  .svf-main, .svt-main { padding: 36px var(--pad-x); gap: 36px; }
  .svf-section { gap: 24px; }
  .svf-head { gap: 14px; }
  .svf-title { font-size: 24px; }
  .svf-desc { font-size: 14px; }
  .svf-actions { width: 100%; gap: 12px; }
  .svf-grid, .svf-row { gap: 8px; }
  .svf-flowers { display: none; } /* ใช้พื้นหลังของ .svf แทน (ดูส่วนหน้ารถตู้/ดอกไม้ด้านล่าง) */

  /* ── หน้าจัดงานศพจีน: banner มือถือ ── */
  .sv .sv-hero { background: url("../images/chinese-funeral/chinese-funeral-hero-mobile.webp") center / cover no-repeat; }
  .sv .sv-hero__bg { display: none; }

  /* ── หน้ารถตู้ (mobile ตามดีไซน์) — hero ใช้ร่วมกับหน้าจัดงานศพจีน ── */
  /* banner: สูงขึ้น + หัวข้อใหญ่ 2 บรรทัด */
  .svt .sv-hero, .sv .sv-hero, .svf .sv-hero { height: 380px; }
  .svt .sv-hero__title, .sv .sv-hero__title, .svf .sv-hero__title { bottom: 44px; gap: 20px; }
  .svt .sv-hero__h1, .sv .sv-hero__h1, .svf .sv-hero__h1 { font-size: 42px; line-height: 1.3; } /* ตัดบรรทัดด้วย <br class="br-mobile"> */
  /* หน้าจัดดอกไม้: หัวข้ออยู่กึ่งกลางรูป (เส้นคั่นยังอยู่ด้านล่าง) */
  .svf .sv-hero__title { top: 0; bottom: 0; padding-bottom: 44px; justify-content: flex-end; }
  .svf .sv-hero__h1 { position: absolute; top: 50%; left: var(--pad-x); right: var(--pad-x); transform: translateY(-50%); }
  /* แกลเลอรี: คงแถวแบบ desktop (3/3/4 รูปต่อแถว ถ่วงน้ำหนัก) ย่อตามจอ */
  /* (ใช้ร่วมกับหน้าจัดดอกไม้ .svf) */
  .svt .svf-grid, .svt .svf-row, .svf .svf-grid, .svf .svf-row { gap: 5px; }
  .svt .svf-row, .svf .svf-row { flex-wrap: nowrap; }
  /* ความกว้างแต่ละรูปใช้ค่า flex inline เดิม (527/394/303…) — สูงตามสัดส่วน desktop 283/1262 */
  .svt .svf-img,
  .svt .svf-grid .svf-row:last-child .svf-img,
  .svf .svf-img,
  .svf .svf-grid .svf-row:last-child .svf-img { height: calc((100vw - 2 * var(--pad-x)) * 0.224); }
  .svt .r-tl-100, .svf .r-tl-100 { border-top-left-radius: 28px; }
  .svt .r-tr-100, .svf .r-tr-100 { border-top-right-radius: 28px; }
  .svt .r-br-100, .svf .r-br-100 { border-bottom-right-radius: 28px; }
  .svt .r-tr-20, .svf .r-tr-20 { border-top-right-radius: 8px; }
  .svt .r-bl-20, .svf .r-bl-20 { border-bottom-left-radius: 8px; }
  .svt .r-all-20, .svf .r-all-20 { border-radius: 8px; }
  /* ดอกไม้ก่อน footer (BG-Footer 1 (1)) — เป็นพื้นหลังของ section เอง
     ส่วนบนของดอกไม้ลอดใต้แกลเลอรี + footer ทับขอบล่างนิดนึง */
  .svt {
    padding-bottom: 130px;
    margin-bottom: -48px;
    background: #fff url("../images/contact/contact-floral-background-mobile.webp") center bottom / 100% auto no-repeat;
  }
  /* หน้าจัดดอกไม้: ดอกไม้ก่อน footer (BG-Footer 1 (3)) — แกลเลอรีสุดท้ายทับพื้นหลัง */
  .svf {
    padding-bottom: 130px;
    margin-bottom: -48px;
    background: #fff url("../images/funeral-flowers/funeral-flowers-footer-mobile.webp") center bottom / 100% auto no-repeat;
  }

  /* รถตู้ */
  .svt-block { gap: 28px; }
  .svt-row { gap: 20px; }
  .svt-img { border-radius: 0 60px 0 60px; }
  .svt-textinner { gap: 18px; text-align: center;}
  .svt-desc, .svt-para { font-size: 16px; }
  .svt-para { display: none; } /* ย่อหน้า "พร้อมทั้งบนรถยังมีพนักงาน…" ซ่อนบนมือถือ */
  .svt-btns { flex-wrap: wrap; gap: 12px; }

  /* =====================================================
     แพ็กเกจ
     ===================================================== */
  .pk-hero { height: 240px; }
  .pk-hero-fade { height: 160px; }
  .pk-main { padding-top: 16px; }
  .pk-top { gap: 20px; }
  .pk-title { font-size: 32px; white-space: normal; padding: 0 var(--pad-x); }
  /* แท็บ 4 ปุ่ม → 2×2 */
  .pk-tabs-wrap { margin-top: 24px; }
  .pk-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    height: auto;
    width: 100%;
    max-width: 420px;
    padding: 5px;
    border-radius: 24px;
  }
  .pk-tab { padding: 10px 8px; font-size: 15px; white-space: normal; }
  .pk-heading { padding-top: 28px; margin-bottom: 28px; }
  .pk-sec-title { font-size: 28px; margin-bottom: 10px; }
  .pk-sec-desc { font-size: 16px; }
  .pk-section { padding-bottom: 32px; }
  .pk-row { gap: 40px; margin-bottom: 24px; }
  .pk-card { width: 100%; max-width: 400px; }
  .pk-card-name, .pk-card-price { font-size: 15px; }

  /* =====================================================
     สินค้า (หีบศพ) — hero ร่วมกับ ผลงาน / ติดต่อเรา
     ===================================================== */
  .cf-hero { height: 240px; }
  .cf-hero-fade { height: 160px; }
  /* ติดต่อเรา: banner มือถือ (รูปทีมงาน) + เฟดขาวด้านล่าง */
  .ct .cf-hero { background: url("../images/contact/contact-hero-mobile.webp") center 30% / cover no-repeat; }
  .ct .cf-hero img { display: none; }
  .ct .cf-hero-fade { height: 170px; background: linear-gradient(to top, #fff 8%, rgba(255, 255, 255, 0.6) 45%, rgba(255, 255, 255, 0) 100%); }
  .cf-top { margin-top: -56px; gap: 20px; }
  .cf-title { font-size: 32px; }
  .cf-products { padding: 28px var(--pad-x); }
  .cf-subtitle { font-size: 16px; margin-bottom: 24px; }
  .cf-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cf-grid + .cf-grid { margin-top: 12px; }
  .cf-card { border-radius: 14px; padding-bottom: 10px; }
  .cf-card__label { font-size: 11px; line-height: 1.4; }
  .cf-promo { padding: 32px 0; }
  .cf-promo-title { font-size: 28px; }
  .cf-promo-sub { font-size: 16px; padding: 0 var(--pad-x); }
  .cf-promo-card { width: 100%; max-width: 340px; }
  .cf-promo-card--h518, .cf-promo-card--h566 { height: auto; aspect-ratio: 400 / 540; }
  .cf > .s9-promo:last-child { padding-bottom: 96px; }

  /* =====================================================
     ผลงาน
     ===================================================== */
  .wk-stories { margin-top: 32px; gap: 48px; }
  .wk-story, .wk-story--rev { gap: 20px; }
  .wk-photo__main { border-radius: 0 56px 0 56px; border-width: 3px; }
  .wk-text { gap: 14px; }
  .wk-text__h { font-size: 24px; }
  .wk-text__sub { font-size: 16px; }
  .wk-text__body { font-size: 15px; }
  .wk-smallgal { gap: 8px; }
  .wk-smallgal img { width: calc((100% - 3 * 8px) / 4); height: auto; aspect-ratio: 1; }
  .wk-gallery { margin-top: 48px; gap: 24px; }
  .wk-corner { width: 64px; height: 68px; }
  .wk-gallery__title h2 { font-size: 26px; }
  .wk-grid { padding-bottom: 64px; }
  /* รูปเป็นเลขคู่ (14) → รูปแรกเต็มแถวด้วย คู่กับรูปสุดท้าย (ไม่มีรูปกำพร้า) */
  .wk-grid .wk-row:first-child .wk-thumb:first-child { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
  .wk-flowers { height: 180px; margin-top: 24px; margin-bottom: -80px; }

  /* =====================================================
     ติดต่อเรา
     ===================================================== */
  .ct-main { margin-top: 28px; gap: 36px; }
  .ct-intro { gap: 16px; }
  .ct-intro::before { display: none; }
  .ct-intro__brand { font-size: 28px; }
  .ct-intro__text { font-size: 16px; }
  .ct-intro__btns { width: 100%; gap: 12px; }
  .ct-btn-gold, .ct-btn-outline { flex: 1 1 140px; width: auto; padding: 11px 20px; }
  .ct-grid { gap: 16px; }
  .ct-photo { min-height: 300px; border-radius: 0 36px 0 36px; }
  /* การ์ดข้อมูล — ใหญ่โปร่งตามดีไซน์ mobile */
  .ct-cards { gap: 16px; }
  .ct-card { padding: 28px 28px 36px; gap: 22px; border-radius: 20px; }
  .ct-card__icon { width: 34px; height: 34px; }
  .ct-card__label { font-size: 24px; }
  .ct-card__note { margin-top: 0; font-size: 16px; }
  .ct-card__value { font-size: 18px; line-height: 1.6; word-break: break-word; }
  /* ดอกไม้ก่อน footer (เฉพาะมือถือ) — รูปใหม่ เต็มกว้าง ชิดล่าง ซ้อนใต้การ์ดเล็กน้อย */
  .ct-flowers {
    height: 110vw; /* สัดส่วนรูป 430×474 */
    margin-top: -160px;
    margin-bottom: -48px; /* footer ทับขอบล่างดอกไม้นิดนึง */
    background: url("../images/contact/contact-floral-background-mobile.webp") center bottom / 100% auto no-repeat;
  }
  .ct-flowers img { display: none; }

  /* =====================================================
     บทความ
     ===================================================== */
  .page-hero { height: 300px; }
  .page-hero-image, .page-hero-fade { bottom: 40px; }
  .page-title-wrap { top: 150px; }
  .page-title-wrap h1 { font-size: 32px; }
  .title-divider { margin-top: 16px; gap: 10px; }
  .featured {text-align: center; margin-top: 32px; gap: 20px; }
  .featured-image { border-radius: 8px; aspect-ratio: 16 / 10; }
  .featured-copy h2 { font-size: 24px; margin-bottom: 14px; }
  .featured-copy p { width: auto; font-size: 16px; margin-bottom: 20px; }
  .article-section { margin-top: 40px; padding-bottom: 120px; }
  /* ดอกไม้ก่อน footer (เฉพาะมือถือ) — BG-Footer 1 (2) */
  .article-section::after {
    bottom: 0;
    height: 110vw; /* สัดส่วนรูป 430×474 */
    background: url("../images/blog/blog-floral-background-mobile.webp") center bottom / 100% auto no-repeat;
  }
  .article-grid { grid-template-columns: 1fr; gap: 24px; }
  .article-card { height: auto; }
  .article-card > a, .article-card img { height: 210px; }
  .card-body { height: auto; min-height: 170px; padding: 20px; }
  .pagination { margin-top: 40px; }

  /* =====================================================
     บริจาค (รายการ / ตรวจสอบ / แบบฟอร์ม)
     ===================================================== */
  .dn-hero { height: 280px; border-radius: 0 0 28px 28px; }
  .dn-hero--light { height: 250px; border-radius: 0; }
  .dn-hero__title, .dn-hero--light .dn-hero__title { bottom: 40px; }
  .dn-hero__h1, .dn-hero--light .dn-hero__h1 { font-size: 30px; }
  .dn-hero--light + .dn-divider { margin-top: -24px; }
  .dn-divider { padding-top: 20px; }
  .dn-tabs { margin-top: 20px; }
  .dn-cards { width: calc(100% - 2 * var(--pad-x)); padding-top: 20px; }
  .dn-grid { gap: 20px; }
  .dn-card__img { height: 210px; }
  .dn-cards + .dn-flowers { margin-top: -120px; }
  .dn-flowers { min-height: 120px; }

  .dn-search { padding: 28px var(--pad-x) 24px; gap: 16px; }
  .dn-search__title { font-size: 26px; }
  .dn-search__input { height: 52px; padding: 0 20px; font-size: 15px; }
  .dn-results { width: calc(100% - 2 * var(--pad-x)); }
  .dn-table { min-width: 640px; font-size: 13px; }
  /* แถว "ไม่พบข้อมูล" ชิดซ้าย ให้เห็นข้อความโดยไม่ต้องเลื่อนตาราง */
  .dn-table .dn-empty { text-align: left; padding-left: 16px; }

  .dn-form { padding: 4px var(--pad-x) 20px; }
  .dn-form__lead { font-size: 14px; margin-bottom: 20px; }
  .dn-steps { margin-bottom: 24px; }
  .dn-steps__num { width: 34px; height: 34px; font-size: 14px; }
  .dn-steps__lbl { font-size: 11.5px; }
  .dn-steps__bar { margin-bottom: 22px; }
  .dn-fsec__title { font-size: 21px; }
  .dn-types { grid-template-columns: 1fr; gap: 12px; }
  .dn-type { padding: 16px 18px; gap: 14px; }
  .dn-type__t { font-size: 19px; }
  .dn-amounts { gap: 8px; }
  .dn-amt { flex: 1 1 calc(33.333% - 8px); padding: 11px 8px; font-size: 15px; }
  .dn-amounts + .dn-field { max-width: none !important; } /* ช่องระบุจำนวนเงินเต็มกว้าง */
  .dn-input, .dn-textarea, .dn-date { font-size: 16px; } /* 16px กัน iOS ซูมอัตโนมัติ */
  .dn-upload { padding: 20px 16px; }
  .dn-fnav { flex-direction: column-reverse; }
  .dn-fnav .dn-btn { width: 100%; justify-content: center; }
  .dn-summary { padding: 20px 18px; }
  .dn-summary__total { font-size: 34px; }
  .dn-bank { padding: 14px 16px; gap: 14px; }
  .dn-qr { flex-direction: column; text-align: center; padding: 18px 16px; gap: 14px; }
  .dn-success__t { font-size: 28px; }
}

/* =========================================================
   ≤380 — มือถือจอเล็ก (360px)
   ========================================================= */
@media (max-width: 380px) {
  .s9-hero__title { font-size: 40px; }
  .s9-quote__title { font-size: 23px; }
  .s9-section-title { font-size: 27px; }
  .sv-hero__h1, .cf-title, .pk-title, .page-title-wrap h1 { font-size: 28px; }
}

/* =========================================================
   ปุ่มทั้งเว็บ (desktop + tablet + mobile) — padding บน/ล่าง 8px
   วางท้ายไฟล์ให้ชนะกฎปุ่มเดิมทุกไฟล์ (ระยะซ้าย-ขวาคงเดิม)
   ไม่รวมแท็บ (pk-tab / dn-tab) และปุ่มเลือกจำนวนเงิน (dn-amt)
   ========================================================= */
.s9-btn,
.s9-btn-contact,
.sv-btn-gold,
.sv-btn-outline,
.ct-btn-gold,
.ct-btn-outline,
.gold-button,
.dn-search__btn,
.dn-btn {
  padding-top: 10px;
  padding-bottom: 10px;
}
/* ปุ่มที่เคยล็อกความสูงไว้ → ให้สูงตาม padding แทน */
.gold-button { min-height: 0; }
.dn-search__btn { height: auto; }

/* =========================================================
   มือถือ: ปุ่ม 2 ปุ่มที่วางคู่กัน → กว้างเท่ากัน แถวเดียว (ทุกหน้า)
   (ไม่รวมปุ่ม hero หน้าแรกที่เรียงซ้อนแนวตั้ง และปุ่มถัดไป/ย้อนกลับของฟอร์มบริจาค)
   ========================================================= */
@media (max-width: 767px) {
  .sv-service__btns,
  .svt-btns,
  .svf-actions,
  .ct-intro__btns {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    width: 100%;
  }
  .sv-service__btns > a,
  .svt-btns > a,
  .svf-actions > a,
  .ct-intro__btns > a {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    padding-left: 12px;
    padding-right: 12px;
    text-align: center;
  }
}

/* =========================================================
   มือถือ: หน้าผลงานของเรา (.wk) — ตามดีไซน์ mobile
   ========================================================= */
@media (max-width: 767px) {
  /* banner: รูปมือถือ + หัวข้อใหญ่ */
  .wk .cf-hero { background: url("../images/works/works-hero-mobile.webp") center / cover no-repeat; }
  .wk .cf-hero img { display: none; }
  .wk .cf-title { font-size: 44px; }

  /* เรื่องราวผลงาน: รูปใหญ่อยู่กลาง (ไม่นับริบบิ้นดำ) → แกลเลอรีเล็กใต้รูป → ข้อความจัดกลาง */
  .wk-story, .wk-story--rev { align-items: center; }
  .wk-photo__main { left: 8%; width: 84%; }
  .wk-text { display: contents; }
  .wk-photo { order: 0; }
  .wk-smallgal { order: 1; width: 84%; justify-content: center; margin-top: -8px; }
  .wk-smallgal img { width: calc((100% - 4 * 8px) / 5); }
  .wk-text__h, .wk-text__sub, .wk-text__body { order: 2; width: 100%; text-align: center; }

  /* บทกลอน: 2 คอลัมน์เหมือน desktop */
  .wk-quote { padding: 22px 12px; gap: 10px; }
  .wk-quote__row { grid-template-columns: 1fr 1fr; gap: 8px; font-size: 3.3vw; white-space: nowrap; }

  /* งานพิธีการต่าง ๆ: 2 คอลัมน์ทุกรูป 16:9 มุมโค้ง 8px */
  .wk-quote-zone + .wk-gallery { margin-top: -90px; } /* เว้นเหนือหัวข้อมากขึ้น (เดิม -150px) */
  .wk-grid .wk-thumb,
  .wk-grid .wk-row:first-child .wk-thumb:first-child,
  .wk-grid .wk-row:last-child .wk-thumb:last-child { grid-column: auto; aspect-ratio: 16 / 10; border-radius: 8px; }
  .wk-grid { padding-bottom: 0; }

  /* ดอกไม้ก่อน footer (BG-Footer 1 (4)) — footer ทับขอบล่างนิดนึง */
  .wk-flowers { display: none; }
  .wk {
    padding-bottom: 130px;
    margin-bottom: -48px;
    background: #fff url("../images/works/works-footer-flowers-mobile.webp") center bottom / 100% auto no-repeat;
  }
}

/* =========================================================
   มือถือ: หน้าสินค้า หีบศพพรีเมียม / มาตรฐาน (main.cf)
   ========================================================= */
@media (max-width: 767px) {
  .cf .cf-title { font-size: 36px; }
  /* หีบศพ: รวม 2 grid เป็นตารางเดียว 2 คอลัมน์ แสดง 8 ใบ (5 + 3) */
  .cf .cf-products { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .cf .cf-subtitle { grid-column: 1 / -1; }
  .cf .cf-grid { display: contents; }
  .cf .cf-grid + .cf-grid .cf-card:nth-child(n+4) { display: none; }
}

/* =========================================================
   มือถือ: หน้าแพ็กเกจ (.pk-*) — ไม่มีแท็บ เลื่อนยาวทุกหมวด
   ========================================================= */
@media (max-width: 767px) {
  /* banner: หัวข้อใหญ่ 2 บรรทัด ทับรูป */
  .pk-hero { height: 260px; }
  .pk-main { position: relative; z-index: 2; margin-top: -120px; padding-top: 0; }
  .pk-title { font-size: 42px; line-height: 1.35; }

  /* ไม่ใช้แท็บ → แสดงทุกหมวดต่อกัน */
  .pk-tabs-wrap { display: none; }
  .pk-section { display: block; padding-bottom: 8px; }
  .pk-heading { padding-top: 24px; margin-bottom: 24px; }

  /* หมวดถัด ๆ ไป: เส้นคั่นลายทองด้านบน (หมวดสุดท้ายไม่มีเส้นปิดท้าย) */
  .pk-section + .pk-section::before {
    content: "";
    display: block;
    height: 73px;
    margin: 24px var(--pad-x) 0;
    background:
      url("../images/common/gold-ornament-down.webp") center / 150px 73px no-repeat,
      linear-gradient(to right, #bd9a4b, #d1ab35) left center / calc(50% - 85px) 1.5px no-repeat,
      linear-gradient(to right, #bd9a4b, #d1ab35) right center / calc(50% - 85px) 1.5px no-repeat;
  }

  /* การ์ดแพ็กเกจ (ทุกหมวด) — header ทองเล็กลง */
  .pk-card { padding-top: 30px; }
  .pk-card-header { height: 60px; padding: 8px 12px 0; border-radius: 14px; }
  .pk-card-frame { border-width: 3px; border-radius: 14px; }
  .pk-card-frame img { cursor: zoom-in; }

  /* แพ็กเกจแนะนำ: สไลด์ปัดซ้าย-ขวา (การ์ดกลาง + เห็นขอบใบข้าง ๆ) */
  /* packages.js ย้ายการ์ดทั้ง 5 ใบของหมวดนี้มาไว้ใน .pk-slider (เฉพาะมือถือ) */
  #recommended .pk-slider {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 16px;
    margin: 0;
    padding: 8px calc((100vw - 68vw) / 2) 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #recommended .pk-slider::-webkit-scrollbar { display: none; }
  #recommended .pk-card { flex: 0 0 68vw; width: 68vw; scroll-snap-align: center; }
  #recommended .pk-card-name, #recommended .pk-card-price { font-size: 13px; }

  /* หมวดอื่น: ตาราง 2 คอลัมน์ (รวม 2 แถวเดิมเป็นตารางเดียว) */
  .pk-section:not(#recommended) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 12px;
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
  }
  .pk-section:not(#recommended)::before,
  .pk-section:not(#recommended) .pk-heading { grid-column: 1 / -1; }
  .pk-section + .pk-section:not(#recommended)::before { margin-left: 0; margin-right: 0; }
  .pk-section:not(#recommended) .pk-row { display: contents; }
  .pk-section:not(#recommended) .pk-card { width: auto; max-width: none; padding-top: 22px; }
  .pk-section:not(#recommended) .pk-card-header { height: 44px; padding: 5px 8px 0; border-radius: 10px; }
  .pk-section:not(#recommended) .pk-card-name,
  .pk-section:not(#recommended) .pk-card-price { font-size: 9.5px; letter-spacing: 0; }
  .pk-section:not(#recommended) .pk-card-frame { border-width: 2px; border-radius: 10px; }
  .pk-section:last-child { padding-bottom: 72px; } /* หมวดสุดท้าย: เว้นที่ว่างก่อน footer (ไม่มีเส้นคั่นปิดท้าย) */
  /* ใบที่ 5 (เศษ) อยู่กลางแถว */
  .pk-section:not(#recommended) .pk-row:last-child .pk-card:last-child:nth-child(2) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 6px);
  }
}

/* ดูรูปแพ็กเกจขนาดใหญ่ (packages.js สร้าง — เปิดเฉพาะมือถือ) */
.pk-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 16px 24px;
  background: rgba(10, 6, 2, 0.88);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.pk-lightbox.is-open { opacity: 1; visibility: visible; transition: opacity 0.25s ease; }
.pk-lightbox img { max-width: 100%; max-height: 100%; border-radius: 12px; object-fit: contain; }
.pk-lightbox__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--gold-deep);
  font-size: 26px;
  line-height: 40px;
  cursor: pointer;
}

/* =========================================================
   มือถือ: หน้าบริจาคโลงศพ
   ========================================================= */
@media (max-width: 767px) {
  /* แท็บ 3 ปุ่ม (ใช้ร่วม 3 หน้าบริจาค): แถวเดียว ไม่ตัดบรรทัด */
  .dn-tabs {
    flex-direction: row;
    flex-wrap: nowrap;
    width: calc(100% - 2 * var(--pad-x));
    max-width: none;
    padding: 4px;
    gap: 2px;
    border-radius: 100px;
  }
  .dn-tab {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: min(40px, 9.2vw); /* สูงตามความกว้างจอ: 390px → 36px, 320px → 29px */
    padding: 0 6px;
    /* ตัวหนังสือย่อตามความกว้างจอ (vw) ให้ 3 แท็บพอดีแถวเดียวทุกจอ — ไม่เกิน 13px */
    font-size: min(13px, calc(4vw - 3.6px));
    letter-spacing: 0;
    white-space: nowrap;
  }
  .dn-tab.is-active { box-shadow: 0 6px 10px rgba(166, 124, 30, 0.35); }

  /* หน้ารายการบริจาค: หัวข้อใหญ่ */
  .dn:has(.dn-cards) .dn-hero__h1 { font-size: 44px; }

  /* ทั้ง 3 หน้าบริจาค: ดอกไม้ก่อน footer (BG-Footer 1 (5)) — เนื้อหาทับดอกไม้
     เหลือดอกไม้ใต้เนื้อหา ~72px ถึง footer (ดอกสูง 110.2vw ตามสัดส่วนรูป 430×474) */
  .dn-flowers,
  .dn-cards + .dn-flowers {
    aspect-ratio: 430 / 474;
    min-height: 0;
    margin-top: calc(72px - 110.2vw);
    background: url("../images/donate/donate-footer-flowers-mobile.webp") center bottom / 100% auto no-repeat;
  }
  .dn-flowers img { display: none; }
  .dn-results, .dn-form { position: relative; z-index: 1; }

  /* หน้าตรวจสอบรายการบริจาค: banner มือถือ + หัวข้อใหญ่ 2 บรรทัด (br-mobile) */
  .dn:has(.dn-search) .dn-hero { background: url("../images/donate/donate-check-hero-mobile.webp") center / cover no-repeat; }
  .dn:has(.dn-search) .dn-hero__bg { display: none; }
  .dn:has(.dn-search) .dn-hero__h1 { font-size: 36px; line-height: 1.4; }
  /* ช่องค้นหา: ช่องกรอกเต็มกว้าง ปุ่มตรวจสอบเล็กลง (ตามดีไซน์) */
  .dn-search { gap: 14px; }
  .dn-search__form { gap: 14px !important; }
  .dn-search__input { height: 46px; font-size: 13px; }
  .dn-search__btn { min-width: 0; padding-left: 22px; padding-right: 22px; font-size: 13px; gap: 6px; }
  .dn-search__btn svg { width: 12px; height: 12px; }
}

/* หน้าตรวจสอบ / แบบฟอร์มบริจาค: เอาดอกไม้ก่อน footer ออกแล้ว (user สั่ง) → เว้นที่ว่างก่อน footer แทน */
.dn-results { margin-bottom: 60px; } /* margin (ไม่ใช่ padding) ให้แถบเลื่อนตารางอยู่ชิดใต้ตาราง */
.dn-form { padding-bottom: 80px; }
@media (max-width: 767px) {
  .dn-results { margin-bottom: 36px; }
  .dn-form { padding-bottom: 56px; }
}

/* ลิ้นชักเมนู: รายการย่อยค่อย ๆ กางลง + เมนูหลักไล่เข้ามาทีละบรรทัดตอนเปิดลิ้นชัก */
@keyframes s9-sub-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes s9-item-in {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 1199px) and (prefers-reduced-motion: no-preference) {
  .s9-nav-open .s9-nav__menu > li,
  .s9-nav-open .s9-btn-contact { animation: s9-item-in 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) backwards; }
  .s9-nav-open .s9-nav__menu > li:nth-child(1) { animation-delay: 0.08s; }
  .s9-nav-open .s9-nav__menu > li:nth-child(2) { animation-delay: 0.12s; }
  .s9-nav-open .s9-nav__menu > li:nth-child(3) { animation-delay: 0.16s; }
  .s9-nav-open .s9-nav__menu > li:nth-child(4) { animation-delay: 0.2s; }
  .s9-nav-open .s9-nav__menu > li:nth-child(5) { animation-delay: 0.24s; }
  .s9-nav-open .s9-nav__menu > li:nth-child(6) { animation-delay: 0.28s; }
  .s9-nav-open .s9-nav__menu > li:nth-child(7) { animation-delay: 0.32s; }
  .s9-nav-open .s9-nav__menu > li:nth-child(n+8) { animation-delay: 0.36s; }
  .s9-nav-open .s9-btn-contact { animation-delay: 0.42s; }
}
@media (prefers-reduced-motion: reduce) {
  .s9-acc .s9-nav__menu li.is-open > .sub-menu { animation: none; }
}