/* ==========================================================================
   Kỷ yếu Trường THPT Vừa Học Vừa Làm Tiền Giang
   Phong cách: giấy cũ, vàng đất, xanh lá ruộng. Thiết kế cho điện thoại trước.
   ========================================================================== */

:root {
  --giay: #FAF6EC;
  --giay-dam: #F1E7D0;
  --vien: #E0D2B0;
  --dat: #B8863B;
  --dat-dam: #8A5A1F;
  --la: #4F7A3A;
  --la-dam: #35602A;
  --la-nhat: #E4EDD6;
  --chu: #3B2F22;
  --chu-nhat: #6B5B48;
  --trang: #FFFDF7;
  --do-bao: #A33A2A;
  --do-lich: #B5453A;

  --font-chu: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-tay: "Patrick Hand", "Be Vietnam Pro", cursive;

  --rong: 1120px;
  --le: 20px;
  --bo-goc: 10px;
  --bong: 0 2px 6px rgba(59, 47, 34, .14);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--giay);
  color: var(--chu);
  font-family: var(--font-chu);
  /* Chữ to cho người lớn tuổi: 18px thay vì 16px mặc định */
  font-size: 1.125rem;
  line-height: 1.7;
  overflow-wrap: break-word;
}

/* .nut, .thong-bao... đặt display riêng nên phải ép thuộc tính hidden thắng */
[hidden] { display: none !important; }

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

a { color: var(--la-dam); text-underline-offset: 3px; }
a:hover { color: var(--dat-dam); }

/* Viền focus rõ cho người dùng bàn phím */
:focus-visible {
  outline: 3px solid var(--dat);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Tiêu đề: line-height rộng để dấu tiếng Việt (ẫ, ệ, ỗ...) không bị cắt */
h1, h2, h3 {
  font-family: var(--font-tay);
  font-weight: 400;
  line-height: 1.3;
  color: var(--la-dam);
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2rem, 6vw, 3.25rem); }
h2 { font-size: clamp(1.75rem, 4.5vw, 2.5rem); }
h3 { font-size: 1.5rem; }
p { margin: 0 0 1em; }

.khung {
  width: 100%;
  max-width: var(--rong);
  margin-inline: auto;
  padding-inline: var(--le);
}

