/* Làng Hôm Nay, giao diện web theo Design System 2.0 (16/09/2026).
   Token màu, chữ, khoảng cách: chép nguyên từ lang-hom-nay-design-system/tokens.css.
   Không khai báo mã màu HEX ở đâu ngoài khối :root và khối chế độ tối dưới đây. */

:root {
  /* Màu thương hiệu (guideline 1.1, giá trị tham khảo) */
  --xanh-lang: #304A35;
  --xanh-la: #80AA50;
  --vang-mo: #EDAA58;
  --kem: #FFF9EB;
  --xanh-rung: #203D2C;

  /* Màu vai trò, chế độ sáng */
  --nen: var(--kem);
  --mat-noi: #FFFFFF;
  --la-nhat: #EDF2E7;
  --mo-nhat: #FFF0D9;
  --chu: var(--xanh-lang);
  --chu-phu: #566353;
  --vien: #D9DFD0;
  --lien-ket: #4E7A2E;
  --net: var(--xanh-lang);
  --nut-nen: var(--xanh-lang);
  --nut-chu: var(--kem);
  --nhan-kin-nen: var(--vang-mo);
  --nhan-kin-chu: var(--xanh-lang);
  --loi: #8C4128;
  --vien-focus: #965C16;
  --dai-toi: var(--xanh-lang);
  --dai-chu-phu: #E5EDDC;

  /* Chữ */
  --f: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
  --c-14: .875rem;
  --c-16: 1rem;
  --c-18: 1.125rem;
  --c-22: 1.375rem;
  --c-28: 1.75rem;
  --c-36: clamp(1.8rem, 1.3rem + 1.8vw, 2.25rem);
  --c-48: clamp(2.1rem, 1.3rem + 3vw, 3rem);
  --c-64: clamp(2.4rem, 1.1rem + 4.8vw, 4rem);

  /* Khoảng cách */
  --k-1: 4px; --k-2: 8px; --k-3: 12px; --k-4: 16px; --k-5: 24px;
  --k-6: 32px; --k-7: 48px; --k-8: 72px; --k-9: 112px;

  /* Hình dạng */
  --bo-nut: 10px;
  --bo-the: 20px;
  --bo-khung: 28px;
  --bo-nhan: 999px;

  /* Bố cục */
  --rong: 1140px;
  --do-dai-dong: 66ch;
  --logo-rong: 320px;
}

:root[data-theme="dark"] {
  --nen: var(--xanh-rung);
  --mat-noi: #274836;
  --la-nhat: #2B4C37;
  --mo-nhat: #3E3A26;
  --chu: var(--kem);
  --chu-phu: #D5DFCB;
  --vien: #3E5E49;
  --lien-ket: #A6CB7A;
  --net: var(--kem);
  --nut-nen: var(--xanh-la);
  --nut-chu: var(--xanh-rung);
  --nhan-kin-chu: var(--xanh-rung);
  --loi: #F2A58A;
  --vien-focus: var(--vang-mo);
  --dai-toi: #16301F;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nen: var(--xanh-rung);
    --mat-noi: #274836;
    --la-nhat: #2B4C37;
    --mo-nhat: #3E3A26;
    --chu: var(--kem);
    --chu-phu: #D5DFCB;
    --vien: #3E5E49;
    --lien-ket: #A6CB7A;
    --net: var(--kem);
    --nut-nen: var(--xanh-la);
    --nut-chu: var(--xanh-rung);
    --nhan-kin-chu: var(--xanh-rung);
    --loi: #F2A58A;
    --vien-focus: var(--vang-mo);
    --dai-toi: #16301F;
  }
}

/* ===== Nền tảng ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--nen); color: var(--chu); font-family: var(--f); font-size: var(--c-18); line-height: 1.7; overflow-x: hidden; word-break: keep-all; overflow-wrap: anywhere; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.2; margin: 0; text-wrap: balance; letter-spacing: -.025em; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--lien-ket); text-underline-offset: 4px; }
img, svg { max-width: 100%; }
ul, ol { margin: 0; }
:focus-visible { outline: 3px solid var(--vien-focus); outline-offset: 4px; border-radius: 4px; }
.khung { max-width: var(--rong); margin-inline: auto; padding-inline: var(--k-5); }
.chu-phu { color: var(--chu-phu); }
.than { max-width: var(--do-dai-dong); }
.than p + p { margin-top: var(--k-4); }
.an-doc { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== Logo: ảnh nguyên vẹn, rộng 320px, chừa 1X = 5% ===== */
.logo { display: block; flex: none; padding: calc(var(--logo-rong) * .05); margin: calc(var(--logo-rong) * -.05); }
.logo img { display: block; width: var(--logo-rong); height: auto; }

