/* HM Photobooth — kiểu chung cho trang khách. Tông kem/nâu, chữ serif, mobile-first. */

:root {
  --nau-chu: #3E2E23;
  --nau-logo: #4A3728;
  --nau-phu: #8A7355;
  --vang-dong: #B08D5E;
  --kem-nen: #F3E9D2;
  --kem-giay: #FAF3E4;
  --do-ruban: #5C1F1F;
  --vien: #E0D2B4;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Mọi thứ bấm được: tắt double-tap-zoom (trình duyệt hết phải chờ 300ms xem có chạm lần hai
   không — bấm là ăn ngay), và tắt bôi đen khi ngón tay đè lâu — khách giữ nút hơi lâu một chút
   là chữ trên nút bị bôi xanh, trông như trang hỏng. */
button, .btn, .chip, .time, .choice, .ico, .card.tap, .pc, .pick, .theme {
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}

body {
  margin: 0;
  background: var(--kem-nen);
  color: var(--nau-chu);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  /* Trang mở trên điện thoại, phần lớn thao tác bằng ngón cái — chừa lề dưới cho thanh cố định. */
  padding-bottom: 96px;
}

.wrap { max-width: 640px; margin: 0 auto; padding: 20px 18px; }

h1 { font-family: var(--serif); font-size: 32px; font-weight: 400; margin: 0 0 6px; }
h2 { font-family: var(--serif); font-size: 24px; font-weight: 400; margin: 28px 0 10px; }
.eyebrow { font-size: 11px; letter-spacing: 3px; color: var(--nau-phu); text-transform: uppercase; }
.muted { color: var(--nau-phu); font-size: 14px; }

.brand { text-align: center; padding: 26px 0 8px; }
.brand .name { font-family: var(--serif); font-size: 30px; }
.brand .sub { font-size: 10px; letter-spacing: 4px; color: var(--nau-phu); margin-top: 2px; }
.rule { width: 44px; height: 1.5px; background: var(--vang-dong); margin: 16px auto; }

/* Ảnh bìa trang chủ. Khối rỗng cho tới khi chủ quán tải ảnh lên, nên không chiếm chỗ trước. */
.anh-bia { margin: -20px -18px 0; }
.anh-bia img {
  display: block; width: 100%; height: 200px; object-fit: cover;
  /* Bo góc dưới cho khớp mép giấy kem của phần còn lại. */
  border-radius: 0 0 18px 18px;
}
@media (min-width: 480px) { .anh-bia img { height: 260px; } }

/* Thẻ chọn phòng CÓ ảnh: xếp dọc, ảnh tràn hết bề ngang. */
.choice.phong { display: block; }
.phong-anh {
  display: block; width: 100%; height: 150px; object-fit: cover;
  border-radius: 11px; margin-bottom: 10px; background: var(--kem-nen);
}
.phong-duoi { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* --- nút --- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 56px; padding: 14px 20px;
  border: none; border-radius: 28px;
  background: var(--nau-logo); color: var(--kem-nen);
  font-family: var(--sans); font-size: 16px; letter-spacing: 1px;
  cursor: pointer; text-decoration: none;
}
.btn:active { background: var(--nau-chu); transform: scale(0.99); }
.btn[disabled] { opacity: .45; cursor: default; }
.btn.ghost { background: var(--kem-giay); color: var(--nau-chu); border: 1px solid var(--vien); }
/* 44px là ngưỡng chạm thoải mái bằng ngón tay. Nút nhỏ hơn thì khách bấm trượt, mà trang này
   dùng gần như hoàn toàn trên điện thoại. */
.btn.small { min-height: 44px; font-size: 14px; padding: 8px 16px; width: auto; border-radius: 22px; }

/* --- thanh trượt cho màn cảm ứng ---
   Thanh trượt mặc định của trình duyệt cao ~16px với núm bé xíu — trên máy tính thì bắt bằng
   chuột được, còn ngón tay thì trượt hoài không trúng. Nới vùng chạm lên 44px và phóng núm to. */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px; background: var(--vien);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 30px; height: 30px; margin-top: -12px; border-radius: 50%;
  background: var(--nau-logo); border: 3px solid var(--kem-giay);
  box-shadow: 0 1px 3px rgba(62,46,35,.35);
}
input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--vien); }
input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--nau-logo); border: 3px solid var(--kem-giay);
}
input[type="range"]:disabled { opacity: .4; cursor: default; }

