/* 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; }

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; }

/* --- 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: 6px; bottom: 6px; display: flex; gap: 6px; }
.shot .rm { position: absolute; left: 6px; top: 6px; }
.ico {
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: rgba(250,243,228,.92); color: var(--nau-chu);
  font-size: 15px; line-height: 1; display: grid; place-items: center; cursor: pointer;
}
.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); }

.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.chip {
  flex: 0 0 auto; min-width: 68px; text-align: center; cursor: pointer;
  background: var(--kem-giay); border: 1px solid var(--vien); border-radius: 14px;
  padding: 10px 8px; font-family: var(--sans); color: var(--nau-chu);
}
.chip.sel { background: var(--nau-logo); color: var(--kem-nen); border-color: var(--nau-logo); }
.chip .d { font-size: 11px; opacity: .75; }
.chip .n { font-size: 15px; }

.times { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.time {
  padding: 12px 4px; text-align: center; cursor: pointer;
  background: var(--kem-giay); border: 1px solid var(--vien); border-radius: 12px;
  font-family: var(--sans); font-size: 15px; color: var(--nau-chu);
}
.time.sel { background: var(--nau-logo); color: var(--kem-nen); border-color: var(--nau-logo); }
.time[disabled] { opacity: .3; cursor: default; text-decoration: line-through; }

.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; overflow-y: auto;
             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; }

/* 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; border-radius: 10px; }
.viewer .close { position: absolute; top: 16px; right: 18px; }