/* ===== Nút ===== */
.nut { display: inline-flex; align-items: center; justify-content: center; gap: var(--k-2); font: 600 var(--c-16)/1 var(--f); padding: 15px 24px; border-radius: var(--bo-nut); border: 1.5px solid transparent; text-decoration: none; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.nut-chinh { background: var(--nut-nen); color: var(--nut-chu); }
.nut-chinh:hover { filter: brightness(1.12); }
.nut-phu { background: transparent; color: var(--chu); border-color: var(--chu); }
.nut-phu:hover { background: var(--la-nhat); }
.nut-nho { padding: 11px 18px; font-size: var(--c-14); }
.nut-nhe { background: none; border: none; padding: 6px 0; color: var(--lien-ket); text-decoration: underline; text-underline-offset: 4px; font: 600 var(--c-16)/1.4 var(--f); cursor: pointer; }
.nut[disabled] { opacity: .7; cursor: progress; }
.nut-trang-thai[data-state="da-gui"] { background: var(--la-nhat); color: var(--chu); border-color: var(--vien); filter: none; }
.nut-trang-thai[data-state="loi"] { background: transparent; color: var(--loi); border-color: var(--loi); filter: none; }
.hang-nut { display: flex; flex-wrap: wrap; gap: var(--k-4); margin-top: var(--k-6); }

/* ===== Nhãn ===== */
.nhan { display: inline-block; font-size: var(--c-14); font-weight: 600; padding: 3px 12px; border-radius: var(--bo-nhan); border: 1.5px solid var(--vien); white-space: nowrap; line-height: 1.5; }
.nhan-mo { background: var(--la-nhat); color: var(--chu); border-color: transparent; }
.nhan-kin { background: var(--nhan-kin-nen); color: var(--nhan-kin-chu); border-color: transparent; }
.nhan-cho { background: var(--mo-nhat); color: var(--chu); border-color: var(--vang-mo); }

/* ===== Đầu trang ===== */
.dau-trang { border-bottom: 1px solid var(--vien); }
.dau-trang .khung { display: flex; align-items: center; justify-content: space-between; gap: var(--k-5); padding-block: var(--k-4); position: relative; }
.dieu-huong { display: flex; gap: 20px; align-items: center; white-space: nowrap; }
.dieu-huong a:not(.nut) { color: var(--chu); text-decoration: none; font-size: var(--c-14); font-weight: 600; }
.dieu-huong a[aria-current] { text-decoration: underline; text-decoration-color: var(--xanh-la); text-decoration-thickness: 3px; }
.menu-nho { display: none; }
.menu-nho summary { list-style: none; cursor: pointer; padding: 10px 16px; border: 1.5px solid var(--chu); border-radius: var(--bo-nut); font-weight: 600; font-size: var(--c-14); text-align: center; }
.menu-nho summary::-webkit-details-marker { display: none; }
.menu-nho nav { margin-top: var(--k-3); background: var(--mat-noi); border: 1px solid var(--vien); border-radius: var(--bo-the); padding: var(--k-5); display: grid; gap: var(--k-3); }
.menu-nho nav a:not(.nut) { color: var(--chu); text-decoration: none; font-weight: 500; }
.menu-nho nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--xanh-la); text-decoration-thickness: 3px; }
@media (max-width: 1100px) {
  .dieu-huong { display: none; }
  .dau-trang .khung { flex-direction: column; align-items: stretch; gap: var(--k-3); }
  .menu-nho { display: block; }
}
/* Màn rất hẹp: lề đầu trang 16px để logo vẫn đủ 320px (360 - 32 = 328) */
@media (max-width: 400px) {
  .dau-trang .khung { padding-inline: var(--k-4); }
}

