/* Shared styles for inner-page mockups — palette "nâu đỏ sẫm" */
:root{
  --deep:#46120a;--deeper:#2c0c08;--brick:#74302b;--terra:#993d30;--rose:#a96356;
  --blush:#d8b5a9;--cream:#f2e2d6;--saffron:#e0a526;--gold:#d1a65a;
  --serif:'Cormorant Garamond',serif;--sans:'Be Vietnam Pro',sans-serif;--tib:'Noto Serif Tibetan',serif;
}
*{box-sizing:border-box;margin:0;padding:0}
/* không đặt scroll-behavior:smooth cho cả trang: mở trang mới sẽ bị "trượt" từ dưới lên. Cuộn mượt chỉ cho link trong trang (site.js). */
[id]{scroll-margin-top:96px}  /* bấm neo: đề mục không bị thanh menu che */
body{font-family:var(--sans);font-weight:300;background:var(--deep);color:var(--cream);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.grain{position:fixed;inset:0;pointer-events:none;z-index:80;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* nav */
nav.top{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:20px 48px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;transition:background .5s,padding .5s,box-shadow .5s}
nav.top.solid{background:color-mix(in srgb,var(--deep) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding-top:12px;padding-bottom:12px;box-shadow:0 1px 0 rgba(224,165,38,.25)}
nav.top .logo{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:20px;letter-spacing:.03em;text-transform:none}
nav.top .logo img{width:40px;height:40px}
nav.top .logo small{display:block;font-family:var(--sans);font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:var(--blush);margin-bottom:2px}
nav.top ul{display:flex;gap:34px;list-style:none}
nav.top ul a{opacity:.8;padding-bottom:4px;border-bottom:1px solid transparent;transition:opacity .3s,border-color .3s}
nav.top ul a:hover{opacity:1}
nav.top ul a.on{opacity:1;border-bottom-color:var(--saffron)}
nav.top .r{display:flex;gap:18px;align-items:center;opacity:.85}
.burger{display:none;background:none;border:0;color:var(--cream);font:inherit;letter-spacing:.2em;cursor:pointer}
.mmenu{position:fixed;inset:0;z-index:70;background:var(--deep);display:flex;flex-direction:column;justify-content:center;padding:0 32px;gap:22px;opacity:0;pointer-events:none;transition:opacity .5s}
.mmenu.open{opacity:1;pointer-events:auto}
.mmenu a{font-family:var(--serif);font-size:40px;color:var(--cream)}
.mmenu .x{position:absolute;top:22px;right:24px;font-size:12px;letter-spacing:.3em;color:var(--blush);cursor:pointer}

/* type helpers */
.eyebrow{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--blush)}
.h1{font-family:var(--serif);font-weight:400;font-size:clamp(46px,6.4vw,96px);line-height:1.02}
.h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,3.8vw,54px);line-height:1.1}
.h3{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.2}
.lead{font-size:17px;line-height:1.85;color:#e2c9bb}
.body{font-size:16px;line-height:1.85;color:#d9bfb1}
.tib{font-family:var(--tib);color:var(--saffron)}
em.g{font-style:italic;color:#e8c98c}
.link{display:inline-block;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--cream);border-bottom:1px solid var(--saffron);padding-bottom:6px}
.wrap{max-width:1180px;margin:0 auto;padding:0 48px}
section{padding:120px 0}
.orn{display:flex;align-items:center;justify-content:center;gap:18px;color:var(--gold);font-family:var(--tib);font-size:18px;padding:30px 0}
.orn::before,.orn::after{content:"";height:1px;width:120px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* photo wash = signature look */
.wash{position:relative;overflow:hidden}
.wash img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08) brightness(.8);transition:filter 1.2s,transform 1.6s cubic-bezier(.2,.7,.2,1)}
.wash::before{content:"";position:absolute;inset:0;background:var(--terra);mix-blend-mode:color;opacity:.85;z-index:1;pointer-events:none;transition:opacity 1.2s}
.wash:hover img{filter:grayscale(0) brightness(.9);transform:scale(1.04)}
.wash:hover::before{opacity:.2}
.wash.still:hover img{transform:none}

/* page hero (inner pages) */
.phero{position:relative;min-height:78vh;display:flex;align-items:flex-end;padding:0 48px 10vh}
.phero .bg{position:absolute;inset:0}
.phero .bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.7) contrast(1.05)}
.phero .bg::before{content:"";position:absolute;inset:0;background:var(--terra);mix-blend-mode:color;opacity:.9;z-index:1}
.phero .bg::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(70,18,10,.6) 0%,rgba(70,18,10,0) 35%,rgba(70,18,10,.95) 100%)}
.phero .c{position:relative;z-index:3;max-width:820px}
.phero .crumb{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--blush);margin-bottom:18px}
.phero p{margin-top:22px;max-width:560px}

