/* Tầng 1 — token mặc định. Preset và token riêng của popup ghi đè lên đây. */
.bskp{
  --bskp-bg:#fff; --bskp-fg:#0f1c1a;
  --bskp-overlay:rgba(20,30,28,.55); --bskp-overlay-blur:3px;
  /* Đi theo màu chữ của popup chứ không phải một màu xám cố định: popup nền
     tối dùng màu cố định thì nút đóng chỉ còn tương phản 1.29:1 — đo được trên
     nền xanh #315f58. Lấy currentColor rồi hạ độ đậm cho nhẹ mắt vẫn đạt 4:1. */
  --bskp-close-fg:currentColor;
  /* Cỡ dấu ×, tách khỏi vùng bấm 44x44 bên dưới: vùng bấm là chuyện ngón tay,
     cỡ dấu là chuyện thẩm mỹ — trộn hai thứ thì sửa cái này hỏng cái kia. */
  --bskp-close-size:22px;
  --bskp-radius:16px; --bskp-pad:28px;
  --bskp-w:clamp(280px,92vw,640px); --bskp-maxh:86vh;
  --bskp-shadow:0 20px 60px rgba(16,28,26,.22);
  --bskp-font:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --bskp-fs:15px;
  --bskp-dur:.22s; --bskp-ease:cubic-bezier(.2,.7,.3,1);
  /* Vượt đà một nhịp rồi về — chỉ dùng cho kiểu "bật nhẹ". */
  --bskp-ease-bat:cubic-bezier(.34,1.56,.64,1);

  border:0; padding:0; margin:auto;
  width:var(--bskp-w); max-width:100%; max-height:var(--bskp-maxh);
  background:var(--bskp-bg); color:var(--bskp-fg);
  border-radius:var(--bskp-radius); box-shadow:var(--bskp-shadow);
  font-family:var(--bskp-font); font-size:var(--bskp-fs);
  overflow:hidden;
}
.bskp::backdrop{
  background:var(--bskp-overlay);
  -webkit-backdrop-filter:blur(var(--bskp-overlay-blur));
  backdrop-filter:blur(var(--bskp-overlay-blur));
}
/* Khung cuộn của popup nằm ở .bskp-body — scrollHost() của wizard sẽ tìm ra nó. */
.bskp-body{padding:var(--bskp-pad); max-height:var(--bskp-maxh); overflow-y:auto}
/* Chừa chỗ cho nút đóng ở mấy dòng đầu.
   Đo trên popup 300px trước khi sửa: dòng chữ đầu chui xuống dưới dấu × 12px.
   Dùng float chứ không phải padding-right: padding thì popup NÀO cũng lệch tâm
   kể cả popup rộng vốn chẳng vướng gì, còn float chỉ ăn chỗ đúng mấy dòng đầu,
   qua khỏi nút là chữ tự chạy đủ bề ngang lại.
   Con số: nút chiếm từ mép phải vào 48px (4px lề + 44px vùng bấm), nội dung đã
   được đệm sẵn --bskp-pad, nên phần còn thò vào là 48px trừ đi đệm; cộng 6px
   cho chữ khỏi dính sát. Đệm lớn hơn 54px thì nút không vướng nữa → max() cho
   về 0 thay vì ra số âm. */
.bskp-body::before{
  content:""; float:right;
  width:max(0px, calc(54px - var(--bskp-pad)));
  height:max(0px, calc(54px - var(--bskp-pad)));
}
/* 44x44 là ngưỡng vùng chạm tối thiểu của WCAG (WordPress dùng 50x50 cho hộp
   thoại thư viện). Đo trên khung 390px trước khi sửa: nút chỉ 27x28px, rất khó
   bấm trúng bằng ngón tay. Vùng bấm trong suốt nên to ra không làm nặng mắt —
   thứ nhìn thấy là dấu ×, cỡ của nó nằm ở --bskp-close-size. */
/* Lá chắn: theme và kit Elementor đặt padding/nền/font/viền cho mọi <button>
   với độ ưu tiên (0,1,1), cao hơn .bskp-close — trên site thật dấu × thành một
   nút to màu nền, font chân. Chốt hình hài bằng !important; hover/focus đổi qua biến. */
.bskp-close{
  --bskp-close-bg:transparent;
  position:absolute !important; top:4px !important; right:4px !important; z-index:2;
  width:44px !important; height:44px !important; min-width:0 !important; min-height:0 !important;
  padding:0 !important; margin:0 !important; box-sizing:border-box !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  border:0 !important; border-radius:50% !important; background:var(--bskp-close-bg) !important; background-image:none !important;
  box-shadow:none !important; text-shadow:none !important; cursor:pointer;
  font-family:var(--bskp-font) !important; font-size:var(--bskp-close-size) !important; font-weight:400 !important; line-height:1 !important;
  letter-spacing:normal !important; text-transform:none !important;
  color:var(--bskp-close-fg) !important; opacity:.6;
  transition:opacity .15s ease;
}
.bskp-close:hover,
.bskp-close:focus-visible{opacity:1; --bskp-close-bg:rgba(127,127,127,.14)}