/* ===== Hero ===== */
.hero { padding-block: var(--k-8) var(--k-7); }
.hero .khung { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--k-7); align-items: center; }
.hero h1 { font-size: var(--c-64); max-width: 13ch; }
.hero .dan { margin-top: var(--k-5); font-size: var(--c-22); color: var(--chu-phu); max-width: 34ch; line-height: 1.6; }
.tranh-cong { width: 100%; height: auto; }
.tranh-cong .net { fill: none; stroke: var(--net); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.tranh-cong .mai { fill: var(--vang-mo); }
.tranh-cong .tan { fill: var(--xanh-la); }
.tranh-cong .bien { fill: var(--mat-noi); stroke: var(--net); stroke-width: 2; }
.tranh-cong text { font-family: var(--f); font-weight: 600; fill: var(--chu); }
@media (max-width: 860px) { .hero .khung { grid-template-columns: 1fr; } .hero { padding-top: var(--k-7); } }
@media (prefers-reduced-motion: no-preference) {
  .ve .net { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ve 1.6s cubic-bezier(.5, 0, .3, 1) forwards; animation-delay: var(--tre, 0s); }
  .ve .mai, .ve .tan, .ve .bien, .ve text, .ve .dinh { opacity: 0; animation: hien .7s ease forwards; animation-delay: 1.2s; }
  .ve .bien-treo { transform-box: view-box; transform-origin: 104px 236px; animation: dua 2.4s ease-in-out 1.9s both; }
}
@keyframes ve { to { stroke-dashoffset: 0; } }
@keyframes hien { to { opacity: 1; } }
@keyframes dua { 0% { transform: rotate(0); } 20% { transform: rotate(-7deg); } 45% { transform: rotate(5deg); } 70% { transform: rotate(-2.5deg); } 100% { transform: rotate(0); } }

/* Đầu trang con */
.dau-trang-con { padding-block: var(--k-8) var(--k-6); }
.dau-trang-con h1 { font-size: var(--c-64); max-width: 18ch; }
.dau-trang-con .dan { margin-top: var(--k-5); font-size: var(--c-22); color: var(--chu-phu); max-width: 48ch; line-height: 1.6; }

/* ===== Khối ===== */
.khoi { padding-block: var(--k-8); }
.khoi-dau h2 { font-size: var(--c-48); max-width: 22ch; }
.khoi-dau p { margin-top: var(--k-3); color: var(--chu-phu); max-width: var(--do-dai-dong); }
.khoi + .khoi { padding-top: 0; }
.ghi-chu { margin-top: var(--k-5); padding: var(--k-4) var(--k-5); background: var(--mo-nhat); border-left: 4px solid var(--vang-mo); border-radius: 0 12px 12px 0; max-width: var(--do-dai-dong); font-size: var(--c-16); }

/* Danh sách sinh hoạt */
.ds-sinh-hoat { list-style: none; margin: var(--k-6) 0 0; padding: 0; border-top: 2px solid var(--chu); }
.hang-sh { display: grid; grid-template-columns: 64px minmax(0, 1.4fr) minmax(0, 1fr) 300px; gap: var(--k-5); align-items: center; padding-block: var(--k-5); border-bottom: 1px solid var(--vien); }
.bieu-tuong { width: 64px; height: 64px; border-radius: 50%; background: var(--la-nhat); display: grid; place-items: center; color: var(--net); flex: none; }
.bieu-tuong.am { background: var(--mo-nhat); }
.bieu-tuong svg { width: 40px; height: 40px; }
.hang-sh h3 { font-size: var(--c-28); }
.hang-sh .mo-ta { color: var(--chu-phu); font-size: var(--c-14); margin-top: 2px; }
.hang-sh .gio { font-weight: 700; }
.hang-sh .thong-tin { display: grid; gap: 6px; justify-items: start; }
.hang-sh .cach-gap { font-size: var(--c-14); color: var(--chu-phu); }
.hang-sh .hanh-dong { display: flex; gap: var(--k-4); align-items: center; justify-content: flex-end; white-space: nowrap; }
@media (max-width: 760px) {
  .hang-sh { grid-template-columns: 56px 1fr; row-gap: var(--k-3); }
  .bieu-tuong { width: 56px; height: 56px; }
  .hang-sh .thong-tin, .hang-sh .hanh-dong { grid-column: 2; justify-content: flex-start; }
  .hang-sh .hanh-dong { flex-wrap: wrap; }
}
.icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Thẻ lối đi */
.luoi-loi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--k-5); margin-top: var(--k-6); }
.the-loi { display: block; padding: var(--k-6); background: var(--mat-noi); border: 1px solid var(--vien); border-radius: var(--bo-the); text-decoration: none; color: var(--chu); transition: border-color .15s ease; }
.the-loi:hover { border-color: var(--chu); }
.the-loi h3 { font-size: var(--c-28); }
.the-loi p { margin-top: var(--k-2); color: var(--chu-phu); }
.the-loi .di-toi { display: inline-block; margin-top: var(--k-4); color: var(--lien-ket); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.the-loi.lon { grid-row: span 2; background: var(--la-nhat); border-color: transparent; display: flex; flex-direction: column; justify-content: space-between; gap: var(--k-5); }
.the-loi.lon:hover { border-color: var(--chu); }
.the-loi.lon h3 { font-size: var(--c-36); }
.the-loi.ngang { grid-column: 1 / -1; background: var(--mo-nhat); border-color: transparent; }
.the-loi.ngang:hover { border-color: var(--chu); }
.tranh-nho { width: 120px; height: auto; margin-top: var(--k-5); }
@media (max-width: 760px) { .luoi-loi { grid-template-columns: 1fr; } .the-loi.lon { grid-row: auto; } }

/* Thẻ nội dung (không phải liên kết) */
.luoi-the { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--k-5); margin-top: var(--k-6); }
.the { padding: var(--k-6); background: var(--mat-noi); border: 1px solid var(--vien); border-radius: var(--bo-the); }
.the h3 { font-size: var(--c-28); }
.the .bieu-tuong { margin-bottom: var(--k-4); }
.the p { margin-top: var(--k-2); color: var(--chu-phu); }
.the .ghi-nho { margin-top: var(--k-4); font-size: var(--c-14); color: var(--chu); font-weight: 600; }
.the.nhan-xanh { background: var(--la-nhat); border-color: transparent; }
.the.nhan-am { background: var(--mo-nhat); border-color: transparent; }

