/* Layout: the 3D booth fills the screen; each prototype variant lays its own controls over it. */
:root {
  --muc: #16141a;          /* ink: text, icons */
  --muc-nhat: #5d5a64;     /* secondary text */
  --giay: #fbfaf8;         /* panel ground, the booth's ivory */
  --vien: #e3e0da;         /* hairlines */
  --cam: #ff9400;          /* Pytes orange: active state fills only, never body text on white */
  --cam-dam: #b55f00;      /* orange that passes contrast as text on ivory */
  --hoi-cho: #8a8d94;      /* hall grey behind the booth (the renders' world) */
  --bong: 0 1px 2px rgba(22, 20, 26, .08), 0 8px 24px rgba(22, 20, 26, .10);
  --chu: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --le: max(16px, env(safe-area-inset-left, 0px));
  --le-phai: max(16px, env(safe-area-inset-right, 0px));
  --le-duoi: max(16px, env(safe-area-inset-bottom, 0px));
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--hoi-cho); color: var(--muc); font: 15px/1.5 var(--chu); }
#canh { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--muc); outline-offset: 2px; }
[hidden] { display: none !important; }

/* Loading */
#dang-tai { position: fixed; inset: 0; display: grid; place-items: center; background: var(--hoi-cho); z-index: 30; transition: opacity .4s; }
#dang-tai.xong { opacity: 0; pointer-events: none; }
.dang-tai-khung { width: min(320px, 80vw); display: grid; gap: 10px; }
.dang-tai-ten { margin: 0; font-weight: 600; }
.thanh { height: 3px; background: rgba(22, 20, 26, .12); border-radius: 2px; overflow: hidden; }
.thanh span { display: block; height: 100%; width: 0; background: var(--muc); transition: width .2s; }
#dang-tai-chu { margin: 0; color: var(--muc); font-size: 13px; }

