:root{
  --nen:#f7efdd;
  --nen-dam:#efe3c8;
  --muc:#3a241a;
  --muc-nhat:#6b5138;
  --vang:#c99b3f;
  --vang-nhat:#e6c886;
  --do:#b3241a;
  --do-dam:#7e150e;
  --xanh:#20744a;
  --xanh-dam:#0f4a2c;
  --thoai:#eaf1f5;
  --thoai-dam:#88a9bd;
  --thoai-sau:#33607e;
  --hong-sen:#dd7f95;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Be Vietnam Pro',sans-serif;
  color:var(--muc);
  background:var(--nen);
  background-image:
    radial-gradient(rgba(201,155,63,.07) 1.2px, transparent 1.2px),
    radial-gradient(rgba(179,36,26,.05) 1.2px, transparent 1.2px);
  background-size:34px 34px,34px 34px;
  background-position:0 0,17px 17px;
  line-height:1.75;
  overflow-x:hidden;
}
h1,h2,h3,.ten-mau{font-family:'Playfair Display',serif}

/* ===== Header ===== */
header{
  position:sticky;top:0;z-index:40;
  background:rgba(247,239,221,.92);
  backdrop-filter:blur(8px);
  border-bottom:2px solid var(--vang);
  display:flex;align-items:center;justify-content:space-between;
  padding:.7rem clamp(1rem,4vw,3rem);
}
.logo{display:flex;align-items:center;gap:.6rem;font-family:'Playfair Display',serif;font-weight:900;font-size:1.15rem;color:var(--do-dam);text-decoration:none}
.logo svg{width:34px;height:34px}
nav{display:flex;gap:clamp(.8rem,2.5vw,2rem)}
nav a{color:var(--muc);text-decoration:none;font-size:.95rem;font-weight:500;position:relative;padding:.2rem 0}
nav a::after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:2px;background:var(--do);transition:width .3s}
nav a:hover::after{width:100%}

/* ===== Hero ===== */
.hero{position:relative;text-align:center;padding:clamp(3.5rem,9vh,6.5rem) 1.2rem 2.5rem;overflow:hidden}
.hero .may{position:absolute;opacity:.5;animation:troi 26s linear infinite}
.hero .may.m2{animation-duration:36s;animation-delay:-14s;top:64%;opacity:.35}
.hero .may.m1{top:16%}
@keyframes troi{from{transform:translateX(-220px)}to{transform:translateX(calc(100vw + 220px))}}
.hero .tieu-de-nho{letter-spacing:.42em;text-transform:uppercase;font-size:.8rem;color:var(--muc-nhat);margin-bottom:.9rem}
.hero h1{
  font-size:clamp(2.4rem,6.5vw,4.6rem);font-weight:900;color:var(--do-dam);
  line-height:1.15;
}
.hero h1 span{
  background:linear-gradient(120deg,var(--do) 20%,var(--vang) 50%,var(--do) 80%);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:anh-kim 6s linear infinite;
}
@keyframes anh-kim{to{background-position:200% center}}
.hero p.mo-ta{max-width:620px;margin:1.4rem auto 0;color:var(--muc-nhat);font-size:1.05rem}
.hero .cau-ca{margin-top:1.6rem;font-family:'Playfair Display',serif;font-style:italic;font-size:1.15rem;color:var(--do)}
.ke-vang{width:180px;height:14px;margin:2rem auto 0;display:block}

/* ===== Khối chung ===== */
section{padding:clamp(2.5rem,7vh,5rem) clamp(1.2rem,5vw,3rem);max-width:1180px;margin:0 auto}
.tieu-de-muc{text-align:center;margin-bottom:.6rem;font-size:clamp(1.7rem,3.6vw,2.5rem);color:var(--do-dam)}
.phu-de-muc{text-align:center;color:var(--muc-nhat);max-width:640px;margin:0 auto 2.8rem}