/* Bốn góc nhìn (lưới 2 cột) */
.luoi-goc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--k-6) var(--k-7); margin-top: var(--k-6); }
.luoi-goc h3 { font-size: var(--c-28); margin-bottom: var(--k-2); }
.luoi-goc p { color: var(--chu-phu); }
@media (max-width: 760px) { .luoi-goc { grid-template-columns: 1fr; } }

/* Bảng Làng là / không là */
.cuon-ngang { overflow-x: auto; margin-top: var(--k-6); border: 1px solid var(--vien); border-radius: var(--bo-the); background: var(--mat-noi); }
table { border-collapse: collapse; width: 100%; min-width: 600px; font-size: var(--c-16); line-height: 1.55; }
th, td { text-align: left; vertical-align: top; padding: var(--k-4) var(--k-5); border-bottom: 1px solid var(--vien); }
th { font-weight: 700; background: var(--la-nhat); font-size: var(--c-18); }
th:last-child { background: var(--mo-nhat); }
td:last-child { color: var(--chu-phu); }
tr:last-child td { border-bottom: none; }

/* Luật làng */
.luat { list-style: none; padding: 0; margin: var(--k-6) 0 0; border-top: 2px solid var(--chu); counter-reset: luat; }
.luat li { counter-increment: luat; display: grid; grid-template-columns: 56px 1fr; gap: var(--k-4); padding-block: var(--k-5); border-bottom: 1px solid var(--vien); }
.luat li::before { content: counter(luat, decimal-leading-zero); font-weight: 700; font-size: var(--c-28); letter-spacing: -.025em; color: var(--chu); line-height: 1.2; }
.luat strong { display: block; font-size: var(--c-22); letter-spacing: -.025em; line-height: 1.3; }
.luat span { color: var(--chu-phu); }

/* Danh sách khoảng trống */
.khoang-trong { list-style: none; padding: 0; margin: var(--k-5) 0 0; display: grid; gap: var(--k-3); max-width: var(--do-dai-dong); }
.khoang-trong li { padding: var(--k-4) var(--k-5); background: var(--mat-noi); border: 1px solid var(--vien); border-radius: var(--bo-the); }

/* Hỏi đáp */
.hoi-dap { border-top: 2px solid var(--chu); max-width: 780px; margin-top: var(--k-6); }
.hoi-dap details { border-bottom: 1px solid var(--vien); }
.hoi-dap summary { cursor: pointer; list-style: none; padding: var(--k-5) 0; display: flex; justify-content: space-between; gap: var(--k-4); font-weight: 600; font-size: var(--c-18); }
.hoi-dap summary::-webkit-details-marker { display: none; }
.hoi-dap summary::after { content: "+"; color: var(--lien-ket); font-size: 1.5rem; line-height: 1; flex: none; }
.hoi-dap details[open] summary::after { content: "\2212"; }
.hoi-dap details p { padding-bottom: var(--k-5); color: var(--chu-phu); max-width: var(--do-dai-dong); }

