/* Popup Họp báo 19.10.2026 — Trường ĐH Sân khấu – Điện ảnh Hà Nội */
.hb-overlay{--red:#BE1E2D;--red-dark:#9E1624;--red-hover:#8A1220;--paper:#F7F0E6;--paper-2:#EFE4D5;--ink:#1E1213;--muted:#6b5a5b;--line:#d9cbbb;
  position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;
  background:rgba(28,10,12,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  font-family:'Be Vietnam Pro',system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  opacity:0;transition:opacity .35s ease;}
.hb-overlay.hb-show{opacity:1;}
.hb-overlay *{box-sizing:border-box;margin:0;padding:0;}
.hb-serif{font-family:'Playfair Display',Georgia,serif;}

.hb-dialog{position:relative;flex:0 0 1100px;width:1100px;height:660px;display:grid;grid-template-columns:44fr 56fr;
  background:var(--paper);color:var(--ink);box-shadow:0 40px 120px rgba(0,0,0,.5);overflow:hidden;
  transform:scale(var(--hb-scale,1)) translateY(16px);transition:transform .45s cubic-bezier(.2,.8,.2,1);}
.hb-show .hb-dialog{transform:scale(var(--hb-scale,1)) translateY(0);}

/* Poster đỏ */
.hb-poster{position:relative;background:var(--red);color:var(--paper);overflow:hidden;display:flex;flex-direction:column;}
.hb-perfs{display:flex;gap:14px;padding:16px 22px;background:var(--red-dark);overflow:hidden;flex:0 0 auto;}
.hb-perfs i{flex:0 0 14px;height:18px;background:var(--paper);border-radius:2px;}
.hb-watermark{position:absolute;right:-130px;bottom:-40px;width:500px;height:500px;filter:brightness(0) invert(1);opacity:.08;pointer-events:none;}
.hb-poster-body{position:relative;flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:38px 44px 34px;}
.hb-mhead{display:none;}
.hb-kicker{display:flex;flex-direction:column;align-items:flex-start;gap:14px;}
.hb-badge{font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--red);background:var(--paper);padding:6px 10px;white-space:nowrap;}
.hb-title{font-weight:800;font-size:68px;line-height:.95;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--paper);}
.hb-weekday{font-size:14px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;margin-bottom:6px;}
.hb-date{font-weight:800;font-size:176px;line-height:.86;letter-spacing:-.03em;white-space:nowrap;}
.hb-date em{font-style:italic;font-weight:500;}
.hb-yearrow{display:flex;align-items:center;gap:14px;margin-top:14px;}
.hb-year{font-style:italic;font-size:38px;line-height:1;}
.hb-rule{flex:1;height:1px;background:rgba(247,240,230,.5);}
.hb-time{font-size:15px;font-weight:700;letter-spacing:.08em;white-space:nowrap;}
.hb-venue{display:flex;flex-direction:column;gap:4px;border-top:1px solid rgba(247,240,230,.45);padding-top:16px;}
.hb-label{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;}
.hb-venue-name{font-size:26px;font-weight:700;line-height:1.15;}
.hb-venue-sub{font-size:13px;opacity:.92;}

/* Nội dung */
.hb-content{position:relative;display:flex;flex-direction:column;padding:34px 48px 30px;min-height:0;}
.hb-close{position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:50%;border:1px solid var(--ink);background:transparent;color:var(--ink);
  font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s;}
.hb-close:hover{background:var(--ink);color:var(--paper);}
.hb-school{display:flex;align-items:center;gap:12px;padding-right:56px;}
.hb-school img{width:46px;height:46px;}
.hb-school span{font-size:11.5px;font-weight:700;letter-spacing:.08em;line-height:1.45;color:var(--red-hover);white-space:nowrap;}
.hb-eyebrow{margin-top:24px;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--red);}
.hb-headline{margin-top:8px;font-size:26px;line-height:1.2;font-weight:500;text-wrap:pretty;}
.hb-name{margin-top:6px;display:flex;align-items:baseline;gap:14px;white-space:nowrap;color:var(--red);}
.hb-name-a{font-family:'Playfair Display',Georgia,serif;font-weight:800;font-size:34px;letter-spacing:.1em;text-transform:uppercase;line-height:1;}
.hb-name-b{font-style:italic;font-weight:500;font-size:46px;line-height:1;}
.hb-headline em{font-style:italic;color:var(--red);}
.hb-content-date{display:none;margin-top:16px;font-size:13px;font-weight:600;color:var(--muted);}
.hb-content-date b{color:var(--ink);font-weight:700;}
.hb-moments{margin-top:22px;list-style:none;border-top:1px solid var(--ink);}
.hb-moments li{display:grid;grid-template-columns:62px 1fr;gap:16px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line);}
.hb-moments .hb-t{font-style:italic;font-size:19px;color:var(--red);}
.hb-moments b{display:block;font-size:14.5px;font-weight:700;}
.hb-moments small{display:block;font-size:12px;color:var(--muted);margin-top:1px;}
.hb-spacer{flex:1;min-height:12px;}
.hb-count{display:flex;align-items:center;gap:22px;margin-bottom:18px;}
.hb-count-label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:600;white-space:nowrap;}
.hb-count-units{display:flex;gap:18px;}
.hb-count-units div{display:flex;align-items:baseline;gap:6px;}
.hb-count-units strong{font-family:'Playfair Display',Georgia,serif;font-size:32px;font-weight:700;line-height:1;}
.hb-count-units span{font-size:12px;color:var(--muted);}
.hb-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.hb-btns{display:flex;gap:12px;flex:0 0 auto;flex-wrap:nowrap;}
.hb-btn{display:flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;flex:0 0 auto;font-size:14px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:background .2s,color .2s;}
.hb-btn-primary{background:var(--red);color:var(--paper);padding:15px 26px;font-weight:700;}
.hb-btn-primary:hover{background:var(--red-hover);color:var(--paper);}
.hb-hide{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);cursor:pointer;}
.hb-hide input{accent-color:var(--red);}

