:root{
  --gold:#c39a2e; --gold2:#e4c36a; --brown:#3d2a17; --cream:#fff8e9; --paper:rgba(255,250,238,.92); --ink:#3b2a1e; --muted:#725f4e; --line:rgba(195,154,46,.28); --shadow:0 22px 70px rgba(0,0,0,.20);
  --heading:'Cormorant Garamond','Noto Serif','Palatino Linotype',serif; --body:'Lato','Segoe UI',Arial,sans-serif; --hero-heading:'Cormorant Garamond','Noto Serif','Times New Roman',serif; --hero-vietnamese:'Noto Serif','Cormorant Garamond','Times New Roman',serif; --hero-ui:'Montserrat','Lato','Segoe UI',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--body);color:var(--ink);background:var(--cream);line-height:1.7} a{text-decoration:none;color:inherit} img{max-width:100%;display:block}
.nav{position:fixed;inset:0 0 auto 0;height:92px;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 6vw;background:linear-gradient(to bottom,rgba(0,0,0,.58),rgba(0,0,0,.10));color:white}
.logo{display:flex;gap:14px;align-items:center}.logo-mark{font-size:42px;color:var(--gold2);line-height:1}.logo-title{font-family:var(--heading);font-size:24px;font-weight:700;letter-spacing:.02em}.logo-sub{font-size:14px;margin-top:-4px}.nav-links{display:flex;gap:34px;align-items:center;font-weight:700;letter-spacing:.04em}.nav-links a{position:relative}.nav-links a.active,.nav-links a:hover{color:var(--gold2)}.nav-links a.active:after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:2px;background:var(--gold2)}
.lang{position:relative;padding-bottom:12px}.lang-btn{background:var(--gold);border:0;color:white;border-radius:8px;padding:11px 17px;font-weight:700;cursor:pointer}.lang-menu{display:none;position:absolute;right:0;top:calc(100% - 8px);background:white;color:var(--ink);min-width:150px;border-radius:8px;box-shadow:0 10px 32px rgba(0,0,0,.22);overflow:hidden}.lang:hover .lang-menu,.lang:focus-within .lang-menu,.lang.open .lang-menu{display:block}.lang-menu a{display:block;padding:12px 16px}.lang-menu a:hover{background:#fff2cf;color:var(--gold)}
.hero{min-height:760px;height:100vh;background:linear-gradient(90deg,rgba(0,0,0,.16),rgba(0,0,0,.05)),url('assets/temple-procession-hero.png') center/cover no-repeat;display:flex;align-items:center;padding:130px 6vw 70px;position:relative}.hero-card{width:min(720px,calc(100vw - 48px));margin-left:20%;background:var(--paper);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.65);border-radius:18px;padding:46px 50px;box-shadow:var(--shadow)}
.hero h1{font-family:var(--heading);font-size:48px;line-height:1.05;color:var(--brown);letter-spacing:.02em}.hero-sub{font-family:var(--heading);font-size:30px;color:var(--gold);margin:12px 0 20px}.divider{display:flex;align-items:center;gap:18px;color:var(--gold);margin:0 0 22px}.divider:before,.divider:after{content:"";height:1px;background:var(--gold);flex:1}.hero p{font-size:17px;margin-bottom:24px}.btns{display:flex;gap:18px;flex-wrap:wrap}.btn{padding:14px 26px;border-radius:7px;font-weight:800;border:1px solid var(--gold);transition:.2s}.btn-primary{background:var(--gold);color:white}.btn-outline{background:rgba(255,255,255,.55);color:var(--brown)}.btn:hover{transform:translateY(-2px)}
.section{padding:48px 6vw}.info-strip{background:white;display:grid;grid-template-columns:1fr 1fr 1fr 1.35fr 1.7fr;gap:0;border-bottom:1px solid #f1e3c4}.info-box{padding:22px 28px;text-align:center;border-right:1px solid var(--line)}.info-icon{font-size:38px;color:var(--gold);margin-bottom:8px}.info-title{font-family:var(--heading);font-size:20px;font-weight:700;color:var(--gold);margin-bottom:8px}.news-list{text-align:left}.news-title{font-family:var(--heading);font-size:23px;color:var(--gold);font-weight:700;margin-bottom:10px}.news-item{display:grid;grid-template-columns:68px 1fr;gap:12px;margin-bottom:10px}.news-item img{width:68px;height:46px;object-fit:cover;border-radius:6px}.quote-box{padding:18px}.quote-card{background:linear-gradient(135deg,#fff7df,#f6e4b3);border-radius:12px;min-height:190px;display:grid;grid-template-columns:160px 1fr;gap:22px;align-items:center;text-align:left;padding:18px 24px;font-family:var(--heading);font-size:29px;color:#4f321c;overflow:hidden}.quote-buddha{width:160px;height:170px;object-fit:cover;border-radius:12px;box-shadow:0 10px 24px rgba(111,74,22,.18)}.quote-text{text-align:center}.quote-text small{display:block;margin-top:8px;font-size:18px;color:#6b4b25}
.gallery-area{display:block}.notice-row{margin:0 0 34px;display:flex;justify-content:flex-start}.notice-row .notice-card{width:min(760px,100%)}.section-title{font-family:var(--heading);font-size:27px;color:var(--gold);margin-bottom:18px}.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.gallery-grid img{height:145px;width:100%;object-fit:cover;border-radius:12px;box-shadow:0 8px 20px rgba(0,0,0,.10)}.notice-card{background:linear-gradient(135deg,#fff8e9,#f8e9c4);border-radius:14px;padding:28px;display:grid;grid-template-columns:70px 1fr;gap:22px;align-items:center}.notice-card .bell{font-size:46px;color:var(--gold)}.notice-card h3{font-family:var(--heading);font-size:24px;color:var(--gold);margin-bottom:8px}.notice-card li{margin-left:18px}.notice-card a{color:inherit}.notice-card a:hover{color:var(--gold);text-decoration:underline}.contact{background:#fffaf0;border-top:1px solid #f1e3c4}.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.contact-form-wrap{margin-top:28px;background:white;border-radius:14px;padding:28px;box-shadow:0 8px 22px rgba(0,0,0,.06);max-width:880px}.contact-form{display:grid;gap:14px}.contact-form input,.contact-form textarea{width:100%;border:1px solid #e4d3ad;border-radius:9px;padding:13px 14px;font:inherit}.contact-form textarea{min-height:150px;resize:vertical}.contact-form button{justify-self:start;border:0;background:var(--gold);color:white;border-radius:8px;padding:13px 24px;font-weight:800;cursor:pointer}.contact-note{color:var(--muted);font-size:14px;margin-top:8px}.contact-item{display:flex;align-items:flex-start;gap:16px;background:white;padding:22px;border-radius:12px;box-shadow:0 8px 22px rgba(0,0,0,.06)}.contact-icon{font-size:28px;color:var(--gold);flex-shrink:0}.contact-content h4{font-family:var(--heading);font-size:22px;color:var(--gold);margin-bottom:6px}.contact-content p+p{margin-top:6px}
.admin-fab{position:fixed;right:22px;bottom:22px;z-index:60;border:0;background:var(--gold);color:white;padding:13px 18px;border-radius:999px;font-weight:800;box-shadow:0 10px 30px rgba(0,0,0,.25);cursor:pointer}.admin{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:80;align-items:center;justify-content:center;padding:20px}.admin.active{display:flex}.admin-panel{background:white;width:min(900px,96vw);max-height:88vh;overflow:auto;border-radius:16px;padding:28px}.admin-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.admin h2{font-family:var(--heading);font-size:30px}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.admin input,.admin textarea{width:100%;padding:12px;margin:6px 0 12px;border:1px solid #ddd;border-radius:8px;font:inherit}.admin textarea{min-height:90px}.admin button{padding:11px 16px;border:0;border-radius:8px;background:var(--gold);color:white;font-weight:800;cursor:pointer}.admin .close{background:#333}.news-modal{display:none;position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.62);align-items:center;justify-content:center;padding:22px}.news-modal.active{display:flex}.news-modal-card{background:white;width:min(760px,96vw);max-height:86vh;overflow:auto;border-radius:16px;box-shadow:var(--shadow);padding:28px}.news-modal-card img{width:100%;max-height:320px;object-fit:cover;border-radius:12px;margin:14px 0}.news-modal-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}.news-modal h2{font-family:var(--heading);font-size:34px;color:var(--brown);line-height:1.15}.news-modal small{color:var(--muted)}.modal-close{border:0;background:#3d2a17;color:white;border-radius:8px;padding:9px 13px;font-weight:800;cursor:pointer}.footer{text-align:center;padding:26px;background:#3d2a17;color:#f7e8c0}
@media(max-width:1050px){.nav{height:auto;padding:16px 5vw;gap:18px;flex-wrap:wrap}.nav-links{gap:18px;font-size:13px}.hero{height:auto;min-height:760px}.hero-card{margin-left:18%;width:min(680px,calc(100vw - 42px));}.info-strip{grid-template-columns:repeat(2,1fr)}.gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.nav-links{display:none}.hero{align-items:flex-end;background-position:28% center;padding:120px 18px 28px}.hero-card{margin-left:0;width:100%;padding:30px 24px}.hero h1{font-size:35px}.hero-sub{font-size:24px}.info-strip,.contact-grid,.admin-grid{grid-template-columns:1fr}.gallery-grid{grid-template-columns:1fr 1fr}.quote-card{grid-template-columns:1fr;font-size:24px;text-align:center}.quote-buddha{width:100%;height:180px}.info-box{border-right:0;border-bottom:1px solid var(--line)}}
.quote-card{background-size:cover;background-position:center;min-height:230px;grid-template-columns:1fr;place-items:center}.quote-buddha{display:none}.quote-text{background:rgba(255,250,238,.78);backdrop-filter:blur(3px);border-radius:12px;padding:18px 24px;box-shadow:0 8px 24px rgba(0,0,0,.10)}
.gallery-thumb{border:0;background:transparent;padding:0;cursor:pointer}.gallery-thumb img{transition:.2s}.gallery-thumb:hover img{transform:translateY(-3px)}
.admin-tabs-title{font-family:var(--heading);font-size:24px;color:var(--gold);margin:24px 0 10px;border-top:1px solid #eee;padding-top:18px}.admin-panel{width:min(1100px,96vw)}.admin-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}.admin-list{display:grid;gap:10px;margin-top:10px}.admin-item{display:grid;grid-template-columns:58px 1fr auto auto;gap:10px;align-items:center;border:1px solid #eee;border-radius:10px;padding:10px;background:#fffdf8}.admin-item.no-img{grid-template-columns:1fr auto}.admin-item img{width:58px;height:46px;object-fit:cover;border-radius:7px}.admin-item small{display:block;color:var(--muted)}.admin button.danger{background:#8b2f24}.admin select{width:100%;padding:12px;margin:6px 0 12px;border:1px solid #ddd;border-radius:8px;font:inherit}
@media(max-width:720px){.admin-grid-2{grid-template-columns:1fr}.admin-item{grid-template-columns:48px 1fr}.admin-item button{margin-top:4px}.quote-text{font-size:22px}}

/* v5 news + current event layout */
.news-bullets{list-style:disc;margin-left:18px;display:grid;gap:7px}.news-bullets a{font-weight:700;color:var(--ink)}.news-bullets a:hover{color:var(--gold);text-decoration:underline}.news-bullets small{display:block;color:var(--muted);font-size:12px;margin-top:1px}.text-link{border:0;background:transparent;color:var(--gold);font-weight:800;cursor:pointer;padding:8px 0;margin-top:6px;font:inherit;text-align:left}.text-link:hover{text-decoration:underline}.events-layout{display:grid;grid-template-columns:minmax(320px,1fr) minmax(300px,420px);gap:28px;align-items:stretch}.events-layout .notice-card{height:100%;align-items:start}.event-feature{width:100%;height:100%;min-height:250px;border:0;border-radius:16px;background:white;text-align:left;overflow:hidden;box-shadow:0 12px 34px rgba(0,0,0,.12);cursor:pointer;color:var(--ink);display:flex;flex-direction:column}.event-feature img{height:150px;width:100%;object-fit:cover}.event-feature span,.event-feature strong,.event-feature small,.event-feature p{margin-left:20px;margin-right:20px}.event-feature .event-kicker{display:inline-block;align-self:flex-start;margin-top:18px;background:#fff2cf;color:var(--gold);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.05em}.event-feature strong{font-family:var(--heading);font-size:26px;line-height:1.15;color:var(--brown);margin-top:8px}.event-feature small{color:var(--muted);font-weight:700;margin-top:3px}.event-feature p{margin-top:10px;margin-bottom:20px}.event-feature:hover{transform:translateY(-2px);transition:.2s}.modal-link-list{display:grid;gap:10px}.modal-link-list a{display:block;border:1px solid #eeddb7;border-radius:10px;padding:13px 14px;background:#fffaf0}.modal-link-list a:hover{border-color:var(--gold);background:#fff4da}.modal-link-list small{display:block;color:var(--muted);margin-top:2px}.news-modal-card p.modal-link-list{margin-top:14px}.news-link{border:0;background:transparent;text-align:left;cursor:pointer;font:inherit;width:100%}
@media(max-width:900px){.events-layout{grid-template-columns:1fr}.event-feature{min-height:auto}.info-strip{grid-template-columns:1fr 1fr}.quote-box{grid-column:1/-1}.news-list{grid-column:1/-1}}

/* v6 introduction, announcements, captions */
.intro-section{background:#fffaf0;border-bottom:1px solid #f1e3c4}.intro-card{max-width:980px;margin:0 auto;text-align:center;background:white;border-radius:18px;padding:42px 48px;box-shadow:0 12px 34px rgba(0,0,0,.07);border:1px solid #f1e3c4}.intro-kicker{font-weight:900;letter-spacing:.12em;color:var(--gold);font-size:13px}.intro-card h2{font-family:var(--heading);font-size:42px;color:var(--brown);line-height:1.1;margin-top:8px}.intro-sub{font-family:var(--heading);font-size:28px;color:var(--gold);margin:8px 0}.intro-lotus{color:var(--gold);font-size:28px;margin:8px 0 12px}.intro-card p{max-width:780px;margin:0 auto 20px}.intro-links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}.intro-links button{border:1px solid var(--gold);background:#fff8e9;color:var(--brown);border-radius:999px;padding:11px 18px;font-weight:800;cursor:pointer}.intro-links button:hover{background:var(--gold);color:white}.gallery-thumb{position:relative;border-radius:12px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.10)}.gallery-thumb img{box-shadow:none;border-radius:12px}.gallery-thumb span{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;background:linear-gradient(to top,rgba(0,0,0,.66),rgba(0,0,0,0));color:white;font-size:13px;font-weight:800;text-align:left}.events-layout{grid-template-columns:minmax(290px,380px) 1fr;align-items:start}.events-layout .notice-card{min-height:235px}.current-events-grid{display:grid;grid-template-columns:repeat(2,minmax(240px,1fr));gap:18px}.event-feature{height:auto;min-height:330px}.admin-item.no-img{grid-template-columns:1fr auto auto}.admin-item{grid-template-columns:58px 1fr auto auto}.admin-list .admin-item button{white-space:nowrap}
@media(max-width:900px){.current-events-grid{grid-template-columns:1fr}.events-layout{grid-template-columns:1fr}.intro-card{padding:32px 24px}.intro-card h2{font-size:34px}.intro-sub{font-size:23px}}


/* v7 introduction popup directory */
.intro-directory{display:grid;gap:26px;margin-top:16px;line-height:1.7}
.intro-directory h3{font-family:var(--heading);font-size:26px;color:var(--gold);margin-bottom:10px}
.intro-directory p{white-space:normal;margin:0;color:var(--ink)}
.directory-grid{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:14px}
.directory-card{display:grid;grid-template-columns:86px 1fr;gap:14px;align-items:center;border:1px solid #eeddb7;background:#fffaf0;border-radius:12px;padding:12px;text-align:left}
.directory-card img,.directory-card .portrait-default{width:86px;height:104px;object-fit:cover;border-radius:10px;background:#f3e5c2;display:flex;align-items:center;justify-content:center;font-size:38px;color:#9b7c3a}
.directory-card strong{display:block;font-family:var(--heading);font-size:22px;color:var(--brown);line-height:1.1}.directory-card small{display:block;color:var(--muted);margin-top:4px}.directory-card .text-link{margin-top:5px}
.admin-item .portrait-default{width:58px;height:46px;border-radius:7px;background:#f3e5c2;display:flex;align-items:center;justify-content:center;color:#9b7c3a}
.news-modal-card #modalBody{margin-top:14px}
@media(max-width:720px){.directory-grid{grid-template-columns:1fr}.directory-card{grid-template-columns:72px 1fr}.directory-card img,.directory-card .portrait-default{width:72px;height:88px}}


/* v8 quote overlay and admin edit popup */
.quote-card{
  position:relative;
  isolation:isolate;
}
.quote-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.24),rgba(0,0,0,.04),rgba(0,0,0,.22));
  z-index:-1;
}
.quote-text{
  background:rgba(255,255,255,.12) !important;
  backdrop-filter:blur(1px);
  color:#fff8df;
  text-shadow:0 2px 8px rgba(0,0,0,.65),0 0 18px rgba(0,0,0,.35);
  box-shadow:none !important;
  border:1px solid rgba(255,255,255,.25);
}
.quote-text small{color:#fff1bd;text-shadow:0 2px 8px rgba(0,0,0,.65)}
.admin-edit-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.66);z-index:100;align-items:center;justify-content:center;padding:20px}
.admin-edit-modal.active{display:flex}
.admin-edit-card{background:white;width:min(760px,96vw);max-height:88vh;overflow:auto;border-radius:16px;padding:26px;box-shadow:0 20px 60px rgba(0,0,0,.32)}
.admin-edit-card label{display:block;font-weight:800;color:var(--brown);margin-top:10px}
.admin-edit-card input,.admin-edit-card textarea{width:100%;padding:12px;margin:6px 0 12px;border:1px solid #ddd;border-radius:8px;font:inherit}
.admin-edit-card textarea{min-height:140px}
.admin-note{font-size:13px;color:var(--muted);margin:-4px 0 12px}
.local-folder-note{background:#fff8e8;border:1px solid #f1e3c4;border-radius:10px;padding:12px;margin-top:10px;color:#5c3d1d;font-size:14px}


/* Nested person detail modal: opens above Introduction without closing it */
.person-detail-modal{display:none;position:fixed;inset:0;z-index:110;background:rgba(0,0,0,.48);align-items:center;justify-content:center;padding:22px}
.person-detail-modal.active{display:flex}
.person-detail-card{background:white;width:min(640px,94vw);max-height:84vh;overflow:auto;border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.32);padding:28px}
.person-detail-portrait{margin:16px 0 12px;display:flex;justify-content:center}
.person-detail-portrait img{width:min(260px,80vw);max-height:300px;object-fit:cover;border-radius:14px;box-shadow:0 12px 28px rgba(0,0,0,.16)}
.portrait-default.large{width:160px;height:190px;border-radius:14px;background:#f4ead5;display:flex;align-items:center;justify-content:center;font-size:58px;color:#8f6b25}
.person-detail-body{font-size:1rem;line-height:1.8;color:var(--ink);white-space:normal}


/* v12 quote section refinement: keep the whole background image sharp; only the text panel is frosted and capped at 40% */
.quote-card{
  background-size:cover !important;
  background-position:center !important;
  min-height:260px;
  display:flex !important;
  align-items:center;
  padding:26px 34px !important;
  overflow:hidden;
}
.quote-card::before{display:none !important; content:none !important;}
.quote-card.quote-pos-left{justify-content:flex-start;}
.quote-card.quote-pos-center{justify-content:center;}
.quote-card.quote-pos-right{justify-content:flex-end;}
.quote-text{
  width:min(36%, 420px) !important;
  max-width:40% !important;
  min-width:260px;
  padding:14px 18px !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.18) !important;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.32) !important;
  box-shadow:0 10px 30px rgba(0,0,0,.12) !important;
  color:#fff8df !important;
  font-size:clamp(22px,2vw,30px) !important;
  line-height:1.35 !important;
  text-align:center;
  text-shadow:0 2px 8px rgba(0,0,0,.65),0 0 16px rgba(0,0,0,.34);
}
.quote-text small{
  font-size:clamp(14px,1.2vw,17px) !important;
  color:#fff1bd !important;
  text-shadow:0 2px 8px rgba(0,0,0,.65);
}
@media(max-width:900px){
  .quote-text{width:min(62%, 390px) !important; max-width:62% !important;}
}
@media(max-width:600px){
  .quote-card{min-height:220px;padding:18px !important;}
  .quote-text{width:100% !important; max-width:100% !important; min-width:0; font-size:22px !important;}
}


/* =====================================================================
   v13 QUOTE SECTION PATCH
   ---------------------------------------------------------------------
   Goal from design review:
   1) The weekly quote background image must remain sharp edge-to-edge.
      Do NOT apply filter/backdrop-filter/blur to .quote-card itself.
   2) Only the small quote text panel may have a light frosted effect.
   3) The quote text panel should stay compact, at roughly one-third of
      the quote image area on desktop and no more than 40% width.
   4) If the quote ever looks too cloudy, lower the alpha value in the
      rgba() below. Example: .28 = more transparent, .45 = more visible.
   ===================================================================== */
.quote-card{
  /* Keep the rotating background image clear. */
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  background-size:cover !important;
  background-position:center !important;
}
.quote-card::before{
  /* Prevent any full-card wash/blur layer from covering the image. */
  display:none !important;
  content:none !important;
  background:transparent !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.quote-text{
  /* Only this text area uses a subtle glass effect. */
  width:min(34%, 390px) !important;
  max-width:40% !important;
  min-width:260px;
  padding:14px 20px !important;
  background:rgba(255,250,238,.32) !important; /* closer to transparent */
  backdrop-filter:blur(2px) !important;
  -webkit-backdrop-filter:blur(2px) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  box-shadow:0 8px 22px rgba(0,0,0,.08) !important;
}
@media(max-width:900px){
  .quote-text{
    width:min(54%, 360px) !important;
    max-width:54% !important;
  }
}
@media(max-width:720px){
  .quote-text{
    width:100% !important;
    max-width:100% !important;
    min-width:0;
    background:rgba(255,250,238,.40) !important;
  }
}


/* v14 combined News & Events page
   ------------------------------------------------------------
   The News and Events content now lives in one homepage section:
   #news-events. The section contains:
   1) 1–2 featured announcement links on the left,
   2) a bullet/link list of recent news and active events,
   3) current event cards on the right.
   If this layout breaks, check that the HTML contains these IDs:
   #noticeLinks, #newsList, and #currentEventCard. temple-app.js fills them. */
.info-strip{
  grid-template-columns:repeat(3,minmax(180px,1fr)) minmax(280px,1.6fr);
}
.news-events-section{
  background:#fffaf0;
  border-top:1px solid #f1e3c4;
  border-bottom:1px solid #f1e3c4;
}
.combined-news-events{
  display:grid;
  grid-template-columns:minmax(260px,360px) minmax(300px,1fr) minmax(320px,1.2fr);
  gap:22px;
  align-items:start;
}
.news-list-card{
  background:white;
  border:1px solid #f1e3c4;
  border-radius:16px;
  padding:24px 26px;
  box-shadow:0 12px 34px rgba(0,0,0,.07);
  min-height:235px;
}
.combined-notice-card{
  height:auto;
  min-height:235px;
}
#currentEventCard.current-events-grid{
  grid-template-columns:1fr;
}
@media(max-width:1100px){
  .combined-news-events{grid-template-columns:1fr 1fr;}
  #currentEventCard{grid-column:1/-1;}
}
@media(max-width:900px){
  .info-strip{grid-template-columns:1fr 1fr;}
  .quote-box{grid-column:1/-1;}
  .combined-news-events{grid-template-columns:1fr;}
}

/* Admin edit forms: reused for one-submit editing of existing news/event and gallery items. */
.admin-edit-card select{width:100%;padding:12px;margin:6px 0 12px;border:1px solid #ddd;border-radius:8px;font:inherit;background:white}
.admin-current-preview{display:block;width:100%;max-height:240px;object-fit:cover;border-radius:12px;border:1px solid #eee;margin:6px 0 12px;background:#faf7ef}
.admin-single-submit-form button{margin-top:6px}

/* v17 news/events cleanup
   ------------------------------------------------------------
   The older standalone THÔNG BÁO / ANNOUNCEMENTS card is removed.
   The news/event link list now uses the same warm notice-card style,
   while active/current events remain as attention cards beside it. */
.news-events-no-notice{
  grid-template-columns:minmax(340px,520px) 1fr;
}
.news-links-card{
  align-items:flex-start;
  min-height:260px;
}
.news-links-card #newsList .news-bullets{
  margin-top:4px;
}
.news-links-card .text-link{
  display:inline-block;
  margin-top:12px;
}

/* Keep the temple name on one line in the homepage hero card.
   clamp() lets the title shrink before wrapping on narrow screens. */
.hero-card h1,
.hero h1{
  /* v19: keep the temple name inside the hero card on one line.
     The previous max size was too large for the card and overflowed.
     If the title overflows again, adjust this clamp or .hero-card width. */
  white-space:nowrap;
  max-width:100%;
  font-size:clamp(36px,3.35vw,56px);
  letter-spacing:-0.035em;
}
@media(max-width:720px){
  .hero-card h1,
  .hero h1{
    font-size:clamp(29px,8vw,42px);
    letter-spacing:-0.045em;
  }
  .news-events-no-notice{grid-template-columns:1fr;}
}


/* =====================================================================
   v18 — News/Event Full Poster Mode
   ---------------------------------------------------------------------
   Use this for invitation cards or flyers uploaded as cover images.
   Regular news cards still crop the cover image to keep cards compact.
   Poster mode intentionally uses object-fit: contain and height:auto-ish
   layouts so the full flyer remains visible on the homepage and in the
   detail popup. If posters look cropped, inspect these selectors first:
   .event-feature.is-poster-mode, .poster-full-img, .modal-img-poster.
   ===================================================================== */
.admin-check{display:flex;align-items:flex-start;gap:10px;margin:10px 0 4px;font-weight:800;color:var(--brown)}
.admin-check input{width:auto;margin-top:3px;accent-color:var(--gold)}
.admin-note{font-size:13px;color:var(--muted);line-height:1.5;margin:4px 0 12px}
.event-feature.is-poster-mode{background:#fffdf7}
.event-feature.is-poster-mode .poster-full-img{width:100%;height:auto;max-height:520px;object-fit:contain;background:#fffaf0;border-bottom:1px solid #f1e3c4}
.event-feature.is-poster-mode p:empty{display:none}
.event-feature .standard-cover-img{height:150px;width:100%;object-fit:cover}
#modalImg.modal-img-poster{width:100%;max-height:78vh;object-fit:contain;background:#fffaf0;border-radius:14px;margin-bottom:18px}
#modalImg.modal-img-standard{width:100%;max-height:440px;object-fit:cover;border-radius:14px;margin-bottom:18px}
.poster-detail-body{white-space:pre-line;line-height:1.8;margin-top:6px}
@media(max-width:700px){.event-feature.is-poster-mode .poster-full-img{max-height:70vh}}
/* v26 Special Event styling: active special posts are pinned first by JS and visually marked here. */
.special-news-item a, .modal-link-list a.special-news-item strong{color:#8a5a00}
.special-news-item small{color:#b78314;font-weight:800}
.event-feature.is-special-event{border:2px solid rgba(201,161,60,.7);box-shadow:0 16px 42px rgba(201,161,60,.22),0 12px 34px rgba(0,0,0,.12)}
.event-feature.is-special-event .event-kicker{background:#c9a13c;color:#fff}



/* =====================================================================
   v19 — Hero title/card fit fix
   ---------------------------------------------------------------------
   Fixes the homepage issue where "TỊNH XÁ NGỌC HƯNG" overflowed beyond
   the frosted hero card. The card is wider and the title uses a smaller
   responsive clamp. Troubleshooting selectors: .hero-card, .hero-card h1.
   ===================================================================== */


/* =====================================================================
   v20 — Centered hero title + high-readability hero card
   ---------------------------------------------------------------------
   Why this exists:
   - The hero background is visually busy, so the welcome text must stay
     readable without covering the statue.
   - The temple name should be centered and stay on one line inside the
     frosted card on desktop/tablet.

   Troubleshooting selectors:
   - .hero-card / .hero-inner: controls the frosted card width and opacity.
   - .hero-title: controls the temple name alignment, size, and wrapping.
   - .hero-desc: controls readable paragraph width.
   - .hero-btns: centers the two hero buttons.
   ===================================================================== */
.hero-card.hero-inner{
  width:min(760px,calc(100vw - 48px));
  padding:44px 54px 42px;
  background:rgba(255,250,236,.92);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.78);
}
.hero-title,
.hero-card h1,
.hero h1{
  display:block;
  text-align:center;
  white-space:nowrap;
  max-width:100%;
  font-size:clamp(40px,3.15vw,58px);
  line-height:1.05;
  letter-spacing:-0.035em;
  margin:0 auto 12px;
  color:var(--brown);
}
.hero-sub,
.hero-card .hero-sub{
  display:block;
  text-align:center;
  font-size:clamp(23px,2.1vw,32px);
  line-height:1.2;
  margin:0 0 18px;
}
.hero-divider,
.hero-card .divider{
  justify-content:center;
  width:min(340px,70%);
  margin:0 auto 24px;
}
.hero-desc,
.hero-card .hero-desc,
.hero-card > p{
  max-width:48ch;
  margin:0 auto 26px;
  text-align:left;
  line-height:1.75;
  color:#2f2418;
}
.hero-btns,
.hero-card .btns{
  justify-content:center;
  gap:18px;
}
@media(max-width:900px){
  .hero-card.hero-inner{
    width:min(700px,calc(100vw - 42px));
    margin-left:10%;
    padding:38px 42px;
  }
  .hero-title,
  .hero-card h1,
  .hero h1{
    font-size:clamp(35px,5vw,50px);
  }
}
@media(max-width:720px){
  .hero-card.hero-inner{
    margin-left:0;
    width:100%;
    padding:30px 22px;
    background:rgba(255,250,236,.94);
  }
  .hero-title,
  .hero-card h1,
  .hero h1{
    font-size:clamp(29px,8vw,40px);
    letter-spacing:-0.045em;
  }
  .hero-desc,
  .hero-card .hero-desc,
  .hero-card > p{
    max-width:100%;
    text-align:left;
  }
}
@media(max-width:390px){
  .hero-title,
  .hero-card h1,
  .hero h1{
    white-space:normal;
  }
}


/* =====================================================================
   v20 FINAL HERO + FOOTER REFINEMENT
   ---------------------------------------------------------------------
   Purpose:
   - Uses the requested `.hero-inner` markup directly (without relying on
     `.hero-card` being present in HTML).
   - Keeps "Tịnh Xá Ngọc Hưng" centered and inside the frosted box.
   - Makes the card readable over the background image without hiding the
     statue/procession.
   - Adds a full site footer below Contact.

   Troubleshooting:
   - If the title wraps, adjust `.hero-title` font-size or `.hero-inner` width.
   - If the card is too opaque, lower `.hero-inner` background alpha.
   - If buttons lose styling, check `.hero-btns .btn-primary` and `.btn-outline`.
   ===================================================================== */

.hero .hero-inner{
  width:min(700px,calc(100vw - 48px));
  margin-left:20%;
  background:rgba(255,250,236,.86);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.68);
  border-radius:20px;
  padding:44px 52px 42px;
  box-shadow:var(--shadow);
}

.hero-title{
  /* v25 typography: Cormorant Garamond gives the formal temple look;
     Noto Serif is included immediately after it so Vietnamese diacritics stay
     reliable if a browser/device cannot render Cormorant perfectly. */
  font-family:var(--hero-heading);
  display:block;
  text-align:center;
  white-space:nowrap;
  max-width:100%;
  font-size:clamp(40px,3.8vw,64px);
  font-weight:500;
  line-height:1.02;
  letter-spacing:.01em;
  margin:0 auto 12px;
  color:var(--brown);
}

.hero-sub{
  display:block;
  text-align:center;
  font-family:var(--hero-heading);
  font-style:italic;
  font-weight:400;
  font-size:clamp(22px,2vw,31px);
  line-height:1.2;
  color:var(--gold);
  margin:0 0 14px;
}

.hero-divider{
  width:min(320px,70%);
  height:1px;
  margin:0 auto 24px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

.hero-desc{
  max-width:48ch;
  margin:0 auto 26px;
  text-align:left;
  font-family:var(--hero-vietnamese);
  font-size:17px;
  line-height:1.85;
  color:#2f2418;
}

.hero-btns{
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
}

.hero-btns .btn-primary,
.hero-btns .btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 26px;
  border-radius:7px;
  font-family:var(--hero-ui);
  font-weight:800;
  letter-spacing:.04em;
  border:1px solid var(--gold);
  transition:.2s;
}

.hero-btns .btn-primary{
  background:var(--gold);
  color:white;
}

.hero-btns .btn-outline{
  background:rgba(255,255,255,.58);
  color:var(--brown);
}

.hero-btns .btn-primary:hover,
.hero-btns .btn-outline:hover{
  transform:translateY(-2px);
}

.site-footer{
  text-align:center;
  padding:42px 18px;
  background:#3d2a17;
  color:#f7e8c0;
  border-top:1px solid rgba(255,255,255,.12);
}

.footer-symbol{
  font-size:1.8rem;
  margin-bottom:.45rem;
  color:var(--gold2);
}

.site-footer strong{
  font-family:var(--heading);
  font-size:1.3rem;
}

.site-footer span{
  display:inline-block;
  max-width:680px;
  margin-top:.35rem;
  line-height:1.75;
}

.site-footer a{
  color:#fff0c8;
  font-weight:700;
}

.site-footer a:hover{
  color:var(--gold2);
}

@media(max-width:1050px){
  .hero .hero-inner{
    margin-left:12%;
    width:min(680px,calc(100vw - 42px));
    padding:38px 42px;
  }
}

@media(max-width:720px){
  .hero .hero-inner{
    margin-left:0;
    width:100%;
    padding:30px 24px;
    background:rgba(32,26,16,.42);
  }

  .hero-title{
    white-space:normal;
    font-size:clamp(34px,10vw,46px);
  }

  .hero-divider{
    margin-left:auto;
    margin-right:auto;
  }

  .hero-desc{
    text-align:left;
  }

  .hero-btns{
    justify-content:center;
  }
}

/* =====================================================================
   v23 — Admin-controlled hero welcome text box size, position, and color
   ---------------------------------------------------------------------
   Admin can now adjust the welcome text box that contains:
   - Tịnh Xá Ngọc Hưng
   - Nơi An Lạc, Trí Tuệ và Từ Bi
   - Welcome paragraph
   - News / Contact buttons

   The JS writes these CSS variables onto <header class="hero">:
   - --hero-card-x: left position as a percent of the hero width
   - --hero-card-y: top position as a percent of the hero height
   - --hero-card-width: desktop width of the text box
   - --hero-card-pad: card padding
   - --hero-card-bg: background color/tint for the text box
   - --hero-title-color and --hero-desc-color: text colors per background style

   Troubleshooting:
   - If the box is off-screen, use Admin → Restore default text box.
   - If the title wraps, increase width or reduce browser zoom.
   - If text is hard to read, choose Dark Glass or Light Cream background.
   ===================================================================== */
.hero{
  --hero-card-x:20%;
  --hero-card-y:50%;
  --hero-card-width:700px;
  --hero-card-pad:44px;
  --hero-card-bg:rgba(32,26,16,.34);
  --hero-title-color:#fff;
  --hero-desc-color:rgba(255,255,255,.96);
}

.hero .hero-inner{
  position:absolute;
  left:var(--hero-card-x);
  top:var(--hero-card-y);
  transform:translateY(-50%);
  width:min(var(--hero-card-width),calc(100vw - 48px));
  margin-left:0 !important;
  padding:var(--hero-card-pad) calc(var(--hero-card-pad) + 8px);
  background:var(--hero-card-bg) !important;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.28);
  border-radius:20px;
  box-shadow:0 18px 50px rgba(0,0,0,.24);
}

.hero-title,
.hero h1{
  color:var(--hero-title-color) !important;
  text-shadow:0 2px 14px rgba(0,0,0,.38);
}

.hero-sub{
  color:#f0d18a !important;
  text-shadow:0 2px 10px rgba(0,0,0,.30);
}

.hero-desc{
  color:var(--hero-desc-color) !important;
  text-shadow:0 1px 7px rgba(0,0,0,.32);
}

.hero-light-card .hero-title,
.hero-light-card.hero h1,
.hero-light-card .hero-sub,
.hero-light-card .hero-desc{
  text-shadow:none;
}

.admin-inline-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.admin-inline-grid label{
  display:flex;
  flex-direction:column;
  gap:5px;
  font-weight:700;
  color:var(--brown);
}

.admin-current-values{
  margin:8px 0 12px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(255,255,255,.55);
  font-family:monospace;
  font-size:13px;
}

@media(max-width:720px){
  .hero .hero-inner{
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    width:100%;
    margin:0 !important;
    padding:30px 24px;
  }
  .admin-inline-grid{
    grid-template-columns:1fr;
  }
}


/* =====================================================================
   v25 — Vietnamese-safe Classic Temple hero typography
   ---------------------------------------------------------------------
   The hero title/subtitle now use the elegant Cormorant Garamond look from
   the approved screenshot, with Noto Serif as the Vietnamese-safe fallback.
   The paragraph uses Noto Serif first for the cleanest Vietnamese diacritics.
   Buttons use Montserrat/Lato for clear, bold action labels.

   Troubleshooting:
   - If Vietnamese accents appear uneven, check that the Google Fonts link in
     both HTML files includes Noto Serif with subset=vietnamese.
   - If the hero title wraps, adjust Admin → Hero text box width or lower the
     .hero-title clamp max value below.
   - If the button font does not load, it will fall back to Lato safely.
   ===================================================================== */
.hero-title,
.hero h1{
  font-family:var(--hero-heading) !important;
  font-weight:500;
  letter-spacing:.01em;
}
.hero-sub{
  font-family:var(--hero-heading) !important;
  font-style:italic;
  font-weight:400;
}
.hero-desc{
  font-family:var(--hero-vietnamese) !important;
}
.hero-btns .btn-primary,
.hero-btns .btn-outline{
  font-family:var(--hero-ui) !important;
  letter-spacing:.04em;
}
@media(max-width:720px){
  .hero-title,
  .hero h1{
    font-size:clamp(34px,9vw,48px);
  }
}

/* =====================================================================
   v24 — Event Albums for News & Events
   ---------------------------------------------------------------------
   Admin can attach a group of photos to a News/Event post. The homepage
   displays a compact randomized preview (4–5 images max), with controls to
   flip to the next set. Visitors can open the full album grid, click any
   image to view it larger, and use previous/next buttons.

   Troubleshooting selectors:
   - .event-album-preview: compact album area inside a current event card
   - .album-full-grid: full album grid inside the modal
   - .album-photo-modal: large individual-photo viewer
   - .admin-album-existing: edit form controls for existing album images
   ===================================================================== */
.event-album-preview{
  margin:14px 18px 18px;
  padding:12px;
  background:rgba(255,250,240,.82);
  border:1px solid #f1e3c4;
  border-radius:14px;
}
.event-album-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:7px;
}
.event-album-grid button{
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
}
.event-album-grid img{
  width:100%;
  height:58px;
  object-fit:cover;
  border-radius:8px;
  display:block;
}
.event-album-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}
.event-album-actions button,
.album-open-btn{
  border:1px solid var(--gold);
  background:#fff8e9;
  color:var(--brown);
  border-radius:999px;
  padding:8px 12px;
  font-weight:800;
  cursor:pointer;
}
.event-album-actions button:hover,
.album-open-btn:hover{
  background:var(--gold);
  color:white;
}
.album-grid-note{
  margin-bottom:14px;
  color:var(--muted);
  font-size:14px;
}
.album-full-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(145px,1fr));
  gap:14px;
  margin:10px 0 18px;
}
.album-full-grid button{
  border:1px solid #f1e3c4;
  background:#fffaf0;
  padding:8px;
  border-radius:12px;
  cursor:pointer;
  text-align:left;
}
.album-full-grid img{
  width:100%;
  aspect-ratio:4/3;
  height:auto;
  object-fit:cover;
  border-radius:9px;
  display:block;
  margin:0 0 7px 0;
}
.album-full-grid span{
  display:block;
  font-size:12px;
  color:var(--muted);
  line-height:1.35;
}
.album-photo-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:125;
  background:rgba(0,0,0,.78);
  align-items:center;
  justify-content:center;
  padding:20px;
}
.album-photo-modal.active{display:flex}
.album-photo-card{
  position:relative;
  width:min(1000px,96vw);
  max-height:92vh;
  background:#111;
  border-radius:16px;
  padding:18px;
  box-shadow:0 18px 60px rgba(0,0,0,.45);
}
.album-photo-card .modal-close{
  position:absolute;
  right:18px;
  top:18px;
  z-index:2;
}
#albumPhotoImg{
  width:100%;
  max-height:78vh;
  object-fit:contain;
  display:block;
  border-radius:10px;
  background:#000;
}
#albumPhotoCaption{
  color:#f7e8c0;
  text-align:center;
  margin-top:10px;
  font-weight:700;
}
.album-photo-nav{
  display:flex;
  justify-content:space-between;
  position:absolute;
  left:22px;
  right:22px;
  top:50%;
  pointer-events:none;
}
.album-photo-nav button{
  pointer-events:auto;
  border:0;
  width:46px;
  height:46px;
  border-radius:50%;
  background:rgba(255,255,255,.82);
  color:#22170f;
  font-size:34px;
  line-height:1;
  cursor:pointer;
}
.admin-album-existing{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:10px;
  margin:8px 0 12px;
}
.admin-album-existing label{
  display:grid;
  gap:5px;
  border:1px solid #eee;
  border-radius:10px;
  padding:8px;
  background:#fffdf8;
  font-size:12px;
}
.admin-album-existing img{
  width:100%;
  height:74px;
  object-fit:cover;
  border-radius:8px;
}
.admin-album-existing input[type="checkbox"]{
  width:auto;
  margin:0;
}
@media(max-width:700px){
  .event-album-grid{grid-template-columns:repeat(4,1fr)}
  .event-album-grid img{height:52px}
  .album-full-grid{grid-template-columns:repeat(2,1fr)}
}