/* Dải lời làng */
.loi-lang { background: var(--dai-toi); color: var(--kem); }
.loi-lang .khung { padding-block: var(--k-8); display: grid; grid-template-columns: auto 1fr; gap: var(--k-6); align-items: start; }
.loi-lang blockquote { margin: 0; font-size: var(--c-48); font-weight: 700; line-height: 1.2; letter-spacing: -.025em; max-width: 20ch; text-wrap: balance; }
.loi-lang p { margin-top: var(--k-4); color: var(--dai-chu-phu); max-width: 48ch; }
.loi-lang .nut-chinh { background: var(--vang-mo); color: var(--xanh-lang); }
.dau-ngoac { font-size: 7rem; font-weight: 700; line-height: .8; color: var(--vang-mo); }
@media (max-width: 640px) { .loi-lang .khung { grid-template-columns: 1fr; gap: 0; } }

/* Khối trống có đánh dấu (chờ dữ liệu) */
.o-trong { margin-top: var(--k-6); padding: var(--k-7) var(--k-6); border: 1.5px dashed var(--vien); border-radius: var(--bo-the); text-align: center; color: var(--chu-phu); max-width: 780px; }
.o-trong .bieu-tuong { margin: 0 auto var(--k-4); }
.o-trong strong { display: block; color: var(--chu); font-size: var(--c-22); letter-spacing: -.025em; margin-bottom: var(--k-2); }

/* ===== Form ===== */
form { max-width: 680px; }
label { display: block; font-weight: 600; margin-top: var(--k-5); }
label .goi-y { display: block; font-weight: 400; font-size: var(--c-14); color: var(--chu-phu); margin: 2px 0 var(--k-2); }
label:not(.dong-y) > input, label:not(.dong-y) > textarea { margin-top: var(--k-2); }
input, textarea { width: 100%; padding: 13px 16px; border: 1.5px solid var(--vien); border-radius: var(--bo-nut); font: 400 var(--c-16)/1.5 var(--f); background: var(--mat-noi); color: var(--chu); }
input:focus, textarea:focus { outline: 3px solid var(--vien-focus); outline-offset: 2px; border-color: var(--chu); }
textarea { min-height: 120px; resize: vertical; }
.dong-y { display: flex; gap: var(--k-3); align-items: flex-start; font-weight: 400; margin-top: var(--k-6); }
.dong-y input { width: 20px; height: 20px; margin-top: 4px; flex: none; }
.trang-thai { margin-top: var(--k-5); padding: var(--k-4) var(--k-5); border-radius: var(--bo-the); background: var(--la-nhat); border: 1px solid var(--vien); max-width: 680px; }
.trang-thai[data-loai="loi"] { background: transparent; border-color: var(--loi); color: var(--loi); }
.form-tieu-de { font-size: var(--c-28); margin-top: var(--k-8); }

/* ===== Chân trang ===== */
.chan-trang { padding-block: var(--k-7) var(--k-6); border-top: 1px solid var(--vien); margin-top: var(--k-8); }
.loi-lang + .chan-trang { margin-top: 0; border-top: 0; }
.chan-trang .luoi { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--k-6); }
.chan-trang h4 { font-size: var(--c-16); margin-bottom: var(--k-3); }
.chan-trang ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.chan-trang a { color: var(--chu); text-decoration: none; }
.chan-trang a:hover { text-decoration: underline; }
.chan-trang .cuoi { margin-top: var(--k-7); padding-top: var(--k-4); border-top: 1px solid var(--vien); display: flex; justify-content: space-between; gap: var(--k-4); flex-wrap: wrap; font-size: var(--c-14); color: var(--chu-phu); }
.chan-trang .loi-hua { font-weight: 600; color: var(--chu); }
@media (max-width: 760px) { .chan-trang .luoi { grid-template-columns: 1fr; } }

/* Trang lạc lối */
.lac-loi { padding-block: var(--k-9); text-align: center; }
.lac-loi h1 { font-size: var(--c-48); }
.lac-loi .hang-nut { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}