/* Sự kiện — dải trang chủ (#suKien) + trang /su-kien/ (danh sách và chi tiết).
   Chỉ dùng biến màu của style.css / doi-tong.css nên đổi tông Xanh/Vàng là tự đổi theo.
   Quy ước màu: đỏ gạch --nhan CHỈ cho nút Giữ bàn; xanh (--den-ho-phach) cho nhãn đếm ngược, chip, đường kẻ. */

/* ---------- Thẻ sự kiện (dùng chung dải trang chủ và trang danh sách) ---------- */
.sk-the{ min-width:0; }
.sk-the-lk{
  display:block; height:100%; text-decoration:none; color:var(--chu-nhat);
  background:var(--kinh); border:1px solid var(--kinh-vien); border-radius:18px; overflow:hidden;
  transition:transform .2s ease, border-color .2s ease;
}
.sk-the-lk:hover, .sk-the-lk:focus-visible{ transform:translateY(-3px); border-color:var(--den-ho-phach); }
.sk-the-khung{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  background:linear-gradient(160deg, var(--nen-noi), rgb(var(--rgb-nhan2)));
}
.sk-the-khung picture, .sk-the-khung img{ display:block; width:100%; height:100%; }
.sk-the-khung img{ object-fit:cover; object-position:center top; }
.sk-khong-anh{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  color:var(--chu-nhat);
}
.sk-khong-anh b{ font-size:3.6rem; font-weight:800; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.sk-khong-anh span{ font-size:.85rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--den-ho-phach-nhat); }

/* Nhãn đếm ngược: nền tối, chữ xanh; sắp đến (hôm nay / ngày mai / đang diễn ra) thì đặc màu xanh cho nổi */
.sk-nhan{
  position:absolute; top:10px; left:10px; z-index:1;
  background:rgba(var(--rgb-chim),.82); color:var(--den-ho-phach-nhat);
  border:1px solid rgba(var(--rgb-nhan),.5);
  font-size:.74rem; font-weight:700; letter-spacing:.03em; line-height:1;
  padding:6px 10px; border-radius:999px; backdrop-filter:blur(4px);
}
.sk-nhan.gan{ background:var(--den-ho-phach); color:var(--nen-chim); border-color:var(--den-ho-phach); }
.sk-nhan.qua{ color:var(--chu-nhat-mo); border-color:var(--kinh-vien); }

.sk-the-than{ padding:12px 14px 16px; }
.sk-ngay{ margin:0 0 4px; font-size:.78rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--den-ho-phach-nhat); }
.sk-the h3{ margin:0 0 6px; font-size:1.02rem; line-height:1.28; font-weight:700; color:var(--chu-nhat); overflow-wrap:anywhere; }
.sk-meta{ margin:0; font-size:.82rem; color:var(--chu-nhat-mo); line-height:1.4; }
.sk-the.qua .sk-the-khung img{ filter:saturate(.8); }