/* --- ô nhập --- */
input[type="tel"], input[type="text"] {
  width: 100%; padding: 16px 18px;
  border: 1px solid var(--vien); border-radius: 14px;
  background: var(--kem-giay); color: var(--nau-chu);
  font-family: var(--sans); font-size: 20px; letter-spacing: 1px;
}
input:focus { outline: 2px solid var(--vang-dong); outline-offset: -1px; }
label { display: block; font-size: 11px; letter-spacing: 2px; color: var(--nau-phu);
        text-transform: uppercase; margin: 18px 0 8px; }

/* --- thẻ --- */
.card {
  background: var(--kem-giay); border: 1px solid var(--vien);
  border-radius: 16px; padding: 16px 18px; margin-bottom: 12px;
}
.card.tap { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card.tap:active { background: #F2E7CE; }

.pill {
  display: inline-block; padding: 4px 12px; border-radius: 12px;
  background: #E8DEC4; color: var(--nau-chu); font-size: 12px;
}

/* --- lưới ảnh --- */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.shot { position: relative; border-radius: 14px; overflow: hidden; background: #E3D6B8; aspect-ratio: 4/3; }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot .no { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 10px;
            background: rgba(62,46,35,.72); color: var(--kem-nen); font-size: 11px; }
.shot .acts { position: absolute; right: 5px; bottom: 5px; display: flex; gap: 8px; }
.shot .rm { position: absolute; left: 5px; top: 5px; }
/* Ảnh trong lưới không được thành "vật kéo đi được" — ngón tay vuốt để cuộn trang mà trình
   duyệt lại nhấc ảnh lên lơ lửng thì cuộn không ăn. */
.shot img, .pick img { -webkit-user-drag: none; user-drag: none; }
/* 44px là ngưỡng chạm tin được của ngón tay. Bản trước 34px — trái tim yêu thích với nút tải
   nằm cạnh nhau, khách bấm ♥ trượt sang tải ảnh hoài mà không hiểu vì sao. */
.ico {
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: rgba(250,243,228,.92); color: var(--nau-chu);
  font-size: 18px; line-height: 1; display: grid; place-items: center; cursor: pointer;
}
.ico:active { transform: scale(.92); }
.ico.on { background: var(--do-ruban); color: #fff; }
.shot.hid { opacity: .32; }

/* --- thanh cố định dưới --- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--kem-nen) 70%, rgba(243,233,210,0));
  display: flex; gap: 10px; max-width: 640px; margin: 0 auto;
}
.dock .btn { letter-spacing: 2px; }

.row { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }

.note { padding: 14px 16px; border-radius: 12px; background: #F7E3D8; color: #7A2E12; font-size: 14px; }
.ok   { padding: 14px 16px; border-radius: 12px; background: #E4EFDD; color: #33521F; font-size: 14px; }

.center { text-align: center; }
.hidden { display: none !important; }

.spin { width: 22px; height: 22px; border: 2px solid var(--vien);
        border-top-color: var(--nau-logo); border-radius: 50%;
        animation: sp .8s linear infinite; margin: 24px auto; }
@keyframes sp { to { transform: rotate(360deg); } }

/* --- đặt lịch --- */
.step { margin: 26px 0 0; }
.step.off { opacity: .38; pointer-events: none; }
.stepno { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
          background: var(--nau-logo); color: var(--kem-nen); font-size: 12px; margin-right: 8px; }

.choice {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; cursor: pointer;
  background: var(--kem-giay); border: 1px solid var(--vien);
  border-radius: 16px; padding: 14px 16px; margin-bottom: 10px;
  font-family: var(--sans); font-size: 16px; color: var(--nau-chu);
}
.choice.sel { border-color: var(--nau-logo); border-width: 2px; padding: 13px 15px; }
/* Phần chữ phải CO ĐƯỢC: mặc định flex không cho co dưới độ rộng tự nhiên của nội dung, nên dòng
   quà kèm dài của gói COLLECTOR đẩy tràn ngang ra khỏi thẻ và bị cắt cụt trên màn hình điện thoại. */
.choice > span:first-child { flex: 1; min-width: 0; }
.choice .t { font-family: var(--serif); font-size: 20px; }
.choice .s { font-size: 13px; color: var(--nau-phu); }
.choice .p { font-family: var(--serif); font-size: 19px; white-space: nowrap; flex: 0 0 auto; }

/* Thẻ gói chụp: xếp dọc ba tầng cho dễ liếc trên điện thoại. */
.choice.pkg { display: block; }
.pkg-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pkg-main { font-size: 14px; color: var(--nau-chu); margin-top: 4px; }
.pkg-perks { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.pkg-perks span { font-size: 11.5px; color: var(--nau-phu);
                  background: #EFE4C8; border-radius: 8px; padding: 2px 8px; }
.star { color: var(--do-ruban); }

/* Dải chip cuộn ngang (chọn tờ ở màn ghép). `proximity` chứ không phải `mandatory` — mandatory
   giật cục khi vuốt nhanh qua nhiều chip. */
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 4px;
         scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.chip {
  flex: 0 0 auto; min-height: 48px; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--kem-giay); border: 1px solid var(--vien); border-radius: 24px;
  padding: 10px 18px; font-family: var(--sans); font-size: 15px; color: var(--nau-chu);
  scroll-snap-align: start;
}
.chip:active { transform: scale(.97); }
.chip.sel { background: var(--nau-logo); color: var(--kem-nen); border-color: var(--nau-logo); }
/* Chấm xanh = tờ này đã ghép đủ ô. Giữ nguyên màu cả khi chip được chọn (nền nâu đậm): đây là
   thông tin tiến độ, không phải trang trí của trạng thái chọn. */
.chip .xong { width: 8px; height: 8px; border-radius: 50%; background: #6E9450; flex: 0 0 auto; }

/* Chip "đã gồm N móc khoá" trên thẻ gói. Nền xanh nhạt để tách hẳn khỏi `.pkg-perks` màu kem:
   một bên là quà TẶNG, một bên là thứ đi kèm — khách phải phân biệt được trong một cái liếc. */
.pkg-kem { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.pkg-kem span { font-size: 11.5px; color: #33521F; background: #E4EFDD;
                border-radius: 8px; padding: 2px 8px; }

/* --- thẻ phòng ở bước 1: trạng thái hàng đợi --- */
.phong-tt { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
            margin-top: 6px; font-size: 13px; color: var(--nau-phu); }
.phong-tt b { font-weight: 500; color: var(--nau-chu); }
.trangthai { flex: 0 0 auto; font-size: 12px; border-radius: 10px; padding: 3px 10px;
             background: #E4EFDD; color: #33521F; white-space: nowrap; }
.trangthai.dong { background: #F7E3D8; color: #7A2E12; }
.choice[disabled] { opacity: .5; cursor: default; }

/* --- hàng dịch vụ thêm: tên bên trái, bộ đếm −/+ bên phải --- */
.addon { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 8px;
         background: var(--kem-giay); border: 1px solid var(--vien); border-radius: 14px; }
.addon .bieu { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center;
               font-size: 20px; background: #EFE4C8; border-radius: 12px; }
.addon .giua { flex: 1; min-width: 0; }
.addon .ten { font-size: 15px; color: var(--nau-chu); }
.addon .phu { font-size: 12px; color: var(--nau-phu); }
.addon .gia { font-size: 13px; color: var(--vang-dong); margin-top: 2px; }
.dem { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
/* 44px là ngưỡng chạm tối thiểu. Nút − và + nhỏ hơn thế là khách bấm trượt sang thẻ bên cạnh,
   và ở đây bấm trượt nghĩa là mua nhầm một món có tính tiền. */
.dem button {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 20px; line-height: 1;
  background: transparent; border: 1px solid var(--vien); color: var(--nau-chu);
}
.dem button:active:not([disabled]) { background: #EFE4C8; }
.dem button[disabled] { opacity: .3; cursor: default; }
.dem .so { min-width: 30px; text-align: center; font-size: 17px; color: var(--nau-chu); }

/* --- ô nhập mã khuyến mãi --- */
.km { display: flex; gap: 8px; align-items: stretch; }
.km input { flex: 1; min-width: 0; margin: 0; }
.km button { flex: 0 0 auto; }

/* --- bảng tổng tiền --- */
.tong-dong { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0;
             font-size: 14px; color: var(--nau-phu); }
.tong-dong.cong { border-top: 1px solid var(--vien); margin-top: 8px; padding-top: 12px;
                  font-size: 17px; color: var(--nau-chu); }
.tong-dong.cong b { font-family: var(--serif); font-size: 22px; color: var(--vang-dong); }
.tong-dong.giam { color: #33521F; }

/* --- màn chờ tới lượt --- */
.hangdoi { text-align: center; padding: 26px 0 10px; }
.hangdoi .nhan { font-size: 12px; letter-spacing: 3px; color: var(--nau-phu);
                 text-transform: uppercase; }
.hangdoi .so { font-family: var(--serif); font-size: 74px; line-height: 1.05;
               color: var(--nau-logo); }
.hangdoi .eta { font-size: 15px; color: var(--nau-phu); margin-top: 4px; }
.hangdoi .song { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
                 font-size: 13px; color: var(--nau-phu); }
.hangdoi .song::before { content: ''; width: 8px; height: 8px; border-radius: 50%;
                         background: #6E9450; animation: tho 2s ease-in-out infinite; }
@keyframes tho { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }

.code {
  font-family: var(--serif); font-size: 40px; letter-spacing: 8px;
  text-align: center; padding: 18px 0 10px;
}

/* --- tấm che "Ảnh đã ghép" trượt lên từ dưới --- */
.dsheet { position: fixed; inset: 0; background: rgba(32,24,15,.55); z-index: 55; display: flex;
          align-items: flex-end; }
.dsheet-in { background: var(--kem-nen); width: 100%; max-width: 640px; margin: 0 auto;
             border-radius: 20px 20px 0 0; max-height: 88vh; max-height: 88dvh; overflow-y: auto;
             /* dvh: vh trên điện thoại tính CẢ phần bị thanh địa chỉ che — tấm che cao 88vh là
                nút dưới cùng chui xuống dưới thanh công cụ của Safari, bấm không tới. */
             padding: 18px 18px calc(24px + env(safe-area-inset-bottom)); }
.dsheet-top { display: flex; align-items: center; justify-content: space-between;
              position: sticky; top: -18px; background: var(--kem-nen); padding: 6px 0 12px; }
.dgroup { margin-bottom: 22px; }
.dgroup h3 { font-family: var(--serif); font-weight: 400; font-size: 18px; margin: 0 0 8px;
             display: flex; align-items: center; gap: 8px; }
.dstrip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.dpiece { flex: 0 0 auto; position: relative; background: #fff; border: 1px solid var(--vien);
          border-radius: 10px; padding: 6px; }
.dpiece img { display: block; height: 150px; width: auto; border-radius: 6px; }
.dpiece .dl { position: absolute; right: 10px; bottom: 10px; }

/* --- riêng màn "Ảnh đã ghép" của khách (#dSheet trong anh.html) ---
   Khoanh bằng #dSheet chứ không sửa .dpiece dùng chung: màn ghép ở máy booth cũng dùng
   .dstrip/.dpiece nhưng bên đó là <canvas> cỡ cố định do JS đặt, đổi chung là lệch. */

/* Mảnh để trần chứ không bọc trong thẻ trắng có viền — tác phẩm nổi lên, đỡ rối mắt.
   Vẫn giữ một sợi viền tóc + bóng đổ nhẹ vì có mảnh nền trắng (photocard) mà bỏ hẳn
   mép thì nó loang vào nền kem, khách không biết mảnh bắt đầu từ đâu. */
#dSheet .dpiece { background: none; border: none; padding: 0; overflow: hidden;
                  box-shadow: 0 1px 3px rgba(32,24,15,.14), 0 0 0 1px rgba(32,24,15,.07); }
#dSheet .dpiece img { height: 200px; border-radius: 0; }
#dSheet .dpiece .dl { right: 8px; bottom: 8px; }

/* Máy tính: hộp thoại nổi giữa màn hình thay vì tấm trượt dán đáy. Dán đáy hợp ngón tay
   trên điện thoại, nhưng mở trên màn rộng thì cả khối tụt hẳn xuống mép dưới, nhìn lệch. */
@media (min-width: 720px) {
  #dSheet { align-items: center; padding: 24px; }
  #dSheet .dsheet-in { border-radius: 20px; padding: 18px;
                       max-height: 86vh; max-height: 86dvh; }
  #dSheet .dpiece img { height: 240px; }
}
/* Có chuột thì nút tải không cần to bằng đầu ngón tay, thu lại cho đỡ che ảnh. */
@media (pointer: fine) { #dSheet .dpiece .dl { width: 36px; height: 36px; font-size: 15px; } }

/* Lớp phủ xem ảnh lớn */
.viewer { position: fixed; inset: 0; background: rgba(32,24,15,.94); display: grid;
          place-items: center; z-index: 50; padding: 20px; }
.viewer img { max-width: 100%; max-height: 78vh; max-height: 78dvh; border-radius: 10px; }
.viewer .close { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 16px; }

/* Dải cuộn ngang trong trình ghép và tấm che tải mảnh — cùng lối hít như .chips. */
.dstrip, .picker, .pieces { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.dstrip > *, .picker > *, .pieces > * { scroll-snap-align: start; }