/* ═══ DA AN LẠC THÔN v2 — "làng về đêm bên bếp lửa" (Họa Sĩ đúc lại 22/07 sau chấm 1 điểm) ═══
   Luật 1-màu-1-nghĩa: VÀNG = danh dự TĨNH · HỔ PHÁCH = nhịp sống ĐỘNG · đỏ chỉ cảnh báo.
   Chữ TO-ĐẬM-RÕ: không chữ nào dưới 12px · nhãn ≥13px đậm · chữ luôn trên overlay. */

/* Mặc định = ☀️ KEM (Hùng chấm 22/07: kem 7 điểm > tím 5) — 🌙 đêm là lựa chọn gạt tay. */
:root[data-theme="dem"] {
  --nen: #0E0A1F; --nen2: #1A1238; --nen3: #241B4C; --vien: #352960;
  --vang: #FFD700; --vang2: #C9A400; --chu: #F5F0FF; --chu2: #CDC5EF;
  --lua: #E8843C; --do: #B23A2E; --nut-chu: #0E0A1F;
  --bong: rgba(0,0,0,.5); --quang-vang: rgba(255,215,0,.28); --quang-lua: rgba(232,132,60,.3);
  --troi: radial-gradient(1100px 480px at 82% -8%, rgba(255,215,0,.07), transparent 60%),
          radial-gradient(900px 480px at -8% 108%, rgba(232,132,60,.08), transparent 60%),
          linear-gradient(180deg, #0B081A, #0E0A1F 40%);
}
:root, :root[data-theme="ngay"] {
  /* Vàng đồng cổ #7E5F00 + cam đất nung #A64B10 — máy đo tương phản 22/07 bắt
     #A87E00 (3.19:1) và #C05E1D (3.71:1) rớt chuẩn 4.5:1 trên nền kem → hạ tông đậm. */
  --nen: #F5EDDA; --nen2: #FFFFFF; --nen3: #F0E6CE; --vien: #D9CBA8;
  --vang: #7E5F00; --vang2: #5F4700; --chu: #2B1D54; --chu2: #4A3A7A;
  --lua: #A64B10; --do: #B23A2E; --nut-chu: #FFFFFF;
  --bong: rgba(43,29,84,.14); --quang-vang: rgba(126,95,0,.22); --quang-lua: rgba(166,75,16,.22);
  --troi: radial-gradient(1100px 480px at 82% -8%, rgba(126,95,0,.08), transparent 60%),
          radial-gradient(900px 480px at -8% 108%, rgba(166,75,16,.08), transparent 60%),
          linear-gradient(180deg, #F8F1E2, #F5EDDA 40%);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--troi); background-attachment: fixed; color: var(--chu);
  font-family: 'Be Vietnam Pro', 'Segoe UI', system-ui, sans-serif;
  font-size: 16px; line-height: 1.6; min-height: 100vh;
  display: flex; flex-direction: column;
}
.khung { width: 100%; max-width: 700px; margin: 0 auto; padding: 20px 14px 70px; flex: 1; }
a { color: var(--vang); text-decoration: none; font-weight: 700; }
a:hover { text-decoration: underline; }
h1 { font-size: 26px; font-weight: 900; color: var(--vang); line-height: 1.3; margin-bottom: 10px; }
h2 { font-size: 20px; font-weight: 900; color: var(--vang); margin: 26px 0 10px; }
h3 { font-size: 16px; font-weight: 800; margin: 14px 0 6px; }
p { margin-bottom: 10px; }

/* ── thanh trên: mái đình của làng ── */
.bar {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 14px;
  padding: 10px 18px;
  background: linear-gradient(180deg, var(--nen2), color-mix(in srgb, var(--nen2) 82%, var(--nen)));
  border-bottom: 1px solid var(--vien); backdrop-filter: blur(8px);
}
.wordmark { font-size: 20px; font-weight: 900; color: var(--vang); white-space: nowrap; letter-spacing: .3px; }
.wordmark .den-nho { filter: drop-shadow(0 0 7px rgba(232,132,60,.65)); }
.bar-links { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.bar-links a {
  display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 11px;
  color: var(--chu2); font-size: 14.5px; font-weight: 800;
}
.bar-links a:hover { background: var(--nen3); color: var(--chu); text-decoration: none; }
.bar-links a.dang { background: linear-gradient(90deg, rgba(255,215,0,.14), rgba(255,215,0,.03)); color: var(--vang); }
.bar-nav { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.bar-nav > a { font-size: 20px; }
.nut-chuong, .nut-theme {
  position: relative; background: none; border: none; font-size: 20px; cursor: pointer;
  color: var(--chu); padding: 2px;
}
.cham-chuong {
  position: absolute; top: -5px; right: -8px; background: var(--lua); color: #fff;
  font-size: 12px; font-weight: 800; border-radius: 9px; padding: 0 5px; line-height: 1.45;
  box-shadow: 0 0 8px var(--quang-lua);
}
.bar-avatar { display: flex; }
.avatar { border-radius: 50%; object-fit: cover; border: 2px solid var(--vien); display: inline-flex; flex: 0 0 auto; }
.avatar-chu { background: linear-gradient(135deg, var(--vang), var(--vang2)); color: var(--nut-chu); align-items: center; justify-content: center; font-weight: 900; }

/* hộp chuông */
.hop-chuong {
  position: absolute; right: 12px; top: 54px; width: min(350px, calc(100vw - 20px));
  background: var(--nen2); border: 1px solid var(--vien); border-radius: 16px;
  box-shadow: 0 16px 44px var(--bong); max-height: 60vh; overflow-y: auto; padding: 8px;
}
.hop-chuong.an { display: none; }
.dong-chuong { padding: 10px 11px; border-bottom: 1px solid var(--vien); font-size: 14px; }
.dong-chuong:last-child { border-bottom: none; }
.dong-chuong.moi { background: var(--nen3); border-radius: 10px; }
.dong-chuong .luc { font-size: 12px; color: var(--chu2); font-weight: 600; }

/* ── BỐ CỤC SÂN: desktop 2 cột (bảng tin + rail làng) ── */
.bo-cuc {
  width: 100%; max-width: 1060px; margin: 0 auto; padding: 20px 16px 70px; flex: 1;
  display: grid; grid-template-columns: minmax(0, 660px) 320px; gap: 22px; justify-content: center;
  align-items: start;
}
.rail { position: sticky; top: 68px; display: flex; flex-direction: column; gap: 14px; }
.chi-mobile { display: none; }
@media (max-width: 1020px) {
  .bo-cuc { grid-template-columns: minmax(0, 700px); }
  .rail { display: none; }
  .chi-mobile { display: block; }
  .bar-links { display: none; }
}

/* ── thẻ / khối ── */
.the {
  background: linear-gradient(165deg, var(--nen2), color-mix(in srgb, var(--nen2) 78%, var(--nen)));
  border: 1px solid var(--vien); border-radius: 16px; padding: 15px; margin-bottom: 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 10px 26px rgba(0,0,0,.16);
}
.rail .the { margin-bottom: 0; }
.the-nhip { border-left: 4px solid var(--lua); }
.the-ghim { border-color: var(--vang); box-shadow: 0 0 18px var(--quang-vang); }
.nhan { font-size: 13px; font-weight: 800; color: var(--chu2); text-transform: uppercase; letter-spacing: .5px; }
.nhan-nhip { color: var(--lua); }
.chu-phu { font-size: 13px; color: var(--chu2); font-weight: 600; }
.tieu-de-the { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 900; color: var(--vang); margin-bottom: 10px; letter-spacing: .2px; }

/* ── nút ── */
.nut {
  display: inline-block; border: none; border-radius: 11px; padding: 11px 18px;
  font-family: inherit; font-weight: 800; font-size: 15px; cursor: pointer; line-height: 1.3;
  transition: transform .08s, box-shadow .12s;
}
.nut:hover { transform: translateY(-1px); }
.nut-vang { background: linear-gradient(135deg, var(--vang), var(--vang2)); color: var(--nut-chu); box-shadow: 0 4px 16px rgba(255,215,0,.2); }
.nut-vien { background: transparent; color: var(--vang); border: 2px solid var(--vang); }
.nut-lua { background: linear-gradient(135deg, var(--lua), color-mix(in srgb, var(--lua) 70%, #B23A2E)); color: #fff; box-shadow: 0 4px 16px rgba(232,132,60,.28); }
.nut-nho { padding: 6px 12px; font-size: 13px; border-radius: 9px; }
.nut-mo { background: none; border: none; color: var(--chu2); font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.nut-mo:hover { color: var(--chu); }
.nut:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ── form ── */
input, textarea, select {
  width: 100%; background: var(--nen3); border: 1.5px solid var(--vien); border-radius: 11px;
  color: var(--chu); font-family: inherit; font-size: 15px; font-weight: 600; padding: 11px 12px;
}
input:focus, textarea:focus { outline: 2px solid var(--vang); border-color: var(--vang); }
textarea { min-height: 96px; resize: vertical; }
label { display: block; font-size: 13px; font-weight: 800; color: var(--chu2); margin: 12px 0 5px; }
.loi { color: #E8776B; font-weight: 700; font-size: 14px; margin-top: 8px; }
.ok-nho { color: var(--lua); font-weight: 700; font-size: 14px; margin-top: 8px; }

/* ── 🏮 DẢI ĐÈN LÀNG — lồng đèn thật sự ── */
.dai-den { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px; margin-top: 10px; }
.den2 {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px 7px;
  background: var(--nen3); border: 1px solid var(--vien); border-radius: 13px; min-width: 0;
}
.den2:hover { text-decoration: none; border-color: var(--chu2); }
.den2 .den-anh { font-size: 24px; line-height: 1; opacity: .3; }
.den2 .den-ten { font-size: 12px; font-weight: 800; color: var(--chu2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.den2.sang { border-color: var(--lua); background: linear-gradient(180deg, rgba(232,132,60,.12), var(--nen3)); box-shadow: 0 0 16px var(--quang-lua); }
.den2.sang .den-anh { opacity: 1; filter: drop-shadow(0 0 8px rgba(232,132,60,.8)); }
.den2.sang .den-ten { color: var(--lua); }
.sang-den-dong { font-size: 15px; font-weight: 800; }
.sang-den-dong b { color: var(--lua); }

/* ── bảng tin ── */
.moc-ngay { display: flex; align-items: center; gap: 12px; margin: 20px 0 12px; }
.moc-ngay::before, .moc-ngay::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--vien)); }
.moc-ngay::after { background: linear-gradient(90deg, var(--vien), transparent); }
.moc-ngay span {
  font-size: 13px; font-weight: 800; color: var(--chu2); background: var(--nen2);
  border: 1px solid var(--vien); border-radius: 20px; padding: 4px 14px; white-space: nowrap;
}
.vach-day { text-align: center; color: var(--chu2); font-size: 14px; font-weight: 700; padding: 24px 0 10px; }
.bai-dau { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; }
.bai-dau .thong-tin { flex: 1; min-width: 0; }
.ten-tv { color: var(--chu); font-size: 15.5px; }
.tich-vang { color: var(--vang); font-weight: 900; font-size: 14px; }
.bai-ruot { white-space: pre-wrap; word-wrap: break-word; font-size: 15.5px; }
.bai-anh { max-width: 100%; border-radius: 12px; margin-top: 10px; border: 1px solid var(--vien); }
.bai-chan { display: flex; align-items: center; gap: 7px; margin-top: 12px; flex-wrap: wrap; }

/* cảm xúc có màu — mỗi loại một hồn */
.nut-cx {
  background: var(--nen3); border: 1.5px solid var(--vien); border-radius: 20px; color: var(--chu2);
  padding: 6px 13px; font-size: 13.5px; font-weight: 800; cursor: pointer; font-family: inherit;
  transition: transform .08s, border-color .12s, color .12s;
}
.nut-cx:hover { transform: translateY(-1px); color: var(--chu); }
.nut-cx[data-cx="lua"]:hover, .nut-cx[data-cx="lua"].da { border-color: var(--lua); color: var(--lua); background: rgba(232,132,60,.1); }
.nut-cx[data-cx="ne"]:hover, .nut-cx[data-cx="ne"].da { border-color: var(--vang); color: var(--vang); background: rgba(255,215,0,.08); }
.nut-cx[data-cx="thuong"]:hover, .nut-cx[data-cx="thuong"].da { border-color: #E86A8E; color: #E86A8E; background: rgba(232,106,142,.1); }

.khung-bl { margin-top: 12px; border-top: 1px solid var(--vien); padding-top: 10px; }
.dong-bl { display: flex; gap: 8px; margin-bottom: 8px; font-size: 14px; }
.dong-bl .ruot-bl { background: var(--nen3); border-radius: 12px; padding: 8px 12px; flex: 1; }
.form-bl { display: flex; gap: 8px; margin-top: 6px; }
.form-bl input { flex: 1; padding: 9px 12px; font-size: 14px; border-radius: 20px; }

/* 🏞️ ảnh bìa trang nhà (kiểu Facebook: bìa + avatar đè lên) */
.the-ho-so { padding: 0; overflow: hidden; }
.bia-nha {
  position: relative; height: 200px;
  background:
    radial-gradient(420px 200px at 78% 20%, var(--quang-lua), transparent 70%),
    radial-gradient(360px 190px at 18% 85%, var(--quang-vang), transparent 70%),
    linear-gradient(160deg, var(--nen3), var(--nen2));
}
.bia-nha img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nut-doi-bia {
  position: absolute; right: 12px; bottom: 12px; margin: 0; cursor: pointer;
  background: color-mix(in srgb, var(--nen2) 82%, transparent); color: var(--chu);
  border: 1.5px solid var(--vien); backdrop-filter: blur(6px);
}
.ho-so-ruot { padding: 0 16px 15px; }
.hang-ho-so { margin-top: -30px; align-items: flex-end; }
.avatar-vien .avatar { border: 4px solid var(--nen2); box-shadow: 0 4px 14px var(--bong); }
@media (max-width: 480px) { .bia-nha { height: 140px; } }

/* 🌱 vườn nhịp 30 ngày */
.lich-nhip { display: grid; grid-template-columns: repeat(15, 1fr); gap: 5px; }
.o-ngay { aspect-ratio: 1; border-radius: 6px; background: var(--nen3); border: 1px solid var(--vien); }
.o-ngay.chay { background: linear-gradient(160deg, var(--vang), var(--lua)); border-color: var(--lua); box-shadow: 0 0 7px var(--quang-lua); }
.o-ngay.hom-nay { outline: 2px solid var(--vang); outline-offset: 1px; }
@media (max-width: 480px) { .lich-nhip { grid-template-columns: repeat(10, 1fr); } }

/* 🔥 màn đèn cháy — khoảnh khắc sau khi giữ nhịp thành công */
.man-den-chay {
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; text-align: center;
  background: color-mix(in srgb, var(--nen) 88%, transparent); backdrop-filter: blur(6px);
  animation: mdc-hien .3s ease;
}
.man-den-chay .den-to { font-size: 92px; line-height: 1; animation: mdc-den 1s ease infinite alternate; filter: drop-shadow(0 0 26px rgba(232,132,60,.9)); }
.man-den-chay .dong-1 { font-size: 26px; font-weight: 900; color: var(--vang); }
.man-den-chay .dong-2 { font-size: 16px; font-weight: 700; color: var(--chu); padding: 0 24px; }
@keyframes mdc-hien { from { opacity: 0 } to { opacity: 1 } }
@keyframes mdc-den { from { transform: scale(1) } to { transform: scale(1.12) } }

/* huy hiệu + streak */
.huy-hieu-day { margin-left: 6px; }
.huy-hieu { font-size: 15px; margin-right: 2px; cursor: help; }
.streak-lua { color: var(--lua); font-weight: 900; }

/* ── bảng vàng ── */
.hang-bv { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-bottom: 1px solid var(--vien); }
.hang-bv:last-child { border-bottom: none; }
.hang-bv .hang-so { width: 32px; font-weight: 900; font-size: 16px; color: var(--chu2); text-align: center; }
.hang-bv.top .hang-so { color: var(--vang); font-size: 19px; }
.hang-bv .hang-ten { flex: 1; min-width: 0; }
.den-cham { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--vien); margin-left: 6px; }
.den-cham.sang { background: var(--lua); box-shadow: 0 0 8px var(--quang-lua); }
.tab-bv { display: flex; gap: 8px; margin: 12px 0; }
.tab-bv a { padding: 8px 15px; border-radius: 11px; border: 1.5px solid var(--vien); color: var(--chu2); font-size: 14px; }
.tab-bv a.dang { border-color: var(--vang); color: var(--vang); background: rgba(255,215,0,.07); }
.hang-bv-mini { display: flex; align-items: center; gap: 9px; padding: 7px 2px; font-size: 14px; border-bottom: 1px solid var(--vien); }
.hang-bv-mini:last-child { border-bottom: none; }
.hang-bv-mini .so-mini { width: 22px; text-align: center; font-weight: 900; color: var(--vang); }

/* ── form đăng bài: bàn viết của làng ── */
.hop-dang { position: relative; }
.tab-loai { display: flex; gap: 8px; margin-bottom: 10px; }
.tab-loai button {
  flex: 1; padding: 10px; border-radius: 11px; border: 1.5px solid var(--vien); background: none;
  color: var(--chu2); font-weight: 800; font-size: 14px; cursor: pointer; font-family: inherit;
}
.tab-loai button.dang-nhip { border-color: var(--lua); color: var(--lua); background: rgba(232,132,60,.1); }
.tab-loai button.dang-chiase { border-color: var(--vang); color: var(--vang); background: rgba(255,215,0,.07); }
.goi-y-nhip { font-size: 13.5px; color: var(--chu2); font-weight: 700; margin: 0 0 8px; }

/* ── sắp ra mắt ── */
.srm { text-align: center; padding: 30px 0 10px; }
.srm h1 { font-size: 34px; }
.srm .khau-hieu { font-size: 17px; color: var(--chu2); font-weight: 700; margin-bottom: 22px; }
.dem-nguoc { display: flex; justify-content: center; gap: 10px; margin: 22px 0; flex-wrap: wrap; }
.o-dem { background: var(--nen2); border: 1px solid var(--vien); border-radius: 15px; padding: 12px 8px; min-width: 78px; box-shadow: 0 8px 22px rgba(0,0,0,.16); }
.o-dem b { display: block; font-size: 32px; font-weight: 900; color: var(--vang); line-height: 1.15; font-variant-numeric: tabular-nums; }
.o-dem span { font-size: 13px; font-weight: 700; color: var(--chu2); }
.chuyen-lang { text-align: left; max-width: 560px; margin: 26px auto; font-size: 16px; }
.form-giu-cho { max-width: 430px; margin: 0 auto; text-align: left; }
.so-giu-cho { font-size: 19px; font-weight: 900; color: var(--vang); margin-top: 14px; }

/* ── nhập làng ── */
.man-chao { border: 1.5px solid var(--vang); box-shadow: 0 0 24px var(--quang-vang); }
.viec-dau { display: flex; align-items: center; gap: 11px; padding: 9px 0; font-size: 15px; font-weight: 700; }
.viec-dau.xong { color: var(--chu2); text-decoration: line-through; }
.so-buoc {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 50%; font-size: 14px; font-weight: 900;
  background: linear-gradient(135deg, var(--vang), var(--vang2)); color: var(--nut-chu);
}
.so-buoc.xong-tick { background: var(--nen3); color: var(--lua); border: 1.5px solid var(--lua); }

/* ── chân trang ── */
.chan { text-align: center; padding: 20px 14px 28px; font-size: 13px; color: var(--chu2); border-top: 1px solid var(--vien); }
.chan-link { margin-top: 6px; }
.chan-link a { font-size: 13px; }

/* banner PWA */
.banner-pwa {
  position: fixed; left: 12px; right: 12px; bottom: 14px; z-index: 60;
  background: var(--nen2); border: 1.5px solid var(--vang); border-radius: 15px;
  padding: 12px 14px; display: flex; align-items: center; gap: 10px; box-shadow: 0 14px 40px var(--bong);
  font-size: 14px; font-weight: 700;
}

/* admin dùng chung */
.o-so { display: inline-block; background: var(--nen2); border: 1px solid var(--vien); border-radius: 12px; padding: 12px 18px; margin: 0 8px 10px 0; text-align: center; }
.o-so b { display: block; font-size: 26px; font-weight: 900; color: var(--vang); }
.o-so span { font-size: 13px; font-weight: 700; color: var(--chu2); }
table.bang { width: 100%; border-collapse: collapse; font-size: 14px; }
table.bang th, table.bang td { padding: 8px 9px; border-bottom: 1px solid var(--vien); text-align: left; }
table.bang th { color: var(--chu2); font-size: 13px; }

/* ── 📱 THANH TAB ĐÁY — mobile app-first (bài học MXH Trung Quốc) ── */
.thanh-day { display: none; }
@media (max-width: 1020px) {
  .thanh-day {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    display: flex; justify-content: space-around; align-items: stretch;
    background: color-mix(in srgb, var(--nen2) 92%, var(--nen));
    border-top: 1px solid var(--vien); backdrop-filter: blur(10px);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .thanh-day a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 5px 2px; border-radius: 12px; color: var(--chu2); min-height: 48px; justify-content: center;
  }
  .thanh-day a:hover { text-decoration: none; }
  .thanh-day .td-ic { font-size: 21px; line-height: 1.2; position: relative; }
  .thanh-day .td-nhan { font-size: 12px; font-weight: 800; }
  .thanh-day a.dang { color: var(--vang); background: linear-gradient(180deg, rgba(255,215,0,.12), transparent); }
  .thanh-day a.dang .td-ic { filter: drop-shadow(0 0 7px var(--quang-vang)); }

  /* chừa chỗ cho thanh đáy + banner PWA nằm trên nó */
  .khung, .bo-cuc { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  .chan { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  .banner-pwa { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }

  /* iOS không tự zoom khi chạm ô nhập: chữ nhập ≥16px */
  input, textarea, select { font-size: 16px; }
  /* ngón tay chạm được: nút hành động cao tối thiểu ~44px */
  .nut { padding: 12px 18px; }
  .nut-nho { padding: 10px 14px; }
  .nut-cx { padding: 9px 14px; font-size: 14px; }
  .form-bl input { padding: 11px 14px; }
}

@media (max-width: 480px) {
  .khung { padding: 14px 10px calc(86px + env(safe-area-inset-bottom, 0px)); }
  .bo-cuc { padding: 14px 10px calc(86px + env(safe-area-inset-bottom, 0px)); }
  h1 { font-size: 22px; }
  .srm h1 { font-size: 27px; }
  .o-dem { min-width: 66px; }
  .o-dem b { font-size: 26px; }
  .bar { padding: 10px 12px; }
}