/* ==========================================================================
   PHOTOBOOTH ONLINE — CSS tối thiểu (28/09/2026). Giao diện dùng lớp có sẵn của
   Bootstrap 4 (theme); file này chỉ lo phần Bootstrap không có: font để vẽ chữ
   lên khung ảnh, các lớp phủ trên camera, sticker kéo – thả.
   ========================================================================== */
/* Font tự host (OFL) — site bật plugin chặn Google Fonts, mà canvas cần font sẵn để in chữ. */
@font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/baloo2-700-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/baloo2-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/baloo2-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Pacifico'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/pacifico-400-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Pacifico'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/pacifico-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Pacifico'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/pacifico-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/spacemono-700-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/spacemono-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/spacemono-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Khung xương lúc JS chưa dựng công cụ: tải lại trang khung đang cao 0px rồi bật ra ~800px, đẩy cả trang nhảy
   (chủ tiệm 29/09/2026: "css khung xương loading đi"). Cao đúng bằng cụm Bố cục/Màu/Hiệu ứng (301px) + khung
   camera 4:3 (điện thoại 3:4); thanh nhãn, hàng ô và khối camera vẽ bằng gradient đặt đúng toạ độ đo từ bản
   thật, ::after là vệt sáng chạy qua. JS dựng xong thêm .pb-ready là bỏ hết. */