/* ===== Giới thiệu Đạo Mẫu ===== */
.gioi-thieu{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.gioi-thieu .van-ban p{margin-bottom:1rem;text-align:justify}
.the-unesco{
  background:linear-gradient(135deg,#fdf7e9,#f3e3bd);
  border:2px solid var(--vang);border-radius:14px;
  padding:1.6rem 1.7rem;box-shadow:0 12px 30px rgba(122,21,16,.12);
  position:relative;
}
.the-unesco::before{content:"❖";position:absolute;top:-16px;left:50%;transform:translateX(-50%);background:var(--nen);padding:0 .7rem;color:var(--do);font-size:1.2rem}
.the-unesco h3{color:var(--do-dam);margin-bottom:.6rem;font-size:1.15rem}
.the-unesco p{font-size:.95rem;color:var(--muc-nhat)}
.bang-tam-phu{margin-top:1.2rem;display:grid;gap:.55rem}
.hang-phu{display:flex;align-items:center;gap:.7rem;font-size:.92rem}
.cham-mau{width:16px;height:16px;border-radius:50%;border:2px solid rgba(58,36,26,.35);flex-shrink:0}
@media(max-width:840px){.gioi-thieu{grid-template-columns:1fr}}

/* ===== Ba Mẫu ===== */
.khu-tam-toa{background:linear-gradient(180deg,transparent,rgba(201,155,63,.10),transparent)}
.hang-mau{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,3vw,2.4rem)}
@media(max-width:840px){.hang-mau{grid-template-columns:1fr;max-width:420px;margin:0 auto}}
.the-mau{
  border:none;background:none;cursor:pointer;text-align:center;
  font-family:inherit;color:inherit;
  padding:1.4rem 1rem 1.7rem;border-radius:18px;
  transition:transform .45s cubic-bezier(.22,.9,.3,1.2),box-shadow .45s,background .45s;
  opacity:0;transform:translateY(36px);
}
.the-mau.hien{opacity:1;transform:translateY(0);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1),box-shadow .45s,background .45s}
.the-mau:nth-child(2){transition-delay:.15s}
.the-mau:nth-child(3){transition-delay:.3s}
.the-mau:hover,.the-mau:focus-visible{
  background:rgba(253,247,233,.9);
  box-shadow:0 22px 44px rgba(122,21,16,.16);
  transform:translateY(-10px);
  transition-delay:0s;
}
.the-mau:focus-visible{outline:3px solid var(--vang);outline-offset:4px}
.khung-hinh{position:relative;width:min(100%,290px);margin:0 auto}
.khung-hinh svg.hinh-mau{width:100%;height:auto;display:block;animation:bong-benh 5.5s ease-in-out infinite}
.the-mau:nth-child(2) svg.hinh-mau{animation-delay:-1.8s}
.the-mau:nth-child(3) svg.hinh-mau{animation-delay:-3.6s}
@keyframes bong-benh{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.the-mau:hover svg.hinh-mau{filter:drop-shadow(0 0 22px var(--anh-sang,rgba(201,155,63,.55)))}
.the-mau .ten-mau{font-size:1.45rem;font-weight:700;margin-top:1.1rem;color:var(--muc)}
.the-mau .danh-hieu{font-size:.88rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muc-nhat);margin-top:.15rem}
.the-mau .nut-xem{
  display:inline-block;margin-top:.9rem;font-size:.9rem;font-weight:600;
  color:var(--do);border:1.5px solid var(--do);border-radius:999px;padding:.35rem 1.1rem;
  transition:background .3s,color .3s;
}
.the-mau:hover .nut-xem{background:var(--do);color:#fff}

/* màu riêng từng Mẫu */
.thien{--ao:#c0331f;--ao-dam:#8c1d10;--anh-sang:rgba(240,150,70,.6);--halo:#f0b45f}
.nhac{--ao:#2e7d4f;--ao-dam:#1a5233;--anh-sang:rgba(110,200,140,.55);--halo:#a9d8ae}
.thoai-mau{--ao:#eef3f7;--ao-dam:#a9c3d2;--anh-sang:rgba(140,190,220,.6);--halo:#bcd9ea}

/* Mẫu Thượng Thiên ngự chính giữa, tòa cao hơn */
.the-mau.giua .khung-hinh{width:min(100%,318px)}
.the-mau.giua .ten-mau{font-size:1.6rem}
@media(min-width:841px){.the-mau.giua{margin-top:-18px}}

/* halo nhấp nháy trong SVG */
.hao-quang{transform-origin:150px 112px;animation:hao 4.5s ease-in-out infinite}
@keyframes hao{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.6;transform:scale(1.06)}}

/* ===== Trang chi tiết (overlay) ===== */
.trang-mau{
  position:fixed;inset:0;z-index:60;overflow-y:auto;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .45s ease,visibility 0s linear .45s;
}
.trang-mau.mo{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .45s ease}
.trang-mau .noi-dung{
  min-height:100%;padding:clamp(1.2rem,4vw,3rem);
  display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:clamp(1.5rem,4vw,3.5rem);
  max-width:1180px;margin:0 auto;align-items:start;
  transform:translateY(46px);transition:transform .55s cubic-bezier(.2,.75,.25,1);
}
.trang-mau.mo .noi-dung{transform:translateY(0)}
@media(max-width:840px){.trang-mau .noi-dung{grid-template-columns:1fr}}
.trang-mau .cot-hinh{position:sticky;top:2rem;text-align:center}
@media(max-width:840px){.trang-mau .cot-hinh{position:static;max-width:300px;margin:0 auto}}
.trang-mau .cot-hinh svg{width:100%;height:auto;animation:bong-benh 6s ease-in-out infinite}
.trang-mau h2{font-size:clamp(1.9rem,4.2vw,3rem);line-height:1.2;margin-bottom:.2rem}
.trang-mau .danh-hieu-lon{letter-spacing:.22em;text-transform:uppercase;font-size:.85rem;margin-bottom:1.4rem;opacity:.85}
.trang-mau .truyen p{margin-bottom:1.05rem;text-align:justify}
.trang-mau .truyen p:first-of-type::first-letter{
  font-family:'Playfair Display',serif;font-size:3.2em;font-weight:900;float:left;
  line-height:.85;padding-right:.12em;
}
.chum-the{display:flex;flex-wrap:wrap;gap:.55rem;margin:0 0 1.5rem}
.the-nho{font-size:.82rem;padding:.3rem .85rem;border-radius:999px;border:1.5px solid currentColor;opacity:.92}
.nut-dong{
  position:fixed;top:1.1rem;right:1.2rem;z-index:70;
  width:46px;height:46px;border-radius:50%;border:2px solid currentColor;
  background:rgba(255,255,255,.15);color:inherit;font-size:1.35rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s,background .3s;
}
.nut-dong:hover{transform:rotate(90deg);background:rgba(255,255,255,.3)}
.dieu-huong{display:flex;gap:.8rem;margin-top:2rem;flex-wrap:wrap}
.dieu-huong button{
  font-family:inherit;font-size:.92rem;font-weight:600;cursor:pointer;
  padding:.55rem 1.25rem;border-radius:999px;border:1.5px solid currentColor;
  background:transparent;color:inherit;transition:background .3s,transform .3s;
}
.dieu-huong button:hover{background:rgba(255,255,255,.22);transform:translateY(-2px)}

/* nền riêng từng trang */
#trang-thien{background:linear-gradient(160deg,#8c1d10,#c0331f 55%,#e0842e);color:#fff7ea}
#trang-nhac{background:linear-gradient(160deg,#0f3d24,#1f6a41 55%,#79a851);color:#f0f8ec}
#trang-thoai{background:linear-gradient(160deg,#274a60,#4a7a99 55%,#a8c8da);color:#f4fafd}
.trang-mau .hoa-van-nen{position:fixed;inset:0;pointer-events:none;opacity:.1}

/* ===== Footer ===== */
footer{
  border-top:2px solid var(--vang);
  text-align:center;padding:2.2rem 1.2rem 2.6rem;color:var(--muc-nhat);font-size:.9rem;
  background:rgba(201,155,63,.08);
}
footer .cau-ca{font-family:'Playfair Display',serif;font-style:italic;font-size:1.05rem;color:var(--do);margin-bottom:.5rem}

body.khoa-cuon{overflow:hidden}

.khong-js .the-mau{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}