/* Shared controls */
.nhan-gian { position: fixed; top: max(14px, env(safe-area-inset-top, 0px)); left: var(--le); z-index: 10; display: flex; align-items: baseline; gap: 10px; pointer-events: none; background: var(--giay); padding: 7px 12px; border-radius: 10px; box-shadow: var(--bong); }
.nhan-gian b { font-weight: 700; font-size: 15px; white-space: nowrap; }
.nhan-gian span { color: var(--muc-nhat); font-size: 13px; }
.che-do { display: inline-flex; padding: 3px; gap: 2px; background: rgba(22, 20, 26, .06); border-radius: 10px; }
.che-do button { border: 0; background: none; padding: 7px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--muc-nhat); white-space: nowrap; }
.che-do button[aria-pressed="true"] { background: var(--giay); color: var(--muc); box-shadow: 0 1px 2px rgba(22, 20, 26, .12); }
.che-do .ngan { display: none; }
.diem { border: 1px solid var(--vien); background: var(--giay); border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.diem[aria-current="true"] { background: var(--muc); border-color: var(--muc); color: var(--giay); }
.goi-y { font-size: 12px; color: var(--muc-nhat); }

/* Hotspots on the booth */
.diem-nong { position: fixed; z-index: 8; transform: translate(-50%, -50%); border: 2px solid var(--giay); background: var(--muc); color: var(--giay); width: 30px; height: 30px; border-radius: 50%; font-size: 12px; font-weight: 700; display: grid; place-items: center; box-shadow: var(--bong); }
.diem-nong::after { content: attr(data-nhan); position: absolute; left: 36px; top: 50%; transform: translateY(-50%); background: var(--giay); color: var(--muc); padding: 4px 9px; border-radius: 6px; font-weight: 500; white-space: nowrap; opacity: 0; transition: opacity .15s; pointer-events: none; }
.diem-nong:hover::after, .diem-nong:focus-visible::after { opacity: 1; }

/* Layout A: one bar at the bottom */
.dock { position: fixed; left: 50%; bottom: var(--le-duoi); transform: translateX(-50%); z-index: 10; width: min(1080px, calc(100vw - 32px)); background: var(--giay); border: 1px solid var(--vien); border-radius: 14px; box-shadow: var(--bong); padding: 10px; display: flex; gap: 10px; align-items: center; }
.dock-diem { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.dock-diem::-webkit-scrollbar { display: none; }
.diem.phat { background: var(--cam); border-color: var(--cam); color: var(--muc); font-weight: 600; }

/* Layout B: plan rail on the left */
.ray { position: fixed; top: 0; bottom: 0; left: 0; z-index: 10; width: 320px; background: var(--giay); border-right: 1px solid var(--vien); padding: max(18px, env(safe-area-inset-top, 0px)) 20px var(--le-duoi) var(--le); display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.ray > * { flex: none; }
.ray h1 { margin: 0; font-size: 20px; line-height: 1.25; text-wrap: balance; }
.ray p { margin: 0; color: var(--muc-nhat); font-size: 13px; }
.so-do { width: 100%; height: auto; background: #f1efeb; border-radius: 10px; }
.so-do .bam { cursor: pointer; }
.so-do .bam:hover circle { fill: var(--cam); }
.ds-diem { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ds-diem button { width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; display: flex; gap: 10px; align-items: center; }
.ds-diem button:hover { background: rgba(22, 20, 26, .05); }
.ds-diem button[aria-current="true"] { background: var(--muc); color: var(--giay); }
.ds-diem .so { width: 22px; height: 22px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: none; }
.co-ray .nhan-gian { display: none; }

/* Layout C: guided chapters on the right */
.hanh-trinh { position: fixed; top: max(16px, env(safe-area-inset-top, 0px)); right: var(--le-phai); max-height: calc(100vh - 32px); z-index: 10; width: 380px; background: var(--giay); border: 1px solid var(--vien); border-radius: 16px; box-shadow: var(--bong); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.hanh-trinh .chuong-so { font-size: 12px; font-weight: 600; color: var(--cam-dam); letter-spacing: .04em; text-transform: uppercase; }
.hanh-trinh h2 { margin: 0; font-size: 24px; line-height: 1.2; text-wrap: balance; }
.hanh-trinh .noi-dung { color: var(--muc-nhat); flex: 1; overflow-y: auto; }
.hanh-trinh .noi-dung p { margin: 0 0 10px; }
.tien-trinh { display: flex; gap: 4px; }
.tien-trinh span { flex: 1; height: 3px; border-radius: 2px; background: var(--vien); }
.tien-trinh span.da { background: var(--muc); }
.nut-chuong { display: flex; gap: 8px; }
.nut-chuong button { flex: 1; border: 1px solid var(--vien); background: var(--giay); border-radius: 10px; padding: 10px; font-weight: 600; }
.nut-chuong button.chinh { background: var(--muc); border-color: var(--muc); color: var(--giay); }
.nut-chuong button:disabled { opacity: .4; cursor: default; }

/* Walk mode: touch joystick and hint */
/* --tu-do-*: what the open panel covers, set by app.js, so these stay in the free area. */
.can-dieu-khien { position: fixed; left: calc(var(--tu-do-trai, 0px) + var(--le) + 8px); bottom: calc(var(--tu-do-duoi, 0px) + 64px); z-index: 12; width: 112px; height: 112px; border-radius: 50%; background: rgba(251, 250, 248, .55); border: 1px solid rgba(22, 20, 26, .15); touch-action: none; }
.can-dieu-khien i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: var(--giay); box-shadow: var(--bong); }
.huong-dan-di { position: fixed; bottom: calc(var(--tu-do-duoi, 0px) + 16px); left: calc(var(--tu-do-trai, 0px) + (100vw - var(--tu-do-trai, 0px) - var(--tu-do-phai, 0px)) / 2); transform: translateX(-50%); z-index: 9; background: rgba(22, 20, 26, .78); color: var(--giay); padding: 6px 12px; border-radius: 8px; font-size: 12px; white-space: nowrap; pointer-events: none; }

/* "Kiểu xem": the visitor's choice of layout ([ and ] cycle it) */
#kieu-xem { position: fixed; left: 50%; top: max(12px, env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 20; display: flex; gap: 2px; background: var(--giay); padding: 3px; border-radius: 999px; box-shadow: var(--bong); font-size: 13px; }
#kieu-xem button { border: 0; background: none; color: var(--muc-nhat); padding: 6px 13px; border-radius: 999px; font-weight: 500; white-space: nowrap; }
#kieu-xem button[aria-current="true"] { background: var(--muc); color: var(--giay); }
.co-chuyen .nhan-gian, .co-chuyen.co-ray .ray { margin-top: 52px; }
.co-chuyen .hanh-trinh { top: 64px; max-height: calc(100vh - 80px); }

/* Photographs: a button top right and its small menu */
#chup { position: fixed; top: max(12px, env(safe-area-inset-top, 0px)); right: var(--le-phai); z-index: 30; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.chup-nut { display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--giay); color: var(--muc); padding: 8px 13px; border-radius: 999px; box-shadow: var(--bong); font-size: 13px; font-weight: 600; }
.chup-bieu-tuong { display: grid; }
.chup-menu { width: 270px; background: var(--giay); border: 1px solid var(--vien); border-radius: 14px; box-shadow: var(--bong); padding: 14px; display: grid; gap: 10px; font-size: 13px; }
.chup-menu label { display: grid; gap: 4px; color: var(--muc-nhat); font-size: 12px; }
.chup-menu select { font: inherit; font-size: 13px; color: var(--muc); border: 1px solid var(--vien); background: #fff; border-radius: 8px; padding: 7px 8px; }
.chup-menu button { border: 1px solid var(--vien); background: var(--giay); border-radius: 10px; padding: 9px; font-weight: 600; }
.chup-menu button.chinh { background: var(--muc); border-color: var(--muc); color: var(--giay); }
.chup-menu button:disabled { opacity: .5; cursor: progress; }
.chup-trang-thai { margin: 0; font-size: 12px; color: var(--muc-nhat); }
.chup-trang-thai:empty { display: none; }

/* Arranging units: one panel for every layout, in place of the layout's own */
.dang-bay .dock, .dang-bay .ray, .dang-bay .hanh-trinh, .dang-bay .diem-nong { display: none; }
.dang-bay.co-ray .nhan-gian { display: flex; }
.bay { position: fixed; top: 64px; right: var(--le-phai); bottom: var(--le-duoi); z-index: 15; width: 360px; background: var(--giay); border: 1px solid var(--vien); border-radius: 16px; box-shadow: var(--bong); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.bay > * { flex: none; }
.bay-dau { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.bay h2 { margin: 0; font-size: 20px; line-height: 1.2; }
.bay .trang-thai { margin: 3px 0 0; font-size: 12px; color: var(--muc-nhat); }
.bay .xong { border: 0; background: var(--muc); color: var(--giay); border-radius: 10px; padding: 8px 16px; font-weight: 600; }
.bay .goi-y { margin: 0; }
.dang-chon { background: #f1efeb; border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px; font-size: 13px; }
.dang-chon span { color: var(--muc-nhat); }
.nut-nho, .cong-cu { display: flex; flex-wrap: wrap; gap: 6px; }
.nut-nho button, .cong-cu button { border: 1px solid var(--vien); background: var(--giay); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; font-weight: 500; }
.nut-nho button:hover, .cong-cu button:hover { border-color: var(--muc); }
.bay button.xoa { color: #b42318; }
.bay button:disabled { opacity: .4; cursor: default; }
.thong-bao { margin: 0; font-size: 12.5px; color: var(--cam-dam); font-weight: 500; }
.thong-bao:empty { display: none; }
.kho { flex: 1 1 auto; overflow-y: auto; min-height: 0; margin: 0 -4px; padding: 0 4px; }
.kho h3 { margin: 12px 0 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muc-nhat); }
.kho h3:first-child { margin-top: 0; }
.the-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 8px; }
.the { border: 1px solid var(--vien); background: #fff; border-radius: 10px; padding: 8px 6px; display: grid; gap: 3px; justify-items: center; text-align: center; cursor: grab; touch-action: pan-y; }
.the:hover { border-color: var(--muc); }
.the img { width: 100%; height: 60px; object-fit: contain; pointer-events: none; }
.the b { font-size: 12.5px; font-weight: 600; }
.the small { font-size: 10.5px; color: var(--muc-nhat); }
.cong-cu { border-top: 1px solid var(--vien); padding-top: 10px; }
.ti-le { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muc-nhat); }
.ti-le select { font: inherit; color: var(--muc); border: 1px solid var(--vien); background: var(--giay); border-radius: 8px; padding: 5px 6px; }
.the .hinh-nguoi { width: 100%; height: 60px; fill: var(--muc-nhat); }

@media (max-width: 760px) {
  .dock { flex-direction: column; align-items: stretch; }
  .che-do { display: flex; }
  .che-do button { flex: 1; padding: 7px 4px; font-size: 12.5px; }
  .che-do .dai { display: none; }
  .che-do .ngan { display: inline; }
  .nhan-gian { flex-wrap: wrap; row-gap: 0; max-width: calc(100vw - var(--le) - var(--le-phai)); }
  #kieu-xem button { padding: 6px 11px; }
  .chup-nut { padding: 8px 10px; }
  .chup-nut .dai { display: none; }
  .bay { top: auto; left: var(--le); width: auto; max-height: 50vh; padding: 14px; gap: 10px; }
  .dang-bay .nhan-gian { display: none; }
  .bay .goi-y { display: none; }
  .the-luoi { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  .ray { top: auto; right: 0; width: auto; max-height: 46vh; border-right: 0; border-top: 1px solid var(--vien); border-radius: 16px 16px 0 0; padding: 14px var(--le-phai) var(--le-duoi) var(--le); }
  .so-do { max-height: 180px; }
  .co-ray .nhan-gian { display: flex; }
  .hanh-trinh, .co-chuyen .hanh-trinh { top: auto; bottom: var(--le-duoi); left: var(--le); right: var(--le-phai); width: auto; max-height: 44vh; padding: 16px; }
  .hanh-trinh h2 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { #dang-tai, .thanh span { transition: none; } }