.an-voi-mat {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.bo-qua {
  position: absolute; left: 8px; top: -80px; z-index: 100;
  background: var(--la-dam); color: #fff; padding: 12px 16px; border-radius: 6px;
}
.bo-qua:focus { top: 8px; color: #fff; }

/* ---------- Nút bấm: to, rõ, tối thiểu 52px chiều cao ---------- */
.nut {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 52px;
  padding: 12px 24px;
  border: 2px solid var(--la-dam);
  border-radius: var(--bo-goc);
  background: var(--la-dam);
  color: #fff;
  font: 600 1.125rem/1.3 var(--font-chu);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.nut:hover { background: var(--la); border-color: var(--la); color: #fff; }
.nut:active { transform: translateY(1px); }
.nut[disabled] { opacity: .6; cursor: not-allowed; }
.nut--phu { background: var(--trang); color: var(--la-dam); }
.nut--phu:hover { background: var(--la-nhat); color: var(--la-dam); border-color: var(--la-dam); }
.nut--to { font-size: 1.25rem; min-height: 60px; padding-inline: 32px; }

/* ---------- Đầu trang & menu ---------- */
.dau-trang {
  background: var(--trang);
  border-bottom: 3px solid var(--la);
}
.dau-trang__trong {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 16px;
  padding-block: 10px;
}
.ten-trang {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--chu);
  min-width: 0;
}
.ten-trang img { width: 48px; height: 48px; flex: none; }
.ten-trang strong {
  display: block;
  font: 400 1.6rem/1.2 var(--font-tay);
  color: var(--la-dam);
}
.ten-trang small { display: block; font-size: .9rem; line-height: 1.35; color: var(--chu-nhat); }

.nut-menu {
  display: none;
  min-height: 48px; padding: 8px 16px;
  border: 2px solid var(--la-dam); border-radius: var(--bo-goc);
  background: var(--trang); color: var(--la-dam);
  font: 600 1.05rem var(--font-chu);
  cursor: pointer;
}

.menu { width: 100%; }
.menu ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px;
}
.menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--chu);
  font-weight: 500; font-size: 1.05rem;
  text-decoration: none;
}
.menu a:hover { background: var(--la-nhat); color: var(--la-dam); }
.menu a[aria-current="page"] { background: var(--la-dam); color: #fff; }

/* Menu thu gọn trên điện thoại và máy tính bảng. Chỉ thu khi có JS (lớp .co-js), không có JS thì menu luôn mở.
   Mốc 1099px: dưới mức này 9 mục menu không còn vừa một hàng. Thêm mục menu thì phải nâng mốc này. */
@media (max-width: 1099px) {
  .co-js .nut-menu { display: inline-flex; align-items: center; gap: 8px; }
  .co-js .menu { display: none; }
  .co-js .menu.mo { display: block; }
  .menu ul { flex-direction: column; gap: 0; }
  .menu a { padding: 14px 12px; font-size: 1.15rem; border-bottom: 1px solid var(--vien); border-radius: 0; }
  .menu li:last-child a { border-bottom: 0; }
}

/* ---------- Bìa (banner) ---------- */
.bia { position: relative; }
.bia__anh {
  width: 100%;
  height: clamp(220px, 46vw, 520px);
  object-fit: cover;
  object-position: center 60%;
}
.bia__the {
  position: relative;
  margin-top: -64px;
  padding: 28px 24px 30px;
  background: var(--trang);
  border: 1px solid var(--vien);
  border-radius: var(--bo-goc);
  box-shadow: var(--bong);
  text-align: center;
}
.bia__nhan {
  display: inline-block;
  margin: 0 0 10px;
  padding: 2px 14px;
  background: var(--la-nhat); color: var(--la-dam);
  border-radius: 999px;
  font-size: .95rem; font-weight: 600;
}
.bia__the h1 { margin-bottom: .3em; font-weight: 700; font-size: clamp(2.2rem, 7vw, 3.75rem); }
.bia__slogan {
  font: 400 clamp(1.35rem, 3.6vw, 1.75rem)/1.45 var(--font-tay);
  color: var(--dat-dam);
  margin-bottom: 1.2em;
}
.bia__nut { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@media (max-width: 559px) {
  .bia__the { margin-top: -36px; padding: 22px 16px 24px; }
  .bia__nut .nut { width: 100%; }
}

/* ---------- Khối nội dung chung ---------- */
.khoi { padding-block: clamp(40px, 7vw, 72px); }
.khoi--nen { background: var(--giay-dam); border-block: 1px solid var(--vien); }
.khoi__dau { text-align: center; max-width: 720px; margin: 0 auto 28px; }
.khoi__dau p { color: var(--chu-nhat); margin: 0; }
.khoi__cuoi { text-align: center; margin-top: 32px; }

/* Gạch chân vẽ tay dưới tiêu đề */
.gach::after {
  content: ""; display: block; width: 120px; height: 10px; margin: 6px auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10'%3E%3Cpath d='M2 6c20-5 38 4 58 0s38-4 58 1' fill='none' stroke='%23B8863B' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- Lời ngỏ: trang giấy kẻ dòng ---------- */
.loi-ngo { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .loi-ngo { grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: stretch; } }

.loi-ngo__anh { display: grid; gap: 36px; align-content: space-between; }
.loi-ngo__anh .anh-dan { transform: none; }

.giay-ke {
  position: relative;
  padding: 28px 24px 28px 40px;
  background:
    linear-gradient(90deg, transparent 27px, #E7B9A8 27px, #E7B9A8 29px, transparent 29px),
    repeating-linear-gradient(var(--trang) 0 35px, #D9E3EE 35px 36px);
  border: 1px solid var(--vien);
  border-radius: 4px;
  box-shadow: var(--bong);
  line-height: 36px; /* khớp với dòng kẻ */
}
.giay-ke h2 { line-height: 36px; margin: 0 0 36px; }
.giay-ke p { margin: 0 0 36px; }
.giay-ke p:last-child { margin-bottom: 0; }
.chu-ky { font: 400 1.4rem/36px var(--font-tay); color: var(--dat-dam); text-align: right; }
@media (max-width: 559px) { .giay-ke { padding: 24px 16px 24px 38px; } }

/* ---------- Ảnh dán băng keo ---------- */
.anh-dan {
  position: relative;
  margin: 0;
  padding: 10px 10px 6px;
  background: #fff;
  border: 1px solid #ECE3CD;
  box-shadow: 0 3px 10px rgba(59, 47, 34, .18);
  transform: rotate(-1.5deg);
}
.anh-dan::before {
  content: ""; position: absolute; top: -13px; left: 50%;
  width: 96px; height: 26px; margin-left: -48px;
  background: rgba(214, 186, 120, .6);
  transform: rotate(2deg);
}
.anh-dan a { display: block; cursor: zoom-in; }
.anh-dan a:focus-visible { outline: 3px solid var(--dat); outline-offset: 2px; }
.anh-dan img { display: block; width: 100%; }
.anh-dan figcaption {
  padding: 8px 4px 4px;
  font: 400 1.2rem/1.4 var(--font-tay);
  color: var(--chu-nhat);
  text-align: center;
}
.anh-dan--phai { transform: rotate(1.5deg); }

.day-anh { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 20px; padding-top: 12px; }
@media (min-width: 768px) { .day-anh { grid-template-columns: repeat(4, 1fr); } }
.day-anh .anh-dan img { aspect-ratio: 4 / 3; object-fit: cover; }
.day-anh .anh-dan:nth-child(even) { transform: rotate(1.5deg); }

/* ---------- Video (khung ảnh dán, giống .anh-dan nhưng không nghiêng để dễ bấm) ---------- */
.khung-video {
  position: relative;
  max-width: 860px; margin: 12px auto 0;
  padding: 10px 10px 6px;
  background: #fff;
  border: 1px solid #ECE3CD;
  box-shadow: 0 3px 10px rgba(59, 47, 34, .18);
}
.khung-video::before {
  content: ""; position: absolute; top: -13px; left: 50%; z-index: 1;
  width: 110px; height: 26px; margin-left: -55px;
  background: rgba(214, 186, 120, .6);
  transform: rotate(-2deg);
}
.khung-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #1E1811; }
.khung-video figcaption { padding: 8px 4px 4px; font: 400 1.2rem/1.4 var(--font-tay); color: var(--chu-nhat); text-align: center; }

/* Video YouTube kiểu "bấm mới tải": chỉ hiện ảnh bìa trước, bấm vào mới nạp khung phát của YouTube (js/video-yt.js) */
.video-yt { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #1E1811; overflow: hidden; }
.video-yt__nut {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.video-yt__nut img { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-yt__tam-giac {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(20, 16, 10, .68);
  transition: background .15s, transform .15s;
}
.video-yt__tam-giac::before {
  content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent #fff;
}
.video-yt__nut:hover .video-yt__tam-giac, .video-yt__nut:focus-visible .video-yt__tam-giac {
  background: var(--la-dam); transform: translate(-50%, -50%) scale(1.08);
}
.video-yt iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Phát liên tục dừng tại video YouTube (trang không tự phát), tô viền mời bấm xem vài giây */
.video-yt--moi { outline: 4px solid var(--dat); outline-offset: 3px; border-radius: 4px; }

/* ---------- Lưu bút: thẻ ---------- */
.the-luu-but {
  display: flex; flex-direction: column;
  padding: 20px 20px 16px;
  background: var(--trang);
  border: 1px solid var(--vien);
  border-left: 5px solid var(--dat);
  border-radius: 6px;
  box-shadow: var(--bong);
}
.the-luu-but:nth-child(3n+2) { border-left-color: var(--la); }
.the-luu-but:nth-child(3n) { border-left-color: var(--dat-dam); }
.the-luu-but__anh { display: block; width: 100%; height: auto; max-height: 260px; object-fit: cover; border-radius: 6px; margin-bottom: 12px; background: var(--la-nhat); }
.the-luu-but__anh-boc { display: block; cursor: zoom-in; }
.the-luu-but__anh-boc:focus-visible { outline: 3px solid var(--dat); outline-offset: 2px; }
.the-luu-but__emoji { font-size: 2rem; line-height: 1.2; margin-bottom: 6px; }
.the-luu-but__loi {
  flex: 1;
  font: 400 1.3rem/1.55 var(--font-tay);
  white-space: pre-line;
  margin-bottom: 14px;
}
.the-luu-but__ten { border-top: 1px dashed var(--vien); padding-top: 10px; font-size: 1rem; line-height: 1.5; }
.the-luu-but__ten strong { display: block; color: var(--la-dam); }
.the-luu-but__ten span { color: var(--chu-nhat); font-size: .95rem; }
.nhan-mau {
  align-self: flex-start; margin-bottom: 8px; padding: 0 10px;
  background: var(--giay-dam); color: var(--chu-nhat);
  border-radius: 999px; font-size: .8rem; font-weight: 600;
}

/* Dải thẻ cuộn ngang (trang chủ) */
.dai-cuon {
  display: flex; gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px var(--le) 18px;
  margin-inline: calc(var(--le) * -1);
  scrollbar-color: var(--dat) var(--giay-dam);
}
.dai-cuon > * { flex: 0 0 min(82vw, 340px); scroll-snap-align: center; }
.dai-cuon__nut { display: flex; justify-content: center; gap: 12px; margin-top: 8px; }
.dai-cuon__nut .nut { min-width: 140px; }

/* Lưới thẻ (trang lưu bút) */
.luoi-luu-but { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

/* ---------- Biểu mẫu ---------- */
.bieu-mau {
  max-width: 720px; margin-inline: auto;
  padding: 28px 24px;
  background: var(--trang);
  border: 1px solid var(--vien); border-radius: var(--bo-goc);
  box-shadow: var(--bong);
}
@media (max-width: 559px) { .bieu-mau { padding: 22px 16px; } }
.truong { margin-bottom: 22px; }
.truong label, .truong legend { display: block; font-weight: 600; margin-bottom: 6px; padding: 0; }
.truong .goi-y { display: block; font-weight: 400; font-size: .95rem; color: var(--chu-nhat); }
.truong input[type="text"], .truong textarea, .truong select, .bo-loc select {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 2px solid #B9A98A; border-radius: 8px;
  background: #fff; color: var(--chu);
  font: 400 1.125rem/1.5 var(--font-chu); /* >=16px để iPhone không tự phóng to khi bấm vào ô */
}
.truong textarea { min-height: 170px; resize: vertical; }
.truong input:focus, .truong textarea:focus, .truong select:focus, .bo-loc select:focus {
  border-color: var(--la-dam); outline: 3px solid var(--la-nhat); outline-offset: 0;
}
fieldset.truong { border: 0; padding: 0; margin-inline: 0; }
.dem-chu { text-align: right; font-size: .95rem; color: var(--chu-nhat); margin-top: 4px; }

.chon-emoji { display: flex; flex-wrap: wrap; gap: 8px; }
.chon-emoji label { margin: 0; cursor: pointer; }
.chon-emoji input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chon-emoji span[aria-hidden] {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border: 2px solid var(--vien); border-radius: 12px;
  background: #fff; font-size: 1.8rem; line-height: 1;
}
.chon-emoji input:checked + span[aria-hidden] { border-color: var(--la-dam); background: var(--la-nhat); box-shadow: 0 0 0 2px var(--la-dam); }
.chon-emoji input:focus-visible + span { outline: 3px solid var(--dat); outline-offset: 2px; }

.ga-tep { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ga-tep:focus-visible + .ga-chon { outline: 3px solid var(--dat); outline-offset: 3px; }
.ga-chon { cursor: pointer; margin: 0 !important; }
.ga-cho { margin-bottom: 24px; }
.ga-cho .ga-xem__o span { padding: 0 4px 4px; font-size: .95rem; line-height: 1.35; overflow-wrap: anywhere; }
.ga-cho .ga-xem__nhan { align-self: flex-start; padding: 2px 8px; background: #FFF6DC; border: 1px solid var(--dat); border-radius: 999px; font-size: .9rem; color: #5E3D10; }
.ga-xem { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 14px; }
.ga-xem__o { display: flex; flex-direction: column; gap: 6px; padding: 6px; background: #fff; border: 1px solid var(--vien); border-radius: 8px; }
.ga-xem__o img { display: block; width: 100%; height: 120px; object-fit: cover; border-radius: 4px; }
.ga-xem__bo { min-height: 44px; border: 1px solid var(--vien); border-radius: 6px; background: var(--trang); color: #7A2418; font: 600 1rem/1.2 var(--font-chu); cursor: pointer; }
.bay-thu-rac { position: absolute; left: -9999px; } /* ô bẫy bot, người thật không thấy */

.thong-bao { margin: 0 0 20px; padding: 14px 16px; border-radius: 8px; border: 2px solid; font-weight: 500; }
.thong-bao[hidden] { display: none; }
.thong-bao--tot { background: var(--la-nhat); border-color: var(--la); color: var(--la-dam); }
.thong-bao--loi { background: #FBE9E5; border-color: var(--do-bao); color: #7A2418; }
.thong-bao--ghi-chu { background: #FFF6DC; border-color: var(--dat); color: #5E3D10; }

/* ---------- Album ---------- */
.tieu-de-trang { padding-block: 36px 8px; text-align: center; }
.tieu-de-trang p { max-width: 680px; margin-inline: auto; color: var(--chu-nhat); }

.bo-loc {
  display: grid; gap: 14px; align-items: end;
  padding: 18px;
  background: var(--trang);
  border: 1px solid var(--vien); border-radius: var(--bo-goc);
  box-shadow: var(--bong);
}
.bo-loc label { display: block; font-weight: 600; margin-bottom: 4px; }
.bo-loc__nut { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 720px) { .bo-loc { grid-template-columns: 1fr 1fr auto; } }
.bo-loc__dem { margin: 16px 0 20px; font-weight: 500; color: var(--chu-nhat); }

.luoi-anh { columns: 2; column-gap: 14px; }
@media (min-width: 720px) { .luoi-anh { columns: 3; column-gap: 18px; } }
@media (min-width: 1024px) { .luoi-anh { columns: 4; } }
.o-anh {
  display: block; width: 100%;
  margin: 0 0 14px; padding: 6px 6px 0;
  break-inside: avoid;
  background: #fff;
  border: 1px solid #ECE3CD; border-radius: 4px;
  box-shadow: var(--bong);
  font: inherit; color: inherit; text-align: left;
  cursor: zoom-in;
}
@media (min-width: 720px) { .o-anh { margin-bottom: 18px; } }
.o-anh:hover { box-shadow: 0 5px 14px rgba(59, 47, 34, .25); }
.o-anh img { width: 100%; background: var(--giay-dam); }
.o-anh__chu { display: block; padding: 8px 4px 10px; font-size: 1rem; line-height: 1.45; }
.o-anh__chu small { display: block; color: var(--chu-nhat); font-size: .9rem; }
.trong-rong { column-span: all; text-align: center; padding: 40px 16px; color: var(--chu-nhat); }

/* Hộp xem ảnh phóng to */
.khoa-cuon { overflow: hidden; }
.hop-anh {
  width: 100vw; height: 100vh; height: 100dvh;
  max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: rgba(30, 24, 17, .96);
  color: #fff;
}
.hop-anh::backdrop { background: rgba(30, 24, 17, .9); }
.hop-anh[open] { display: grid; grid-template-rows: auto 1fr auto; }
.hop-anh__tren { display: flex; justify-content: flex-end; padding: 10px 12px; }
.hop-anh__giua { min-height: 0; display: grid; grid-template-rows: 1fr auto; margin: 0; padding-inline: 8px; }
.hop-anh__giua img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.hop-anh__giua figcaption { padding: 10px 8px 0; text-align: center; font-size: 1.05rem; line-height: 1.5; }
.hop-anh__giua figcaption small { display: block; color: #D9CDB5; }
.hop-anh__duoi { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; }
.hop-anh__duoi span { min-width: 72px; text-align: center; }
.hop-anh .nut { background: var(--trang); color: var(--chu); border-color: var(--trang); min-height: 48px; padding: 8px 16px; font-size: 1.05rem; }
.hop-anh .nut:hover { background: var(--giay-dam); }

/* ---------- Sự kiện ---------- */
.khung--hep { max-width: 860px; }
.ds-su-kien { display: grid; gap: 18px; }

.su-kien {
  display: grid; grid-template-columns: auto 1fr; gap: 16px;
  padding: 18px;
  background: var(--trang);
  border: 1px solid var(--vien); border-radius: var(--bo-goc);
  box-shadow: var(--bong);
}
/* Tờ lịch */
.su-kien__lich {
  align-self: start;
  display: grid; justify-items: center;
  width: 84px;
  background: #fff;
  border: 2px solid var(--la-dam); border-radius: 8px;
  overflow: hidden;
  line-height: 1.2; text-align: center;
}
.su-kien__thang { width: 100%; padding: 4px 0; background: var(--la-dam); color: #fff; font-size: .9rem; font-weight: 600; }
.su-kien__ngay { padding-top: 2px; font: 400 2.6rem/1.1 var(--font-tay); color: var(--chu); }
.su-kien__nam { padding-bottom: 5px; font-size: .9rem; color: var(--chu-nhat); }

.su-kien__than { min-width: 0; }
.su-kien__nhan { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.nhan-loai, .nhan-con {
  padding: 1px 10px; border-radius: 999px;
  font-size: .9rem; font-weight: 600; line-height: 1.6;
  background: var(--giay-dam); color: var(--chu);
}
.nhan-con { background: var(--la-nhat); color: var(--la-dam); }
.nhan-con--gan { background: #FBE3B5; color: #6B3F05; }
.su-kien .nhan-mau { margin: 0; align-self: center; font-size: .9rem; line-height: 1.6; }
.su-kien__ten { margin: 0 0 8px; font-size: 1.55rem; }
.su-kien__dong { margin: 0 0 4px; line-height: 1.55; }
.su-kien__mo-ta { margin: 10px 0; padding-top: 10px; border-top: 1px dashed var(--vien); white-space: pre-line; }
.su-kien__ky-ten { margin: 0 0 10px; font: 400 1.2rem var(--font-tay); color: var(--dat-dam); text-align: right; }
.su-kien__nguoi-bao { margin: 6px 0 0; font-size: .95rem; color: var(--chu-nhat); }
.su-kien__nut { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
.su-kien__nut .nut { min-height: 48px; padding: 8px 16px; font-size: 1.05rem; }

/* Tin buồn: trầm, không màu mè */
.su-kien--tin-buon { background: #F6F4EF; border-color: #CFC8B8; }
.su-kien--tin-buon .su-kien__lich { border-color: #5B554A; }
.su-kien--tin-buon .su-kien__thang { background: #5B554A; }
.su-kien--tin-buon .su-kien__ten { color: #3B372F; }

.su-kien--da-qua .su-kien__lich { border-color: #9A8E78; }
.su-kien--da-qua .su-kien__thang { background: #7D725E; }

@media (max-width: 479px) {
  .su-kien { gap: 12px; padding: 14px; }
  .su-kien__lich { width: 68px; }
  .su-kien__ngay { font-size: 2.1rem; }
  .su-kien__thang, .su-kien__nam { font-size: .8rem; }
  .su-kien__ten { font-size: 1.4rem; }
  .su-kien__nut .nut { width: 100%; }
}

/* Nút lọc dạng bấm chọn */
.bo-loc-nut { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.nut-loc {
  min-height: 48px; padding: 8px 16px;
  border: 2px solid var(--vien); border-radius: 999px;
  background: var(--trang); color: var(--chu);
  font: 500 1.05rem var(--font-chu);
  cursor: pointer;
}
.nut-loc:hover { border-color: var(--la-dam); }
.nut-loc[aria-pressed="true"] { background: var(--la-dam); border-color: var(--la-dam); color: #fff; }

.hai-cot { display: grid; gap: 0 16px; }
@media (min-width: 560px) { .hai-cot { grid-template-columns: 1fr 1fr; } }
.truong input[type="date"], .truong input[type="time"] {
  width: 100%; min-height: 52px; padding: 12px 14px;
  border: 2px solid #B9A98A; border-radius: 8px;
  background: #fff; color: var(--chu);
  font: 400 1.125rem/1.5 var(--font-chu);
}

/* ---------- Danh sách video ---------- */
.video-lien-tuc {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px; padding: 12px 16px;
  background: var(--la-nhat); border-radius: var(--bo-goc);
  font-weight: 500; cursor: pointer;
}
.video-lien-tuc input { width: 26px; height: 26px; accent-color: var(--la-dam); cursor: pointer; flex: none; }
.luoi-video { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }

/* Nút nhắc "vào lại Full màn hình" khi phát liên tục sang video kế tiếp (trình duyệt bắt buộc phải bấm thật) */
.nhac-full-man-hinh {
  position: fixed; left: 50%; bottom: 20px; z-index: 40;
  transform: translateX(-50%);
  box-shadow: var(--bong);
}
.the-video {
  margin: 0; overflow: hidden;
  background: var(--trang); border: 1px solid var(--vien); border-radius: var(--bo-goc); box-shadow: var(--bong);
}
/* Không ép tỉ lệ cố định: có video ngang, có video dọc (quay bằng điện thoại), ép 16:9 sẽ dư khoảng đen.
   width/height lấy đúng theo video.js (kích thước ảnh bìa thật) để giữ chỗ trước, khỏi giật trang khi tải. */
.the-video video { display: block; width: 100%; height: auto; background: #1E1811; }
.the-video figcaption { padding: 12px 16px 16px; }
.the-video__ten { display: block; font: 400 1.3rem/1.35 var(--font-tay); color: var(--la-dam); margin-bottom: 4px; }
.the-video__phu { display: block; font-size: .95rem; color: var(--chu-nhat); }

/* ---------- Bộ điều khiển video tự làm (js/video-dieukhien.js) ----------
   Full màn hình phóng to khung .vdk (thẻ div) chứ không phóng thẳng <video>, để trình duyệt coi đây là
   Full màn hình bình thường (CSS tự vẽ), tránh mấy lỗi vặt riêng của "Full màn hình video" trên điện thoại
   (dải đen phía trên, bấm Full lần 2 không thu nhỏ đúng) khi Full màn hình thẳng vào thẻ <video>. */
.vdk { position: relative; overflow: hidden; touch-action: manipulation; }
.vdk:fullscreen, .vdk:-webkit-full-screen { width: 100%; height: 100%; background: #000; display: flex; align-items: center; }
.vdk:fullscreen video, .vdk:-webkit-full-screen video { width: 100%; height: 100%; object-fit: contain; }
.vdk__giua { position: absolute; inset: 0; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; }
.vdk__phat-to {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(20, 16, 10, .6);
  display: grid; place-items: center;
  opacity: 1; transition: opacity .15s, background .15s, transform .15s;
}
.vdk__phat-to::before {
  content: ""; margin-left: 5px;
  border-style: solid; border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent #fff;
}
.vdk__giua:hover .vdk__phat-to, .vdk__giua:focus-visible .vdk__phat-to { background: var(--la-dam); transform: scale(1.06); }
.vdk--dang-phat .vdk__phat-to { opacity: 0; }
.vdk--dang-phat .vdk__giua:hover .vdk__phat-to, .vdk--dang-phat .vdk__giua:focus-visible .vdk__phat-to { opacity: 1; }
.vdk__cho {
  position: absolute; top: 50%; left: 50%; margin: -18px 0 0 -18px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  opacity: 0; pointer-events: none;
}
.vdk--dang-tai .vdk__cho { opacity: 1; animation: vdk-xoay .8s linear infinite; }
@keyframes vdk-xoay { to { transform: rotate(360deg); } }
.vdk__thanh {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 6px;
  padding: 22px 8px 8px;
  background: linear-gradient(rgba(20, 16, 10, 0), rgba(20, 16, 10, .82) 55%);
  opacity: 1; transition: opacity .2s;
}
.vdk--an .vdk__giua, .vdk--an .vdk__thanh { opacity: 0; pointer-events: none; }
.vdk__nut {
  flex: none; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 8px; background: none; color: #fff;
  font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.vdk__nut:hover, .vdk__nut:focus-visible { background: rgba(255, 255, 255, .18); }
.vdk__gio { flex: none; min-width: 38px; color: #fff; font-size: .85rem; font-variant-numeric: tabular-nums; }
.vdk__tua {
  flex: 1 1 auto; width: 100%; height: 20px; margin: 0 2px;
  background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.vdk__tua::-webkit-slider-runnable-track { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .35); }
.vdk__tua::-moz-range-track { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .35); }
.vdk__tua::-webkit-slider-thumb {
  -webkit-appearance: none; margin-top: -6px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}
.vdk__tua::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; }
.vdk__tua:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- Tờ lịch hằng ngày (trang chủ) ---------- */
.lich-to {
  position: relative;
  max-width: 300px; margin: 12px auto 0;
  background: var(--trang);
  border: 1px solid var(--vien); border-radius: var(--bo-goc);
  box-shadow: var(--bong);
  overflow: hidden;
}
/* Hai vòng khoen ở mép trên, gợi kiểu lịch bloc treo tường */
.lich-to__vong {
  position: absolute; top: -8px; left: 50%; z-index: 1;
  width: 90px; height: 16px; transform: translateX(-50%);
}
.lich-to__vong::before, .lich-to__vong::after {
  content: ""; position: absolute; top: 0;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--giay-dam); border: 2px solid var(--vien);
}
.lich-to__vong::before { left: 0; }
.lich-to__vong::after { right: 0; }

.lich-to__do {
  padding: 20px 10px 14px;
  background: var(--do-lich); color: #fff;
  text-align: center;
}
.lich-to__thu { margin: 0 0 2px; font-size: 1.05rem; font-weight: 600; letter-spacing: .02em; }
.lich-to__ngay { margin: 0; font: 700 4.2rem/1 var(--font-chu); }

.lich-to__trang { padding: 16px 20px 20px; text-align: center; }
.lich-to__thang-nam { margin: 0 0 12px; font-size: 1.15rem; font-weight: 600; color: var(--chu); }
.lich-to__duong-xe { margin: 0 0 12px; border: none; border-top: 2px dashed var(--vien); }
.lich-to__am { margin: 0 0 4px; font: 400 1.2rem/1.4 var(--font-tay); color: var(--dat-dam); }
.lich-to__can-chi { margin: 0 0 14px; font-size: .98rem; color: var(--chu-nhat); }
.lich-to__loi-chuc { margin: 0; padding-top: 12px; border-top: 1px dashed var(--vien); font-size: 1.02rem; line-height: 1.55; }

/* ---------- Khối sự kiện nổi bật (trang chủ) ---------- */
.noi-bat {
  position: relative;
  max-width: 860px; margin: 0 auto;
  padding: 26px 24px 22px;
  background: var(--trang);
  border: 3px solid var(--la); border-radius: var(--bo-goc);
  box-shadow: 0 4px 14px rgba(59, 47, 34, .2);
  text-align: center;
}
.noi-bat__nhan {
  display: inline-block; margin: 0 0 10px; padding: 4px 18px;
  background: var(--la-dam); color: #fff;
  border-radius: 999px; font-size: 1rem; font-weight: 600;
}
.noi-bat__ten { margin: 0 0 6px; font-size: clamp(1.8rem, 5vw, 2.6rem); }
.noi-bat__dem {
  margin: 0 0 16px;
  font: 400 clamp(2rem, 7vw, 3rem)/1.2 var(--font-tay);
  color: var(--dat-dam);
}
.noi-bat__chi-tiet { display: inline-block; max-width: 620px; text-align: left; }
.noi-bat__chi-tiet .su-kien__dong { margin-bottom: 6px; }
/* Khối "thiệp mời": khung viền kép trang trọng, tách khỏi phần giờ giấc/địa điểm ở trên */
.noi-bat__thiep {
  position: relative;
  max-width: 560px; margin: 20px auto 0;
  padding: 26px 28px 22px;
  background: var(--giay);
  border: 2px solid var(--dat);
  outline: 1px solid var(--dat);
  outline-offset: -6px;
  border-radius: 4px;
}
.noi-bat__thiep-nhan {
  margin: 0 0 14px;
  font: 400 1.15rem var(--font-tay);
  letter-spacing: .04em;
  color: var(--dat-dam);
}
.noi-bat__thiep-loi {
  margin: 0;
  font-size: 1.2rem; line-height: 1.75;
  color: var(--chu);
  white-space: pre-line;
}
.noi-bat__thiep-ky {
  margin: 16px 0 0;
  font: 400 1.6rem var(--font-tay);
  color: var(--la-dam);
  text-align: right;
}
@media (max-width: 479px) { .noi-bat__thiep { padding: 22px 18px 18px; } }

.noi-bat__nut { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 20px 0 0; }
@media (max-width: 559px) {
  .noi-bat { padding: 22px 16px 18px; }
  .noi-bat__nut .nut { width: 100%; }
}

/* Ảnh minh hoạ của sự kiện (nơi họp mặt…) */
.su-kien__anh { display: grid; gap: 14px; margin: 16px 0 0; }
@media (min-width: 560px) { .su-kien__anh { grid-template-columns: 1fr 1fr; } }
.su-kien__anh figure { margin: 0; }
.su-kien__anh a { display: block; border: 1px solid var(--vien); border-radius: 8px; overflow: hidden; background: var(--giay-dam); }
.su-kien__anh a:hover { border-color: var(--la-dam); }
.su-kien__anh img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.su-kien__anh figcaption { padding: 6px 2px 0; font-size: .95rem; line-height: 1.45; color: var(--chu-nhat); text-align: center; }

/* Thẻ sự kiện chính trong danh sách */
.su-kien--danh-dau { border: 3px solid var(--la); }
.nhan-chinh {
  padding: 1px 10px; border-radius: 999px;
  background: var(--la-dam); color: #fff;
  font-size: .9rem; font-weight: 600; line-height: 1.6;
}

/* ---------- Chuyện trò ---------- */
.bai-chuyen {
  padding: 20px 20px 16px;
  background: var(--trang);
  border: 1px solid var(--vien); border-top: 5px solid var(--dat);
  border-radius: 6px;
  box-shadow: var(--bong);
}
.bai-chuyen--tan-gau { border-top-color: var(--la); }
.bai-chuyen--thoi-su { border-top-color: #5C7488; }
.bai-chuyen__ten { margin: 0 0 8px; font-size: 1.6rem; }
.bai-chuyen__noi-dung { margin: 0 0 10px; white-space: pre-line; }
.bai-chuyen__noi-dung.thu-gon {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6;
  overflow: hidden;
}
.nut-doc-tiep {
  min-height: 44px; margin: 0 0 10px; padding: 6px 14px;
  border: 2px solid var(--vien); border-radius: 999px;
  background: var(--giay); color: var(--la-dam);
  font: 600 1rem var(--font-chu);
  cursor: pointer;
}
.nut-doc-tiep:hover { border-color: var(--la-dam); }
.bai-chuyen__nguon { margin: 0 0 10px; font-size: 1rem; }
.bai-chuyen__tac-gia { margin: 0; padding-top: 10px; border-top: 1px dashed var(--vien); font-size: 1rem; color: var(--chu-nhat); }
.bai-chuyen__tac-gia strong { color: var(--la-dam); }

.noi-quy {
  margin-bottom: 22px; padding: 14px 16px;
  background: var(--la-nhat); border-left: 5px solid var(--la);
  border-radius: 6px; font-size: 1.05rem; line-height: 1.6;
}
.noi-quy ul { margin: 6px 0 0; padding-left: 22px; }
.noi-quy li { margin-bottom: 4px; }

.o-danh-dau { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.o-danh-dau input { width: 28px; height: 28px; margin: 2px 0 0; accent-color: var(--la-dam); }
.o-danh-dau label { margin: 0; font-weight: 500; cursor: pointer; }

/* ---------- Ô tìm lớp (trang chủ) ---------- */
.tim-lop {
  display: grid; gap: 14px; align-items: end;
  max-width: 860px; margin: 0 auto; padding: 20px;
  background: var(--la-nhat); border: 2px solid var(--la); border-radius: var(--bo-goc);
}
.tim-lop h2 { margin: 0; font-size: 1.8rem; }
.tim-lop label { display: block; font-weight: 600; margin-bottom: 4px; }
.tim-lop select {
  width: 100%; min-height: 52px; padding: 10px 12px;
  border: 2px solid #B9A98A; border-radius: 8px;
  background: #fff; color: var(--chu); font: 400 1.125rem/1.5 var(--font-chu);
}
@media (min-width: 720px) { .tim-lop { grid-template-columns: 1fr 1fr auto; } .tim-lop h2 { grid-column: 1 / -1; } }
.tim-lop__phu { text-align: center; margin: 12px 0 0; }
.tim-lop__phu a { display: inline-block; padding: 8px 4px; }

/* ---------- Đường dẫn (Lớp & Khóa › Khóa › Lớp) ---------- */
.duong-dan ol { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 6px; font-size: 1rem; }
.duong-dan li + li::before { content: "›"; margin-right: 6px; color: var(--chu-nhat); }
.duong-dan a, .duong-dan span { display: inline-block; padding: 6px 2px; }
.duong-dan [aria-current] { color: var(--chu-nhat); }

/* ---------- Ô tìm theo tên ---------- */
.tim-ten {
  margin-bottom: 24px; padding: 18px;
  background: var(--trang); border: 1px solid var(--vien); border-radius: var(--bo-goc); box-shadow: var(--bong);
}
.tim-ten label { display: block; font-weight: 600; margin-bottom: 6px; }
.tim-ten .goi-y { display: block; font-weight: 400; font-size: .95rem; color: var(--chu-nhat); }
.tim-ten input {
  width: 100%; min-height: 52px; padding: 12px 14px;
  border: 2px solid #B9A98A; border-radius: 8px;
  background: #fff; color: var(--chu); font: 400 1.125rem/1.5 var(--font-chu);
}
.tim-ten input:focus { border-color: var(--la-dam); outline: 3px solid var(--la-nhat); outline-offset: 0; }
.ds-tim-ten { list-style: none; margin: 12px 0 0; padding: 0; }
.ds-tim-ten a { display: block; padding: 12px 6px; border-bottom: 1px solid var(--vien); color: var(--chu); text-decoration: none; }
.ds-tim-ten a:hover { background: var(--la-nhat); color: var(--chu); }
.ds-tim-ten strong { color: var(--la-dam); }
.tim-ten .trong-rong { padding: 16px 0 0; }

/* ---------- Thẻ khóa, thẻ lớp ---------- */
.luoi-the { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.the-khoa {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--trang); border: 1px solid var(--vien); border-radius: var(--bo-goc); box-shadow: var(--bong);
  color: var(--chu); text-decoration: none;
}
.the-khoa:hover { box-shadow: 0 5px 14px rgba(59, 47, 34, .25); color: var(--chu); }
.the-khoa img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--giay-dam); }
.the-khoa__than { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.the-khoa__than strong { font: 400 1.5rem/1.3 var(--font-tay); color: var(--la-dam); }
.the-khoa__than span { font-size: 1rem; color: var(--chu-nhat); }
.the-khoa__than .nhan-mau { margin: 4px 0 0; }

/* ---------- Trang một lớp ---------- */
.lop-dau { display: grid; gap: 28px; align-items: start; margin-bottom: 40px; }
.lop-dau__chu { display: inline-block; margin-top: 6px; font: 400 1rem/1.5 var(--font-chu); color: var(--chu); }
@media (min-width: 900px) { .lop-dau { grid-template-columns: 1.4fr 1fr; } }
.lop-dau .anh-dan { transform: rotate(-.8deg); }
.lop-dau__tt .thong-bao { margin-top: 0; }
.ds-hoc-sinh { margin: 0; padding: 0; column-gap: 32px; }
@media (min-width: 600px) { .ds-hoc-sinh { columns: 2; } }
.ds-hoc-sinh li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; break-inside: avoid; margin-left: 2em; padding: 8px 6px; border-bottom: 1px dashed var(--vien); }
.ds-hoc-sinh li::marker { color: var(--chu-nhat); }
.hs-anh { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; background: var(--la-nhat); }
.hs-anh-boc { display: block; flex: none; line-height: 0; border-radius: 50%; }
.hs-anh-boc:focus-visible { outline: 3px solid var(--dat); outline-offset: 2px; }
.hs-chu { min-width: 120px; flex: 1 1 auto; }
.ds-hoc-sinh strong { font-weight: 600; }
.ds-hoc-sinh span { display: block; font-size: .95rem; color: var(--chu-nhat); }
.hs-chu .hs-ghi-chu { font-style: italic; }
.hs--noi-bat { background: #FBE3B5; border-radius: 6px; }
.hs-gui-anh {
  flex: 1 1 100%;
  min-height: 44px; padding: 6px 14px;
  font-size: .95rem;
}

/* Hộp gửi ảnh cá nhân (trang Lớp & Khóa) */
.hop-anh-hs { max-width: min(92vw, 480px); margin: auto; padding: 0; border: 0; border-radius: var(--bo-goc); background: transparent; }
.hop-anh-hs::backdrop { background: rgba(30, 24, 17, .7); }
.hop-anh-hs .bieu-mau { max-width: none; margin: 0; max-height: 88vh; overflow: auto; }
.hop-anh-hs__nut { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

/* ---------- Thầy cô ---------- */
.nhom-thay { margin-bottom: 36px; }
.nhom-thay__ten { font-size: 1.8rem; padding-bottom: 4px; border-bottom: 2px solid var(--vien); }
.luoi-thay { display: grid; gap: 18px; }
@media (min-width: 760px) { .luoi-thay { grid-template-columns: 1fr 1fr; } }
.the-thay {
  display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: start;
  padding: 16px;
  background: var(--trang); border: 1px solid var(--vien); border-radius: var(--bo-goc); box-shadow: var(--bong);
  scroll-margin-top: 20px;
}
.the-thay__anh { width: 96px; height: 96px; object-fit: cover; border: 3px solid #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(59, 47, 34, .25); }
.the-thay__anh-boc { display: block; width: fit-content; padding: 0; border: 0; background: none; cursor: zoom-in; }
.the-thay__anh-boc:focus-visible { outline: 3px solid var(--dat); outline-offset: 2px; }
.the-thay__than { min-width: 0; }
.the-thay__than .nhan-mau { display: inline-block; }
.the-thay__ten { margin: 0 0 4px; font-size: 1.5rem; }
.the-thay__mon { margin: 0 0 6px; font-weight: 500; color: var(--dat-dam); }
.the-thay__gioi-thieu, .the-thay__lop { margin: 0 0 6px; }
.the-thay__ky-niem { margin: 10px 0 0; padding: 8px 12px; border-left: 4px solid var(--la); border-radius: 0 6px 6px 0; background: var(--giay); }
.the-thay__gui { display: block; margin-top: 10px; min-height: 44px; padding: 6px 14px; font-size: .95rem; }
.the-thay__ky-niem p { margin: 0; font: 400 1.25rem/1.5 var(--font-tay); }
.the-thay__ky-niem footer { font-size: .95rem; color: var(--chu-nhat); }
.the-thay--noi-bat { outline: 3px solid var(--dat); outline-offset: 3px; }
@media (max-width: 479px) {
  .the-thay { grid-template-columns: 72px 1fr; gap: 12px; padding: 14px; }
  .the-thay__anh { width: 72px; height: 72px; }
  .the-thay__ten { font-size: 1.35rem; }
}
/* Tưởng nhớ: trầm, không màu mè */
.tuong-nho { background: #F3F1EC; border-block: 1px solid #D8D2C4; }
.tuong-nho h2 { color: #3B372F; }
.the-thay--tuong-nho { background: #FAF9F6; border-color: #CFC8B8; }
.the-thay--tuong-nho .the-thay__anh { filter: grayscale(1); }
.the-thay--tuong-nho .the-thay__ten { color: #3B372F; }

/* ---------- Bài viết dài (Giới thiệu) ---------- */
.bai-viet { max-width: 760px; }
.bai-viet h2 { margin-top: 1.4em; }
.bai-viet .anh-dan { margin: 8px 0 28px; transform: rotate(-.6deg); }
.can-bo-sung {
  margin: 0 0 1.2em; padding: 12px 16px;
  background: #FFF6DC; border: 2px dashed var(--dat); border-radius: 8px;
  color: #5E3D10; font-size: 1.05rem;
}
.dong-thoi-gian { list-style: none; margin: 0 0 1em 8px; padding: 0; border-left: 3px solid var(--la); }
.dong-thoi-gian li { position: relative; display: grid; gap: 2px; padding: 0 0 22px 24px; }
.dong-thoi-gian li::before {
  content: ""; position: absolute; left: -11px; top: 7px;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--la-dam); border: 3px solid var(--giay);
}
.dong-thoi-gian__moc { font: 400 1.5rem/1.3 var(--font-tay); color: var(--dat-dam); }
.dong-thoi-gian p { margin: 0; }
.dong-thoi-gian--trong { color: var(--chu-nhat); }
.dong-thoi-gian li.dong-thoi-gian--trong::before { background: var(--giay); box-shadow: inset 0 0 0 3px var(--la); }

/* ---------- Liên hệ ---------- */
.lien-he-luoi { display: grid; gap: 28px; align-items: start; }
@media (min-width: 960px) { .lien-he-luoi { grid-template-columns: 1.5fr 1fr; } }
.lien-he-luoi .bieu-mau { max-width: none; margin: 0; }
.lien-he-luoi .bieu-mau h2 { font-size: 1.8rem; }
.hop-thong-tin {
  margin-bottom: 20px; padding: 20px;
  background: var(--trang); border: 1px solid var(--vien); border-radius: var(--bo-goc); box-shadow: var(--bong);
}
.hop-thong-tin h2 { font-size: 1.6rem; }
.hop-thong-tin ol { margin: 0; padding-left: 22px; }
.hop-thong-tin li { margin-bottom: 8px; }
.hop-gui-anh { margin-bottom: 22px; padding: 14px 16px; background: var(--la-nhat); border-radius: 8px; }
.hop-sua-thong-tin { margin-bottom: 22px; padding: 14px 16px; background: var(--la-nhat); border-radius: 8px; }

/* ---------- Lời mời đóng góp ---------- */
.moi-gop {
  display: grid; gap: 18px; align-items: center;
  padding: 28px 24px;
  background: var(--la-nhat);
  border: 2px dashed var(--la); border-radius: var(--bo-goc);
  text-align: center;
}
.moi-gop h2, .moi-gop p { margin: 0; }
.moi-gop__nut { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.moi-gop__zalo { margin-top: 8px !important; font-weight: 600; color: var(--la-dam); }
@media (min-width: 820px) { .moi-gop { grid-template-columns: 1fr auto; text-align: left; } }

/* ---------- Chân trang ---------- */
.chan-trang {
  margin-top: 24px; padding-block: 36px 28px;
  background: var(--la-dam); color: #EEF3E6;
  font-size: 1rem;
}
.chan-trang a { color: #fff; }
.chan-trang__luoi { display: grid; gap: 28px; }
@media (min-width: 768px) { .chan-trang__luoi { grid-template-columns: 1.4fr 1fr; } }
.chan-trang h2 { color: #fff; font-size: 1.6rem; margin-bottom: .3em; }
.chan-trang ul { list-style: none; margin: 0; padding: 0; columns: 2; }
.chan-trang li a { display: inline-block; padding: 7px 0; }
.chan-trang__cuoi { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .25); font-size: .9rem; color: #D5E2C6; }

/* Tôn trọng cài đặt giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}