/* =========================================================
   PHỐ ĐI BỘ NAM HÒA — Bộ khung giao diện
   Bảng màu bám theo nhận diện lễ hội: vàng kim - đỏ son - xanh đêm
   ========================================================= */

:root{
  /* Xanh đêm — mặt hồ, bầu trời mùa thu */
  --dem:        #101A33;
  --dem-2:      #17244a;
  --dem-3:      #22335f;
  --dem-vien:   #2c3f6e;

  /* Vàng kim — ánh trăng, nhãn lồng */
  --kim:        #e8b44a;
  --kim-dam:    #c8942f;
  --kim-sang:   #ffdd9e;

  /* Đỏ son — đèn lồng, mái đình */
  --son:        #b33a2b;
  --son-sang:   #d9614f;

  /* Giấy trăng — nền các khối sáng */
  --trang:      #ebeef4;
  --trang-2:    #f6f8fb;
  --muc:        #16203a;
  --muc-nhat:   #4d5875;
  --vien:       #cfd6e4;

  --do-rong:    1180px;
  --bo:         6px;
  --bo-lon:     14px;

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

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--dem);
  color:var(--muc);
  font-family:var(--chu-than);
  font-size:17px;
  line-height:1.68;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }

a{ color:inherit; }

/* ---------- Tiêu đề ---------- */
h1,h2,h3,h4{
  font-family:var(--chu-tieu);
  font-weight:600;
  line-height:1.18;
  margin:0 0 .5em;
  letter-spacing:-.005em;
}
h1{ font-size:clamp(2.1rem,4.6vw,3.3rem); }
h2{ font-size:clamp(1.7rem,3.2vw,2.4rem); }
h3{ font-size:1.32rem; }
h4{ font-size:1.08rem; font-family:var(--chu-than); font-weight:600; }

p{ margin:0 0 1.05em; }
.van{ max-width:62ch; }
.van-rong{ max-width:74ch; }

.dan{ font-size:1.16rem; line-height:1.62; color:var(--muc-nhat); }

/* ---------- Khung ---------- */
.wrap{ width:100%; max-width:var(--do-rong); margin-inline:auto; padding-inline:22px; }