/* footer */
footer.foot{background:var(--deeper);padding:70px 48px;display:flex;align-items:center;justify-content:space-between;gap:30px;color:var(--blush);font-size:13px}
footer.foot .l{display:flex;align-items:center;gap:16px}
footer.foot img{width:54px}
footer.foot b{display:block;font-family:var(--serif);font-weight:400;font-size:20px;color:var(--cream)}
.lotus{position:fixed;right:28px;bottom:28px;z-index:45;width:58px;height:58px;border-radius:50%;background:var(--brick);border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;color:var(--cream);font-family:var(--serif);font-size:13px;letter-spacing:.1em;cursor:pointer}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1.2s cubic-bezier(.2,.7,.2,1),transform 1.2s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

@media(max-width:820px){
  nav.top{padding:16px 20px}nav.top ul,nav.top .r{display:none}.burger{display:block}
  nav.top .logo{font-size:17px}
  .wrap{padding:0 20px}section{padding:84px 0}
  .phero{padding:0 20px 12vh;min-height:70vh}
  footer.foot{flex-direction:column;text-align:center;padding:50px 20px}footer.foot .l{flex-direction:column}
}

/* dark zones: like the inner shrine — combo palette */
.tk-sec,.past,.dharma,footer.foot,.mmenu,.place{--deep:#2c0c08;--deeper:#1c0705;--brick:#4f1d16;--terra:#7e3224;--rose:#9a5a4a;--blush:#d6b4a3}
.tk-sec,.past,.dharma{background:#1c0705}
footer.foot{background:#1c0705}

/* nút chưa có nội dung: không giả vờ bấm được */
a.soon{opacity:.5;cursor:default;pointer-events:none}
a.soon::after{content:" · sắp có";font-size:.85em;letter-spacing:.08em;text-transform:none}
/* điều hướng giữa các nơi (cuối trang Kyura Drak / Palden Phagdru / Việt Nam) */
.places{background:var(--deeper);border-top:1px solid rgba(224,165,38,.18);padding:60px 48px;text-align:center}
.places .eyebrow{color:var(--blush)}
.places ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px;margin-top:22px}
.places a{font-family:var(--serif);font-size:24px;color:var(--cream);border-bottom:1px solid transparent;padding-bottom:4px;transition:border-color .4s}
.places a:hover{border-bottom-color:var(--saffron)}
.places a,.places span.on{display:inline-block}
.places span.on{font-family:var(--serif);font-size:24px;color:var(--saffron);padding-bottom:4px;cursor:default}
.places span.on small{color:var(--saffron);opacity:.8}
.places small{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--blush);margin-top:4px}
.places .back{display:inline-block;margin-top:34px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;border-bottom:1px solid var(--saffron);padding-bottom:6px}
@media(max-width:820px){.places{padding:50px 20px}.places a{font-size:20px}}

/* không để chữ rơi lẻ cuối đoạn (chủ dự án 02/10) */
p,blockquote{text-wrap:pretty}
h1,h2,h3,.h1,.h2,.h3{text-wrap:balance}

/* ===== 03/10: ẢNH màu thật đã chỉnh "nắng vàng" — KHÔNG phủ đỏ / làm xám (quy tắc HANDOFF §2.1) ===== */
.wash img,.wash:hover img,.phero .bg img{filter:none}
.wash::before,.phero .bg::before{display:none}
/* ===== chữ không rơi lẻ ===== */
.nw{white-space:nowrap}
small,.eyebrow,.lead,.body,li,figcaption{text-wrap:pretty}
.facts small,.kv small,.stats small,.places small{text-wrap:balance}
.phero.split .h1.name{font-size:clamp(40px,4.4vw,72px)}
@media(max-width:820px){.phero .h1.name{font-size:clamp(30px,9vw,44px)}}

/* ===== 04/10: CỠ TIÊU ĐỀ ĐỒNG BỘ mọi trang con (chuẩn = "Ba tu viện & một trung tâm", chủ dự án duyệt) ===== */
h1,.h1,.open .t h1,.head h1,.phero .h1.name,.phero.split .h1.name,.phero.quiet .h1{font-size:clamp(34px,3.6vw,56px)!important;line-height:1.12!important}
@media(max-width:820px){h1,.h1,.open .t h1,.head h1,.phero .h1.name,.phero.split .h1.name,.phero.quiet .h1{font-size:clamp(28px,8vw,38px)!important}}
/* đề mục khối (h2) đều nhau mọi trang và NHỎ hơn tiêu đề trang (thứ bậc rõ) */
h2,.h2{font-size:clamp(28px,2.6vw,40px)!important;line-height:1.18!important}
@media(max-width:820px){h2,.h2{font-size:clamp(24px,6.6vw,28px)!important}}

/* ===== 04/10: RÀ SOÁT CHUYÊN NGHIỆP (WCAG 2.2 AA) — giữ nguyên thẩm mỹ đã duyệt, chỉ sửa chỗ sai chuẩn ===== */
/* chữ phụ sáng hơn một chút: đạt tương phản 4.5:1 trên mọi nền đỏ (trước 4.2–4.3) */
:root,.tk-sec,.past,.dharma,footer.foot,.mmenu,.place{--blush:#e2c4b8}
/* chữ Tạng & chữ vàng nhỏ: vàng sáng hơn để đọc được trên nền gạch */
.tib,.tb,.fname .tb,.panel .tb{color:#ecb547!important}
/* cỡ chữ tối thiểu 12px cho nhãn nhỏ (phật tử lớn tuổi đọc được) */
.eyebrow,small,.n,.sub,.credit{font-size:12px!important}
/* thấy rõ đang ở đâu khi dùng bàn phím */
:focus-visible{outline:2px solid var(--saffron);outline-offset:3px}
a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}
/* vùng bấm đủ lớn (≥24px máy tính, ~44px điện thoại) */
nav.top ul a{display:inline-block;padding:12px 0}
.places a,.places .back,.more,.link{padding-top:10px;padding-bottom:10px}
/* lối tắt "tới nội dung" cho người dùng bàn phím / đọc màn hình */
.skiplink{position:fixed;left:16px;top:-60px;z-index:200;background:var(--saffron);color:#2c0c08;padding:10px 16px;font:500 13px var(--sans);text-decoration:none;transition:top .2s}
.skiplink:focus{top:12px}
/* nút "Hỏi" là nút thật; nhỏ hơn trên điện thoại để không che chữ */
button.lotus{border-style:solid;font:inherit;font-family:var(--serif);font-size:13px}
@media(max-width:820px){.lotus{width:48px;height:48px;right:16px;bottom:16px;font-size:12px}}
.mmenu .x{background:none;border:0;font:inherit;font-size:12px;padding:10px}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}*{scroll-behavior:auto!important}}
.credit{color:rgba(226,196,184,.82)!important}
.tag{font-size:12px!important}
.burger{padding:12px 4px}
