/* coingay.net — lịch âm kiểu cổ điển (10/11/2026). Bố cục lịch vạn niên quen thuộc: băng đỏ, thanh menu tối,
   tờ lịch bloc, bảng tháng kẻ ô. Không dùng framework, không font tải ngoài. */
:root {
  --nen: #ece5d3; --giay: #fffdf7; --ke: #c9b98f; --ke-nhat: #e3d8bb;
  --son: #a51d12; --son-dam: #6f120a; --vang: #f4c84a; --vang-nhat: #fff4c2;
  --muc: #222; --muc-nhat: #5a5040; --xanh: #0b5d8f; --luc: #1d7a3e; --tim: #6b2b7a;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--nen); color: var(--muc); font: 14px/1.55 Tahoma, Verdana, Arial, sans-serif; }
a { color: var(--xanh); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--son); }
img { max-width: 100%; }

.khung { width: 1000px; max-width: 100%; margin: 0 auto; }

/* Băng đầu */
.bang-dau { background: linear-gradient(#b92a1c, #7c160c); border-bottom: 3px solid var(--vang); }
.bang-dau .khung { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 12px; }
.logo { display: flex; align-items: center; gap: 12px; color: #fff; }
.logo:hover { text-decoration: none; color: #fff; }
.logo .an { width: 52px; height: 52px; border: 2px solid var(--vang); border-radius: 4px; background: #8c1a0f; color: var(--vang);
  display: grid; place-items: center; font: bold 26px/1 "Times New Roman", serif; box-shadow: inset 0 0 0 2px #8c1a0f, inset 0 0 0 3px #f4c84a88; }
.logo b { display: block; font: bold 30px/1 "Times New Roman", Times, serif; letter-spacing: 1px; color: var(--vang); text-shadow: 1px 1px 0 #4a0b05; }
.logo b small { font-size: 16px; color: #fff; letter-spacing: 0; }
.logo i { display: block; font-style: normal; font-size: 12.5px; color: #ffe6c7; margin-top: 4px; }
.bang-dau .gio { color: #ffe6c7; font-size: 12.5px; text-align: right; }
.bang-dau .gio strong { color: #fff; font-size: 14px; }

/* Thanh menu */
.menu { background: linear-gradient(#3a3a3a, #1f1f1f); border-bottom: 1px solid #000; }
.menu ul { list-style: none; margin: 0 auto; padding: 0 6px; display: flex; flex-wrap: wrap; }
.menu li { position: relative; }
.menu > .khung > ul > li > a, .menu > .khung > ul > li > span { display: block; padding: 10px 13px; color: #eee; font-weight: bold; font-size: 13px; text-transform: uppercase; cursor: pointer; }
.menu > .khung > ul > li > a:hover, .menu li:hover > span, .menu li.dang > a { background: var(--son); color: #fff; text-decoration: none; }
.menu li ul { display: none; position: absolute; z-index: 20; top: 100%; left: 0; min-width: 210px; padding: 6px 0; background: #fff; border: 1px solid #999; box-shadow: 0 4px 10px #0004; flex-direction: column; }
.menu li ul.luoi-nam { min-width: 260px; display: none; grid-template-columns: repeat(4, 1fr); }
.menu li:hover ul, .menu li:focus-within ul { display: flex; }
.menu li:hover ul.luoi-nam, .menu li:focus-within ul.luoi-nam { display: grid; }
.menu li ul a { display: block; padding: 5px 14px; color: #333; font-size: 13px; white-space: nowrap; }
.menu li ul a:hover { background: var(--vang-nhat); text-decoration: none; }

/* Thân trang */
.than { background: var(--giay); border-left: 1px solid var(--ke); border-right: 1px solid var(--ke); padding: 14px 14px 24px; }
.duong-dan { font-size: 12.5px; color: var(--muc-nhat); margin-bottom: 10px; }
h1 { font: bold 22px/1.3 "Times New Roman", Times, serif; color: var(--son); margin: 2px 0 12px; text-transform: uppercase; }
.tieu-de { margin: 22px 0 10px; padding: 7px 10px; background: linear-gradient(#f7efd8, #eadcb4); border: 1px solid var(--ke); border-left: 5px solid var(--son);
  font: bold 15px/1.3 Tahoma, Arial, sans-serif; color: var(--son-dam); text-transform: uppercase; }
.tieu-de:first-child { margin-top: 0; }
.cot { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cot-chinh { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
p { margin: 0 0 10px; }
.mo { color: var(--muc-nhat); }

/* Tờ lịch bloc */
.to-lich { border: 1px solid var(--ke); background: #fff; text-align: center; box-shadow: 0 2px 0 #d8caa6; }
.to-lich .dau { background: var(--son); color: #fff; padding: 6px; font-weight: bold; font-size: 15px; text-transform: uppercase; letter-spacing: .5px; }
.to-lich .lo { height: 10px; background: repeating-linear-gradient(90deg, transparent 0 18px, #7c160c 18px 26px); opacity: .55; }
.to-lich .so { font: bold 116px/1 "Times New Roman", Times, serif; color: var(--son); padding: 8px 0 0; }
.to-lich.cuoi-tuan .so { color: var(--son); }
.to-lich.thuong .so { color: #1a1a1a; }
.to-lich .thu { font-size: 20px; font-weight: bold; color: var(--muc); padding-bottom: 6px; }
.to-lich .le { background: var(--vang-nhat); border-top: 1px dashed var(--ke); color: var(--son); font-weight: bold; padding: 6px; }
.to-lich .chan { display: flex; justify-content: space-between; border-top: 1px solid var(--ke-nhat); font-size: 13px; }
.to-lich .chan a { padding: 7px 12px; font-weight: bold; }
.to-am { border: 1px solid var(--ke); background: #fbfaf2; box-shadow: 0 2px 0 #d8caa6; }
.to-am .dau { background: var(--luc); color: #fff; text-align: center; padding: 6px; font-weight: bold; font-size: 15px; text-transform: uppercase; }
.to-am .giua { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 10px; padding: 12px 14px; }
.to-am .so { font: bold 76px/1 "Times New Roman", Times, serif; color: var(--luc); text-align: center; }
.to-am .so small { display: block; font: bold 14px/1.4 Tahoma, Arial, sans-serif; color: var(--muc-nhat); }
.to-am dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 13.5px; }
.to-am dt { color: var(--muc-nhat); }
.to-am dd { margin: 0; font-weight: bold; }
.to-am .ket { border-top: 1px dashed var(--ke); padding: 8px 14px; font-size: 13.5px; }
.hoang { color: var(--son); font-weight: bold; }
.hac { color: #333; font-weight: bold; }

/* Bảng tháng */
.bang-thang { width: 100%; border-collapse: collapse; table-layout: fixed; background: #fff; }
.bang-thang caption { background: var(--son-dam); color: #fff; padding: 0; font-weight: bold; }
.bang-thang caption div { display: flex; justify-content: space-between; align-items: center; }
.bang-thang caption a { color: var(--vang); padding: 7px 12px; font-size: 16px; }
.bang-thang caption span { font-size: 15px; text-transform: uppercase; }
.bang-thang th { background: #efe5c8; border: 1px solid var(--ke); padding: 5px 0; font-size: 12.5px; color: var(--muc-nhat); }
.bang-thang th:last-child { color: var(--son); }
.bang-thang td { border: 1px solid var(--ke); vertical-align: top; height: 62px; padding: 0; }
.bang-thang td a { display: block; height: 100%; min-height: 62px; padding: 4px 5px; color: var(--muc); position: relative; }
.bang-thang td a:hover { background: var(--vang-nhat); text-decoration: none; }
.bang-thang .d { font: bold 20px/1 "Times New Roman", Times, serif; }
.bang-thang .cuoi .d { color: var(--son); }
.bang-thang .a { position: absolute; right: 5px; bottom: 4px; font-size: 12px; color: var(--luc); }
.bang-thang .a.mong { color: var(--son); font-weight: bold; }
.bang-thang .cc { display: block; font-size: 10.5px; color: #8a7f6a; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bang-thang .cham { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; }
.bang-thang .cham.hoang-dao { background: var(--son); }
.bang-thang .cham.hac-dao { background: #444; }
.bang-thang .le-o { background: #fff0e6; }
.bang-thang .hom-nay { background: var(--vang-nhat); outline: 2px solid var(--vang); outline-offset: -2px; }
.bang-thang .chon { background: #fde7c0; outline: 2px solid var(--son); outline-offset: -2px; }
.chu-giai { font-size: 12.5px; color: var(--muc-nhat); margin-top: 6px; display: flex; gap: 14px; flex-wrap: wrap; }
.chu-giai i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }

/* Bảng chữ */
.bang { width: 100%; border-collapse: collapse; background: #fff; font-size: 13.5px; }
.bang th, .bang td { border: 1px solid var(--ke); padding: 6px 8px; text-align: left; vertical-align: top; }
.bang th { background: #efe5c8; color: var(--son-dam); white-space: nowrap; }
.bang tr:nth-child(even) td { background: #fbf7ea; }
.bang .hang-tot td { background: #fff7d6 !important; }
.bang-gio { display: grid; grid-template-columns: repeat(6, 1fr); border-left: 1px solid var(--ke); border-top: 1px solid var(--ke); }
.bang-gio div { border-right: 1px solid var(--ke); border-bottom: 1px solid var(--ke); padding: 6px 4px; text-align: center; background: #fff; font-size: 12.5px; }
.bang-gio div b { display: block; font-size: 14px; }
.bang-gio div.tot { background: #fff4d6; }
.bang-gio div.tot b { color: var(--son); }
.bang-gio div span { color: var(--muc-nhat); }

.huy-hieu { display: inline-block; padding: 1px 8px; border-radius: 3px; font-size: 12px; font-weight: bold; color: #fff; }
.huy-hieu.tot { background: var(--son); }
.huy-hieu.kha { background: #c67b12; }
.huy-hieu.thuong { background: #6c6c6c; }
.huy-hieu.xau { background: #222; }
.nen li::marker { color: var(--luc); }
.ky li::marker { color: var(--son); }
ul.gon { margin: 4px 0 0; padding-left: 18px; }

/* Cột phải */
.hop { border: 1px solid var(--ke); background: #fff; margin-bottom: 14px; }
.hop h3 { margin: 0; padding: 7px 10px; background: linear-gradient(#5a5a5a, #2d2d2d); color: #fff; font-size: 13px; text-transform: uppercase; }
.hop ul { list-style: none; margin: 0; padding: 4px 0; }
.hop li a { display: block; padding: 5px 12px; border-bottom: 1px dotted var(--ke-nhat); color: var(--muc); }
.hop li a::before { content: "» "; color: var(--son); }
.hop li a:hover { background: var(--vang-nhat); text-decoration: none; }
.hop .noi { padding: 10px 12px; font-size: 13px; }
.nut { display: inline-block; padding: 6px 14px; background: linear-gradient(#c43424, #8f1a0f); border: 1px solid #6f120a; color: #fff; font-weight: bold; border-radius: 3px; cursor: pointer; font-size: 13.5px; }
.nut:hover { color: #fff; text-decoration: none; filter: brightness(1.08); }
.quang-ba { border: 2px solid var(--vang); background: #fffaf0; padding: 12px; text-align: center; }
.quang-ba b { color: var(--son); display: block; font-size: 15px; margin-bottom: 4px; }

/* Form */
form.doi { background: #faf5e6; border: 1px solid var(--ke); padding: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
form.doi select, form.doi input[type=number] { padding: 5px 6px; border: 1px solid #a9996f; background: #fff; font: inherit; }
form.doi label { font-weight: bold; }
.the-loi { background: #ffe9e6; border: 1px solid #e3a59d; color: #8f1a0f; padding: 8px 12px; margin-top: 10px; }

/* Năm */
.luoi-12 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.luoi-12 .bang-thang td { height: auto; }
.luoi-12 .bang-thang td a { min-height: 0; padding: 3px 2px; text-align: center; }
.luoi-12 .bang-thang .d { font-size: 14px; }
.luoi-12 .bang-thang .a { position: static; display: block; font-size: 10px; }

.dem-nguoc { text-align: center; padding: 22px 10px; border: 2px solid var(--son); background: #fff8ec; }
.dem-nguoc .so { font: bold 92px/1 "Times New Roman", Times, serif; color: var(--son); }

/* Chân trang */
.chan-trang { background: #2a2a2a; color: #bbb; font-size: 12.5px; border-top: 3px solid var(--son); }
.chan-trang .khung { padding: 14px 12px 22px; }
.chan-trang a { color: #f0d68a; }
.chan-trang p { margin: 4px 0; }

@media (max-width: 760px) {
  .bang-dau .gio { display: none; }
  .logo b { font-size: 24px; }
  .menu > .khung > ul > li > a, .menu > .khung > ul > li > span { padding: 9px 9px; font-size: 12px; }
  .cot, .cot-chinh { grid-template-columns: 1fr; }
  .than { padding: 12px 8px 20px; }
  .bang-thang td, .bang-thang td a { height: 52px; min-height: 52px; }
  .bang-thang .d { font-size: 17px; }
  .bang-thang .cc { display: none; }
  .bang-gio { grid-template-columns: repeat(3, 1fr); }
  .luoi-12 { grid-template-columns: 1fr 1fr; }
  .to-lich .so { font-size: 96px; }
}
@media (max-width: 420px) { .luoi-12 { grid-template-columns: 1fr; } }