/* ===== MOBILE DỌC ===== */
@media (max-width:819px),(max-height:519px){
  /* Dang "bottom sheet": chua full man hinh, luon chua lai mot khoang nen mo (backdrop) o tren
     cung de nguoi dung thay ro day la popup noi len tren trang, khong tuong la mot trang web
     rieng, va biet co the cham ra ngoai (hoac nut dong) de tat. */
  .hb-overlay{align-items:flex-end;}
  .hb-dialog{flex:0 1 auto;width:100%;max-width:440px;height:auto;max-height:86dvh;margin:0 auto;
    display:flex;flex-direction:column;overflow-y:auto;border-radius:20px 20px 0 0;
    transform:translateY(100%);}
  .hb-show .hb-dialog{transform:translateY(0);}
  /* Khong cho poster/content bi flex-shrink ep ngan lai khi dien thoai that co thanh dia chi/thanh
     dieu huong chiem nhieu khong gian — neu khong, phan bi ep se bi .hb-poster{overflow:hidden}
     cat mat (vd so "19.10", nam, dia diem...) thay vi duoc cuon xuong xem binh thuong qua
     overflow-y:auto cua .hb-dialog. */
  .hb-poster, .hb-content { flex-shrink: 0; }
  .hb-perfs{gap:11px;padding:10px 14px;}
  .hb-perfs i{flex-basis:11px;height:14px;}
  .hb-perfs-bottom,.hb-content>.hb-close,.hb-school{display:none;}
  .hb-watermark{right:-90px;top:80px;bottom:auto;width:330px;height:330px;}
  .hb-poster-body{padding:20px 24px 24px;justify-content:flex-start;}
  .hb-mhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:26px;}
  .hb-mhead .hb-mschool{display:flex;align-items:center;gap:10px;}
  .hb-mhead img{width:34px;height:34px;filter:brightness(0) invert(1);}
  .hb-mhead span{font-size:9.5px;font-weight:700;letter-spacing:.08em;line-height:1.45;}
  .hb-mhead .hb-close{position:static;flex:0 0 44px;border-color:var(--paper);color:var(--paper);font-size:18px;}
  .hb-kicker{gap:10px;}
  .hb-badge{font-size:10px;padding:5px 8px;}
  .hb-title{font-size:50px;letter-spacing:.05em;}
  .hb-when{margin-top:18px;}
  .hb-weekday{font-size:12px;}
  .hb-date{font-size:118px;line-height:.88;}
  .hb-yearrow{gap:12px;margin-top:10px;}
  .hb-year{font-size:28px;}
  .hb-time{font-size:13px;letter-spacing:.06em;}
  .hb-venue{margin-top:18px;padding-top:12px;gap:2px;}
  .hb-venue .hb-label{display:none;}
  .hb-venue-name{font-size:21px;}
  .hb-venue-sub{font-size:12.5px;}
  .hb-content{padding:22px 24px 20px;}
  .hb-eyebrow{margin-top:0;font-size:11px;}
  .hb-headline{margin-top:6px;font-size:21px;line-height:1.22;}
  .hb-name{gap:10px;}
  .hb-name-a{font-size:24px;letter-spacing:.12em;}
  .hb-name-b{font-size:33px;}
  .hb-content-date{display:block;margin-top:10px;font-size:12px;order:0;}
  /* Cat bot phan duoi tren Mobile — chi giu header/eyebrow/headline/ten su kien + dem nguoc, bo
     danh sach "Khoanh khac" va o "Khong hien lai hom nay" de popup gon hon, khong lan het man
     hinh va de thay ro day la popup (xem cung yeu cau o media query ben tren). */
  .hb-moments, .hb-hide{display:none;}
  .hb-spacer{display:none;}
  .hb-count{order:1;margin:16px 0 0;gap:16px;padding:12px 0 4px;border-top:1px solid var(--ink);}
  .hb-count-label{font-size:10.5px;letter-spacing:.18em;}
  .hb-count-units{gap:16px;}
  .hb-count-units div{gap:4px;}
  .hb-count-units strong{font-size:24px;}
  .hb-count-units span{font-size:11px;}
  .hb-actions{order:3;display:contents;}
  .hb-overlay .hb-btns{position:sticky;bottom:0;z-index:2;
    display:grid;grid-template-columns:1fr;gap:10px;padding:12px 16px calc(16px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line);}
  .hb-btn{min-height:50px;font-size:13.5px;}
  .hb-btn-primary{padding:0 16px;}
}
@media (prefers-reduced-motion:reduce){.hb-overlay,.hb-dialog{transition:none;}}