/* Trang /photobooth.

   ⚠️ Chỉ đụng `padding-bottom`, KHÔNG dùng `padding` viết tắt cho `.pb-khung`.
   `.seo-khung` trong seo.css đặt `padding-top: calc(var(--cao-thanh) + 1.6rem)` để
   chừa chỗ cho thanh điều hướng đang `position: fixed`. File này nạp SAU seo.css, nên
   một dòng viết tắt ở đây xoá sạch chỗ chừa đó và thanh menu che mất tiêu đề. Đã dính
   đúng lỗi này ở ba trang hôm 14/09. */

/* Chốt cho `hidden`, phải đứng TRƯỚC mọi rule `display`. Mặc định
   `[hidden] { display: none }` của trình duyệt có độ ưu tiên gần thấp nhất, nên chỉ
   một bộ chọn theo lớp có `display` là `el.hidden = true` thành vô nghĩa, im lặng. */
[hidden] { display: none !important; }

.pb-khung { max-width: 48rem; margin: 0 auto; padding-bottom: 4rem; }

/* ── Khung ngắm ──────────────────────────────────────────────────────── */
/* Khung ngắm và cuộn phim nằm cạnh nhau. Màn hẹp thì cuộn phim tụt xuống dưới
   và nằm ngang, không ép hai cột trên một màn điện thoại. */
/* ⚠️ Khung ngắm DÍNH LẠI khi cuộn. Trang này giờ có hơn một trăm chip (15 bố cục
   + 32 màu + 12 khung + 29 makeup + 18 hiệu ứng), tức là mấy màn hình cuộn. Không
   dính thì khách bấm son ở cuối trang mà mặt mình đã trôi khỏi màn hình từ lâu —
   chọn xong vẫn không biết có hợp không, đúng thứ cả mục xem trước sinh ra để chữa.

   `--cao-thanh` là chiều cao thanh điều hướng đang `position: fixed`; thiếu nó thì
   khung ngắm dính chui xuống dưới thanh. Cùng chỗ đã vấp với bộ lọc của bo_bai. */
.pb-khu {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  margin-top: 1.2rem;
  /* ⚠️ Bề rộng chốt bằng CON SỐ, không để nó suy từ kích thước nội tại của con.
     30rem (trần của khung ngắm) + 5,2rem (cuộn phim) + 0,8rem (khe) = 36rem.

     Bản vá đầu của tao dùng `width: fit-content` và khung ngắm BIẾN MẤT HẲN trên
     trang thử: mọi con của `.pb-san` đều `position: absolute` nên đóng góp bề rộng
     bằng 0, mà `.pb-san` lại `flex-basis: 0`. Trên trang thật nó chỉ TÌNH CỜ đúng
     nhờ thẻ <video> có khổ nội tại 300px. Đúng kiểu «tình cờ mà khớp». */
  max-width: 36rem;
}
/* ⚠️ DÍNH chỉ khi camera ĐANG BẬT — `photobooth.js` gắn lớp `mo` ở đúng hai chỗ nó
   bật và tắt `#pb-san`.

   Bản trước dính sẵn từ lúc mở trang, và tô nền ĐỤC lên cả khối. Lúc đó `#pb-san`
   còn `hidden` nên thứ duy nhất còn lại là cuộn phim rộng 5,2rem, và nền đục tô nốt
   phần thừa thành một tấm đen cao bằng cuộn phim, bám theo mỗi cú lăn chuột. Không
   lỗi nào báo: về mặt CSS nó đang làm đúng thứ được bảo làm.

   Và dính thì PHẢI VỪA MÀN HÌNH. Một phần tử `sticky` cao hơn khung nhìn không ghim
   được vào đâu cả, nó chỉ trôi theo — tức mất đúng thứ `sticky` sinh ra để làm.
   Cuộn phim của bố cục 9 ô đã cao ~814px, thừa sức vượt màn hình laptop. */
.pb-khu.mo {
  position: sticky;
  top: calc(var(--cao-thanh, 3.4rem) + .5rem);
  z-index: 3;
  padding-bottom: .5rem;
}
/* ⚠️ Đã có ảnh kết quả thì THÔI dính (30/09/2026). Dính suốt thì cuộn xuống xem tấm
   vừa ghép, khung ngắm to vẫn nằm đè lên giữa tấm ảnh, đúng lúc khách cần nhìn nó
   nhất. Chụp lại từ đầu thì `#pb-xong` ẩn đi và khung ngắm dính lại như cũ; chụp lại
   một tấm thì trang tự cuộn lên khung ngắm. */