@media (prefers-reduced-motion: reduce){
  .bskp-close{transition:none}
}
.bskp-close:focus-visible{outline:2px solid currentColor; outline-offset:2px}

/* Màn hẹp: đệm 28px mỗi bên ăn mất 15% bề ngang — đo thực tế trên khung 390px
   thì cột nội dung chỉ còn 311px. Co lại cho chữ có chỗ thở. */
@media (max-width:480px){
  .bskp{--bskp-pad:18px}
}

/* Kích thước */
.bskp[data-size="sm"]  {--bskp-w:clamp(260px,90vw,420px)}
.bskp[data-size="lg"]  {--bskp-w:clamp(300px,94vw,880px)}
/* "Toàn màn hình" phải đặt thẳng thuộc tính, không đi qua token:
   - chiều cao: max-height chỉ là trần, popup vẫn co theo nội dung. Đo thực tế
     một đoạn văn ra 87px trên màn 844px — không ai gọi thế là toàn màn hình.
   - bo góc: preset in ra `.bskp[data-bskp-id="N"]{--bskp-radius:16px}` qua thẻ
     style nội tuyến, cùng độ cụ thể nhưng đứng SAU nên đè mất token ở đây.
     Đặt thẳng border-radius thì selector này cụ thể hơn `.bskp` và luôn thắng. */
.bskp[data-size="full"]{
  --bskp-w:100vw; --bskp-maxh:100vh;
  width:100vw; max-width:100vw;
  height:var(--bskp-maxh);
  border-radius:0;
}

/* dvh trừ đi phần thanh công cụ trình duyệt di động đang chiếm, vh thì không —
   dùng vh trên điện thoại sẽ để đáy popup bị thanh dưới che mất. */
@supports (height:100dvh){
  .bskp{--bskp-maxh:86dvh}
  .bskp[data-size="full"]{--bskp-maxh:100dvh}
}


/* Vị trí — dialog dùng margin:auto để căn giữa, đổi margin là đổi vị trí. */
.bskp[data-pos="top"]         {margin-top:4vh;    margin-bottom:auto}
.bskp[data-pos="bottom"]      {margin-top:auto;   margin-bottom:4vh}
.bskp[data-pos="left"]        {margin-left:4vw;   margin-right:auto}
.bskp[data-pos="right"]       {margin-left:auto;  margin-right:4vw}
.bskp[data-pos="top-left"]    {margin:4vh auto auto 4vw}
.bskp[data-pos="top-right"]   {margin:4vh 4vw auto auto}
.bskp[data-pos="bottom-left"] {margin:auto auto 4vh 4vw}
.bskp[data-pos="bottom-right"]{margin:auto 4vw 4vh auto}

/* Chuyển động — chỉ chạy khi JS gắn .bskp-in sau showModal() */
/* Trong lúc chạy chuyển động đóng, popup thôi làm modal (popup.js gọi close()
   rồi show()) để trang hết inert NGAY khi khách bấm.
   Vì sao cần: đo trên production, độ mờ về 0 ở mốc ~1 giây trong khi dialog còn
   mở tới ~2 giây — gần một giây khách nhìn thấy popup đã biến mất nhưng bấm vào
   trang thì không gì phản hồi, vì modal làm cả trang inert. pointer-events KHÔNG
   chữa được: đã thử, inert không gỡ bằng CSS.
   Dialog KHÔNG modal mặc định là position:absolute — đo được nó nhảy từ top 353
   xuống -900, tức bay khỏi màn. Ghim lại đúng như cách trình duyệt đặt dialog
   modal. CHỈ ghim position và inset, KHÔNG đụng margin: margin mới là thứ định
   vị popup theo data-pos, sửa vào đó là popup nhảy chỗ lúc đóng. */
.bskp[data-bskp-dang-dong]{ position:fixed; inset:0 }

/* Không có bộ CSS riêng cho lúc ĐÓNG: gỡ lớp .bskp-in là phần tử tự chạy ngược
   về đúng trạng thái "chưa vào". Trước đây không ai thấy chuyển động đóng vì
   popup.js gọi node.close() ngay cùng nhịp với việc gỡ lớp; nay nó chờ chuyển
   động xong mới đóng. Nghĩa là mỗi kiểu thêm vào đây được animation đóng miễn
   phí, không phải viết thêm dòng nào. */

.bskp[data-anim="fade"] {opacity:0; transition:opacity var(--bskp-dur) var(--bskp-ease)}
.bskp[data-anim="fade"].bskp-in{opacity:1}

.bskp[data-anim="zoom"] {opacity:0; transform:scale(.94);
  transition:opacity var(--bskp-dur) var(--bskp-ease), transform var(--bskp-dur) var(--bskp-ease)}
