@import url('https://fonts.googleapis.com/css2?family=Pridi:wght@500;600&display=swap');

/* === Local Web Fonts with Unicode Thai Support === */
@font-face {
  font-family: 'Charm';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/charm-400-thai.woff2') format('woff2'),
       url('/fonts/charm-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-024F, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Charm';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/charm-700-thai.woff2') format('woff2'),
       url('/fonts/charm-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-024F, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/sarabun-400-thai.woff2') format('woff2'),
       url('/fonts/sarabun-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-024F, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/sarabun-700-thai.woff2') format('woff2'),
       url('/fonts/sarabun-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-024F, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Bai Jamjuree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/bai-jamjuree-400-thai.woff2') format('woff2'),
       url('/fonts/bai-jamjuree-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-024F, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Bai Jamjuree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/bai-jamjuree-700-thai.woff2') format('woff2'),
       url('/fonts/bai-jamjuree-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-024F, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/prompt-400-thai.woff2') format('woff2'),
       url('/fonts/prompt-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-024F, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/prompt-700-thai.woff2') format('woff2'),
       url('/fonts/prompt-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-024F, U+0E01-0E5B, U+200C-200D, U+25CC;
}

/* G3 public website visual refresh: contemporary Thai Glass & Gold theme */
.home-refresh{
  /* === Central Gold Frame Design Tokens (มาตรฐานกรอบทองทั้งเว็บไซต์) === */
  --v-gold-primary: #d4a946;                 /* โทนสีทองหลักมาตรฐาน */
  --v-gold-border: #d4a946;                  /* เส้นกรอบทองมาตรฐาน */
  --v-gold-deep: #a06e1c;                    /* ทองเข้มสำหรับเน้นจุดสำคัญ */
  --v-gold-light: #f7df94;                   /* ประกายทองสว่าง */
  --v-gold-inner: rgba(224, 185, 95, 0.65);  /* เส้นทองด้านในบาง (มิติกรอบทองคู่) */
  --v-gold-shadow: rgba(135, 90, 15, 0.12);  /* เงาทองนุ่ม */
  --v-frame-border-width: 2.5px;             /* ความหนาเส้นกรอบทองมาตรฐาน (2.5px) */
  --v-frame-radius: 20px;                    /* ความโค้งมนมาตรฐาน */
  --v-frame-radius-sm: 16px;                 /* ความโค้งมนระดับรอง */
  --v-frame-double: inset 0 0 0 1.5px var(--v-gold-inner), inset 0 0 0 3.5px rgba(255, 255, 255, 0.90); /* มาตรฐานเส้นทองคู่ */

  /* === ข้อยกเว้นจุดเด่นอันดับหนึ่ง: พระรูปสมเด็จฯ และแผงเมนูด้านซ้าย === */
  --v-tier1-gold-border: #c48c20;            /* ทองเข้มกว่า โดดเด่นเป็นพิเศษ */
  --v-tier1-gold-inner: rgba(212, 160, 35, 0.80);
  --v-tier1-border-width: 3.5px;             /* เส้นกรอบหนาและเด่นกว่า */
  --v-tier1-shadow: 0 12px 34px rgba(157, 106, 22, 0.22), 0 2px 8px rgba(110, 70, 10, 0.12);

  --v-gold: var(--v-gold-primary);
  --v-ink: #3b220c;
  --v-cream: #fffaf0;
  --v-border: rgba(212, 175, 55, 0.38);
  --v-shadow: 0 12px 32px rgba(118, 76, 15, 0.10);
  background: radial-gradient(ellipse at 50% 12%, #fdf8ee 0%, #f6e6cb 38%, #ebce97 72%, #dcb26b 100%);
  color: var(--v-ink);
  font-family: var(--font-thai-active, var(--font-thai, 'Sarabun', 'Noto Sans Thai', Tahoma, 'Leelawadee UI', sans-serif));
}
.home-refresh h1, .home-refresh h2, .home-refresh h3,
.v-feature-card h2,
.v-card-body h2 {
  font-family: var(--font-thai-active, var(--font-thai, 'Noto Serif Thai', 'Sarabun', Tahoma, serif));
}
.home-refresh button, .home-refresh a {
  outline-offset: 3px;
}
.home-refresh :focus-visible {
  outline: 3px solid #b77e1c;
}
.skip-link {
  position: absolute;
  top: -120px;
  left: 15px;
  z-index: 99;
  background: #fff;
  color: #333;
  padding: 9px 20px;
  border: 2px solid #945900;
}
.skip-link:focus {
  top: 10px;
}

/* Page shell */
.v-page {
  max-width: 1660px;
  margin: auto;
  padding: 0 18px 22px;
  position: relative;
}
.v-page::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0 0 auto;
  height: 160px;
  background: linear-gradient(102deg, transparent 5%, rgba(237, 193, 91, 0.16) 47%, transparent 95%);
}

/* Site Header */
.v-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 130px;
  padding: 14px 6px;
}
.v-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  text-decoration: none;
}
.v-seal-frame {
  flex: 0 0 106px;
  width: 106px;
  height: 106px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 50%;
  border: 2.5px solid #dfb35e;
  box-shadow: 0 4px 18px rgba(146, 93, 15, 0.12);
}
.v-seal-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}
.v-brand-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.45;
  min-width: 0;
}
.v-brand-copy strong {
  font-family: 'Noto Serif Thai', Tahoma, serif;
  font-size: clamp(1.85rem, 3vw, 3.25rem);
  color: #8c530b;
  line-height: 1.25;
}
.v-brand-copy span {
  font-size: clamp(0.85rem, 1.12vw, 1.14rem);
  font-weight: 700;
  color: #4b2e10;
}
.v-brand-copy small {
  font-size: clamp(0.72rem, 0.92vw, 0.94rem);
  font-weight: 500;
  color: #79572b;
}
.v-header-aside {
  text-align: right;
  color: #8f6c38;
  min-width: 210px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v-kicker {
  font-size: 0.92rem;
  font-weight: 700;
  color: #a06e1b;
}
.v-place {
  font-size: 0.8rem;
  color: #8b6e45;
}

/* 2-Column Layout: Left Sidebar (368px) & Right Main Column */
.v-layout {
  display: grid;
  grid-template-columns: minmax(365px, 370px) minmax(0, 1fr);
  gap: 18px;
  margin-top: 6px;
  align-items: start;
}
.v-sidebar-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 370px;
  align-items: center;
}
.v-main-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ==========================================================================
   Reusable Thai Gold Frames Design System (3 Tiers with Unified Tokens)
   ========================================================================== */