main:has(#pb-xong:not([hidden])) .pb-khu.mo { position: relative; top: auto; }
/* ⚠️ Nền đục đặt lên TỪNG CỘT, không đặt lên cả khối. Nền của khối thì tô cả phần
   trống bên phải khung ngắm, mà phần đó rộng bao nhiêu là do khổ ô quyết — bố cục
   dọc làm khung ngắm co lại và chỗ trống phình ra. `.pb-san` vốn đã đục sẵn; chỉ
   cuộn phim cần thêm, vì giữa mấy ô gạch đứt là trong suốt và chữ bên dưới lộ qua. */
.pb-khu.mo .pb-cuon { background: var(--nen, #0d0d14); }
/* Trần chiều cao cho CẢ HAI cột. `aspect-ratio` gặp trần chiều cao thì tự co bề
   ngang theo, nên khung ngắm nhỏ lại chứ không méo. `svh` cho thanh địa chỉ trên
   điện thoại; dòng `vh` đứng trước làm đường lùi cho trình duyệt cũ. */
.pb-khu .pb-san,
.pb-cuon {
  max-height: calc(100vh - var(--cao-thanh, 3.4rem) - 7rem);
  max-height: calc(100svh - var(--cao-thanh, 3.4rem) - 7rem);
}
/* Bố cục 9–10 ô thì cuộn phim vẫn dài hơn trần trên. Cho nó tự cuộn trong chỗ của
   mình, đừng đẩy cả khối cao lên. */
.pb-cuon { overflow-y: auto; }
/* Chưa bật camera thì KHÔNG bày cuộn phim. Mấy ô rỗng đánh số không nói được gì mà
   vẫn chiếm chỗ — bố cục Lưới 9 là một cột cao ~814px nằm giữa nút «Bật camera» và
   hàng chọn bố cục, tức đẩy mọi thứ đáng bấm xuống dưới màn hình. */
.pb-khu:not(.mo) .pb-cuon { display: none; }
/* Màn thấp thì hạ khung ngắm xuống cho còn chỗ đọc chip. Đặt SAU rule trần chung
   để nó thắng khi màn thật sự thấp. */
@media (max-height: 50rem) {
  .pb-khu .pb-san { max-height: 38vh; }
}
.pb-khu .pb-san { margin-top: 0; flex: 1; }
.pb-cuon {
  flex: none;
  width: 5.2rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.pb-cuon .o {
  position: relative;
  border: 1px dashed rgba(255, 255, 255, .22);
  border-radius: .35rem;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  font-size: .78rem;
  opacity: .5;
  overflow: hidden;
}
.pb-cuon .o.xong { opacity: 1; border-style: solid; }
.pb-cuon .o.toi { opacity: 1; border-color: var(--vang, #d8b25c); }
.pb-cuon .o canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Màn hẹp: chỉ KHUNG NGẮM dính, không kéo theo cuộn phim. Bản trước xếp cuộn phim
   thành một hàng ngang dưới khung ngắm, mang nền đục, và cả hàng đó dính theo — trên
   điện thoại thành một thanh đen bám dưới camera che mất chip bên dưới (ảnh chủ dự
   án gửi 18/09). Số tấm đã chụp vẫn hiện ở nút Chụp, và dải đã ghép hiện khi xong. */
@media (max-width: 34rem) {
  .pb-khu { flex-direction: column; max-width: none; }
  .pb-khu.mo { padding-bottom: 0; }
  .pb-khu.mo .pb-cuon { display: none; }
  .pb-khu .pb-san { margin: 0 auto; }
}

.pb-san {
  position: relative;
  margin: 1.2rem auto 0;
  max-width: 30rem;
  border-radius: .9rem;
  overflow: hidden;
  background: #11111a;
  /* Chỉ là giá trị mặc định lúc trang chưa chạy JS xong. Khổ thật do
     `veLai()` đặt theo kiểu bày đang chọn — xem photobooth.js. */
  aspect-ratio: 4 / 3;
}
/* ⚠️ Thẻ <video> nay là NGUỒN, không phải thứ khách nhìn — canvas vẽ lại từng
   khung hình. Nhưng KHÔNG dùng `display: none` hay `visibility: hidden`: vài
   trình duyệt ngưng giải mã khung hình khi thẻ không còn được hiện, và khi đó
   `drawImage` chép về một tấm đứng hình mà không báo gì. `opacity: 0` thì thẻ
   vẫn được hiện, chỉ là trong suốt. */
.pb-san video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

/* ⚠️ MỘT lớp xem trước, ĐỤC. Bản trước là hai canvas TRONG SUỐT phủ lên thẻ
   <video>, và đó là cái trần chất lượng của cả mục makeup:
   `globalCompositeOperation` chỉ trộn trong phạm vi MỘT canvas, nên son chỉ
   nhân màu được bằng CSS `mix-blend-mode` — một chế độ cho cả lớp.

   Mà makeup tử tế cần nhiều chế độ khác nhau cùng lúc (giữ độ sáng cho son,
   `soft-light` cho má hồng, `multiply` cho tạo khối), và mịn da thì còn phải
   ĐỌC NGƯỢC điểm ảnh của chính khuôn mặt — thứ không thể làm khi ảnh nằm ở một
   thẻ DOM khác. Nên nay canvas vẽ cả ảnh. */
.pb-lop-xem {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* ⚠️ z-index PHẢI cao hơn `.pb-lop-xem` (2). Từ Vòng bốn khung ngắm vẽ cả ảnh vào
   canvas có z-index 2, và số đếm ngược lẫn ánh chớp không có z-index nên nằm DƯỚI
   lớp canvas — khách chụp thật không thấy đếm ngược nào, dù `dem()` vẫn chạy đủ ba
   giây. Trang thử không lộ vì canvas chưa có khung hình nào để che. Chủ dự án thử
   trên điện thoại 18/09 mới thấy: «cần có bộ đếm để khách tạo dáng». */
.pb-dem-nguoc {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  font-size: 5.4rem;
  font-weight: 600;
  color: #fdfaf3;
  text-shadow: 0 .2rem 2rem rgba(0, 0, 0, .55);
  background: rgba(10, 10, 16, .28);
}

.pb-loe { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: #fff; opacity: 0; }
.pb-loe.loe { animation: pb-nhay .42s ease-out; }
@keyframes pb-nhay { from { opacity: .85; } to { opacity: 0; } }

/* ── Hàng nút chọn ───────────────────────────────────────────────────── */
.pb-hang { margin: 1.1rem 0 .2rem; }
.pb-hang > b {
  display: block;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .7;
  margin-bottom: .55rem;
}
.pb-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
/* ⚠️ Ba mươi hai bộ lọc thì hàng chip cao bằng nửa màn hình và đẩy nút Chụp
   xuống dưới đáy. Cho cuộn trong khung, và KHÔNG viết chiều cao cố định theo số
   chip — đúng lỗi `max-height: 22rem` của bảng menu hôm 14/09: một con số đếm
   theo dữ liệu thì tự nó sai vào đúng ngày dữ liệu đổi. */
.pb-nhieu { max-height: 28vh; overflow-y: auto; padding-right: .3rem; }

/* ── Chọn bố cục: lưới thẻ, mỗi thẻ một sơ đồ ô ─────────────────────── */
.pb-kieu-ds {
  display: grid;
  /* Năm cột: mười lăm kiểu ra ba hàng đều. Để `auto-fill` thì ở 768px ra bảy cột,
     tức 7 + 7 + 1 và «Một ảnh» lẻ loi một hàng. Màn rất hẹp mới thả về auto-fill. */
  grid-template-columns: repeat(5, 1fr);
  gap: .5rem;
}
@media (max-width: 430px) { .pb-kieu-ds { grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr)); } }
.pb-the-kieu {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  font: inherit; font-size: .8rem; color: inherit;
  padding: .55rem .3rem .5rem;
  border-radius: .55rem;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .025);
  cursor: pointer; opacity: .85;
  transition: border-color .25s, background .25s, opacity .25s;
}
.pb-the-kieu:hover { opacity: 1; border-color: rgba(216, 178, 92, .5); }
.pb-the-kieu.dang {
  opacity: 1;
  border-color: var(--vang, #d8b25c);
  box-shadow: inset 0 0 0 1px var(--vang, #d8b25c);
  background: rgba(216, 178, 92, .08);
}
/* Hộp sơ đồ cao cố định để mười lăm thẻ thẳng hàng dù dải dọc cao hay lưới
   vuông; canvas bên trong do JS tính vừa hộp. */
.pb-the-kieu-hinh { display: grid; place-items: center; height: 4.1rem; width: 100%; }
.pb-the-kieu-hinh canvas { display: block; border-radius: .2rem; }
.pb-the-kieu-ten { line-height: 1.2; text-align: center; }

/* ── Chọn khung ───────────────────────────────────────────────────────
   Tab nhóm XUỐNG DÒNG. Bản trước cuộn ngang một hàng và bày cả thanh cuộn của
   hệ điều hành dưới hàng chip — trông như hỏng, và trên điện thoại ba nhóm cuối
   nằm ngoài mép, phải kéo mới thấy. Mười một nhóm xuống dòng là hai hàng, không
   che gì. (Số nhóm đọc từ dữ liệu, không viết cứng chiều cao.) */
.pb-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding-bottom: .2rem;
}
.pb-tab {
  flex: none;
  font: inherit;
  font-size: .82rem;
  padding: .32rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: transparent;
  color: inherit;
  opacity: .7;
  cursor: pointer;
}
.pb-tab:hover { opacity: 1; }
.pb-tab.dang {
  opacity: 1;
  background: var(--vang, #d8b25c);
  border-color: var(--vang, #d8b25c);
  color: #1a1a22;
}
.pb-khung-ds {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr));
  gap: .55rem;
  margin-top: .65rem;
}
.pb-mau-khung {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  font: inherit;
  font-size: .78rem;
  padding: .4rem;
  border-radius: .5rem;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .03);
  color: inherit;
  cursor: pointer;
}
.pb-mau-khung:hover { border-color: rgba(216, 178, 92, .6); }
.pb-mau-khung.dang {
  border-color: var(--vang, #d8b25c);
  box-shadow: inset 0 0 0 1px var(--vang, #d8b25c);
}
/* Chiều cao để trình duyệt tự tính theo khổ giấy của bố cục đang chọn; trần
   lại cho dải dọc khỏi cao lêu nghêu. */
.pb-mau-khung canvas {
  display: block;
  height: auto;
  max-height: 8.5rem;
  object-fit: contain;
  border-radius: .25rem;
}

.pb-phu { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .75; font-size: .8rem; }
.pb-chan-chon { margin: 1rem 0 0; }
.pb-lat {
  font: inherit;
  font-size: .88rem;
  padding: .42rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: .75;
}
.pb-lat[aria-pressed="true"] {
  opacity: 1;
  border-color: var(--vang, #d8b25c);
  box-shadow: inset 0 0 0 1px var(--vang, #d8b25c);
}
.pb-chip {
  font: inherit;
  font-size: .88rem;
  padding: .42rem .82rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: .78;
}
.pb-chip:hover { opacity: 1; }
.pb-chip.dang {
  opacity: 1;
  border-color: var(--vang, #d8b25c);
  box-shadow: inset 0 0 0 1px var(--vang, #d8b25c);
}

.pb-dem { font-size: .82rem; opacity: .6; margin: .5rem 0 0; }
.pb-loi { color: #e5a08c; margin: .6rem 0 0; font-size: .92rem; line-height: 1.55; }

/* ── Dải film đã ghép ────────────────────────────────────────────────── */
.pb-o-ket {
  position: relative;
  width: 100%;
  max-width: 20rem;
  margin: 1.4rem auto 0;
}
#pb-ket {
  display: block;
  width: 100%;
  border-radius: .5rem;
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .45);
}
/* Lớp bắt chuột phủ khít tấm ảnh. `touch-action: none` để kéo sticker trên điện
   thoại không bị trình duyệt hiểu thành cuộn trang. */
#pb-lop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}
.pb-bang-dan {
  margin-top: .6rem;
  padding: .6rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: .6rem;
  max-height: 30vh;
  overflow-y: auto;
}
.pb-bang-dan h4 {
  margin: .5rem 0 .3rem;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .55;
  font-weight: 600;
}
.pb-bang-dan h4:first-child { margin-top: 0; }
.pb-o-dan { display: flex; flex-wrap: wrap; gap: .3rem; }
.pb-o-dan button {
  font-size: 1.35rem;
  line-height: 1;
  padding: .25rem .35rem;
  border: 1px solid transparent;
  border-radius: .4rem;
  background: transparent;
  cursor: pointer;
}
.pb-o-dan button:hover { border-color: var(--vang, #d8b25c); }
.pb-bao { text-align: center; font-size: .86rem; opacity: .7; margin: .7rem 0 0; }

.pb-doan { margin-top: 2.6rem; }

/* ── Chọn mẫu khung ────────────────────────────────────────────────────
   Bảy thẻ, mỗi thẻ một số ảnh. Thẻ của chính trang đang mở thì KHÔNG phải link
   (xem `_the_mau()` trong trang_seo.py), nên nó là `<li>` trần và phải tự mang
   kiểu dáng — không thừa hưởng gì từ `a` được. */
.pb-mau-ds {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  /* Tự xuống hàng theo bề ngang thật, không viết cứng số cột. Một con số cột cố
     định thì thêm một số ảnh nữa là hàng cuối lệch hẳn. */
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: .6rem;
}
.pb-mau {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .7rem .8rem;
  border: 1px solid rgba(216, 178, 92, .28);
  border-radius: .6rem;
}
.pb-mau:hover { border-color: rgba(216, 178, 92, .6); }
.pb-mau.dang {
  border-color: var(--vang, #d8b25c);
  background: rgba(216, 178, 92, .08);
}
.pb-mau-so { display: flex; flex-direction: column; gap: .1rem; }
a.pb-mau-so { text-decoration: none; color: inherit; }
.pb-mau b { font-size: 1.05rem; color: var(--vang, #d8b25c); }
.pb-mau-phu { font-size: .78rem; opacity: .62; }
.pb-mau-ten { display: flex; flex-wrap: wrap; gap: .25rem .55rem; font-size: .82rem; }
.pb-mau-ten a { color: inherit; opacity: .85; text-underline-offset: .2em; }
.pb-mau-ten a:hover { opacity: 1; color: var(--vang, #d8b25c); }

.pb-doan h2 { margin-top: 2rem; }

/* ── Trang công cụ: thanh bước, link quay về, nút Chụp dính đáy trên điện thoại ── */
/* Nhãn chọn tệp mặc nút phụ: label bắt cú bấm mở hộp chọn, input thì ẩn.
   Hàng «Bật camera» + nhãn này xếp bằng flex cho cùng một đường giữa: hai phần
   tử inline-block khác chiều cao thì thẳng theo đường chữ, nhìn ra lệch. */
.pb-tai-len { cursor: pointer; }
.pb-khung .chan-nut:has(#pb-bat) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
}
.pb-ve { margin: 0 0 .4rem; font-size: .86rem; }
.pb-ve a { color: var(--giay-chim, #8e8371); text-decoration: none; }
.pb-ve a:hover { color: var(--vang, #d8b25c); }
.pb-buoc {
  list-style: none;
  margin: .2rem 0 1rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.1rem;
  font-size: .84rem;
  opacity: .78;
}
.pb-buoc li { display: flex; align-items: center; gap: .45rem; }
.pb-buoc b {
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  border: 1px solid var(--vang, #d8b25c);
  color: var(--vang, #d8b25c);
  font-size: .78rem;
  font-weight: 600;
}
/* Nhánh ĐIỆN THOẠI: nút Chụp và lật gương dính đáy màn hình khi camera đang bật.
   Ngón cái với tới được mà không phải cuộn qua trăm cái chip. `~` là anh em sau:
   `.pb-khu` và hàng nút cùng là con của <main>. Chỉ dính khi `.mo` (camera đã bật),
   cùng luật với khung ngắm dính. */
@media (max-width: 34rem) {
  [data-che-do="dien-thoai"] .pb-khu.mo ~ .pb-thanh-chup {
    position: sticky;
    bottom: .5rem;
    z-index: 4;
    margin: 1rem -.3rem 0;
    padding: .5rem .3rem;
    background: var(--dem-sau, #080b14);
    border: 1px solid rgba(216, 180, 92, .22);
    box-shadow: 0 -10px 24px rgba(0, 0, 0, .45);
    border-radius: .8rem;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    justify-content: center;
    align-items: center;
  }
  /* Gọn lại (30/09/2026): ba nút nhỏ trên MỘT hàng, cuộn ngang nếu thiếu chỗ; nút Chụp
     và bộ đếm cùng một hàng. Bản đầu cao gần 160px, tức một phần năm màn hình, và nền
     0,92 để chữ các hàng chọn bên dưới lộ qua. */
  [data-che-do="dien-thoai"] .pb-khu.mo ~ .pb-thanh-chup .pb-chan-chon {
    flex: 1 1 100%; display: flex; flex-wrap: nowrap; justify-content: center;
    gap: .35rem; overflow-x: auto; margin: 0;
  }
  [data-che-do="dien-thoai"] .pb-khu.mo ~ .pb-thanh-chup .pb-lat {
    flex: none; font-size: .8rem; padding: .35rem .65rem; white-space: nowrap;
  }
  [data-che-do="dien-thoai"] .pb-khu.mo ~ .pb-thanh-chup .chan-nut { margin: 0; }
  [data-che-do="dien-thoai"] .pb-khu.mo ~ .pb-thanh-chup .pb-dem { margin: 0; }
}

/* ── Trang CHỌN NHÁNH (/photobooth) ────────────────────────────────────────
   Hai nhánh, hai khối. Thẻ mẫu khung có ảnh mẫu vẽ bằng canvas (pb_chon.js), nên
   thẻ bày đúng khung thật chứ không phải hình minh hoạ chung chung. */
.pbh { max-width: 52rem; }
.pbh-dt h2 { margin-top: .2rem; }   /* chỉ tiêu đề trong thẻ điện thoại, ngay dưới nhãn */
.pbh .mp-nhan { margin-bottom: .3rem; }

.pbh-dt {
  display: flex;
  gap: 1.6rem;
  align-items: center;
  margin-top: 2rem;
  padding: 1.3rem 1.4rem;
  border: 1px solid rgba(216, 180, 92, .28);
  border-radius: 1rem;
  background: linear-gradient(160deg, rgba(26, 32, 54, .55), rgba(14, 19, 34, .35));
}
.pbh-loi { flex: 1; min-width: 0; }
.pbh-loi p { margin-top: .4rem; }
.pbh-co { margin: .7rem 0 0; padding-left: 1.1rem; font-size: .92rem; line-height: 1.6; }
.pbh-co li { margin: .15rem 0; }
.pbh-co li::marker { color: var(--vang, #d8b25c); }

/* Cái điện thoại giả: chỉ là một khung bo tròn có viền vàng và một dải film bên
   trong. Không vẽ camera, không vẽ nút; nó là cái khung để dải film có chỗ đứng. */
.pbh-may {
  flex: none;
  width: 10.4rem;
  padding: .55rem;
  border-radius: 1.6rem;
  border: 1px solid rgba(216, 180, 92, .55);
  background: #0a0d17;
  box-shadow: 0 1.4rem 3rem -1.4rem rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.pbh-man {
  border-radius: 1.1rem;
  background: #11111a;
  aspect-ratio: 9 / 19;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: .45rem;
  box-sizing: border-box;
}
.pbh-anh { display: block; border-radius: .25rem; }

.pbh-mt { margin-top: 2.6rem; }
.pbh-ds {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: .8rem;
}
.pbh-the { display: flex; flex-direction: column; gap: .35rem; }
.pbh-mo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .8rem .85rem .75rem;
  border: 1px solid rgba(216, 180, 92, .22);
  border-radius: .9rem;
  background: rgba(14, 19, 34, .45);
  color: inherit;
  text-decoration: none;
  transition: border-color .3s, background .3s, transform .3s;
}
.pbh-mo:hover {
  border-color: var(--vang, #d8b25c);
  background: rgba(14, 19, 34, .75);
  transform: translateY(-2px);
}
.pbh-hinh {
  display: grid;
  place-items: center;
  /* Cao đủ cho dải dọc bốn ô; cỡ canvas do pb_chon.js tính vừa ô này. */
  height: 14rem;
  padding: .35rem;
  box-sizing: border-box;
  border-radius: .6rem;
  background: rgba(255, 255, 255, .03);
  overflow: hidden;
}
.pbh-mo b { font-size: 1.02rem; font-weight: 500; margin-top: .25rem; }
.pbh-mo-ta { font-size: .84rem; line-height: 1.5; color: var(--giay-chim, #8e8371); }
.pbh-chan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .35rem;
  font-size: .82rem;
}
.pbh-chan em {
  font-style: normal;
  padding: .15rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(216, 180, 92, .4);
  color: var(--vang-sang, #f2dca0);
}
.pbh-chan > span { color: var(--vang, #d8b25c); }
.pbh-bo-cuc { display: flex; flex-wrap: wrap; gap: .2rem .55rem; font-size: .78rem; padding: 0 .3rem; }
.pbh-bo-cuc a { color: var(--giay-chim, #8e8371); text-underline-offset: .2em; padding: .2rem .25rem; display: inline-block; }
.pbh-bo-cuc a:hover { color: var(--vang, #d8b25c); }

.pbh-so { margin: .8rem 0 1.4rem; }
.pbh-so > div { display: grid; grid-template-columns: 7rem 1fr; gap: .6rem; padding: .5rem 0; border-top: 1px solid rgba(216, 180, 92, .16); }
.pbh-so dt { color: var(--vang, #d8b25c); }
.pbh-so dd { margin: 0; font-size: .95rem; line-height: 1.6; }
.pbh-buoc { padding-left: 1.2rem; }
.pbh-buoc li { margin: .3rem 0; }
.pbh-buoc li::marker { color: var(--vang, #d8b25c); font-weight: 600; }

@media (max-width: 40rem) {
  .pbh-dt { flex-direction: column; align-items: stretch; padding: 1rem; }
  .pbh-may { width: 8.6rem; margin: 0 auto; }
  .pbh-so > div { grid-template-columns: 1fr; gap: .1rem; }
}


/* ── Nâng cấp 30/09/2026: đèn màn hình, dòng chữ, chụp lại một tấm ─────────── */
/* Đèn màn hình: phủ kín màn trắng ấm trong 0,35 giây trước mỗi tấm. Trắng hơi ngả
   vàng chứ không trắng xanh: da dưới ánh trắng xanh ra màu tái. */
.pb-den-man {
  position: fixed; inset: 0; z-index: 80; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, #fffdf8, #fff4e2 70%, #ffe9c8);
}
.pb-chu {
  display: block; width: 100%; max-width: 26rem; box-sizing: border-box; margin-top: .5rem;
  font: inherit; font-size: 1rem; color: var(--giay); background: rgba(8,11,20,.6);
  border: 1px solid rgba(216,180,92,.3); border-radius: .5rem; padding: .6rem .85rem;
}
.pb-chu:focus { outline: none; border-color: var(--vang); box-shadow: 0 0 0 3px rgba(216,180,92,.12); }
.pb-lai { margin: 1.2rem 0 .4rem; }
.pb-lai-ds { display: flex; flex-wrap: wrap; gap: .5rem; }
.pb-lai-nut {
  position: relative; padding: 0; cursor: pointer; overflow: hidden;
  border: 1px solid rgba(216,180,92,.35); border-radius: .4rem; background: #000;
  transition: border-color .2s, transform .2s;
}
.pb-lai-nut canvas { display: block; width: 4.4rem; height: auto; opacity: .9; }
.pb-lai-nut span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .15rem 0;
  font-size: .78rem; text-align: center; color: var(--vang-sang); background: rgba(8,11,20,.72);
}
.pb-lai-nut:hover { border-color: var(--vang); transform: translateY(-2px); }
.pb-lai-nut:disabled { opacity: .5; cursor: default; transform: none; }
@media (max-width: 34rem) {
  .pb-den-man { inset: 0; }
  .pb-lai-nut canvas { width: 3.6rem; }
}

/* Điện thoại: đã có ảnh kết quả thì thanh nút Chụp cũng thôi dính đáy màn, không thì
   nó nằm đè lên hàng nút Tải về (cùng lý do với khung ngắm, 30/09/2026). */
@media (max-width: 34rem) {
  main:has(#pb-xong:not([hidden])) .pb-khu.mo ~ .pb-thanh-chup { position: static; }
  [data-che-do="dien-thoai"] .pb-thanh-chup .pb-chan-chon,
  [data-che-do="dien-thoai"] .pb-thanh-chup .chan-nut,
  [data-che-do="dien-thoai"] .pb-thanh-chup .pb-dem { margin: 0; }
}

/* Makeup (30/09/2026): chấm màu son trên chip tông, và hàng «Độ đậm». */
.pb-cham-son {
  display: inline-block; width: .78em; height: .78em; margin-right: .42em; vertical-align: -.05em;
  border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.35);
}
/* Kem `.pb-hang`: `.seo-khung p` nang hon mot lop tran va de len co chu. */
.pb-hang .pb-dam-nhan { margin: .7rem 0 .35rem; font-size: .8rem; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--giay-chim); }