/* Lịch hôm nay kiểu cuống vé (trang chủ, mục #hom-nay — JS: lich-hom-nay.js): cuống đỏ nhỏ + thân vé 3 dòng (ngày & âm lịch · hàng nhãn lễ/宜/忌 · thông điệp).
   Không nhãn in hoa, không đường kẻ trong thân; chỉ giữ đường chấm xé giữa cuống và thân. Góc giấy dưới phải: bấm để xé. */
/* màu tờ lịch đổi theo thứ (JS gắn data-thu 0–6, lấy màu các hộp trên kệ) */
.lichve{--lv:var(--coral);--lv-s:var(--coral-s)}
.lichve{--lv-d:color-mix(in srgb,var(--lv) 85%,#000)}   /* chữ đậm theo màu ngày; giao diện tối thì sáng lên */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lichve{--lv-d:color-mix(in srgb,var(--lv) 65%,#fff)}}
:root[data-theme="dark"] .lichve{--lv-d:color-mix(in srgb,var(--lv) 65%,#fff)}
.lichve[data-thu="0"]{--lv:var(--rose);--lv-s:var(--rose-s)}
.lichve[data-thu="2"]{--lv:var(--peach);--lv-s:var(--peach-s)}
.lichve[data-thu="3"]{--lv:var(--mint);--lv-s:var(--mint-s)}
.lichve[data-thu="4"]{--lv:var(--sky);--lv-s:var(--sky-s)}
.lichve[data-thu="5"]{--lv:var(--lav);--lv-s:var(--lav-s)}
.lichve[data-thu="6"]{--lv:var(--teal);--lv-s:var(--teal-s)}
.lichve{position:relative;z-index:6;display:grid;grid-template-columns:170px minmax(0,1fr);max-width:860px;margin:22px auto 8px;filter:drop-shadow(0 10px 18px rgba(43,46,69,.1));overflow-anchor:none}
/* cuống */
.lichve .cuong{display:flex;flex-direction:column;align-items:flex-start;padding:18px 18px 16px;border-radius:18px 0 0 18px;color:#fff;
  position:relative;overflow:hidden;
  background:radial-gradient(120% 70% at 0 0,rgba(255,255,255,.22),transparent 60%),
    linear-gradient(165deg,color-mix(in srgb,var(--lv) 82%,#fff),var(--lv) 45%,color-mix(in srgb,var(--lv) 80%,#000));
  -webkit-mask:radial-gradient(circle at 100% 0,#0000 11px,#000 11.5px) top/100% 51% no-repeat,radial-gradient(circle at 100% 100%,#0000 11px,#000 11.5px) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle at 100% 0,#0000 11px,#000 11.5px) top/100% 51% no-repeat,radial-gradient(circle at 100% 100%,#0000 11px,#000 11.5px) bottom/100% 51% no-repeat}
/* trang trí cuống: chấm in lưới mờ góc trên phải + chữ thứ thật to mờ làm nền */
.lichve .cuong::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.38) 1.1px,transparent 1.6px) 0 0/8px 8px;
  -webkit-mask:linear-gradient(215deg,#000,transparent 42%);mask:linear-gradient(215deg,#000,transparent 42%)}
.lichve .cuong>*{position:relative;z-index:1}
.lichve .cuong>.nen{position:absolute;z-index:0;right:-18px;bottom:-34px;font:400 150px/1 var(--hz);font-style:normal;color:rgba(255,255,255,.14);pointer-events:none;user-select:none}
.lichve .seri{width:100%;margin-top:10px;padding-top:7px;border-top:1.5px dashed rgba(255,255,255,.5);font:700 10.5px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.14em;opacity:.85}
.lichve .cz{font:400 22px/1.1 var(--hz);letter-spacing:.04em}
.lichve .cv{font-size:12px;font-weight:700;opacity:.9}
.lichve .cvui{margin-top:6px;padding:5px 9px;border-radius:10px 10px 10px 3px;background:rgba(255,255,255,.16);font-size:12px;line-height:1.35;font-weight:600}
.lichve .cuong .so{font:800 86px/.88 var(--vi);text-shadow:0 3px 0 rgba(0,0,0,.13);letter-spacing:-.05em;margin-top:auto;padding-top:10px;font-variant-numeric:tabular-nums}
.lichve .thu{font:400 20px/1.2 var(--hz);letter-spacing:.06em;margin-top:4px}
.lichve .ve-lai{margin-top:10px;display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border:1.5px solid rgba(255,255,255,.8);border-radius:10px;background:rgba(255,255,255,.12);color:#fff;font:700 12px var(--vi);cursor:pointer}
.lichve .ve-lai .lli{width:14px;height:14px}
/* thân vé */
.lichve .than{position:relative;padding:18px 26px 18px;border-radius:0 18px 18px 0;background:var(--card);
  -webkit-mask:radial-gradient(circle at 0 0,#0000 11px,#000 11.5px) top/100% 51% no-repeat,radial-gradient(circle at 0 100%,#0000 11px,#000 11.5px) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle at 0 0,#0000 11px,#000 11.5px) top/100% 51% no-repeat,radial-gradient(circle at 0 100%,#0000 11px,#000 11.5px) bottom/100% 51% no-repeat}
.lichve .than::before{content:"";position:absolute;left:0;top:14px;bottom:14px;border-left:2px dotted color-mix(in srgb,var(--lv) 45%,transparent)}
.lichve .tem{position:absolute;right:18px;top:16px;font:400 13px var(--hz);letter-spacing:.1em;color:var(--lv);border:1.5px solid var(--lv);border-radius:6px;padding:0 7px;transform:rotate(7deg);opacity:.8}
.lichve p{margin:0}
/* dòng 1: ngày + âm lịch */
.lichve .nz{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:400 26px/1.2 var(--kai);color:var(--ink);padding-right:56px}
.lichve .nz span{color:var(--lv-d)}
.lichve .am{margin-top:2px;font:400 15px var(--kai);color:var(--muted)}
.lichve .am span{font:500 12.5px var(--vi)}
/* dòng 2: nhãn nhỏ */
.lichve .hang{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.lichve .nhan{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 4px;border-radius:999px;background:var(--ground2);font-size:12px;color:var(--muted);line-height:1.4}
.lichve .nhan b{font:400 14px var(--kai);color:var(--ink);font-weight:400}
.lichve .nhan i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font:400 12px var(--hz);font-style:normal;color:#fff;background:var(--mint)}
.lichve .nhan i.ji{background:var(--faint)}
/* 宜 và 忌 chung một nhãn, không bao giờ tách dòng */
.lichve .nhan.yj{white-space:nowrap;padding-right:12px}
.lichve .nhan.yj .vach{width:1px;height:16px;margin:0 6px;background:color-mix(in srgb,var(--muted) 35%,transparent)}
.lichve .nhan.le{padding-left:10px;background:var(--lv-s)} .lichve .nhan.le b{color:var(--lv-d)}
.lichve .nhan.le.nay{background:var(--lv);color:#fff} .lichve .nhan.le.nay b{color:#fff}
/* dòng 3: thông điệp */
.lichve .tdg{position:relative;margin-top:12px;padding:10px 30px 0 0;border-top:1px dashed var(--line)}
.lichve .tdg p{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.lichve .tz{font:400 19px/1.3 var(--kai);color:var(--ink)}
.lichve .tv{font-size:13px;color:var(--muted)}
.lichve .tdd{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px;margin-top:4px;font-size:11.5px;color:var(--muted)}
/* máy tính: thân vé cao theo cuống → ô thông điệp nền nhạt giãn ra lấp phần còn lại (không để khe trống), chữ căn giữa dọc */
@media (min-width:601px){
  .lichve{grid-template-columns:186px minmax(0,1fr)}
  .lichve .than{display:flex;flex-direction:column}
  .lichve .hang{margin-bottom:12px}
  .lichve .tdg{flex:1;display:flex;flex-direction:column;justify-content:center;margin:0 18px 0 0;padding:12px 18px;border:0;border-radius:14px;
    background:color-mix(in srgb,var(--lv) 7%,var(--card))}
  .lichve .tdg p{display:block}
  .lichve .tz{display:block;font-size:25px;line-height:1.35;margin-left:-.45em}
  .lichve .tv{display:block;margin-top:3px;font-size:14px}
  .lichve .tdd{margin-top:8px}
}
.lichve .may b{font:400 13.5px var(--kai);color:var(--ink);font-weight:400}
.lichve .may i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--m);margin:0 3px}
.lichve .cung{margin-left:auto;display:inline-flex;align-items:center;gap:5px;padding:4px 8px 4px 9px;border:1.5px solid color-mix(in srgb,var(--lav) 45%,transparent);border-radius:999px;
  background:color-mix(in srgb,var(--lav) 9%,var(--card));color:color-mix(in srgb,var(--lav) 85%,#000);font:700 12px var(--vi);cursor:pointer;transition:background .2s,border-color .2s}
.lichve .cung:hover,.lichve .cung[aria-expanded="true"]{background:color-mix(in srgb,var(--lav) 18%,var(--card));border-color:var(--lav)}
.lichve .cung b{font:400 14px var(--kai);color:var(--ink);font-weight:400}
.lichve .cung .lli{width:14px;height:14px} .lichve .cung .mui{width:12px;height:12px;opacity:.7;transition:transform .2s}
.lichve .cung[aria-expanded="true"] .mui{transform:rotate(180deg)}
/* bảng chọn cung: mở ngay dưới tờ lịch, bên phải */
.lichve .bang-cung{position:absolute;z-index:20;right:8px;top:calc(100% + 10px);width:min(440px,calc(100vw - 32px));padding:14px;border-radius:18px;background:var(--card);box-shadow:0 18px 40px -12px rgba(43,46,69,.35),0 0 0 1px var(--line);
  animation:bc-hien .2s ease}
@keyframes bc-hien{from{opacity:0;transform:translateY(-6px)}}
.lichve .bang-cung::before{content:"";position:absolute;right:44px;top:-7px;width:14px;height:14px;background:var(--card);transform:rotate(45deg);box-shadow:-1px -1px 0 var(--line)}
.lichve .bc-dau{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:13.5px}
.lichve .bc-dau>span{font:400 15px var(--hz);color:var(--lav)}
.lichve .bc-ngay{margin-left:auto;padding:4px 12px;border:1.5px solid var(--line);border-radius:999px;background:var(--card);font:700 12px var(--vi);color:var(--muted);cursor:pointer}
.lichve .bc-luoi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.lichve .bc-luoi button{display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 4px 7px;border:1.5px solid transparent;border-radius:12px;background:var(--ground2);cursor:pointer;line-height:1.25;transition:transform .15s,background .15s}
.lichve .bc-luoi button:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--lav) 12%,var(--ground2))}
.lichve .bc-luoi b{font:400 17px var(--hz);color:var(--ink);font-weight:400}
.lichve .bc-luoi span{font-size:12px;font-weight:700;color:var(--ink)}
.lichve .bc-luoi small{font-size:10.5px;color:var(--muted)}
.lichve .bang-cung .chon{border-color:var(--lav);background:color-mix(in srgb,var(--lav) 16%,var(--card))}
.lichve .bc-ngay.chon{color:color-mix(in srgb,var(--lav) 85%,#000)}
.lichve .bang-cung button:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
@media (max-width:600px){.lichve .bang-cung{left:0;right:0;width:auto}.lichve .bc-luoi{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* trang ngày mai: che bớt thông điệp */
.lichve .tdg.an p,.lichve .tdg.an .tdd{filter:blur(5px);opacity:.7;user-select:none;pointer-events:none}
.lichve .khoa{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%) rotate(-3deg);display:flex;align-items:baseline;gap:8px;padding:3px 12px;border-radius:10px;
  background:var(--card);box-shadow:var(--shadow);font:400 16px var(--hz);color:var(--lv-d);white-space:nowrap}
.lichve .khoa small{font:700 11px var(--vi);color:var(--muted)}
/* góc giấy cong dưới phải: bấm để xé */
.lichve .goc{position:absolute;z-index:3;right:0;bottom:0;width:30px;height:30px;padding:0;border:0;cursor:pointer;border-radius:0 0 18px 0;
  background:linear-gradient(to top left,var(--ground) 49.5%,transparent 50%),linear-gradient(to bottom right,color-mix(in srgb,var(--lv) 10%,var(--card)) 30%,color-mix(in srgb,var(--lv) 28%,var(--card)));
  filter:drop-shadow(-2px -2px 3px rgba(0,0,0,.14));transition:width .3s cubic-bezier(.3,1.4,.5,1),height .3s cubic-bezier(.3,1.4,.5,1)}
.lichve .goc:hover,.lichve .goc:focus-visible{width:50px;height:50px}
@media (prefers-reduced-motion:no-preference){.lichve .goc{animation:lv-ve 3s ease-in-out 1.5s 2}}
@keyframes lv-ve{0%,70%,100%{width:30px;height:30px}80%{width:44px;height:44px}}
.lichve button:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.lichve .spk{display:inline-grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;cursor:pointer;background:var(--lv-s);color:var(--lv-d)}
.lichve .spk .lli{width:15px;height:15px}
/* xé: cả tấm vé rơi xuống, trang mới hiện ra */
.lichve.roi{transform-origin:100% 100%;animation:lv-roi .65s cubic-bezier(.5,0,.75,0) forwards}
@keyframes lv-roi{25%{transform:rotate(-2deg) translate(-4px,-6px)}100%{transform:rotate(8deg) translate(80px,200px);opacity:0}}
.lichve.mo{animation:lv-mo .3s ease forwards} @keyframes lv-mo{to{opacity:0;transform:translateY(-6px)}}
.lichve.hien{animation:lv-hien .4s ease} @keyframes lv-hien{from{opacity:0;transform:translateY(-10px)}}
/* xé theo đường chấm (JS xeDuongCham): lớp phủ là bản sao tờ hôm nay; .manh = thân vé bị giật ra rồi rơi, cuống cũ mờ dần */
.lichve .xe-lop{position:absolute;inset:0;z-index:3;display:grid;grid-template-columns:inherit;pointer-events:none;animation:lv-het 1.25s linear forwards}
@keyframes lv-het{to{visibility:hidden}}
.lichve .xe-lop>.cuong{animation:lv-cuong .3s ease .75s forwards}
@keyframes lv-cuong{to{opacity:0}}
.lichve .xe-lop .manh{display:grid;transform-origin:100% 0;filter:drop-shadow(0 8px 12px rgba(43,46,69,.18));
  animation:lv-giat 1.05s cubic-bezier(.45,0,.7,.4) forwards}
.lichve .xe-lop .manh>.than{height:100%}
@keyframes lv-giat{
  0%{transform:none}
  10%{transform:translateX(7px) rotate(.8deg)}
  18%{transform:translateX(2px) rotate(-.2deg)}
  30%{transform:translateX(12px) rotate(1.6deg)}
  42%{transform:translate(18px,6px) rotate(4deg);opacity:1}
  100%{transform:translate(110px,320px) rotate(18deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.lichve.roi,.lichve.mo,.lichve.hien{animation:none}}

@media (max-width:600px){
  .lichve{grid-template-columns:1fr}
  .lichve .cuong{border-radius:18px 18px 0 0;-webkit-mask:none;mask:none;display:grid;grid-template-columns:auto 1fr auto;column-gap:12px;align-items:center;padding:12px 16px}
  .lichve .cuong .so{grid-row:1/3;grid-column:1;font-size:58px;padding:0;margin:0}
  .lichve .seri{display:none}
  .lichve .cuong>.nen{right:auto;left:48%;bottom:-30px;font-size:112px}
  .lichve .cz{grid-column:2;font-size:19px} .lichve .cv{grid-column:2}
  .lichve .cvui{grid-column:1/-1;justify-self:start;margin-top:8px}
  .lichve .thu{grid-column:3;grid-row:1/3;margin:0;font-size:18px}
  .lichve .ve-lai{grid-column:1/-1;justify-self:start}
  .lichve .than{border-radius:0 0 18px 18px;-webkit-mask:none;mask:none;padding:14px 14px 16px}
  .lichve .than::before{left:14px;right:14px;top:0;bottom:auto;border-left:0;border-top:2px dotted color-mix(in srgb,var(--lv) 45%,transparent)}
  .lichve .tem{top:12px;right:12px}
  .lichve .nz{font-size:22px;padding-right:44px}
}