/* =====================================================================
   THƯ VIỆN PHIM CÔNG GIÁO — giao diện
   Ý tưởng: "đêm canh thức" — nền mực đêm, chữ màu giấy da, viền vàng nến.
   Mỗi mảng nội dung mang một màu phụng vụ để nhận diện:
   tím (Cựu Ước/Mùa Vọng–Chay) · trắng (Tân Ước, Đức Mẹ) · đỏ (tử đạo)
   lục (nhân bản, thường niên) · xanh (giáo lý) · hồng
   ===================================================================== */

:root{
  --nen:#0E1119;
  --nen-2:#161B27;
  --nen-3:#1E2433;
  --vien:#2A3243;
  --muc:#E9E3D5;
  --muc-mo:#A5A08F;
  --vang:#C8A34B;
  --vang-mo:#8A6F2E;

  --tim:#7A5AA8;
  --trang:#E2D6B4;
  --do:#B5343A;
  --luc:#3E8768;
  --xanh:#3F7CB5;
  --hong:#C98BA8;

  --chu-tieu-de:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --chu-than:"Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;

  --khoang:clamp(1rem, 4vw, 2.5rem);
  --bo:4px;
}

*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--nen); color:var(--muc);
  font-family:var(--chu-than); font-weight:300; font-size:16px; line-height:1.65;
  background-image:radial-gradient(1200px 600px at 50% -10%, #1A2133 0%, var(--nen) 65%);
  background-repeat:no-repeat;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--chu-tieu-de); font-weight:600; line-height:1.15; margin:0}

