/* Phong Thủy Nghệ Tĩnh — giao diện chung. Cùng bảng màu với công cụ Xem ngày. */
:root{
  --bg:#f3f4ef; --paper:#fbfbf7; --ink:#1d2628; --muted:#5d6966; --line:#d9ddd3;
  --seal:#a8322a; --seal-soft:#f4e1dc; --jade:#256b52; --jade-soft:#dcece3; --gold:#94701c; --gold-soft:#f1e7c8;
  --focus:#2f5f8a;
  --f-display:"Noto Serif", Georgia, "Times New Roman", serif;
  --f-body:"Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#141917; --paper:#1b211f; --ink:#e7ebe5; --muted:#9fa9a4; --line:#2f3834;
  --seal:#e07a6c; --seal-soft:#3a2522; --jade:#6cc4a0; --jade-soft:#1e3329; --gold:#d9b45a; --gold-soft:#352d17; --focus:#8fb8e0; color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#141917; --paper:#1b211f; --ink:#e7ebe5; --muted:#9fa9a4; --line:#2f3834;
  --seal:#e07a6c; --seal-soft:#3a2522; --jade:#6cc4a0; --jade-soft:#1e3329; --gold:#d9b45a; --gold-soft:#352d17; --focus:#8fb8e0; color-scheme:dark }
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.65;margin:0}
img{max-width:100%;height:auto}
a{color:var(--jade)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- Đầu trang ---------- */
.site-header{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.site-header .in{max-width:1180px;margin:0 auto;padding:10px max(16px,env(safe-area-inset-left,0px));display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo .mk{display:inline-grid;place-items:center;width:36px;height:36px;border:2px solid var(--seal);color:var(--seal);border-radius:7px;font-family:var(--f-display);font-weight:700;font-size:16px;flex:none}
.logo b{font-family:var(--f-display);font-size:19px;line-height:1.1;display:block}
.logo small{display:block;font-size:12px;color:var(--muted);line-height:1.2}
.site-nav{display:flex;gap:2px;flex-wrap:wrap}
.site-nav a{text-decoration:none;color:var(--ink);font-weight:500;font-size:15px;padding:8px 11px;border-radius:8px}
.site-nav a:hover{background:var(--bg)}
.site-nav a[aria-current="page"]{background:var(--ink);color:var(--paper)}
.navbtn{display:none;font:inherit;font-weight:600;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:8px;padding:7px 12px;cursor:pointer}
@media (max-width:900px){
  .navbtn{display:block}
  .site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;padding:8px 16px 14px}
  .site-nav.open{display:flex}
  .site-nav a{padding:11px 10px}
}

/* ---------- Chân trang ---------- */
.site-footer{background:var(--paper);border-top:1px solid var(--line);margin-top:56px;font-size:14px;color:var(--muted)}
.site-footer .in{max-width:1180px;margin:0 auto;padding:28px max(16px,env(safe-area-inset-left,0px)) 90px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.site-footer h2{font-family:var(--f-display);font-size:16px;color:var(--ink);margin:0 0 8px}
.site-footer p{margin:0 0 6px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:0 0 6px}
.site-footer a{color:var(--ink)}
.site-footer .copy{grid-column:1/-1;border-top:1px solid var(--line);padding-top:14px;font-size:13px}
@media (max-width:760px){.site-footer .in{grid-template-columns:minmax(0,1fr)}}

/* ---------- Nút liên hệ nổi (gọi / Zalo) ---------- */
.float-contact{position:fixed;right:max(14px,env(safe-area-inset-right,0px));bottom:max(14px,env(safe-area-inset-bottom,0px));z-index:45;display:flex;flex-direction:column;gap:8px}
.float-contact a{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;font-size:14px;border-radius:999px;padding:10px 16px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.float-contact .call{background:var(--seal);color:#fff}
.float-contact .zl{background:#0068ff;color:#fff}
@media (max-width:600px){.float-contact{flex-direction:row}.float-contact a{padding:8px 13px;font-size:13px}}
@media print{.float-contact,.site-header,.site-footer{display:none}}

/* ---------- Nội dung trang ---------- */
.page{max-width:1180px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-left,0px))}
.narrow{max-width:760px;margin:0 auto}
.crumbs{font-size:13px;color:var(--muted);padding:16px 0 0}
.crumbs a{color:var(--muted)}
h1,h2,h3{font-family:var(--f-display);line-height:1.3;text-wrap:balance}
h1{font-size:clamp(28px,4.4vw,42px);margin:18px 0 12px}
h2{font-size:clamp(22px,3vw,28px);margin:40px 0 12px}
h3{font-size:19px;margin:24px 0 8px}
.lead{font-size:18px;color:var(--muted);max-width:720px}
.note{font-size:14px;color:var(--muted)}
.btn{display:inline-block;font:inherit;font-weight:600;border:0;border-radius:9px;padding:12px 20px;cursor:pointer;background:var(--seal);color:#fff;text-decoration:none;text-align:center}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink);font-weight:500}
.btn.jade{background:var(--jade)}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:20px}
.grid{display:grid;gap:16px}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:860px){.g3,.g2{grid-template-columns:minmax(0,1fr)}}
.card h3{margin-top:0}
.card p:last-child{margin-bottom:0}
.tag{display:inline-block;font-size:12px;font-weight:600;border-radius:999px;padding:3px 10px;background:var(--jade-soft);color:var(--jade)}
.tag.seal{background:var(--seal-soft);color:var(--seal)}
.tag.gold{background:var(--gold-soft);color:var(--gold)}
.hero{padding:28px 0 8px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px;align-items:center}
@media (max-width:860px){.hero{grid-template-columns:minmax(0,1fr)}}
.hero-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:20px}
.today-big{display:flex;gap:16px;align-items:center}
.today-big .num{font-family:var(--f-display);font-size:56px;font-weight:700;line-height:1;color:var(--seal);font-variant-numeric:tabular-nums}
.today-big .meta{font-size:15px}
.today-big .meta b{display:block;font-size:17px}
.hours{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.hours span{font-size:13px;border:1px solid var(--jade);color:var(--jade);border-radius:999px;padding:2px 9px}
.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:12px}
.steps li{counter-increment:s;position:relative;padding-left:46px}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--seal-soft);color:var(--seal);display:grid;place-items:center;font-weight:700;font-family:var(--f-display)}
.warn{border-radius:12px;border:1px solid var(--gold);background:var(--gold-soft);padding:14px 16px}
.warn b{color:var(--gold)}
table{border-collapse:collapse;width:100%;font-size:15px}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:600;background:var(--bg)}
tr:last-child td{border-bottom:0}
details{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:0 0 10px}
details summary{cursor:pointer;font-weight:600}
details[open] summary{margin-bottom:8px}
article.post{font-size:17px}
article.post p,article.post li{max-width:72ch}
.post-meta{font-size:14px;color:var(--muted)}
.author-box{display:flex;gap:14px;align-items:flex-start;margin-top:32px}
.author-box .mk{flex:none;width:48px;height:48px;border-radius:50%;background:var(--seal-soft);color:var(--seal);display:grid;place-items:center;font-family:var(--f-display);font-weight:700}
/* Biểu mẫu */
.form{display:grid;gap:12px}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field label{font-size:14px;font-weight:600}
.field input,.field select,.field textarea{font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);min-width:0;width:100%}
.chk{display:flex;gap:8px;font-size:14px;align-items:flex-start}
.err{color:var(--seal);font-size:14px;min-height:1em}
.ok{border-radius:12px;background:var(--jade-soft);color:var(--ink);padding:14px 16px}