/* ---------- Dải trang chủ ---------- */
.sk-dai{ background:var(--nen-noi); padding:36px 0 40px; border-bottom:1px solid var(--vien-toi); }
.sk-dai[hidden]{ display:none !important; }
.sk-dai-dau{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:16px; }
.sk-dai-dau .nhan-so{ margin:0; }
.sk-dai-dau a{ color:var(--den-ho-phach-nhat); font-size:.88rem; font-weight:600; text-decoration:none; white-space:nowrap; }
.sk-dai-dau a:hover{ text-decoration:underline; }
/* Hàng cuộn ngang; ít thẻ thì tự căn giữa, nhiều thẻ thì cuộn (lề auto hai đầu) */
.sk-hang{
  display:flex; gap:16px; overflow-x:auto; padding:4px 20px 12px; margin:0 -20px;
  scroll-snap-type:x proximity; scroll-padding:0 20px; -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.sk-hang > .sk-the{ flex:0 0 min(64vw, 240px); scroll-snap-align:start; }
.sk-hang > .sk-the:first-child{ margin-left:auto; }
.sk-hang > .sk-the:last-child{ margin-right:auto; }

/* ---------- Trang danh sách ---------- */
body.trang-su-kien main section{ padding:0; }
.sk-dau{ padding:56px 0 8px !important; }
.sk-dau .tieu-de-lon{ margin-bottom:12px; }
.sk-dan{ max-width:640px; margin:0; color:var(--chu-nhat-mo); font-size:1.02rem; }
.sk-khoi{ padding:32px 0 8px !important; }
.sk-khoi:last-of-type{ padding-bottom:72px !important; }
.sk-khoi-qua{ margin-top:16px; border-top:1px solid var(--vien-toi); padding-top:40px !important; }
.sk-h2{ font-size:1.5rem; margin:0 0 20px; }
.sk-luoi{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; }
.sk-rong{ padding:26px 24px; max-width:640px; }
.sk-rong p{ margin:0 0 14px; color:var(--chu-nhat-mo); }
.sk-rong p:last-child{ margin-bottom:0; }
.sk-trong{ padding:72px 0 !important; text-align:center; }
.sk-trong p{ color:var(--chu-nhat-mo); }
.sk-khoi.sk-trong{ padding:32px 0 72px !important; text-align:left; }

/* ---------- Trang chi tiết ---------- */
.sk-ct{ padding:28px 0 80px !important; }
.sk-quay-lai{ margin:0 0 20px; font-size:.9rem; }
.sk-quay-lai a{ color:var(--chu-nhat-mo); text-decoration:none; }
.sk-quay-lai a:hover{ color:var(--den-ho-phach-nhat); }
.sk-quay-lai i{ font-style:normal; color:var(--den-ho-phach-nhat); }
.sk-ct-luoi{ display:grid; grid-template-columns:minmax(0,460px) minmax(0,1fr); gap:40px; align-items:start; }
.sk-ct-luoi.khong-anh{ grid-template-columns:minmax(0,1fr); max-width:720px; }
.sk-ct-poster{ overflow:hidden; border-radius:18px; }
.sk-ct-poster picture, .sk-ct-poster img{ display:block; width:100%; height:auto; }
.sk-ct-nhan{ margin:0 0 14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sk-ct-nhan .sk-nhan{ position:static; display:inline-block; }
.sk-chuoi{ font-size:.82rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--chu-nhat-mo); }
.sk-ct h1{ font-size:clamp(1.8rem, 4.4vw, 2.8rem); line-height:1.1; margin:0 0 22px; overflow-wrap:anywhere; }
.sk-thongtin{ margin:0 0 22px; padding:0; display:grid; gap:0; border-top:1px solid var(--vien-toi); }
.sk-thongtin > div{ display:grid; grid-template-columns:110px minmax(0,1fr); gap:12px; padding:11px 0; border-bottom:1px solid var(--vien-toi); }
.sk-thongtin dt{ font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--den-ho-phach-nhat); padding-top:2px; }
.sk-thongtin dd{ margin:0; color:var(--chu-nhat); overflow-wrap:anywhere; }
.sk-thongtin dd a{ color:var(--chu-nhat); text-decoration-color:var(--den-ho-phach); text-underline-offset:3px; }
.sk-phu{ font-size:.86rem; color:var(--chu-nhat-mo); }
.sk-mota{ white-space:pre-line; margin:0 0 26px; color:var(--chu-nhat); line-height:1.7; overflow-wrap:anywhere; }
.sk-hanh-dong{ display:flex; flex-wrap:wrap; gap:12px; }
.sk-hanh-dong a{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; text-align:center; }

/* Thanh trên: mục "Sự kiện" đang ở trang này */
nav.menu-chinh a.dang-o-day{ border-color:var(--den-ho-phach); color:var(--den-ho-phach-nhat); }

@media (max-width:900px){
  .sk-luoi{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
  .sk-ct-luoi{ grid-template-columns:minmax(0,1fr); gap:24px; }
  .sk-ct-poster{ max-width:460px; }
}
@media (max-width:520px){
  .sk-dai{ padding:28px 0 32px; }
  .sk-dau{ padding-top:36px !important; }
  .sk-the-than{ padding:10px 11px 13px; }
  .sk-the h3{ font-size:.94rem; }
  .sk-khong-anh b{ font-size:3rem; }
  .sk-thongtin > div{ grid-template-columns:88px minmax(0,1fr); }
  .sk-hanh-dong a{ flex:1 1 100%; }
}
@media (prefers-reduced-motion:reduce){
  .sk-the-lk{ transition:none; }
  .sk-the-lk:hover, .sk-the-lk:focus-visible{ transform:none; }
}