.khung{width:min(1180px, 100% - 2*var(--khoang)); margin-inline:auto}
.an{position:absolute!important; width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bo-qua{position:absolute; left:-9999px; top:0; background:var(--vang); color:#111; padding:.6rem 1rem; z-index:99}
.bo-qua:focus{left:1rem; top:1rem}
:focus-visible{outline:2px solid var(--vang); outline-offset:3px}

/* ---------- Đầu trang ---------- */
.dau-trang{
  position:sticky; top:0; z-index:50;
  background:rgba(14,17,25,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--vien);
}
.dau-trang__trong{display:flex; align-items:center; gap:1.25rem; padding:.85rem 0; flex-wrap:wrap}

.hieu{display:flex; align-items:center; gap:.7rem; text-decoration:none}
.hieu__dau{color:var(--vang); font-size:1.5rem; line-height:1}
.hieu__chu{display:flex; flex-direction:column; line-height:1.05}
.hieu__chu strong{font-family:var(--chu-tieu-de); font-size:1.35rem; font-weight:600; letter-spacing:.01em}
.hieu__chu em{font-style:normal; font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; color:var(--vang)}

.dieu-huong{margin-left:auto}
.dieu-huong ul{list-style:none; display:flex; gap:1.4rem; margin:0; padding:0}
.dieu-huong > ul > li > a{
  text-decoration:none; font-size:.9rem; letter-spacing:.02em; padding:.35rem 0;
  border-bottom:2px solid transparent; display:inline-block;
}
.dieu-huong > ul > li > a:hover{border-bottom-color:var(--vang)}
.dieu-huong a[data-mau="tim"]:hover{border-bottom-color:var(--tim)}
.dieu-huong a[data-mau="do"]:hover{border-bottom-color:var(--do)}
.dieu-huong a[data-mau="luc"]:hover{border-bottom-color:var(--luc)}
.dieu-huong a[data-mau="xanh"]:hover{border-bottom-color:var(--xanh)}

.co-con{position:relative}
.co-con > a::after{content:""}
.co-con.co-menu > a{padding-right:.9rem}
.co-con.co-menu > a::after{
  content:""; position:absolute; right:0; top:50%; width:5px; height:5px; margin-top:-4px;
  border-right:1px solid var(--muc-mo); border-bottom:1px solid var(--muc-mo);
  transform:rotate(45deg); transition:border-color .2s ease;
}
.co-con.mo > a::after{border-color:var(--vang)}
.menu-con{
  position:absolute; left:-.9rem; top:100%; display:none; flex-direction:column; gap:0;
  background:var(--nen-2); border:1px solid var(--vien); min-width:230px; padding:.5rem 0; border-radius:var(--bo);
  visibility:hidden; opacity:0; z-index:60;
}
.co-con.mo > .menu-con, .co-con:focus-within > .menu-con{visibility:visible; opacity:1}
.co-con.mo > .menu-con, .co-con:focus-within > .menu-con{display:flex}
.menu-con a{display:block; padding:.45rem .95rem; font-size:.88rem; text-decoration:none; color:var(--muc-mo)}
.menu-con a:hover{background:var(--nen-3); color:var(--muc)}

.tim{display:flex; gap:.4rem}
.tim input{
  background:var(--nen-2); border:1px solid var(--vien); color:var(--muc);
  padding:.5rem .8rem; border-radius:var(--bo); min-width:min(260px, 50vw); font:inherit; font-size:.88rem;
}
.tim input::placeholder{color:#6E6B60}
.tim button{
  background:transparent; border:1px solid var(--vang-mo); color:var(--vang);
  padding:.5rem .95rem; border-radius:var(--bo); cursor:pointer; font:inherit; font-size:.85rem;
}
.tim button:hover{background:var(--vang); color:#12141B}
.nut-menu{display:none}

/* ---------- Mở đầu ---------- */
.mo-dau{padding:clamp(2.5rem,6vw,4.5rem) 0 1.8rem; text-align:center}
.mo-dau__nhan{font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; color:var(--vang); margin:0 0 1.2rem}
.mo-dau h1{font-size:clamp(2.4rem, 6vw, 4.2rem); letter-spacing:-.01em}
.mo-dau h1 em{font-style:italic; color:var(--vang)}
.mo-dau__cau{
  font-family:var(--chu-tieu-de); font-style:italic; font-size:clamp(1.05rem,2.2vw,1.35rem);
  color:var(--muc-mo); max-width:52ch; margin:1.2rem auto 0;
}
.nen-vang{width:120px; height:1px; background:linear-gradient(90deg,transparent,var(--vang),transparent); margin:1.6rem auto 0}

/* ---------- Bốn cửa danh mục ---------- */
.cua{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1px; background:var(--vien);
     border:1px solid var(--vien); margin:1.5rem 0 4.5rem}
.cua__o{
  background:var(--nen-2); padding:2rem 1.6rem 1.6rem; text-decoration:none; position:relative;
  display:flex; flex-direction:column; gap:.7rem; min-height:210px;
  transition:background .25s ease, transform .25s ease;
}
.cua__o::before{content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--mau,var(--trang))}
.cua__o:hover{background:var(--nen-3)}
.cua__o:hover h2{color:var(--vang)}
.cua__o h2{font-size:1.85rem; transition:color .2s ease}
.cua__o p{margin:0; font-size:.88rem; color:var(--muc-mo); line-height:1.6}
.cua__o .dem{margin-top:auto; padding-top:1rem; font-size:.72rem; letter-spacing:.18em;
             text-transform:uppercase; color:var(--vang); border-top:1px solid var(--vien)}
.cua__o .con{font-size:.8rem; color:#7E7A6E; line-height:1.5}

/* ---------- Tiêu đề khu vực ---------- */
.tieu-khu{display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
          border-bottom:1px solid var(--vien); padding-bottom:.8rem; margin:0 0 1.8rem}
.tieu-khu h2{font-size:2rem}
.tieu-khu a{font-size:.82rem; color:var(--vang); text-decoration:none; letter-spacing:.06em}
.tieu-khu a:hover{text-decoration:underline}

/* ---------- Lưới phim ---------- */
.luoi{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:2rem 1.6rem; margin-bottom:4rem}
.the{text-decoration:none; display:flex; flex-direction:column; gap:.65rem; transition:transform .25s ease}
.the:hover{transform:translateY(-3px)}
.the:hover h3{color:var(--vang)}
.the h3{transition:color .2s ease}
.the__anh{position:relative; aspect-ratio:16/9; background:var(--nen-3); overflow:hidden; border:1px solid var(--vien)}
.the__anh img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease}
.the:hover .the__anh img{transform:scale(1.04)}
.the__anh::after{content:""; position:absolute; inset:auto 0 0 0; height:3px; background:var(--mau,var(--trang))}
.the__gio{position:absolute; right:.5rem; bottom:.6rem; background:rgba(10,12,18,.85);
          font-size:.72rem; padding:.1rem .4rem; border-radius:2px; letter-spacing:.03em}
.the__thay{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
  background:linear-gradient(160deg, var(--nen-3), var(--nen-2));
}
.the__thay b{font-family:var(--chu-tieu-de); font-size:2rem; color:var(--mau,var(--vang)); font-weight:400; line-height:1}
.the__thay em{font-style:normal; font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:#6E6B60}
.the h3{font-size:1.12rem; font-weight:600; line-height:1.25}
.the__phu{font-size:.76rem; color:var(--muc-mo); letter-spacing:.04em; display:flex; gap:.6rem; flex-wrap:wrap}
.the__phu .trich{color:var(--vang); font-family:var(--chu-tieu-de); font-style:italic; font-size:.92rem}

/* ---------- Trang danh mục ---------- */
.duong-dan{font-size:.78rem; color:var(--muc-mo); letter-spacing:.06em; margin:2rem 0 .6rem}
.duong-dan a{text-decoration:none; color:var(--muc-mo)}
.duong-dan a:hover{color:var(--vang)}
.dau-muc{border-left:3px solid var(--mau,var(--trang)); padding-left:1.2rem; margin-bottom:2.2rem}
.dau-muc h1{font-size:clamp(2rem,5vw,3rem)}
.dau-muc p{color:var(--muc-mo); margin:.5rem 0 0; max-width:60ch}
.muc-con{list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; padding:0; margin:0 0 2.5rem}
.muc-con a{display:inline-block; padding:.35rem .85rem; border:1px solid var(--vien); border-radius:999px;
           font-size:.82rem; text-decoration:none; color:var(--muc-mo)}
.muc-con a:hover, .muc-con a[aria-current="page"]{border-color:var(--vang); color:var(--vang)}

/* ---------- Trang xem phim ---------- */
.xem{display:grid; grid-template-columns:minmax(0,2.2fr) minmax(260px,1fr); gap:2.5rem; margin:2rem 0 4rem}
.khung-video{position:relative; aspect-ratio:16/9; background:#000; border:1px solid var(--vien)}
.khung-video iframe, .khung-video video{position:absolute; inset:0; width:100%; height:100%; border:0}
.xem h1{font-size:clamp(1.8rem,4vw,2.6rem); margin:1.4rem 0 .6rem}
.the-nhan{display:flex; flex-wrap:wrap; gap:.5rem; margin:.8rem 0 1.4rem}
.nhan{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; border:1px solid var(--vien);
      padding:.25rem .7rem; border-radius:999px; color:var(--muc-mo)}
.nhan--mau{border-color:var(--mau,var(--vang)); color:var(--mau,var(--vang))}
.mo-ta{color:#D6D0C0; line-height:1.8; white-space:pre-line}
.trich-lon{font-family:var(--chu-tieu-de); font-style:italic; font-size:1.5rem; color:var(--vang); margin:.2rem 0 1rem}
.canh-ben h2{font-size:1.15rem; letter-spacing:.02em; border-bottom:1px solid var(--vien); padding-bottom:.6rem; margin-bottom:1.1rem}
.ds-doc{display:flex; flex-direction:column; gap:1rem}
.doc{display:grid; grid-template-columns:110px 1fr; gap:.8rem; text-decoration:none}
.doc img{aspect-ratio:16/9; object-fit:cover; border:1px solid var(--vien)}
.doc strong{font-weight:500; font-size:.92rem; line-height:1.3}
.doc span{font-size:.74rem; color:var(--muc-mo)}

/* ---------- Phân trang ---------- */
.phan-trang{display:flex; gap:.4rem; justify-content:center; margin:0 0 4rem; flex-wrap:wrap}
.phan-trang a, .phan-trang span{
  min-width:2.4rem; text-align:center; padding:.4rem .6rem; border:1px solid var(--vien);
  text-decoration:none; font-size:.85rem; color:var(--muc-mo); border-radius:var(--bo);
}
.phan-trang a:hover{border-color:var(--vang); color:var(--vang)}
.phan-trang .dang-o{background:var(--vang); color:#12141B; border-color:var(--vang)}

.trong-rong{border:1px dashed var(--vien); padding:3rem 1.5rem; text-align:center; color:var(--muc-mo); margin-bottom:3rem}
.trong-rong strong{display:block; font-family:var(--chu-tieu-de); font-size:1.3rem; color:var(--muc); margin-bottom:.4rem}

/* ---------- Chân trang ---------- */
.chan-trang{border-top:1px solid var(--vien); background:var(--nen-2); padding:3rem 0 2.5rem; margin-top:auto}
.chan-trang__trong{display:flex; flex-direction:column; align-items:center; gap:1rem; text-align:center}
.chan-trang__cau{font-family:var(--chu-tieu-de); font-style:italic; font-size:1.15rem; margin:0; color:var(--muc)}
.chan-trang__cau span{display:block; font-style:normal; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--vang); margin-top:.5rem}
.chan-trang nav{display:flex; gap:1.5rem; font-size:.85rem}
.chan-trang nav a{color:var(--muc-mo); text-decoration:none}
.chan-trang nav a:hover{color:var(--vang)}
.chan-trang__ban-quyen{font-size:.75rem; color:#6E6B60; margin:0}

/* ---------- Khu quản trị ---------- */
.qt-dau{background:var(--nen-2); border-bottom:1px solid var(--vien); padding:.8rem 0}
.qt-dau .khung{display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap}
.qt-dau strong{font-family:var(--chu-tieu-de); font-size:1.2rem}
.qt-dau nav{display:flex; gap:1.2rem; font-size:.88rem; margin-left:auto}
.qt-dau nav a{text-decoration:none; color:var(--muc-mo)}
.qt-dau nav a:hover, .qt-dau nav a.dang-o{color:var(--vang)}

.bang{width:100%; border-collapse:collapse; margin:1.5rem 0 3rem; font-size:.9rem}
.bang th, .bang td{text-align:left; padding:.7rem .6rem; border-bottom:1px solid var(--vien); vertical-align:middle}
.bang th{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muc-mo); font-weight:500}
.bang tr:hover td{background:var(--nen-2)}
.bang img{width:96px; aspect-ratio:16/9; object-fit:cover; border:1px solid var(--vien)}

.bieu-mau{max-width:820px; margin:2rem 0 4rem; display:grid; gap:1.2rem}
.hang{display:grid; gap:.4rem}
.hang label{font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muc-mo)}
.hang input[type=text], .hang input[type=number], .hang input[type=password], .hang select, .hang textarea, .hang input[type=file]{
  background:var(--nen-2); border:1px solid var(--vien); color:var(--muc); padding:.65rem .8rem;
  border-radius:var(--bo); font:inherit; font-size:.95rem; width:100%;
}
.hang textarea{min-height:150px; resize:vertical; line-height:1.7}
.hang small{color:#6E6B60; font-size:.78rem}
.doi{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
.nut{display:inline-block; background:var(--vang); color:#12141B; border:1px solid var(--vang);
     padding:.65rem 1.4rem; border-radius:var(--bo); font:inherit; font-size:.9rem; cursor:pointer; text-decoration:none}
.nut:hover{background:#DDBA63}
.nut--vien{background:transparent; color:var(--muc-mo); border-color:var(--vien)}
.nut--vien:hover{background:var(--nen-3); color:var(--muc)}
.nut--do{background:transparent; border-color:var(--do); color:#E27B80}
.nut--do:hover{background:var(--do); color:#fff}
.hang-nut{display:flex; gap:.7rem; align-items:center; flex-wrap:wrap}

.thong-bao{border:1px solid var(--luc); background:rgba(62,135,104,.12); padding:.8rem 1rem; border-radius:var(--bo); margin:1.5rem 0; font-size:.9rem}
.loi{border:1px solid var(--do); background:rgba(181,52,58,.12); padding:.8rem 1rem; border-radius:var(--bo); margin:1.5rem 0; font-size:.9rem}
.dang-nhap{max-width:400px; margin:8vh auto; background:var(--nen-2); border:1px solid var(--vien); padding:2.2rem}
.dang-nhap h1{font-size:1.7rem; margin-bottom:.4rem; text-align:center}
.dang-nhap p.phu{text-align:center; color:var(--muc-mo); font-size:.85rem; margin:0 0 1.6rem}

/* ---------- Nhỏ hơn 900px ---------- */
@media (max-width:900px){
  .xem{grid-template-columns:1fr}
  .doi{grid-template-columns:1fr}
}
@media (max-width:760px){
  .nut-menu{display:inline-block; margin-left:auto; background:transparent; border:1px solid var(--vien);
            color:var(--muc); padding:.45rem .9rem; border-radius:var(--bo); font:inherit; font-size:.85rem; cursor:pointer}
  .dieu-huong{display:none; width:100%; margin:0}
  .dieu-huong.mo{display:block}
  .dieu-huong ul{flex-direction:column; gap:0}
  .dieu-huong > ul > li{border-bottom:1px solid var(--vien)}
  .dieu-huong > ul > li > a{display:block; padding:.7rem 0}
  .menu-con{position:static; display:flex!important; visibility:visible!important; opacity:1!important;
            border:0; background:transparent; padding:0 0 .6rem .9rem}
  .tim{width:100%}
  .tim input{min-width:0; flex:1}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
}