/* Tier 1 — วิจิตรที่สุด: กรอบพระรูปสมเด็จพระมหารัชมังคลาจารย์ พร้อมซุ้มและฐานบัว */
.v-frame-tier1 {
  position: relative;
  border-radius: 120px 120px 18px 18px;
  border: var(--v-tier1-border-width, 3.5px) solid var(--v-tier1-gold-border, #c48c20);
  padding: 8px;
  background: radial-gradient(circle at 50% 32%, #ffffff 0%, #fffdf8 55%, #faedd7 100%);
  overflow: hidden;
  box-shadow: var(--v-tier1-shadow), inset 0 0 0 2px var(--v-tier1-gold-inner), inset 0 0 0 4px rgba(255, 255, 255, 0.85);
}

/* Tier 2 — หรูหราเด่นชัด (มาตรฐานเว็บไซต์): แบนเนอร์หลัก, การ์ดแนะนำวัด 3 ช่อง */
.v-frame-tier2 {
  border: var(--v-frame-border-width, 2.5px) solid var(--v-gold-primary, #d4a946);
  border-radius: var(--v-frame-radius, 20px);
  background: linear-gradient(155deg, rgba(255, 255, 255, var(--v-glass-opacity, 0.88)) 0%, rgba(255, 253, 248, var(--v-glass-opacity, 0.88)) 55%, rgba(251, 243, 224, var(--v-glass-opacity, 0.88)) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px var(--v-gold-shadow), var(--v-frame-double);
  position: relative;
  overflow: hidden;
}

/* Tier 3 — เรียบหรู: ข่าวสาร, กิจกรรม, ห้องสมุด, ทางลัด 7 รายการ */
.v-frame-tier3 {
  border: 1.5px solid var(--v-gold-primary, #d4a946);
  border-radius: var(--v-frame-radius-sm, 16px);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px var(--v-gold-shadow), inset 0 0 0 1px var(--v-gold-inner);
}

/* Horizontal Top Navigation Bar (Starts flush with Hero Ubosot frame below) - ENH-05 */
:root {
  --tnav-font: 'Pridi', 'Noto Serif Thai', 'TH Sarabun New', serif;
  --tnav-color: #fff9ed;
  --tnav-size: 0.85rem;
  --qc-font: var(--font-thai, 'Sarabun', sans-serif);
  --qc-title-color: #4b2c0b;
  --qc-icon-color: #b37b15;
  --qc-size: 14px;
}

.buddhist-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.2em;
}
.buddhist-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* ENH-05: Top Navigation & Smooth Scroll Arrows */
.v-topnav {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 52px;
  margin-bottom: 14px;
  border: 1.5px solid rgba(212, 175, 55, 0.65);
  border-radius: 26px;
  background: linear-gradient(180deg, #e9bd56 0%, #aa6e17 50%, #874c07 100%);
  box-shadow: 0 6px 16px rgba(104, 67, 9, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.7);
  overflow: hidden;
  padding: 4px 6px;
}
.v-topnav-track {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: var(--tnav-align, flex-start);
  gap: 6px;
  overflow-x: auto;
  white-space: nowrap;
  flex-wrap: nowrap;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px;
}
.v-topnav-track::-webkit-scrollbar {
  display: none;
}
.v-topnav-arrow {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  background: rgba(65, 38, 5, 0.68);
  color: #fff8e8;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(45, 24, 2, 0.35);
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  user-select: none;
  padding: 0;
  z-index: 10;
}
.v-topnav-arrow:hover {
  background: rgba(50, 26, 3, 0.95);
  border-color: #ffffff;
  transform: scale(1.08);
  color: #ffffff;
}
.v-topnav-arrow:active {
  transform: scale(0.92);
}
.v-topnav::-webkit-scrollbar {
  display: none;
}
.v-topnav a {
  flex: 0 0 auto;
  padding: 8px clamp(8px, 1vw, 14px);
  font-family: var(--tnav-font, 'Pridi', 'Noto Serif Thai', 'TH Sarabun New', serif);
  font-size: var(--tnav-size, 16px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--tnav-color, #fff9ed);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 22px;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  text-shadow: 0 1px 2px rgba(45, 24, 2, 0.65);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.v-topnav a:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}
.v-topnav .is-active {
  color: #633b06;
  background: linear-gradient(180deg, #fff7d4 0%, #edd17d 100%);
  box-shadow: inset 0 1px 2px #ffffff, 0 2px 6px rgba(60, 35, 4, 0.22);
  text-shadow: none;
  font-weight: 600;
}

/* Left Sidebar & Thai Gold Arched Monk Portrait Frame */
.v-sidebar {
  width: 340px;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  background: linear-gradient(180deg, #fdf8ee 0%, #faf3e4 50%, #f5e9d2 100%);
  border: 2px solid var(--v-tier1-gold-border, #c48c20);
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(157, 106, 22, 0.14), inset 0 0 0 1.5px var(--v-tier1-gold-inner, rgba(212, 160, 35, 0.75));
  padding: 8px 8px 18px;
  display: flex;
  flex-direction: column;
}
.v-sidebar-dharma-events,
.v-sidebar-decorative {
  width: 340px;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Monk Card (จุดเด่นอันดับหนึ่งของหน้าแรก ขยายพระรูปเต็มความกว้างคอลัมน์ซ้าย ไม่ครอบตัด พื้นหลังครีมทองกลมกลืน) */
.v-monk-card {
  margin: 0 0 12px;
  text-align: center;
  position: relative;
}
.v-monk-frame {
  position: relative;
  border-radius: 20px;
  border: var(--v-tier1-border-width, 3.5px) solid var(--v-tier1-gold-border, #c48c20);
  padding: 3px;
  background: linear-gradient(180deg, #faf2e1 0%, #f7ebd0 55%, #edd4a2 100%);
  overflow: hidden;
  box-shadow: var(--v-tier1-shadow), inset 0 0 0 2px var(--v-tier1-gold-inner), inset 0 0 12px rgba(196, 140, 32, 0.15);
}
.v-monk-frame img {
  width: 100%;
  height: 460px;
  object-fit: contain;
  object-position: center bottom;
  display: block;
  border-radius: 16px;
  transform-origin: center bottom;
  transition: transform 0.15s ease, border-radius 0.2s ease;
}
.v-monk-card figcaption {
  margin: 8px 0 4px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #794911;
  word-break: keep-all;
  overflow-wrap: break-word;
  white-space: normal;
}
.v-monk-card figcaption strong {
  display: block;
  font-size: 0.98rem;
  color: #5d3406;
}
.v-monk-card figcaption span {
  display: block;
  font-size: 0.84rem;
  color: #8c6023;
}

/* Sidebar Navigation - Smart Accordion Sidebar (ENH-03) */
.v-side-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.v-nav-section {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, var(--v-glass-opacity, 0.78));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(212, 175, 55, 0.32);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(118, 76, 15, 0.08);
  transition: all 0.2s ease;
}
.v-nav-section:hover {
  border-color: rgba(212, 175, 55, 0.55);
  box-shadow: 0 6px 18px rgba(118, 76, 15, 0.12);
}
/* ENH-04: Smart Navigation Typography CSS Variables */
:root {
  --sn-cat-font: var(--font-thai, 'Sarabun', 'TH Sarabun New', Tahoma, sans-serif);
  --sn-cat-color: #7e4d0d;
  --sn-cat-size: 16px;
  --sn-item-font: var(--font-thai, 'Sarabun', 'TH Sarabun New', Tahoma, sans-serif);
  --sn-item-color: #543410;
  --sn-item-size: 14px;
  --sn-sub-font: var(--font-thai, 'Sarabun', 'TH Sarabun New', Tahoma, sans-serif);
  --sn-sub-color: #543410;
  --sn-sub-size: 13px;
  --sn-sub-size-mobile: 12px;
  --sn-sub-weight: 400;
  --sn-sub-line-height: 1.45;
  --sn-sub-max-lines: 2;
}

.v-side-nav, #vSideNav, #snPreviewSideNav, #mobileDrawerNav {
  --sn-cat-font: var(--font-thai, 'Sarabun', 'TH Sarabun New', Tahoma, sans-serif);
  --sn-cat-color: #7e4d0d;
  --sn-cat-size: 16px;
  --sn-item-font: var(--font-thai, 'Sarabun', 'TH Sarabun New', Tahoma, sans-serif);
  --sn-item-color: #543410;
  --sn-item-size: 14px;
  --sn-sub-font: var(--font-thai, 'Sarabun', 'TH Sarabun New', Tahoma, sans-serif);
  --sn-sub-color: #543410;
  --sn-sub-size: 13px;
  --sn-sub-size-mobile: 12px;
  --sn-sub-weight: 400;
  --sn-sub-line-height: 1.45;
  --sn-sub-max-lines: 2;
}

.v-nav-accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  background: linear-gradient(90deg, rgba(255, 252, 245, 0.95) 0%, rgba(255, 248, 235, 0.82) 100%);
  border: none;
  cursor: pointer;
  font-family: var(--sn-cat-font, 'Pridi', 'Noto Serif Thai', 'TH Sarabun New', serif);
  font-size: var(--sn-cat-size, 0.92rem);
  font-weight: 600;
  color: var(--sn-cat-color, #7e4d0d);
  text-align: left;
  transition: background 0.18s ease;
  user-select: none;
  box-sizing: border-box;
}
.v-nav-accordion-header:hover {
  background: linear-gradient(90deg, #fff5dc 0%, #faecd0 100%);
  color: #633b06;
}
.v-nav-accordion-header:focus-visible {
  outline: 2px solid var(--v-gold-primary, #d4a946);
  outline-offset: -2px;
}
.v-nav-section-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}
.v-nav-section-title-wrap > span:last-child {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.35;
  word-break: break-word;
}
.v-nav-chevron {
  flex: 0 0 20px;
  font-size: 0.85rem;
  color: #a8721c;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.v-nav-section[data-expanded="true"] .v-nav-chevron {
  transform: rotate(180deg);
}
.v-nav-section[data-expanded="false"] .v-nav-accordion-body {
  display: none;
}
.v-nav-accordion-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px 8px;
  border-top: 1px solid rgba(212, 175, 55, 0.20);
}
.v-nav-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 8px;
  font-family: var(--sn-cat-font, 'Pridi', 'Noto Serif Thai', 'TH Sarabun New', serif);
  font-size: var(--sn-cat-size, 0.92rem);
  font-weight: 600;
  color: var(--sn-cat-color, #7e4d0d);
  border-bottom: 1px dashed rgba(212, 175, 55, 0.35);
  margin-bottom: 4px;
}
.v-nav-section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #dfb35a, #a86c15);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
}
.v-nav-section-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.v-nav-section-links a, .v-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  min-height: 38px;
  font-family: var(--sn-item-font, var(--font-thai, 'Sarabun', sans-serif));
  font-size: var(--sn-item-size, 0.84rem);
  color: var(--sn-item-color, #543410);
  text-decoration: none;
  border-radius: 10px;
  font-weight: 600;
  transition: all 0.18s ease;
  box-sizing: border-box;
}
.v-nav-item > span:not(.v-nav-icon), .v-nav-section-links a > span:not(.v-nav-icon) {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.35;
  word-break: break-word;
  text-align: left;
}
.v-nav-icon {
  font-size: 1rem;
  color: #b77e1c;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.v-nav-section-links a:hover, .v-nav-section-links a.sel,
.v-nav-item:hover, .v-nav-item.is-active, .v-nav-item.sel {
  background: linear-gradient(90deg, #ffefca 0%, #fffbf0 100%);
  color: #8c5409;
  border-left: 3px solid #b77e1c;
  padding-left: 10px;
}
.v-nav-sub-items,
.v-featured-subitems {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 3px 0 5px 8px;
  padding-left: 6px;
  border-left: 2px solid rgba(212, 175, 55, 0.35);
  width: 100%;
  box-sizing: border-box;
}
.v-nav-sub-item,
.v-featured-subitem {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  min-height: 32px;
  width: 100%;
  font-family: var(--sn-sub-font, var(--sn-item-font, var(--font-thai, 'Sarabun', sans-serif)));
  font-size: var(--sn-sub-size, 13px);
  font-weight: var(--sn-sub-weight, 400);
  line-height: var(--sn-sub-line-height, 1.45);
  color: var(--sn-sub-color, #543410);
  text-decoration: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(212, 175, 55, 0.22);
  transition: all 0.15s ease;
  box-sizing: border-box;
  text-align: left;
  box-shadow: 0 1px 4px rgba(118, 76, 15, 0.04);
}
.v-nav-sub-item .v-nav-cluster,
.v-featured-subitem .v-nav-cluster {
  flex: 1 1 auto !important;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-start;
  margin-right: 0 !important;
  margin-left: 0 !important;
}
.v-nav-sub-item .v-nav-icon,
.v-featured-subitem .v-nav-icon,
.v-nav-sub-item .v-nav-icon-img,
.v-featured-subitem .v-nav-icon-img {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
}
.v-nav-sub-item > span:not(.v-nav-icon):not(.v-nav-icon-img),
.v-nav-sub-item .v-nav-cluster-label,
.v-featured-subitem .v-nav-cluster-label,
.v-nav-sub-text,
.v-featured-subitem-text {
  flex: 1 1 auto !important;
  min-width: 0;
  width: auto;
  line-height: var(--sn-sub-line-height, 1.45);
  word-break: break-word;
  text-align: left;
}

/* ==============================================================================
   FIX: IMAGE POSITION WHEN SET TO BACK (image_pos = 'back')
   Keeps text first, image immediately follows text at natural distance (gap: 6px),
   prevents image from floating/pushing to the far right margin of the card.
   ============================================================================== */
.v-featured-subitem[data-image-pos="back"],
.v-nav-sub-item[data-image-pos="back"],
.v-featured-subitem.is-img-back,
.v-nav-sub-item.is-img-back {
  display: flex !important;
  justify-content: flex-start !important;
}

.v-featured-subitem[data-image-pos="back"][data-align="center"],
.v-nav-sub-item[data-image-pos="back"][data-align="center"] {
  justify-content: center !important;
}

.v-featured-subitem[data-image-pos="back"][data-align="right"],
.v-nav-sub-item[data-image-pos="back"][data-align="right"] {
  justify-content: flex-end !important;
}

.v-featured-subitem[data-image-pos="back"] .v-nav-cluster,
.v-nav-sub-item[data-image-pos="back"] .v-nav-cluster,
.v-nav-cluster[data-image-pos="back"],
.v-nav-cluster.is-img-back,
.v-featured-subitem .v-nav-cluster:has(> .v-nav-sub-text + .v-nav-icon),
.v-featured-subitem .v-nav-cluster:has(> .v-nav-sub-text + .v-nav-icon-img),
.v-featured-subitem .v-nav-cluster:has(> .v-featured-subitem-text + .v-nav-icon),
.v-featured-subitem .v-nav-cluster:has(> .v-featured-subitem-text + .v-nav-icon-img),
.v-nav-sub-item .v-nav-cluster:has(> .v-nav-sub-text + .v-nav-icon),
.v-nav-sub-item .v-nav-cluster:has(> .v-nav-sub-text + .v-nav-icon-img) {
  display: inline-flex !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: 0 1 auto !important;
  gap: 6px !important;
  align-items: center !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.v-featured-subitem[data-image-pos="back"] .v-featured-subitem-text,
.v-featured-subitem[data-image-pos="back"] .v-nav-sub-text,
.v-featured-subitem[data-image-pos="back"] .v-nav-cluster-label,
.v-nav-sub-item[data-image-pos="back"] .v-nav-sub-text,
.v-nav-cluster[data-image-pos="back"] .v-featured-subitem-text,
.v-nav-cluster[data-image-pos="back"] .v-nav-sub-text,
.v-nav-cluster[data-image-pos="back"] .v-nav-cluster-label,
.v-nav-cluster.is-img-back .v-featured-subitem-text,
.v-nav-cluster.is-img-back .v-nav-sub-text,
.v-nav-cluster.is-img-back .v-nav-cluster-label,
.v-featured-subitem .v-nav-cluster:has(> .v-nav-sub-text + .v-nav-icon) .v-nav-sub-text,
.v-featured-subitem .v-nav-cluster:has(> .v-nav-sub-text + .v-nav-icon-img) .v-nav-sub-text,
.v-featured-subitem .v-nav-cluster:has(> .v-featured-subitem-text + .v-nav-icon) .v-featured-subitem-text,
.v-featured-subitem .v-nav-cluster:has(> .v-featured-subitem-text + .v-nav-icon-img) .v-featured-subitem-text,
.v-nav-sub-item .v-nav-cluster:has(> .v-nav-sub-text + .v-nav-icon) .v-nav-sub-text,
.v-nav-sub-item .v-nav-cluster:has(> .v-nav-sub-text + .v-nav-icon-img) .v-nav-sub-text {
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: 100% !important;
}

.v-featured-subitem[data-image-pos="back"] .v-nav-icon,
.v-featured-subitem[data-image-pos="back"] .v-nav-icon-img,
.v-nav-sub-item[data-image-pos="back"] .v-nav-icon,
.v-nav-sub-item[data-image-pos="back"] .v-nav-icon-img,
.v-nav-cluster[data-image-pos="back"] .v-nav-icon,
.v-nav-cluster[data-image-pos="back"] .v-nav-icon-img,
.v-nav-cluster.is-img-back .v-nav-icon,
.v-nav-cluster.is-img-back .v-nav-icon-img {
  flex: 0 0 16px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  flex-shrink: 0 !important;
}
.v-nav-sub-item:hover, .v-nav-sub-item.is-active,
.v-featured-subitem:hover, .v-featured-subitem.is-active {
  background: linear-gradient(90deg, #fbf2dc 0%, #fff8eb 100%);
  color: #7c4b0a;
  font-weight: 600;
  border-color: rgba(212, 175, 55, 0.45);
  box-shadow: 0 2px 6px rgba(118, 76, 15, 0.08);
}
.v-nav-sub-text.clamp-1, .v-featured-subitem-text.clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.v-nav-sub-text.clamp-2, .v-featured-subitem-text.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.v-nav-sub-text.clamp-3, .v-featured-subitem-text.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.v-nav-sub-text.is-expanded,
.v-featured-subitem-text.is-expanded {
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
  text-overflow: unset !important;
}
.v-nav-sub-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.4);
  background: rgba(255, 255, 255, 0.9);
  color: #8c5409;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.v-nav-sub-expand-btn:hover, .v-nav-sub-expand-btn:active {
  background: #fffae8;
  border-color: #b77e1c;
  color: #543410;
  transform: scale(1.08);
}
.v-submenu-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(35, 20, 8, 0.94);
  color: #fff9ed;
  font-family: var(--sn-sub-font, 'Sarabun', sans-serif);
  font-size: 13.5px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid #d4af37;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 10000;
  max-width: 90vw;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.v-submenu-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.v-nav-badge-pill {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  background: #eecf84;
  color: #563309;
}

/* Section 2: Prominent Full-Width Feature Banner (แถบระบบอำนวยความสะดวกของวัด - ไม่มีป้ายส่วนที่ ๒) */
.v-nav-section-featured {
  background: transparent;
  border: none;
  padding: 0;
}
.v-featured-group {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(135deg, #fff7df 0%, #fae6b8 50%, #edd18a 100%);
  border: 1.5px solid #d4a946;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(145, 96, 17, 0.16);
  overflow: hidden;
  transition: all 0.2s ease;
}
.v-featured-group:hover {
  box-shadow: 0 6px 18px rgba(145, 96, 17, 0.24);
  border-color: #b87f17;
}
.v-featured-banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 12px 14px;
  min-height: 56px;
  background: linear-gradient(135deg, #fff7df 0%, #fae6b8 50%, #edd18a 100%);
  border: 1.5px solid #d4a946;
  border-radius: 16px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(145, 96, 17, 0.16);
  transition: all 0.2s ease;
  box-sizing: border-box;
}
.v-featured-group .v-featured-banner {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: background 0.15s ease;
}
.v-featured-group .v-featured-banner:hover {
  transform: none !important;
  box-shadow: none !important;
  background: rgba(255, 255, 255, 0.28) !important;
}
.v-featured-group.has-subitems .v-featured-banner {
  border-bottom: 1px solid rgba(212, 175, 55, 0.42) !important;
}
.v-featured-group .v-featured-subitems {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0 !important;
  padding: 8px 10px 10px 10px !important;
  border-left: none !important;
  background: rgba(255, 255, 255, 0.32);
  width: 100%;
  box-sizing: border-box;
}
.v-featured-group .v-featured-subitem {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  min-height: 32px;
  margin-left: 6px;
  width: calc(100% - 6px);
  box-sizing: border-box;
  font-family: var(--sn-sub-font, var(--sn-item-font, var(--font-thai, 'Sarabun', sans-serif)));
  font-size: var(--sn-sub-size, 13px);
  font-weight: var(--sn-sub-weight, 400);
  line-height: var(--sn-sub-line-height, 1.45);
  color: var(--sn-sub-color, #543410);
  text-decoration: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 1px 3px rgba(118, 76, 15, 0.05);
  transition: all 0.15s ease;
  text-align: left;
}
.v-featured-group .v-featured-subitem:hover,
.v-featured-group .v-featured-subitem.is-active {
  background: rgba(255, 255, 255, 0.95);
  color: #7c4b0a;
  font-weight: 600;
  border-color: #c48c20;
  box-shadow: 0 2px 7px rgba(118, 76, 15, 0.12);
  transform: translateX(2px);
}
.v-featured-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(145, 96, 17, 0.24);
  border-color: #b87f17;
}
.v-featured-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
}
.v-featured-body strong {
  display: block;
  font-size: 0.94rem;
  color: #5c3506;
  line-height: 1.35;
  word-break: break-word;
}
.v-featured-body small {
  display: block;
  font-size: 0.78rem;
  color: #81561a;
  line-height: 1.3;
}

.v-side-note {
  padding: 12px 6px 4px;
  color: #92754d;
  font-size: 0.77rem;
  text-align: center;
  border-top: 1px solid #eed6aa;
  line-height: 1.5;
  margin-top: 10px;
}

/* Main Area */
.v-main {
  min-width: 0;
}

/* 1. แบนเนอร์หน้าแรก (Hero Banner: เด่นรองจากกรอบพระรูป, สูงประมาณ 280–310px บน Desktop) */
.v-hero {
  position: relative;
  overflow: hidden;
  height: 295px;
  min-height: 280px;
  max-height: 310px;
  border: var(--v-frame-border-width, 2.5px) solid var(--v-gold-primary, #d4a946);
  border-radius: var(--v-frame-radius, 20px);
  box-shadow: 0 8px 24px var(--v-gold-shadow), var(--v-frame-double);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  margin-bottom: 16px;
  background: #fbf6ec;
}

/* Layer 1: Background Real Temple Image (ควบคุมผ่าน CMS hero_background ได้) */
.v-hero-bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.v-hero-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
}
.v-hero-bg-layer::after {
  display: none !important;
}

/* Layer 2: Foreground Transparent Thai Gold Filigree (เน้นขอบ มุม และฐานล่าง) */
.v-hero-ornament-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 0.3s ease;
}
.v-hero-corner {
  position: absolute;
  width: 85px;
  height: 85px;
  z-index: 2;
  pointer-events: none;
}
.v-hero-corner svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(100, 60, 10, 0.30));
}
.v-corner-tl {
  top: 0;
  left: 0;
}
.v-corner-tr {
  top: 0;
  right: 0;
  transform: scaleX(-1);
}
.v-corner-bl {
  bottom: 0;
  left: 0;
  transform: scaleY(-1);
}
.v-corner-br {
  bottom: 0;
  right: 0;
  transform: scale(-1, -1);
}
.v-hero-base-frieze {
  position: absolute;
  bottom: 0;
  left: 75px;
  right: 75px;
  height: 18px;
  pointer-events: none;
  opacity: 0.85;
}
.v-hero-base-frieze svg {
  width: 100%;
  height: 100%;
  display: block;
}
.v-hero.no-ornament .v-hero-ornament-layer {
  display: none !important;
}
.v-hero-overlay-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  display: none;
  z-index: 2;
}

/* Central HTML Text Overlay (อิสระจากภาพ รองรับมือถือ ไม่โดนลายไทยบดบัง) */
.v-hero-message {
  position: relative;
  z-index: 3;
  text-align: center;
  margin: 0 auto;
  max-width: 550px;
  width: calc(100% - 24px);
  padding: 8px 18px 10px;
  border-radius: var(--v-frame-radius-sm, 16px);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid var(--v-gold-inner, rgba(224, 185, 95, 0.65));
  box-shadow: 0 6px 20px rgba(90, 56, 12, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
.v-hero-ornament {
  font-size: 1.15rem;
  color: #d3a446;
}
.v-overline {
  display: block;
  color: #a8792d;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
  font-weight: 700;
  margin-bottom: 2px;
}
.v-hero-message h1 {
  font-size: clamp(1.02rem, 1.32vw, 1.32rem);
  color: #6a3a09;
  line-height: 1.34;
  margin: 2px 0 4px;
  padding: 0;
}
.v-divider {
  color: #c6922a;
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1;
  margin: 2px 0;
}
.v-hero-sub {
  max-width: 380px;
  font-size: 0.78rem;
  line-height: 1.32;
  color: #7b5f3a;
  margin: 2px 0 8px;
}
.v-gold-cta, .v-education-cta > a {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  background: linear-gradient(180deg, #f8d578, #b07713);
  border: 1px solid #c8953e;
  border-radius: 99px;
  box-shadow: 0 3px 10px rgba(138, 85, 7, 0.18);
  padding: 6px 22px;
  height: 34px;
  color: #4b2a00;
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.v-gold-cta:hover, .v-education-cta > a:hover {
  filter: brightness(0.96);
  transform: translateY(-1px);
}

/* Quick Shortcuts - ENH-06 */
.v-shortcuts {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0;
}
.v-shortcuts.auto-grid, .v-shortcuts:has(> :nth-child(8)), .v-shortcuts[data-flexible="true"] {
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
}
.v-shortcuts a {
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 18px;
  background: linear-gradient(155deg, #ffffff 0%, #fff7e4 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 88px;
  text-align: center;
  text-decoration: none;
  font-family: var(--qc-font, var(--font-thai, 'Sarabun', sans-serif));
  color: var(--qc-title-color, #4b2c0b);
  box-shadow: 0 3px 12px rgba(134, 90, 17, 0.08);
  padding: 8px 4px;
  transition: all 0.2s ease;
  box-sizing: border-box;
}
.v-shortcuts a.theme-cream_luxury {
  background: linear-gradient(155deg, #fffdf8 0%, #f7ecd5 100%);
  border-color: #dfb359;
}
.v-shortcuts a.theme-crystal_white {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: rgba(212, 175, 55, 0.25);
}
.v-shortcuts a:hover {
  transform: translateY(-2px);
  border-color: #b77e1c;
  box-shadow: 0 6px 16px rgba(134, 90, 17, 0.16);
}
.v-glyph, .v-shortcuts .v-glyph, .v-shortcuts .buddhist-icon {
  font-size: 1.55rem;
  color: var(--qc-icon-color, #b37b15);
  line-height: 1;
}
.v-shortcuts strong {
  font-size: var(--qc-size, clamp(0.7rem, 0.88vw, 0.9rem));
  line-height: 1.3;
}
.v-shortcuts small {
  font-size: 0.72rem;
  opacity: 0.82;
  display: block;
  margin-top: 2px;
}

/* Feature Grid: 3 การ์ดแนะนำวัด (มาตรฐานกรอบทองกลางของเว็บไซต์) */
.v-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.v-feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 320px;
  min-height: 360px;
  height: 100%;
  box-sizing: border-box;
  border: var(--v-frame-border-width, 2.5px) solid var(--v-gold-primary, #d4a946);
  border-radius: var(--v-frame-radius, 20px);
  overflow: hidden;
  background: linear-gradient(155deg, rgba(255, 255, 255, var(--v-glass-opacity, 0.88)) 0%, rgba(255, 253, 248, var(--v-glass-opacity, 0.88)) 55%, rgba(251, 243, 224, var(--v-glass-opacity, 0.88)) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px var(--v-gold-shadow), var(--v-frame-double);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.v-feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(140, 95, 20, 0.20), var(--v-frame-double);
  border-color: var(--v-gold-deep, #a06e1c);
}
.v-card-corner {
  position: absolute;
  top: 0;
  width: 28px;
  height: 28px;
  z-index: 3;
  pointer-events: none;
  flex: none !important;
  margin: 0;
  padding: 0;
}
.v-card-corner svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(120, 80, 15, 0.30));
}
.v-card-corner-tl {
  left: 0;
}
.v-card-corner-tr {
  right: 0;
  transform: scaleX(-1);
}
.v-feature-card > img, .v-card-img {
  height: 200px;
  width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border-top-left-radius: 17px;
  border-top-right-radius: 17px;
  border-bottom: 1.5px solid var(--v-gold-primary, #d4a946);
  transition: transform 0.3s ease;
}
.v-card-img-wrap {
  position: relative;
  width: 100%;
  height: 180px;
  min-height: 180px;
  max-height: 180px;
  overflow: hidden;
  border-top-left-radius: 17px;
  border-top-right-radius: 17px;
  border-bottom: 1.5px solid var(--v-gold-primary, #d4a946);
  background: linear-gradient(180deg, #fdf8ee 0%, #f6ebd1 100%);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.v-card-img-wrap.is-contain {
  background: radial-gradient(circle at 50% 50%, #fffdf8 0%, #f7ecd2 70%, #edd8a8 100%);
}
.v-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.25s ease;
}
.v-feature-card:hover > img, .v-feature-card:hover .v-card-img-wrap img {
  filter: brightness(1.03);
}
.v-card-body {
  padding: 12px 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex: 1 1 auto;
  text-align: center;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  gap: 8px;
}
.v-card-body-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  width: 100%;
}
.v-feature-card h2 {
  font-size: 1.02rem;
  color: #633808;
  line-height: 1.35;
  margin: 0;
  font-weight: 700;
  text-align: center;
}
.v-card-desc {
  font-size: 0.84rem;
  color: #785222;
  line-height: 1.45;
  margin: 6px 0 0;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v-card-title-line {
  display: block;
  white-space: nowrap;
}
.v-card-btn, .v-feature-card a.v-card-btn {
  margin-top: auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.85rem;
  height: 34px;
  min-height: 34px;
  padding: 0 20px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #fffbf0 0%, #f7e6bc 100%);
  border: 1.2px solid rgba(212, 175, 55, 0.70);
  border-radius: 99px;
  color: #633a06;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(120, 80, 15, 0.12);
  transition: all 0.2s ease;
}
.v-card-btn:hover, .v-feature-card a.v-card-btn:hover, .v-feature-card a:hover {
  background: linear-gradient(180deg, #ffffff 0%, #faecd0 100%);
  border-color: #b77e1c;
  box-shadow: 0 4px 10px rgba(120, 80, 15, 0.20);
  transform: translateY(-1px);
}

/* Content Cards: News, Events, and Library (Airy Thai Glass & Gold) */
.v-updates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.v-update-panel {
  background: radial-gradient(circle at 10% 10%, rgba(255, 255, 255, var(--v-glass-opacity, 0.88)) 0%, rgba(255, 254, 250, var(--v-glass-opacity, 0.88)) 60%, rgba(251, 246, 236, var(--v-glass-opacity, 0.88)) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--v-frame-border-width, 2.5px) solid var(--v-gold-primary, #d4a946);
  border-radius: var(--v-frame-radius, 20px);
  overflow: hidden;
  box-shadow: 0 6px 20px var(--v-gold-shadow), var(--v-frame-double);
  display: flex;
  flex-direction: column;
  min-height: 195px;
}
.v-panel-head {
  height: 48px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(245, 222, 150, 0.22);
  border-bottom: 1px solid rgba(212, 175, 55, 0.24);
  color: #5c3508;
}
.v-panel-head h2 {
  font-size: 0.98rem;
  color: #653b0c;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
.v-panel-head h2 span {
  color: #b77e1c;
}
.v-panel-head a {
  white-space: nowrap;
  font-size: 0.76rem;
  font-weight: 700;
  color: #8c550b;
  text-decoration: none;
  padding: 4px 10px;
  background: rgba(245, 222, 150, 0.35);
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, 0.28);
  transition: all 0.18s ease;
}
.v-panel-head a:hover {
  background: #f7df94;
  color: #5c3506;
}
.v-update-inner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 16px;
  flex: 1;
}
.v-update-inner strong {
  font-size: 0.92rem;
  color: #4b2a09;
  line-height: 1.45;
  display: block;
}
.v-update-inner p {
  font-size: 0.8rem;
  color: #836949;
  margin-top: 6px;
  line-height: 1.6;
}
.v-update-mark {
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  color: #9c6c18;
  background: rgba(247, 223, 148, 0.32);
  border: 1px solid rgba(212, 175, 55, 0.28);
  font-size: 1.35rem;
}

/* Gallery Slider - Style A (Single Row of Thumbs inside the frame, no duplicate outside) */
.v-gallery {
  border: 1px solid rgba(212, 175, 55, 0.38);
  background: linear-gradient(180deg, #ffffff 0%, #fffdfa 40%, #faf3e4 100%);
  border-radius: 24px;
  margin: 18px 0 0;
  box-shadow: var(--v-shadow);
  padding: 18px 16px;
}
.v-section-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  color: #bc8623;
  text-align: center;
  padding: 0 0 14px;
}
.v-section-title h2 {
  color: #72400e;
  font-size: 1.18rem;
}
.v-gallery-list.v-gallery-style-a {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.v-gallery-hero {
  position: relative;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #f0eadf;
  width: 100%;
  height: 420px;
  border: 1px solid rgba(212, 175, 55, 0.4);
  box-shadow: 0 8px 24px rgba(118, 76, 15, 0.12);
}
.v-gallery-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.v-gallery-hero figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(0deg, rgba(46, 26, 4, 0.88) 0%, rgba(46, 26, 4, 0.5) 60%, transparent 100%);
  padding: 32px 18px 12px;
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.v-thumbs.v-thumbs-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.v-thumbs button {
  padding: 3px;
  background: #ffffff;
  border: 2px solid rgba(212, 175, 55, 0.28);
  border-radius: 12px;
  overflow: hidden;
  height: 78px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.v-thumbs button:hover {
  border-color: #b77e1c;
  transform: translateY(-2px);
}
.v-thumbs button.active {
  border-color: #aa6e17;
  box-shadow: 0 0 0 2px #edd18a, 0 4px 10px rgba(130, 80, 10, 0.18);
  transform: translateY(-2px);
}
.v-thumbs img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.v-education-cta {
  margin: 18px 0 0;
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 18px;
  background: linear-gradient(95deg, #fffbf0 0%, #ffffff 100%);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  box-shadow: 0 4px 16px rgba(120, 75, 12, 0.07);
}
.v-education-cta h2 {
  font-size: 1.15rem;
  color: #6c3c0a;
  margin: 2px 0 5px;
}
.v-education-cta p {
  font-size: 0.82rem;
  color: #826a48;
}

/* Site Footer */
.v-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 28px;
  margin-top: 18px;
  border-top: 2px solid #dfb35a;
  background: rgba(255, 254, 250, 0.88);
  border-radius: 0 0 16px 16px;
  color: #725224;
  font-size: 0.78rem;
}
.v-footer strong {
  font-size: 1.05rem;
  color: #5c3506;
}
.v-footer p {
  margin-top: 5px;
}
.v-footer > div:last-child {
  text-align: right;
  line-height: 1.55;
}

/* Responsive Media Queries */
@media (max-width: 1280px) {
  .v-header-aside {
    display: none;
  }
  .v-layout {
    grid-template-columns: 290px minmax(0, 1fr);
  }
  .v-feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .v-gallery-hero {
    height: 360px;
  }
}

@media (max-width: 960px) {
  .v-page {
    padding: 0 12px 16px;
  }
  .v-layout {
    grid-template-columns: 1fr;
  }
  .v-sidebar-col {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
  }
  .v-sidebar {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 16px;
  }
  .v-monk-card {
    max-width: 320px;
    margin: 0 auto 14px;
  }
  .v-monk-frame img {
    height: 350px;
  }
  .v-feature-card {
    min-height: 360px;
    height: 100%;
  }
  .v-card-img-wrap {
    height: 175px;
    min-height: 175px;
  }
  .v-feature-card h2 {
    font-size: 0.95rem;
  }
  .v-shortcuts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .v-updates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .v-update-panel:last-child {
    grid-column: 1 / -1;
  }
  .v-gallery-hero {
    height: 320px;
  }
}

@media (max-width: 640px) {
  .v-brand {
    gap: 10px;
  }
  .v-seal-frame {
    flex-basis: 68px;
    width: 68px;
    height: 68px;
    padding: 5px;
  }
  .v-header {
    min-height: 96px;
  }
  .v-brand-copy strong {
    font-size: 1.6rem;
  }
  .v-brand-copy span {
    font-size: 0.72rem;
  }
  .v-brand-copy small {
    font-size: 0.62rem;
  }
  .v-sidebar {
    width: 100%;
    padding: 12px 10px 16px;
    border-radius: 20px;
    margin: 0 auto 14px;
  }
  .v-monk-card {
    max-width: 280px;
    margin: 0 auto 12px;
  }
  .v-monk-frame img {
    height: 300px;
  }
  .v-topnav {
    border-radius: 16px;
    margin-bottom: 10px;
  }
  .v-hero {
    height: auto;
    min-height: 250px;
    max-height: none;
    padding: 16px 10px;
  }
  .v-hero-corner {
    width: 60px;
    height: 60px;
  }
  .v-hero-message {
    padding: 14px 12px;
    border-radius: 16px;
    width: 100%;
    max-width: 100%;
  }
  .v-hero-message h1 {
    font-size: 1.25rem;
    line-height: 1.45;
  }
  .v-hero-sub {
    font-size: 0.76rem;
    margin: 4px 0 12px;
  }
  .v-shortcuts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .v-shortcuts a {
    min-height: 74px;
  }
  .v-glyph {
    font-size: 1.3rem;
  }
  .v-feature-grid, .v-updates {
    grid-template-columns: 1fr;
  }
  .v-feature-card {
    min-height: 360px;
    height: 100%;
    max-width: 380px;
    margin: 0 auto;
    width: 100%;
  }
  .v-card-img-wrap {
    height: 190px;
    min-height: 190px;
  }
  .v-feature-card h2 {
    font-size: 1.02rem;
  }
  .v-gallery-hero {
    height: 240px;
  }
  .v-thumbs.v-thumbs-row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }
  .v-thumbs button {
    height: 52px;
  }
  .v-education-cta {
    flex-direction: column;
    align-items: flex-start;
  }
  .v-footer {
    flex-direction: column;
    padding: 14px;
  }
  .v-footer > div:last-child {
    text-align: left;
  }
}

/* ENH-13: Sidebar Dharma & Upcoming Events Cards */
.v-sidebar-dharma-events {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}
.v-sidebar-block {
  background: radial-gradient(circle at 10% 10%, rgba(255, 255, 255, var(--v-glass-opacity, 0.90)) 0%, rgba(255, 253, 248, var(--v-glass-opacity, 0.88)) 100%);
  border: 1.5px solid rgba(212, 175, 55, 0.55);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(120, 80, 15, 0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 14px 16px;
  overflow: hidden;
  transition: all 0.25s ease;
}
.v-sidebar-block:hover {
  border-color: rgba(183, 126, 28, 0.85);
  box-shadow: 0 6px 20px rgba(120, 80, 15, 0.16);
  transform: translateY(-2px);
}
.v-sidebar-block-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(212, 175, 55, 0.40);
}
.v-sidebar-block-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: #73440e;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.v-dharma-quote-body {
  font-size: 0.90rem;
  line-height: 1.55;
  color: #523108;
  font-style: italic;
  margin-bottom: 6px;
}
.v-dharma-source {
  font-size: 0.80rem;
  color: #8c6023;
  text-align: right;
  font-weight: 600;
}
.v-events-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.v-event-item {
  padding: 6px 10px;
  background: rgba(250, 242, 225, 0.65);
  border-left: 3px solid #d4a946;
  border-radius: 4px;
  font-size: 0.85rem;
  color: #4b2c0b;
}
.v-event-date {
  font-size: 0.75rem;
  color: #8c6023;
  font-weight: 600;
}
.v-daily-pali {
  font-size: 1.05rem;
  font-weight: 700;
  color: #7e4d0d;
  line-height: 1.4;
  margin: 4px 0;
}
.v-daily-trans {
  font-size: 0.88rem;
  color: #5d3406;
}

/* ENH-15: Independent Portrait Display (ภาพหลวงพ่อสมเด็จ) — ขยายกว้างกว่ากรอบเมนู 5-10% */
.v-portrait-block {
  width: 100%;
  max-width: 368px;
  margin: 0 auto 16px;
  transition: all 0.25s ease;
  box-sizing: border-box;
}
.v-portrait-block .v-monk-card {
  width: 100%;
  max-width: 100%;
  margin: 0 0 8px 0;
}
.v-portrait-block .v-monk-frame {
  width: 100%;
  box-sizing: border-box;
}
.v-portrait-block .v-monk-frame img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: contain;
  object-position: center bottom;
  display: block;
}
.v-portrait-frame-gold_luxury {
  border: 2.5px solid var(--v-gold-primary, #d4a946);
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(120, 80, 15, 0.18), inset 0 0 10px rgba(212, 175, 55, 0.25);
  background: radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.92) 0%, rgba(252, 247, 237, 0.90) 100%);
  padding: 6px;
}
.v-portrait-frame-thai_arched {
  border: 2.5px solid #c48c20;
  border-radius: 36px 36px 14px 14px;
  box-shadow: 0 8px 24px rgba(104, 67, 9, 0.20);
  background: #fffdf9;
  padding: 8px;
}
.v-portrait-frame-minimal_gold {
  border: 1.5px solid rgba(212, 175, 55, 0.70);
  border-radius: 14px;
  box-shadow: 0 3px 10px rgba(120, 80, 15, 0.10);
  background: rgba(255, 255, 255, 0.85);
  padding: 4px;
}
.v-portrait-frame-none,
.v-portrait-frame-none .v-monk-frame {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}
.v-portrait-frame-none .v-monk-card {
  margin: 0 0 6px 0 !important;
}

/* Smart Navigation Custom Image Icons */
.v-nav-icon-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  border-radius: 4px;
  flex: 0 0 24px;
}

/* ENH-16: Left Column Decorative Media Block (ภาพตกแต่งคอลัมน์ซ้าย) */
.v-sidebar-decorative {
  margin-top: 14px;
  transition: all 0.25s ease;
}
.v-decorative-card {
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
}
.v-decorative-frame-gold_luxury {
  border: 2px solid var(--v-gold-primary, #d4a946);
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(120, 80, 15, 0.16), inset 0 0 10px rgba(212, 175, 55, 0.22);
  background: radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.92) 0%, rgba(252, 247, 237, 0.90) 100%);
  padding: 10px;
}
.v-decorative-frame-thai_arched {
  border: 2.5px solid #c48c20;
  border-radius: 32px 32px 14px 14px;
  box-shadow: 0 8px 24px rgba(104, 67, 9, 0.18);
  background: #fffdf9;
  padding: 10px;
}
.v-decorative-frame-minimal_gold {
  border: 1px solid rgba(212, 175, 55, 0.60);
  border-radius: 14px;
  box-shadow: 0 3px 10px rgba(120, 80, 15, 0.10);
  background: rgba(255, 255, 255, 0.88);
  padding: 8px;
}
.v-decorative-frame-none {
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
}
.v-decorative-stage,
.v-decorative-img-stage {
  width: 100%;
  height: 240px;
  overflow: hidden;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fbf7ee;
  position: relative;
}
.v-decorative-stage img,
.v-decorative-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.05s ease;
  pointer-events: none;
}

/* ENH-03-ADD-01, ADD-02 & ADD-04: Icon/Image + Label Unified Cluster & Alignment */
.v-nav-cluster {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  flex: 0 1 auto;
  box-sizing: border-box;
  text-decoration: inherit;
  color: inherit;
}
.v-nav-cluster-label {
  line-height: 1.35;
  word-break: break-word;
  white-space: normal;
}
.v-nav-cluster .v-nav-icon,
.v-nav-cluster .v-nav-icon-img {
  flex-shrink: 0;
}

/* Default / Left Alignment */
.v-nav-item, .v-nav-sub-item, .v-featured-subitem,
.v-nav-item[data-align="left"], .v-nav-sub-item[data-align="left"], .v-featured-subitem[data-align="left"],
.v-drawer-nav a[data-align="left"] {
  justify-content: flex-start !important;
  text-align: left !important;
}
.v-nav-item .v-nav-cluster,
.v-nav-item[data-align="left"] .v-nav-cluster,
.v-drawer-nav a[data-align="left"]:not(.v-nav-sub-item) .v-nav-cluster {
  margin-right: auto !important;
  margin-left: 0 !important;
  justify-content: flex-start;
  flex: 0 0 auto !important;
}
.v-nav-sub-item .v-nav-cluster,
.v-featured-subitem .v-nav-cluster,
.v-nav-sub-item[data-align="left"] .v-nav-cluster,
.v-featured-subitem[data-align="left"] .v-nav-cluster {
  margin-right: 0 !important;
  margin-left: 0 !important;
  justify-content: flex-start;
  flex: 1 1 auto !important;
  width: 100%;
  min-width: 0;
}

/* Center Alignment: Entire [Icon + Label] cluster sits in center */
.v-nav-item[data-align="center"], .v-nav-sub-item[data-align="center"], .v-featured-subitem[data-align="center"],
.v-drawer-nav a[data-align="center"] {
  justify-content: center !important;
  text-align: center !important;
  position: relative;
}
.v-nav-item[data-align="center"] .v-nav-cluster,
.v-nav-sub-item[data-align="center"] .v-nav-cluster,
.v-featured-subitem[data-align="center"] .v-nav-cluster,
.v-drawer-nav a[data-align="center"] .v-nav-cluster {
  margin: 0 auto !important;
  justify-content: center;
  flex: 0 0 auto !important;
}
.v-nav-item[data-align="center"] .v-nav-badge-pill,
.v-nav-sub-item[data-align="center"] .v-nav-badge-pill,
.v-drawer-nav a[data-align="center"] .v-nav-badge-pill {
  position: absolute;
  right: 10px;
}
.v-nav-sub-item[data-align="center"] .v-nav-sub-text,
.v-featured-subitem[data-align="center"] .v-featured-subitem-text,
.v-featured-subitem[data-align="center"] .v-nav-sub-text {
  text-align: center !important;
}

/* Right Alignment: Entire [Icon + Label] cluster sits on right */
.v-nav-item[data-align="right"], .v-nav-sub-item[data-align="right"], .v-featured-subitem[data-align="right"],
.v-drawer-nav a[data-align="right"] {
  justify-content: flex-end !important;
  text-align: right !important;
}
.v-nav-item[data-align="right"] .v-nav-cluster,
.v-nav-sub-item[data-align="right"] .v-nav-cluster,
.v-featured-subitem[data-align="right"] .v-nav-cluster,
.v-drawer-nav a[data-align="right"] .v-nav-cluster {
  margin-left: auto !important;
  margin-right: 0 !important;
  justify-content: flex-end;
  flex: 0 0 auto !important;
}
.v-nav-sub-item[data-align="right"] .v-nav-sub-text,
.v-featured-subitem[data-align="right"] .v-featured-subitem-text,
.v-featured-subitem[data-align="right"] .v-nav-sub-text {
  text-align: right !important;
}

/* Category Header Alignment & Title Wrap (Task B) */
.v-nav-section-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}
.v-nav-section-title-wrap .v-nav-icon-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  vertical-align: middle;
  border-radius: 3px;
  flex-shrink: 0;
}
.v-nav-accordion-header[data-align="center"] .v-nav-section-title-wrap {
  margin: 0 auto;
  justify-content: center;
}
.v-nav-accordion-header[data-align="right"] .v-nav-section-title-wrap {
  margin-left: auto;
  margin-right: 0;
  justify-content: flex-end;
}

/* ENH-20: Hero Banner Text Box Background Styles */
.v-hero-message[data-bg-style="none"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.v-hero-message[data-bg-style="none"] h1 {
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 0.95) !important;
}
.v-hero-message[data-bg-style="none"] .v-hero-sub {
  color: #fdf3cb !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9) !important;
}
.v-hero-message[data-bg-style="none"] .v-overline {
  color: #ffe494 !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9) !important;
}
.v-hero-message[data-bg-style="none"] .v-divider {
  color: #ffd700 !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9) !important;
}
.v-hero-message[data-bg-style="none"] .v-hero-ornament {
  color: #ffd700 !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9) !important;
}

.v-hero-message[data-bg-style="translucent"] {
  background: rgba(255, 255, 255, 0.48) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

.v-hero-message[data-bg-style="classic"] {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1.5px solid var(--v-gold-inner, rgba(224, 185, 95, 0.65)) !important;
  box-shadow: 0 6px 20px rgba(90, 56, 12, 0.12) !important;
}

/* ENH-19-ADD-01: 1.5 × 1.5 inches (~144 × 144 CSS px) Left Thumbnail in Homepage Cards 4, 5, 6 */
.v-update-thumb {
  width: 144px;
  height: 144px;
  object-fit: cover;
  border-radius: 14px;
  border: 2px solid var(--v-gold, #c48c20);
  background: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(90, 56, 12, 0.14);
  display: block;
}
@media (max-width: 1024px) {
  .v-update-thumb {
    width: 110px;
    height: 110px;
    border-radius: 12px;
  }
}
@media (max-width: 768px) {
  .v-update-thumb {
    width: 88px;
    height: 88px;
    border-radius: 10px;
  }
}
.v-decorative-info {
  margin-top: 8px;
  padding: 4px 6px;
  line-height: 1.4;
}
.v-decorative-title {
  font-weight: 700;
  margin-bottom: 2px;
  display: block;
}
.v-decorative-caption {
  display: block;
  opacity: 0.88;
}

/* ENH-22: Hero Banner Slideshow */
.v-hero-slideshow-track {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.v-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.v-hero-slide.is-active {
  opacity: 1;
  visibility: visible;
}
.v-hero-slide-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  pointer-events: auto;
  background: rgba(40, 24, 8, 0.45);
  color: #fff;
  border: 1.5px solid rgba(224, 185, 95, 0.6);
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  user-select: none;
}
.v-hero-slide-btn:hover {
  background: rgba(196, 140, 32, 0.85);
  color: #fff;
  transform: translateY(-50%) scale(1.08);
  border-color: #ffd875;
}
.v-hero-slide-prev {
  left: 20px;
}
.v-hero-slide-next {
  right: 20px;
}
@media (max-width: 768px) {
  .v-side-nav, #vSideNav, #mobileDrawerNav {
    --sn-sub-size: var(--sn-sub-size-mobile, 12px);
  }
  .v-hero-slide-btn {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }
  .v-hero-slide-prev { left: 8px; }
  .v-hero-slide-next { right: 8px; }
}
.v-hero-slide-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: auto;
  display: flex;
  gap: 8px;
  padding: 4px 10px;
  background: rgba(20, 12, 4, 0.4);
  border-radius: 20px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.v-hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(212, 175, 55, 0.6);
  cursor: pointer;
  padding: 0;
  transition: all 0.25s ease;
}
.v-hero-dot:hover {
  background: rgba(255, 255, 255, 0.9);
}
.v-hero-dot.is-active {
  background: #c48c20;
  width: 24px;
  border-radius: 6px;
  border-color: #ffd875;
}

/* ENH-23: Announcement Ticker */
.v-ticker-bar {
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  border-top: 1px solid var(--tk-border, #dfb35a);
  border-bottom: 1px solid var(--tk-border, #dfb35a);
  background: var(--tk-bg, #fef8e8);
  color: var(--tk-color, #5c3506);
  z-index: 10;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.v-ticker-inner {
  display: flex;
  align-items: center;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 12px;
  height: 38px;
  overflow: hidden;
}
.v-ticker-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 2px 10px 2px 4px;
  margin-right: 8px;
  border-right: 1.5px solid var(--tk-border, #dfb35a);
  flex-shrink: 0;
  z-index: 2;
  white-space: nowrap;
}
.v-ticker-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.v-ticker-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation-play-state: running;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 28s;
}
.v-ticker-track.direction-rtl {
  animation-name: vTickerRtl;
}
.v-ticker-track.direction-ltr {
  animation-name: vTickerLtr;
}
.v-ticker-viewport:hover .v-ticker-track,
.v-ticker-item a:focus .v-ticker-track,
.v-ticker-track:focus-within {
  animation-play-state: paused;
}
.v-ticker-item {
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
}
.v-ticker-item a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.15s ease;
}
.v-ticker-item a:hover {
  opacity: 0.75;
}
.v-ticker-sep {
  margin: 0 16px;
  opacity: 0.65;
  color: var(--tk-border, #dfb35a);
  font-size: 0.8rem;
  user-select: none;
}
@keyframes vTickerRtl {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}
@keyframes vTickerLtr {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}

@media (prefers-reduced-motion: reduce) {
  .v-topnav a, .v-thumbs button, .v-featured-banner {
    transition: none;
  }
  .v-ticker-track {
    animation: none !important;
    overflow-x: auto;
  }
}
@media (max-width: 768px) {
  .v-ticker-inner {
    height: 34px;
    padding: 0 8px;
  }
  .v-ticker-label {
    font-size: 0.78rem;
    padding: 2px 6px 2px 2px;
    margin-right: 6px;
  }
}