/* Popup "Liên hoan nghệ thuật Chuyện Thanh Xuân" — bố cục giống hệt banner hero của trang
   "/chuyen-thanh-xuan/" (xem page-chuyen-thanh-xuan.php): badge serif 1 dòng, "Chuyện" trắng +
   "Thanh Xuân" đỏ tươi viền trắng, 4 hạng mục, đếm ngược chạy (có giây + %giây), nút "Xem chi
   tiết" dẫn sang trang chi tiết. Co che mo/dong/overlay tai dung ky thuat cua popup-2010.css. */
.ctxp-overlay{--red:#BE1E2D;--red-bright:#FF1433;--paper:#F7F0E6;--ink:#120a0b;
  position:fixed;inset:0;z-index:99998;display:flex;align-items:center;justify-content:center;
  background:rgba(14,6,7,.8);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 .4s ease;padding:20px;}
.ctxp-overlay.ctxp-show{opacity:1;}
.ctxp-overlay *{box-sizing:border-box;}

.ctxp-dialog .skda-fw-canvas{position:absolute;inset:0;z-index:0;pointer-events:none;}

.ctxp-dialog{position:relative;width:100%;max-width:640px;max-height:92vh;overflow:auto;
  border-radius:16px;box-shadow:0 50px 140px rgba(0,0,0,.55);background-color:var(--ink);
  background-size:cover;background-position:center 38%;
  transform:scale(.94) translateY(18px);transition:transform .5s cubic-bezier(.2,.8,.2,1);
  border:1px solid rgba(201,160,78,.35);}
.ctxp-show .ctxp-dialog{transform:scale(1) translateY(0);}
.ctxp-dialog::before{content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(25,8,10,.32) 0%,rgba(25,8,10,.55) 45%,rgba(18,6,7,.92) 100%);}

.ctxp-close{position:absolute;top:14px;right:14px;z-index:3;width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(247,240,230,.35);background:rgba(14,6,7,.45);color:var(--paper);
  font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(2px);transition:background .2s;}
.ctxp-close:hover{background:rgba(190,30,45,.8);}

.ctxp-content{position:relative;z-index:1;padding:40px 30px 32px;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:14px;color:var(--paper);}

.ctxp-brand{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.ctxp-brand img{width:26px;height:26px;object-fit:contain;filter:brightness(0) invert(1);flex:none;}
.ctxp-brand span{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;}

.ctxp-eyebrow{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:600;
  font-size:clamp(14px,2.6vw,18px);letter-spacing:.02em;white-space:nowrap;}

.ctxp-name{display:flex;flex-direction:column;align-items:center;gap:20px;margin:2px 0;}
.ctxp-name-a{font-family:'Playfair Display',Georgia,serif;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;line-height:1;font-size:clamp(30px,7vw,46px);color:var(--paper);}
.ctxp-name-b{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500;
  line-height:1;font-size:clamp(38px,9vw,62px);color:var(--red-bright);
  text-shadow:-1.5px -1.5px 0 var(--paper),1.5px -1.5px 0 var(--paper),-1.5px 1.5px 0 var(--paper),
  1.5px 1.5px 0 var(--paper),0 -1.5px 0 var(--paper),0 1.5px 0 var(--paper),-1.5px 0 0 var(--paper),
  1.5px 0 0 var(--paper),0 6px 18px rgba(0,0,0,.4);}

.ctxp-yearrow{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:700;letter-spacing:.04em;}
.ctxp-yearrow i{font-style:italic;font-family:'Playfair Display',Georgia,serif;font-size:17px;}
.ctxp-rule{width:28px;height:1px;background:rgba(247,240,230,.5);}

.ctxp-cats-k{font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;margin-top:4px;}
.ctxp-cats{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:clamp(13px,2.4vw,15.5px);}

.ctxp-lead{font-family:'Playfair Display',Georgia,serif;font-size:clamp(15px,2.6vw,19px);
  font-weight:500;line-height:1.3;max-width:460px;}
.ctxp-lead em{font-style:italic;color:var(--paper);}

.ctxp-count-k{font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  margin-top:6px;opacity:.9;}
.ctxp-count{display:flex;justify-content:center;gap:16px;}
.ctxp-count div{display:flex;align-items:baseline;gap:3px;}
.ctxp-count strong{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:clamp(22px,5vw,30px);line-height:1;}
.ctxp-count span{font-size:10.5px;}
.ctxp-count .ctxp-cs strong{font-size:clamp(14px,3vw,17px);opacity:.8;}

.ctxp-cta{margin-top:10px;display:inline-flex;align-items:center;gap:8px;padding:13px 28px;
  border-radius:999px;background:var(--red-bright);color:#fff;font-weight:700;font-size:14px;
  letter-spacing:.03em;text-decoration:none;box-shadow:0 10px 30px rgba(255,20,51,.35);
  transition:transform .2s,background .2s;}
.ctxp-cta:hover{background:#ff3a56;transform:translateY(-2px);color:#fff;}

@media (max-width:620px){
  .ctxp-overlay{padding:0;align-items:flex-end;}
  .ctxp-dialog{max-width:none;max-height:94dvh;border-radius:18px 18px 0 0;
    transform:translateY(100%);transition:transform .45s cubic-bezier(.2,.8,.2,1);}
  .ctxp-show .ctxp-dialog{transform:translateY(0);}
  .ctxp-content{padding:34px 20px calc(28px + env(safe-area-inset-bottom));}
  .ctxp-count{flex-wrap:wrap;gap:12px;}
}
@media (prefers-reduced-motion:reduce){.ctxp-overlay,.ctxp-dialog{transition:none;}}