.khoi{ padding:76px 0; }
.khoi--hep{ padding:52px 0; }
.khoi--giay{ background:var(--trang); color:var(--muc); }
.khoi--giay-2{ background:var(--trang-2); color:var(--muc); }
.khoi--dem{ background:var(--dem); color:#dfe5f2; }
.khoi--dem-2{ background:var(--dem-2); color:#dfe5f2; }
.khoi--dem h1,.khoi--dem h2,.khoi--dem h3,
.khoi--dem-2 h1,.khoi--dem-2 h2,.khoi--dem-2 h3{ color:#fff; }
.khoi--dem .dan,.khoi--dem-2 .dan{ color:#a9b5d0; }

.dau-khoi{ margin-bottom:34px; }
.dau-khoi h2{ margin-bottom:.28em; }

/* Vạch phân đoạn: một sợi vàng ngắn, dùng thay cho nhãn chữ */
.vach{
  width:52px; height:2px; background:var(--kim);
  border:0; margin:0 0 22px;
}
.khoi--giay .vach,.khoi--giay-2 .vach{ background:var(--son); }

/* =========================================================
   THANH ĐIỀU HƯỚNG
   ========================================================= */
.dieu-huong{
  position:sticky; top:0; z-index:60;
  background:rgba(16,26,51,.94);
  backdrop-filter:saturate(140%) blur(9px);
  border-bottom:1px solid rgba(232,180,74,.22);
}
.dieu-huong__trong{
  display:flex; align-items:center; gap:20px;
  min-height:68px;
}
.hieu{ display:flex; align-items:center; gap:11px; text-decoration:none; flex:0 0 auto; }
.hieu__den{ width:26px; height:34px; flex:0 0 auto; }
.hieu__chu{ display:flex; flex-direction:column; line-height:1.12; }
.hieu__chu b{
  font-family:var(--chu-tieu); font-size:1.16rem; font-weight:600;
  color:#fff; letter-spacing:.01em;
}
.hieu__chu span{ font-size:.72rem; color:#8d9cbe; letter-spacing:.06em; }

.menu{ display:flex; align-items:center; gap:3px; margin-left:auto; }
.menu a{
  text-decoration:none; color:#c3cde6; font-size:.93rem;
  padding:9px 12px; border-radius:var(--bo);
  transition:color .16s, background-color .16s;
}
.menu a:hover{ color:#fff; background:rgba(255,255,255,.07); }
@media (max-width:1280px){ .menu a{ padding:9px 8px; font-size:.88rem; } }
.menu a[aria-current="page"]{ color:var(--kim-sang); }
.menu .menu__ht{
  color:var(--dem); background:var(--kim);
  font-weight:600; padding:9px 16px; margin-left:9px;
}
.menu .menu__ht:hover{ background:var(--kim-sang); color:var(--dem); }

.nut-menu{
  display:none; margin-left:auto; background:none; border:1px solid rgba(255,255,255,.3);
  color:#fff; width:42px; height:38px; border-radius:var(--bo); cursor:pointer;
  align-items:center; justify-content:center;
}
.nut-menu span{ display:block; width:18px; height:2px; background:#fff; position:relative; }
.nut-menu span::before,.nut-menu span::after{
  content:""; position:absolute; left:0; width:18px; height:2px; background:#fff;
}
.nut-menu span::before{ top:-6px; } .nut-menu span::after{ top:6px; }

/* =========================================================
   NÚT
   ========================================================= */
.nut{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--chu-than); font-size:.97rem; font-weight:600;
  padding:13px 24px; border-radius:var(--bo);
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:background-color .16s, color .16s, border-color .16s;
}
.nut--kim{ background:var(--kim); color:#231a05; }
.nut--kim:hover{ background:var(--kim-sang); }
.nut--son{ background:var(--son); color:#fff; }
.nut--son:hover{ background:var(--son-sang); }
.nut--vien{ border-color:rgba(255,255,255,.42); color:#fff; }
.nut--vien:hover{ border-color:var(--kim); color:var(--kim-sang); }
.nut--vien-muc{ border-color:var(--muc); color:var(--muc); }
.nut--vien-muc:hover{ background:var(--muc); color:#fff; }
.hang-nut{ display:flex; flex-wrap:wrap; gap:13px; }

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:3px solid var(--kim); outline-offset:2px; border-radius:3px;
}

/* =========================================================
   HERO — Con đường ánh sáng
   ========================================================= */
.hero{ position:relative; background:var(--dem); overflow:hidden; }
.hero__canh{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; pointer-events:none;
}
.hero__trong{
  position:relative; z-index:2;
  padding:106px 0 112px;
}
.hero__cot{ max-width:620px; }
.hero__ten{
  font-family:var(--chu-tieu);
  font-size:clamp(2.9rem,9.2vw,6rem);
  font-weight:500; line-height:.99; color:#fff;
  margin:0 0 20px; letter-spacing:-.02em;
}
.hero__noi{
  color:var(--kim); font-size:1rem; font-weight:500;
  margin:-6px 0 18px;
}
.hero__mo{ color:#b7c2dc; font-size:1.12rem; max-width:44ch; margin:0 0 30px; }

/* Bảng "tối nay" */
.toi-nay{
  display:inline-grid; grid-template-columns:auto 1fr; align-items:center;
  gap:0 18px; padding:15px 22px 15px 19px;
  border:1px solid var(--dem-vien); border-left:3px solid var(--kim);
  border-radius:var(--bo); background:rgba(23,36,74,.72);
  max-width:100%;
}
.toi-nay__cham{
  width:11px; height:11px; border-radius:50%; background:var(--kim);
  grid-row:1 / span 2; box-shadow:0 0 0 4px rgba(232,180,74,.18);
}
.toi-nay__cham.tat{ background:#6b7899; box-shadow:0 0 0 4px rgba(107,120,153,.16); }
.toi-nay__chinh{ color:#fff; font-weight:600; font-size:1.02rem; }
.toi-nay__phu{ color:#9aa8c8; font-size:.88rem; }

/* Dải lễ hội và đồng hồ đếm ngược */
.dai-le-hoi{
  background:var(--dem-2);
  border-top:1px solid rgba(232,180,74,.28);
  border-bottom:1px solid rgba(232,180,74,.28);
}
.dai-le-hoi__trong{
  display:grid; grid-template-columns:1fr auto auto;
  gap:16px 30px; align-items:center; padding:24px 22px;
}
.dai-le-hoi__ten b{ display:block; color:#fff; font-size:1.05rem; font-weight:600; margin-bottom:3px; }
.dai-le-hoi__ten span{ color:#9aa8c8; font-size:.88rem; }
.dong-ho{ display:flex; gap:9px; }
.o-gio{ min-width:62px; text-align:center; border:1px solid var(--dem-vien); border-radius:var(--bo); padding:11px 4px; background:rgba(16,26,51,.55); }
.o-gio b{ display:block; font-family:var(--chu-tieu); font-size:1.85rem; color:#fff; line-height:1; font-weight:500; }
.o-gio span{ font-size:.68rem; color:#8d9cbe; letter-spacing:.05em; }

/* =========================================================
   LỊCH TUẦN — dải 7 ngày
   ========================================================= */
.lich-tuan{ display:grid; grid-template-columns:repeat(7,1fr); gap:9px; }
.ngay{
  border:1px solid var(--vien); border-radius:var(--bo);
  padding:15px 11px; background:#fff; min-height:132px;
}
.ngay--mo{ border-color:var(--kim-dam); background:#fffaf0; }
.ngay--nay{ border-width:2px; border-color:var(--son); }
.ngay b{ display:block; font-size:.95rem; margin-bottom:2px; }
.ngay time{ display:block; font-size:.76rem; color:var(--muc-nhat); margin-bottom:10px; }
.ngay p{ font-size:.83rem; margin:0; color:var(--muc-nhat); line-height:1.45; }
.ngay--mo p{ color:var(--muc); }
.gio{ font-weight:600; color:var(--son); font-size:.86rem; display:block; margin-bottom:5px; }

/* =========================================================
   SƠ ĐỒ PHỐ
   ========================================================= */
.so-do{ display:grid; grid-template-columns:1.35fr .95fr; gap:34px; align-items:start; }
.so-do__ve{
  background:var(--dem-2); border-radius:var(--bo-lon); padding:14px;
  border:1px solid var(--dem-vien);
}
.so-do__ve svg{ width:100%; height:auto; display:block; }
.tuyen{ cursor:pointer; }
.tuyen__net{ transition:stroke .18s, stroke-width .18s; }
.tuyen:hover .tuyen__net,.tuyen[data-chon="1"] .tuyen__net{ stroke:var(--kim); stroke-width:11; }
.tuyen__chu{ font-family:var(--chu-than); font-size:11px; fill:#c3cde6; pointer-events:none; }
.tuyen:hover .tuyen__chu,.tuyen[data-chon="1"] .tuyen__chu{ fill:#fff; }

.bang-tuyen{ border-top:1px solid var(--vien); }
.bang-tuyen__muc{
  width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--vien);
  padding:17px 4px; cursor:pointer; font-family:inherit; font-size:1rem; color:var(--muc);
  display:flex; align-items:baseline; gap:12px;
}
.bang-tuyen__muc:hover{ background:rgba(179,58,43,.05); }
.bang-tuyen__muc[data-chon="1"]{ background:rgba(232,180,74,.14); }
.bang-tuyen__muc b{ flex:1; font-weight:600; }
.bang-tuyen__muc span{ font-size:.85rem; color:var(--muc-nhat); }
.tuyen-chi-tiet{
  border-left:3px solid var(--kim); padding:16px 0 16px 18px; margin-top:22px;
}
.tuyen-chi-tiet h3{ margin:0 0 8px; font-size:1.18rem; }
.tuyen-chi-tiet p{ margin:0 0 10px; font-size:.95rem; color:var(--muc-nhat); }
.the-hang{ display:flex; flex-wrap:wrap; gap:7px; }
.the-hang span{
  font-size:.79rem; padding:4px 11px; border-radius:99px;
  background:#fff; border:1px solid var(--vien); color:var(--muc-nhat);
}

/* =========================================================
   SÁU ĐÊM LỄ HỘI — trục dọc (đúng là một chuỗi nên đánh số)
   ========================================================= */
.chuoi-dem{ list-style:none; margin:0; padding:0; }
.dem-le{
  display:grid; grid-template-columns:74px minmax(0,1fr) 272px; gap:24px;
  align-items:center; padding:22px 0; border-top:1px solid var(--dem-vien);
}
.dem-le:last-child{ border-bottom:1px solid var(--dem-vien); }
.dem-le--chinh{ background:rgba(232,180,74,.07); }
.dem-le__so{ text-align:right; }
.dem-le__so b{
  display:block; font-family:var(--chu-tieu); font-size:2rem; color:var(--kim);
  line-height:1; font-weight:500;
}
.dem-le__so span{ font-size:.76rem; color:#8d9cbe; }
.dem-le__ten{ color:#fff; font-family:var(--chu-tieu); font-size:1.34rem; margin:0 0 5px; }
.dem-le__mo{ color:#a9b5d0; font-size:.94rem; margin:0; max-width:62ch; }
.nhan-chinh{
  display:inline-block; margin-left:10px; font-size:.72rem; font-weight:600;
  color:#231a05; background:var(--kim); padding:3px 9px; border-radius:99px;
  vertical-align:middle; font-family:var(--chu-than);
}

/* =========================================================
   QUY TRÌNH ĐĂNG KÝ — 5 bước (chuỗi có thứ tự)
   ========================================================= */
.buoc{ counter-reset:b; display:grid; gap:0; }
.buoc__muc{
  counter-increment:b; display:grid; grid-template-columns:46px 1fr; gap:20px;
  padding:22px 0; border-bottom:1px solid var(--vien);
}
.buoc__muc::before{
  content:counter(b,decimal-leading-zero);
  font-family:var(--chu-tieu); font-size:1.35rem; color:var(--son); font-weight:600;
}
.buoc__muc h3{ font-size:1.1rem; margin:0 0 5px; font-family:var(--chu-than); font-weight:600; }
.buoc__muc p{ margin:0; font-size:.94rem; color:var(--muc-nhat); }

/* =========================================================
   BIỂU MẪU
   ========================================================= */
.bieu-mau{ display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; }
.o{ display:flex; flex-direction:column; gap:6px; }
.o--rong{ grid-column:1 / -1; }
.o label{ font-size:.87rem; font-weight:600; }
.o small{ font-size:.79rem; color:var(--muc-nhat); font-weight:400; }
.o input,.o select,.o textarea{
  font-family:inherit; font-size:.97rem; color:var(--muc);
  padding:11px 13px; border:1px solid var(--vien); border-radius:var(--bo);
  background:#fff; width:100%;
}
.o input:focus,.o select:focus,.o textarea:focus{ border-color:var(--kim-dam); }
.o textarea{ min-height:112px; resize:vertical; }
.bat-buoc{ color:var(--son); }
.hop-luu-y{
  border:1px solid var(--vien); border-left:3px solid var(--son);
  background:#fff; padding:17px 20px; border-radius:var(--bo);
  font-size:.92rem; color:var(--muc-nhat);
}
.hop-luu-y strong{ color:var(--muc); }
.hop-luu-y ul{ margin:8px 0 0; padding-left:19px; }
.hop-luu-y li{ margin-bottom:5px; }

/* =========================================================
   PHÂN HỆ PHẦN MỀM
   ========================================================= */
.luoi-phan-he{ display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:1px; background:var(--dem-vien); border:1px solid var(--dem-vien); border-radius:var(--bo-lon); overflow:hidden; }
.phan-he{ background:var(--dem-2); padding:20px 20px 22px; }
.phan-he b{ display:block; color:#fff; font-size:.99rem; margin-bottom:5px; }
.phan-he p{ margin:0; font-size:.85rem; color:#93a1c2; line-height:1.5; }
.phan-he__dau{ display:flex; align-items:center; gap:9px; margin-bottom:10px; color:var(--kim); }
.phan-he__icon{ width:22px; height:22px; flex:0 0 auto; }
.phan-he__so{ font-family:var(--chu-tieu); font-size:.86rem; }

.cua-ht{
  display:grid; grid-template-columns:1.1fr .9fr; gap:38px; align-items:center;
  border:1px solid rgba(232,180,74,.32); border-radius:var(--bo-lon);
  padding:38px; background:linear-gradient(135deg,rgba(35,27,10,.42),rgba(23,36,74,.42));
}
.cua-ht h2{ margin-top:0; }
.danh-sach-tick{ list-style:none; margin:0 0 24px; padding:0; }
.danh-sach-tick li{ position:relative; padding-left:26px; margin-bottom:9px; font-size:.95rem; color:#b7c2dc; }
.danh-sach-tick li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:9px; height:9px; border-radius:50%; border:2px solid var(--kim);
}

/* =========================================================
   TIN — danh sách có gạch, không dùng thẻ hộp
   ========================================================= */
.tin{ list-style:none; margin:0; padding:0; border-top:1px solid var(--vien); }
.tin li{ border-bottom:1px solid var(--vien); }
.tin a{
  display:grid; grid-template-columns:104px 1fr; gap:22px;
  padding:21px 6px; text-decoration:none; color:inherit;
  transition:background-color .16s;
}
.tin a:hover{ background:rgba(232,180,74,.13); }
.tin time{ font-size:.83rem; color:var(--muc-nhat); padding-top:3px; }
.tin h3{ font-size:1.09rem; margin:0 0 4px; font-family:var(--chu-than); font-weight:600; }
.tin p{ margin:0; font-size:.91rem; color:var(--muc-nhat); }
.loai{ font-size:.74rem; color:var(--son); font-weight:600; display:block; margin-top:6px; }


/* =========================================================
   TRANH MINH HOẠ VÀ KHUNG ẢNH
   ========================================================= */
.tranh{ margin:0; border-radius:var(--bo-lon); overflow:hidden; background:var(--dem-2); line-height:0; }
.tranh__ve{ width:100%; height:auto; display:block; }
.tranh__chu{
  line-height:1.5; font-size:.82rem; color:#8d9cbe;
  padding:11px 16px; background:var(--dem-2);
}
.khoi--giay .tranh__chu,.khoi--giay-2 .tranh__chu{ background:#e2e7f0; color:var(--muc-nhat); }
.tranh--rong{ margin-bottom:34px; }

/* Hình ki-ốt vẽ nét trên nền giấy */
.luoi-kiot{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.the-kiot{ background:#fff; border:1px solid var(--vien); border-radius:var(--bo-lon); padding:18px 20px 22px; }
.ve-kiot{ width:100%; height:auto; display:block; margin-bottom:12px; }
.the-kiot b{ display:block; font-size:1.02rem; margin-bottom:5px; }
.the-kiot p{ margin:0; font-size:.89rem; color:var(--muc-nhat); line-height:1.55; }

/* Khung ảnh chụp — tự hiện nền thay thế khi chưa có tệp ảnh */
.anh{ position:relative; margin:0; border-radius:var(--bo); overflow:hidden; display:block; }
.anh::before{ content:""; display:block; padding-top:66.7%; }
.anh--ngang::before{ padding-top:56.25%; }
.anh--vuong::before{ padding-top:100%; }
.anh--cao::before{ padding-top:128%; }
.anh img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
.anh--thieu img{ display:none; }
.anh--thieu{
  background:
    radial-gradient(circle at 24% 28%, rgba(232,180,74,.26), transparent 46%),
    radial-gradient(circle at 71% 66%, rgba(179,58,43,.2), transparent 48%),
    linear-gradient(158deg,#1d2c56,#0e1a36);
}
.anh--thieu::after{
  content:"Chỗ đặt ảnh · " attr(data-tep);
  position:absolute; left:12px; right:12px; top:50%; transform:translateY(-50%);
  text-align:center; font-size:.76rem; line-height:1.45; color:#c3cde6;
  font-family:var(--chu-than);
}
.anh figcaption{ display:none; }

/* Dải ảnh trang chủ */
.dai-anh{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr; gap:11px; }
.dai-anh > .anh:first-child{ grid-column:span 2; grid-row:span 2; }
.dai-anh > .anh::before{ padding-top:100%; }
.dai-anh > .anh:first-child::before{ padding-top:calc(50% - 5.5px); }

/* Thư viện ảnh */
.luoi-anh{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }
.luoi-anh figure{ margin:0; }
.luoi-anh .anh{ margin-bottom:8px; }
.luoi-anh p{ margin:0; font-size:.85rem; color:var(--muc-nhat); }

/* Thông báo có ảnh thu nhỏ */
.tin--anh a{ grid-template-columns:96px 168px 1fr; }
.tin--anh .anh::before{ padding-top:64%; }

/* =========================================================
   SỐ LIỆU — dòng chữ, không phải thẻ số lớn
   ========================================================= */
.so-lieu{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.so-lieu li{
  display:grid; grid-template-columns:88px 1fr; gap:20px; align-items:baseline;
  padding:14px 0; border-bottom:1px solid var(--vien);
}
.so-lieu b{ font-family:var(--chu-tieu); font-size:1.7rem; color:var(--son); font-weight:500; text-align:right; }
.so-lieu span{ font-size:.94rem; color:var(--muc-nhat); }

/* =========================================================
   NỘI QUY
   ========================================================= */
.hai-cot{ display:grid; grid-template-columns:1fr 1fr; gap:38px; }
.quy{ list-style:none; margin:0; padding:0; }
.quy li{ padding:12px 0 12px 30px; border-bottom:1px solid var(--vien); position:relative; font-size:.96rem; }
.quy--nen li::before{
  content:""; position:absolute; left:4px; top:1.28em; width:11px; height:5px;
  border-left:2px solid #1e7d5e; border-bottom:2px solid #1e7d5e; transform:rotate(-45deg);
}
.quy--khong li::before{
  content:""; position:absolute; left:4px; top:1.05em; width:12px; height:12px;
  border-radius:50%; border:2px solid var(--son);
}
.quy--khong li::after{
  content:""; position:absolute; left:6px; top:1.44em; width:12px; height:2px;
  background:var(--son); transform:rotate(-45deg);
}

details.hoi{ border-bottom:1px solid var(--vien); }
details.hoi summary{
  cursor:pointer; padding:17px 34px 17px 2px; font-weight:600; font-size:1rem;
  list-style:none; position:relative;
}
details.hoi summary::-webkit-details-marker{ display:none; }
details.hoi summary::after{
  content:""; position:absolute; right:8px; top:1.55em;
  width:9px; height:9px; border-right:2px solid var(--son); border-bottom:2px solid var(--son);
  transform:rotate(45deg); transition:transform .18s;
}
details.hoi[open] summary::after{ transform:rotate(-135deg); }
details.hoi .noi{ padding:0 30px 19px 2px; font-size:.95rem; color:var(--muc-nhat); }
details.hoi .noi p:last-child{ margin-bottom:0; }

/* =========================================================
   LIÊN HỆ
   ========================================================= */
.lien-he{ display:grid; grid-template-columns:1fr 1fr; gap:38px; }
.dong-lh{ display:grid; grid-template-columns:130px 1fr; gap:18px; padding:14px 0; border-bottom:1px solid var(--vien); font-size:.96rem; }
.dong-lh b{ font-weight:600; }

/* =========================================================
   CHÂN TRANG
   ========================================================= */
.chan{ background:#0a1224; color:#8d9cbe; padding:58px 0 28px; font-size:.91rem; }
.chan__luoi{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:34px; padding-bottom:34px; border-bottom:1px solid #1d2947; }
.chan h4{ color:#fff; font-size:.95rem; margin:0 0 13px; }
.chan ul{ list-style:none; margin:0; padding:0; }
.chan li{ margin-bottom:8px; }
.chan a{ text-decoration:none; }
.chan a:hover{ color:var(--kim-sang); text-decoration:underline; }
.chan__cuoi{ padding-top:22px; display:flex; flex-wrap:wrap; gap:14px 26px; justify-content:space-between; font-size:.84rem; }
.chan__ht{
  display:inline-flex; align-items:center; gap:9px; margin-top:14px;
  border:1px solid rgba(232,180,74,.4); color:var(--kim-sang);
  padding:9px 15px; border-radius:var(--bo); text-decoration:none; font-size:.87rem;
}
.chan__ht:hover{ background:rgba(232,180,74,.13); text-decoration:none; }

/* =========================================================
   TRANG ĐĂNG NHẬP
   ========================================================= */
.dn{ min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; background:var(--dem); }
.dn__trai{ position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:44px; }
.dn__trai svg.hero__canh{ opacity:.85; }
.dn__noi{ position:relative; z-index:2; max-width:44ch; }
.dn__noi h1{ color:#fff; font-size:2.5rem; margin-bottom:14px; }
.dn__noi p{ color:#a9b5d0; }
.dn__phai{ background:var(--trang); display:flex; align-items:center; justify-content:center; padding:44px 30px; }
.dn__hop{ width:100%; max-width:392px; }
.dn__hop h2{ font-size:1.6rem; margin-bottom:4px; }
.dn__hop > p{ color:var(--muc-nhat); font-size:.94rem; margin-bottom:26px; }
.dn__hop .o{ margin-bottom:15px; }
.dn__bao{
  display:none; padding:12px 15px; border-radius:var(--bo); font-size:.9rem; margin-bottom:16px;
  border:1px solid #e3b7b1; background:#fbeeec; color:#8d2a1e;
}
.dn__bao.hien{ display:block; }
.dn__phu{ margin-top:22px; font-size:.86rem; color:var(--muc-nhat); }

/* =========================================================
   NGOẠI LỆ MÀN HÌNH NHỎ
   ========================================================= */
@media (max-width:1000px){
  .so-do,.hai-cot,.lien-he,.cua-ht{ grid-template-columns:1fr; }
  .dem-le{ grid-template-columns:74px minmax(0,1fr); }
  .dem-le .tranh{ grid-column:1 / -1; max-width:420px; }
  .luoi-kiot{ grid-template-columns:1fr; max-width:420px; }
  .tin--anh a{ grid-template-columns:96px 140px 1fr; }
  .dai-le-hoi__trong{ grid-template-columns:1fr; justify-items:start; }
  .chan__luoi{ grid-template-columns:1fr 1fr; }
  .lich-tuan{ grid-template-columns:repeat(4,1fr); }
  .dn{ grid-template-columns:1fr; }
  .dn__trai{ min-height:290px; padding:32px; }
}
@media (max-width:1180px){
  .nut-menu{ display:inline-flex; }
  .menu{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--dem-2); border-bottom:1px solid var(--dem-vien);
    padding:10px 14px 16px; display:none;
  }
  .menu.mo{ display:flex; }
  .menu a{ padding:13px 10px; border-bottom:1px solid rgba(255,255,255,.07); border-radius:0; }
  .menu .menu__ht{ margin:12px 0 0; border-radius:var(--bo); justify-content:center; text-align:center; }
}
@media (max-width:680px){
  body{ font-size:16px; }
  .khoi{ padding:52px 0; }
  .hero__trong{ padding:64px 0 74px; }
  .lich-tuan{ grid-template-columns:repeat(2,1fr); }
  .bieu-mau{ grid-template-columns:1fr; }
  .chan__luoi{ grid-template-columns:1fr; gap:26px; }
  .dem-le{ grid-template-columns:56px 1fr; gap:16px; }
  .tin a,.tin--anh a{ grid-template-columns:1fr; gap:9px; }
  .dai-anh{ grid-template-columns:repeat(2,1fr); }
  .dai-anh > .anh:first-child{ grid-column:span 2; grid-row:auto; }
  .dai-anh > .anh:first-child::before{ padding-top:62%; }
  .so-lieu li{ grid-template-columns:74px 1fr; }
  .dong-lh{ grid-template-columns:1fr; gap:2px; }
  .cua-ht{ padding:26px 22px; }
}

/* =========================================================
   MỘT KHOẢNH KHẮC CHUYỂN ĐỘNG: đèn lồng sáng dần khi mở trang
   ========================================================= */
.den-hero{ opacity:0; animation:len 900ms ease-out forwards; }
@keyframes len{ to{ opacity:1; } }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .den-hero{ opacity:1; animation:none; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

@media print{
  .dieu-huong,.nut-menu,.hang-nut{ display:none; }
  body{ background:#fff; color:#000; font-size:12pt; }
  .khoi--dem,.khoi--dem-2{ background:#fff; color:#000; }
}

/* =========================================================
   BẢN TỔNG MẶT BẰNG
   ========================================================= */
.ban-ve{
  display:block; position:relative; margin:0 0 26px;
  border:1px solid var(--vien); border-radius:var(--bo-lon);
  background:#fff; padding:10px; overflow:hidden;
}
.ban-ve img{ width:100%; height:auto; display:block; border-radius:var(--bo); }
.ban-ve__phong{
  position:absolute; right:20px; bottom:20px;
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(20,31,66,.92); color:#fff; font-size:.83rem; font-weight:600;
  padding:9px 15px; border-radius:99px;
}
.ban-ve:hover .ban-ve__phong{ background:var(--son); }
.ban-ve svg{ width:15px; height:15px; }

.chu-giai{ list-style:none; margin:0; padding:0; }
.chu-giai li{
  display:grid; grid-template-columns:26px 34px 1fr; gap:12px; align-items:start;
  padding:9px 0; border-bottom:1px solid var(--vien); font-size:.92rem;
}
.chu-giai li:last-child{ border-bottom:0; }
.chu-giai .so{
  width:22px; height:22px; border-radius:50%; border:1.5px solid #3ab54a;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.74rem; font-weight:700; color:var(--muc);
}
.chu-giai .mau{ display:block; height:11px; border-radius:2px; margin-top:5px; }
.chu-giai .mau--manh{ height:15px; margin-top:3px; }

.so-lieu-ve{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--vien);
  border:1px solid var(--vien); border-radius:var(--bo-lon); overflow:hidden; margin-bottom:22px; }
.so-lieu-ve div{ background:#fff; padding:16px 18px; }
.so-lieu-ve b{ display:block; font-family:var(--chu-tieu); font-size:1.5rem; color:var(--son);
  font-weight:500; line-height:1.15; }
.so-lieu-ve span{ font-size:.84rem; color:var(--muc-nhat); }

/* =========================================================
   HOTLINE, FACEBOOK, LƯỢT TRUY CẬP
   ========================================================= */
.noi-nhanh{
  position:fixed; right:16px; bottom:16px; z-index:70;
  display:flex; flex-direction:column; gap:10px;
}
.noi-nhanh a{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 16px; border-radius:99px; text-decoration:none;
  font-size:.9rem; font-weight:600; color:#fff;
  box-shadow:0 6px 20px rgba(8,14,30,.34);
}
.noi-nhanh svg{ width:18px; height:18px; flex:0 0 auto; }
.noi-nhanh .goi{ background:var(--son); }
.noi-nhanh .goi:hover{ background:var(--son-sang); }
.noi-nhanh .fb{ background:#1877f2; }
.noi-nhanh .fb:hover{ background:#3b8bf5; }
@media (max-width:680px){
  .noi-nhanh{ right:12px; bottom:12px; }
  .noi-nhanh a{ padding:12px; }
  .noi-nhanh .chu{ display:none; }
}
@media print{ .noi-nhanh{ display:none; } }

.hotline-chan{ color:var(--kim-sang); font-weight:600; text-decoration:none; }
.hotline-chan:hover{ text-decoration:underline; }

.dem-luot{ display:inline-flex; align-items:center; gap:14px; flex-wrap:wrap; }
.dem-luot b{ color:var(--kim-sang); font-variant-numeric:tabular-nums; }

/* Chế độ vận hành: ảnh chưa có thì ẩn hẳn thay vì hiện ô chờ */
.anh--an{ display:none !important; }

/* Mục sự kiện đã diễn ra: giống dòng tin nhưng không bấm được */
.tin .da-qua{ display:grid; grid-template-columns:200px 1fr; gap:22px; padding:21px 6px; }
@media (max-width:680px){ .tin .da-qua{ grid-template-columns:1fr; gap:6px; } }

/* Áp-phích sự kiện */
.ap-phich{ margin:26px 0 8px; max-width:760px; }
.ap-phich .anh{ border-radius:var(--bo-lon); overflow:hidden; }

/* Khung tranh từng đêm khi đã có ảnh chụp thật */
.tranh--co-anh{ background:none; }
.tranh--co-anh > .anh{ border-radius:var(--bo-lon); overflow:hidden; }
.tranh__du-phong[hidden]{ display:none; }
.tranh__du-phong svg{ width:100%; height:auto; display:block; }

/* =========================================================
   NỀN ĐỘNG CHO KHỐI TIÊU ĐỀ
   ========================================================= */
.khoi--canh{ position:relative; overflow:hidden; padding-top:92px; padding-bottom:104px; }
.khoi--canh > .wrap{ position:relative; z-index:2; }
.nen-dong{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; pointer-events:none; user-select:none;
}

/* Đèn lồng lay theo gió */
.nd-lay{
  /* fill-box: gốc xoay tính theo hộp bao của chính chiếc đèn,
     top center chính là điểm treo trên dây */
  transform-box:fill-box; transform-origin:top center;
  animation-name:nd-lay; animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  will-change:transform;
}
@keyframes nd-lay{
  0%,100%{ transform:rotate(-3.2deg); }
  50%    { transform:rotate(3.2deg); }
}

/* Quầng sáng thở nhẹ */
.nd-tho{
  animation-name:nd-tho; animation-duration:6s;
  animation-timing-function:ease-in-out; animation-iteration-count:infinite;
}
@keyframes nd-tho{
  0%,100%{ opacity:.42; }
  50%    { opacity:.86; }
}

/* Đom đóm bay lơ lửng */
.nd-dom{
  animation-name:nd-dom; animation-timing-function:ease-in-out;
  animation-iteration-count:infinite; opacity:0;
}
@keyframes nd-dom{
  0%     { opacity:0;   transform:translate(0,0); }
  18%    { opacity:.85; }
  50%    { opacity:.5;  transform:translate(16px,-34px); }
  78%    { opacity:.75; }
  100%   { opacity:0;   transform:translate(-6px,-66px); }
}

/* Vệt sáng trượt trên mặt nước */
.nd-song{
  animation-name:nd-song; animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}
@keyframes nd-song{
  0%,100%{ transform:translateX(-7px); opacity:.28; }
  50%    { transform:translateX(7px);  opacity:.72; }
}

@media (max-width:680px){
  .khoi--canh{ padding-top:64px; padding-bottom:72px; }
}

/* Tôn trọng thiết lập giảm chuyển động của hệ điều hành */
@media (prefers-reduced-motion:reduce){
  .nd-lay,.nd-tho,.nd-dom,.nd-song,.nd-may,.nd-sao{ animation:none !important; }
  .nd-dom{ opacity:.6; }
}

/* =========================================================
   NÚT XEM ẢNH KHÁC TRONG KHO ẢNH CỦA MỘT ĐÊM
   ========================================================= */
.tranh--co-anh{ position:relative; }
.tranh__doi{
  position:absolute; right:10px; bottom:10px;
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(16,26,51,.84); color:#fff;
  border:1px solid rgba(255,255,255,.24); border-radius:99px;
  padding:7px 13px; cursor:pointer;
  font-family:var(--chu-than); font-size:.78rem; font-weight:600; line-height:1;
  backdrop-filter:blur(4px);
  transition:background-color .16s, border-color .16s;
}
.tranh__doi::before{
  content:""; width:13px; height:13px; flex:0 0 auto; background:currentColor;
  -webkit-mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.6M20 3v5h-5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.6M20 3v5h-5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.tranh__doi:hover{ background:var(--son); border-color:var(--son); }

/* Dải mây mỏng trôi nhẹ qua lại */
.nd-may{
  animation-name:nd-may; animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}
@keyframes nd-may{
  0%,100%{ transform:translateX(-42px); }
  50%    { transform:translateX(42px); }
}

/* Sao lấp lánh */
.nd-sao{
  animation-name:nd-sao; animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}
@keyframes nd-sao{
  0%,100%{ opacity:.22; }
  50%    { opacity:.9; }
}

/* =========================================================
   HIỆU ỨNG KHI CUỘN TỚI
   ========================================================= */
/* Vạch vàng vẽ ra từ trái */
.vach--cho{ transform:scaleX(0); transform-origin:left center; }
.vach--ve{
  transform:scaleX(1);
  transition:transform .6s cubic-bezier(.22,.8,.3,1);
}

/* Số liệu đang đếm giữ chỗ để chữ không nhảy */
.so-lieu b,.so-lieu-ve b{ font-variant-numeric:tabular-nums; }

/* Chấm trạng thái khi phố đang mở cửa */
.toi-nay__cham:not(.tat){
  animation:cham-tho 2.6s ease-in-out infinite;
}
@keyframes cham-tho{
  0%,100%{ box-shadow:0 0 0 4px rgba(232,180,74,.18); }
  50%    { box-shadow:0 0 0 9px rgba(232,180,74,.05); }
}

@media (prefers-reduced-motion:reduce){
  .vach--cho{ transform:none; }
  .toi-nay__cham:not(.tat){ animation:none; }
}

/* Công tắc tắt toàn bộ chuyển động, đặt trong assets/du-lieu.js */
.khong-chuyen-dong .nd-lay,
.khong-chuyen-dong .nd-tho,
.khong-chuyen-dong .nd-dom,
.khong-chuyen-dong .nd-song,
.khong-chuyen-dong .nd-may,
.khong-chuyen-dong .nd-sao,
.khong-chuyen-dong .den-hero,
.khong-chuyen-dong .toi-nay__cham{ animation:none !important; }
.khong-chuyen-dong .den-hero{ opacity:1; }
.khong-chuyen-dong .nd-dom{ opacity:.6; }