#tad-photobooth:not(.pb-ready) { position: relative; overflow: hidden; }
#tad-photobooth:not(.pb-ready)::before {
  content: ''; display: block; padding-top: calc(75% + 301px); border-radius: .3rem;
  background:
    linear-gradient(#e9ecef, #e9ecef) 0 5px / 52px 12px no-repeat,
    linear-gradient(#e9ecef, #e9ecef) 0 138px / 34px 12px no-repeat,
    linear-gradient(#e9ecef, #e9ecef) 0 218px / 64px 12px no-repeat,
    repeating-linear-gradient(90deg, #e9ecef 0 47px, transparent 47px 55px) 4px 29px / 100% 84px no-repeat,
    repeating-linear-gradient(90deg, #e9ecef 0 56px, transparent 56px 64px) 4px 162px / 100% 31px no-repeat,
    repeating-linear-gradient(90deg, #e9ecef 0 86px, transparent 86px 94px) 4px 242px / 100% 31px no-repeat,
    linear-gradient(#e9ecef, #e9ecef) 0 301px / 100% calc(100% - 301px) no-repeat;
}
#tad-photobooth:not(.pb-ready)::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 60%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
  animation: pb-skel 1.3s ease-in-out infinite;
}
@keyframes pb-skel { from { transform: translateX(-100%); } to { transform: translateX(170%); } }
@media (prefers-reduced-motion: reduce) { #tad-photobooth:not(.pb-ready)::after { display: none; } }
@media (max-width: 767.98px) { #tad-photobooth:not(.pb-ready)::before { padding-top: calc(133.333% + 301px); } }

/* Trang tiện ích có luật ".post-body img { width:100%; margin-bottom:10px }" — trả ảnh trong công cụ về bình thường. */
#tad-photobooth img { width: auto; margin: 0; }

/* Khung camera: 4:3 (embed-responsive-4by3), điện thoại dọc 3:4 */
#tad-photobooth .pb-3by4::before { padding-top: 133.333%; }
#tad-photobooth .pb-stage { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#tad-photobooth .pb-cam { object-fit: cover; }
#tad-photobooth .is-mirror { transform: scaleX(-1); }
#tad-photobooth .pb-fx, #tad-photobooth .pb-flash, #tad-photobooth .pb-count, #tad-photobooth .pb-guide { pointer-events: none; }
#tad-photobooth .pb-guide { position: absolute; border: 2px dashed rgba(255, 255, 255, .85); box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); }
#tad-photobooth .pb-count span { text-shadow: 0 4px 24px rgba(0, 0, 0, .5); }
#tad-photobooth .pb-tools { position: absolute; top: .5rem; right: .5rem; }
#tad-photobooth .pb-tag { position: absolute; top: .75rem; left: 50%; transform: translateX(-50%); }
#tad-photobooth .pb-bar { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); white-space: nowrap; }   /* nút chụp (+ nút Thoát khi chụp lại) */

/* Mục đang chọn: vòng xanh nhạt như div#tad-chonkieu>div.active của các công cụ cũ.
   !important vì nút mang shadow-none (tắt quầng focus mặc định) cũng là !important. */
#tad-photobooth .pb-on { box-shadow: 0 0 0 .2rem rgba(38, 143, 255, .5) !important; border-color: rgba(38, 143, 255, .5) !important; }

/* Sticker kéo – thả, dán lên khung xem trước ở màn hoàn thiện (29/09/2026). Khung + lớp sticker bọc trong .pb-pv;
   display viết ở đây chứ không dùng d-inline-block: lớp d-* đứng sau d-none trong bootstrap.css nên ẩn không được. */
#tad-photobooth .pb-pv { position: relative; display: inline-block; vertical-align: top; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#tad-photobooth .pb-stk { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
#tad-photobooth .pb-st { position: absolute; touch-action: none; cursor: grab; pointer-events: auto; }
#tad-photobooth .pb-st img { width: 100%; pointer-events: none; }
#tad-photobooth .pb-st.is-sel { outline: 2px dashed #fff; outline-offset: 4px; }
#tad-photobooth .pb-st .btn { display: none; position: absolute; width: 28px; height: 28px; padding: 0; line-height: 26px; font-size: .75rem; }
#tad-photobooth .pb-st.is-sel .btn { display: block; }
#tad-photobooth .pb-st-del { top: -16px; left: -16px; }
#tad-photobooth .pb-st-rot { bottom: -16px; right: -16px; touch-action: none; }

/* Ô ảnh nhỏ + khung xem kết quả */
#tad-photobooth .pb-rail > div { height: 48px; }
#tad-photobooth .pb-rail img, #tad-photobooth .pb-shots img { width: 100%; height: 100%; object-fit: cover; }
/* Ảnh từng ô: phủ đen mờ + icon đổi để biết chạm vào là chụp lại / đổi ảnh (chủ tiệm chốt 29/09/2026) */
#tad-photobooth .pb-dup { position: absolute; top: auto; left: 0; right: 0; bottom: 0; border-radius: 0; font-size: 10px; }   /* ô đang lặp ảnh của ô khác; top:auto gỡ ".btn .badge { top:-1px }" của Bootstrap */
#tad-photobooth .pb-swap { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .45); color: #fff; font-size: 1.1rem; }
/* Ô "Chọn kiểu" rộng đều nhau (chủ tiệm 29/09/2026) */
#tad-photobooth .pb-themes .btn { min-width: 100px; }
/* Thẻ Ảnh in / Video đang chọn cùng màu nền với khung xem trước (bg-light) cho liền một khối (chủ tiệm 29/09/2026) */
#tad-photobooth .pb-fmt .nav-link.active { background-color: #f8f9fa; border-bottom-color: #f8f9fa; }
#tad-photobooth .pb-view video { max-width: 100%; max-height: 70vh; }
/* Khung xem trước cao tối đa 60% màn hình (điện thoại 50%); drawFinal() đọc lại max-height này để tính cỡ.
   svh chứ không innerHeight: iOS cuộn trang là thanh công cụ ẩn/hiện, innerHeight đổi liên tục làm khung
   nhảy (chủ tiệm 29/09/2026). svh cố định; dòng vh là dự phòng cho trình duyệt cũ. */
#tad-photobooth .pb-view .pb-final { max-width: 100%; max-height: 60vh; max-height: min(60svh, 600px); }
@media (max-width: 767.98px) { #tad-photobooth .pb-view .pb-final { max-height: 50vh; max-height: 50svh; } }
#tad-photobooth .pb-final { touch-action: none; cursor: grab; }   /* kéo ảnh trong ô để chỉnh vùng cắt */
#tad-photobooth .pb-final:active { cursor: grabbing; }
/* Bảng sticker: lưới ô vuông viền đứt y như công cụ "Tạo sticker từ ảnh ver 2" (post 14711) */
.pb-host .pb-sgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-height: min(52vh, 360px); overflow-y: auto; overflow-x: hidden; padding: 5px; -webkit-overflow-scrolling: touch; }
.pb-host .pb-stile { width: 100%; aspect-ratio: 1 / 1; min-height: 72px; border: 2px dashed #ccc; border-radius: 8px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; background: #fafafa; padding: 4px; cursor: pointer; transition: all .2s; font-size: 12px; font-weight: 600; color: #555; }
.pb-host .pb-stile img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pb-host .pb-stile:hover { border-color: #0d6efd; background: #e7f1ff; transform: scale(1.05); }
.pb-host .pb-stile-up { border-style: solid; border-color: #0d6efd; background: linear-gradient(180deg, #f8fbff 0%, #edf5ff 100%); color: #0d6efd; }
.pb-host .pb-stile-up i { font-size: 22px; margin-bottom: 4px; }
.pb-rec-canvas { position: fixed; left: 0; top: 0; width: 2px; height: 2px; opacity: .01; pointer-events: none; }