.bskp[data-anim="zoom"].bskp-in{opacity:1; transform:none}

/* --- Hai kiểu trượt, hướng đi theo VỊ TRÍ popup ---
   Popup neo ở góc phải dưới mà trượt từ dưới lên thì đi ngược hướng người ta
   chờ đợi. Hai biến --bskp-tx/ty cho mỗi vị trí tự khai hướng của mình.
   Vị trí "giữa màn hình" giữ nguyên trượt lên 16px như từ trước tới nay, nên
   không popup nào đang chạy bị đổi hành vi. */
.bskp[data-anim="slide"],
.bskp[data-anim="slide-far"]{
  --bskp-tx:0; --bskp-ty:16px;
  opacity:0; transform:translate(var(--bskp-tx), var(--bskp-ty));
  transition:opacity var(--bskp-dur) var(--bskp-ease), transform var(--bskp-dur) var(--bskp-ease);
}
.bskp[data-anim="slide"].bskp-in,
.bskp[data-anim="slide-far"].bskp-in{opacity:1; transform:none}

.bskp[data-anim="slide"][data-pos="top"]         {--bskp-ty:-16px}
.bskp[data-anim="slide"][data-pos="bottom"]      {--bskp-ty:16px}
.bskp[data-anim="slide"][data-pos="left"]        {--bskp-tx:-16px; --bskp-ty:0}
.bskp[data-anim="slide"][data-pos="right"]       {--bskp-tx:16px;  --bskp-ty:0}
.bskp[data-anim="slide"][data-pos="top-left"]    {--bskp-tx:-16px; --bskp-ty:-16px}
.bskp[data-anim="slide"][data-pos="top-right"]   {--bskp-tx:16px;  --bskp-ty:-16px}
.bskp[data-anim="slide"][data-pos="bottom-left"] {--bskp-tx:-16px; --bskp-ty:16px}
.bskp[data-anim="slide"][data-pos="bottom-right"]{--bskp-tx:16px;  --bskp-ty:16px}

/* Trượt xa: với 8 vị trí mép thì đi hẳn ra ngoài màn — 100% là bề rộng/cao của
   chính popup, cộng đúng khoảng lề 4vw/4vh mà vị trí đó đang dùng. Vị trí giữa
   màn hình không có "mép" để đi ra, nên chỉ trượt dài 40px; cho nó bay từ ngoài
   màn vào thì thành một tấm thẻ bay, trông rẻ tiền. */
.bskp[data-anim="slide-far"]                         {--bskp-ty:40px}
.bskp[data-anim="slide-far"][data-pos="top"]         {--bskp-ty:calc(-100% - 4vh)}
.bskp[data-anim="slide-far"][data-pos="bottom"]      {--bskp-ty:calc(100% + 4vh)}
.bskp[data-anim="slide-far"][data-pos="left"]        {--bskp-tx:calc(-100% - 4vw); --bskp-ty:0}
.bskp[data-anim="slide-far"][data-pos="right"]       {--bskp-tx:calc(100% + 4vw);  --bskp-ty:0}
.bskp[data-anim="slide-far"][data-pos="top-left"]    {--bskp-tx:calc(-100% - 4vw); --bskp-ty:calc(-100% - 4vh)}
.bskp[data-anim="slide-far"][data-pos="top-right"]   {--bskp-tx:calc(100% + 4vw);  --bskp-ty:calc(-100% - 4vh)}
.bskp[data-anim="slide-far"][data-pos="bottom-left"] {--bskp-tx:calc(-100% - 4vw); --bskp-ty:calc(100% + 4vh)}
.bskp[data-anim="slide-far"][data-pos="bottom-right"]{--bskp-tx:calc(100% + 4vw);  --bskp-ty:calc(100% + 4vh)}

/* Bật nhẹ: độ mờ chạy đúng nhịp thường, còn tỉ lệ chạy chậm hơn và vượt đà một
   nhịp. Tách hai nhịp như vậy thì cú nảy đọc ra là "nảy" chứ không phải "giật". */
.bskp[data-anim="bounce"]{opacity:0; transform:scale(.88);
  transition:opacity var(--bskp-dur) var(--bskp-ease),
             transform calc(var(--bskp-dur) * 1.5) var(--bskp-ease-bat)}
.bskp[data-anim="bounce"].bskp-in{opacity:1; transform:none}

/* Lật: perspective đặt ngay trong transform chứ không đặt lên phần tử cha —
   dialog nằm ở top layer nên không có cha nào để đặt. */
.bskp[data-anim="flip"]{opacity:0;
  transform:perspective(900px) rotateX(-9deg) translateY(10px);
  transition:opacity var(--bskp-dur) var(--bskp-ease), transform var(--bskp-dur) var(--bskp-ease)}
.bskp[data-anim="flip"].bskp-in{opacity:1; transform:none}

@media (prefers-reduced-motion: reduce){
  .bskp{--bskp-dur:0s}
  .bskp[data-anim]{transform:none}
}