/* Mobile UX pass for the original Trang viên 3D: one control per safe zone, no floating HUD collisions. */
@media (max-width:700px){
  :root{--safe-bottom:env(safe-area-inset-bottom,0px);--pad:12px;--control:52px}
  body{overflow:hidden}
  /* Bo dem sen nay nam trong hang nut tren cung, khong con toa do rieng;
     o kho hep thi thu nho lai cho hang nut khoi xuong dong som. */
  #hud-sen{font-size:11px;padding:5px 9px}
  /* 112px la be ngang cua ban do tron, khong phai cua danh sach. Bay ten khu
     phai chen vao khoang 40px con lai sau cai cham mau, bieu tuong va ngoi sao
     yeu thich - "Hoc thuat & Nghien cuu" be xuong nam dong, con ngoi sao bi day
     han ra ngoai mep man hinh. Danh sach can rong hon ban do. */
  #bd-thang{right:var(--pad);top:calc(var(--hud-cao,46px) + 16px);width:min(196px,54vw)}
  #ban-do{right:var(--pad);top:calc(var(--hud-cao,46px) + 91px);width:82px;height:82px}
  #ban-do canvas{width:72px;height:72px}
  #bieu-cam{left:50%;bottom:calc(var(--safe-bottom) + 12px);transform:translateX(-50%);gap:4px;padding:5px 7px;z-index:10020!important}
  #bieu-cam button{width:34px;height:34px;font-size:16px}
  #can{left:var(--pad);bottom:calc(var(--safe-bottom) + 12px);width:112px!important;height:112px!important;border-radius:50%;z-index:10030!important}
  #can i{width:48px!important;height:48px!important}
  #nut-xe{left:136px;right:auto;bottom:calc(var(--safe-bottom) + 17px);width:46px;height:46px;z-index:10040!important}
  #nut-cham{right:var(--pad);bottom:calc(var(--safe-bottom) + 17px);width:46px;height:46px;z-index:10040!important}
  #nut-msg{right:var(--pad);bottom:calc(var(--safe-bottom) + 71px);width:46px;height:46px;z-index:10040!important}
  #hm-widget{left:50%;right:auto;bottom:calc(var(--safe-bottom) + 62px);transform:translateX(-50%);z-index:10040!important}
  #hm-widget #hm-nut{width:42px;height:42px}
  #th-story-huong{display:none!important}#th-story-quest{display:flex!important;left:12px;top:108px;right:auto;bottom:auto;max-width:46vw;font-size:9px;padding:8px 10px}
  .th-side-actions{left:126px;right:var(--pad);bottom:calc(var(--safe-bottom) + 72px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;z-index:10050!important}
  .th-side-actions .th-side-btn,.th-side-actions .th-mini-btn{min-width:0;width:100%;justify-content:center;padding:8px 3px;font-size:9px;line-height:1.05;white-space:nowrap}
  .th-side-actions .th-side-btn strong,.th-side-actions .th-mini-btn strong{min-width:16px;height:16px;font-size:9px}
  #goi-y{bottom:calc(var(--safe-bottom) + 128px);max-width:74vw;z-index:10045!important}
  #th-pickup{bottom:calc(var(--safe-bottom) + 182px);max-width:88vw;white-space:nowrap;z-index:10060!important}
  #th-play-hint{top:108px;max-width:88vw;text-align:center;z-index:10055!important}
  #hud-quote{bottom:calc(var(--safe-bottom) + 226px);max-width:88vw}
  #hud-msg{bottom:calc(var(--safe-bottom) + 218px);max-width:88vw}
  #toast-sen{padding-bottom:calc(var(--safe-bottom) + 12px)}
  .th-panel-backdrop,.th-story-backdrop{padding:12px;align-items:end}
  .th-panel,.th-story-card{max-height:78vh;overflow:auto;border-radius:22px 22px 14px 14px}
}
@media (max-width:380px){#can{left:8px;width:98px!important;height:98px!important}.th-side-actions{left:126px;right:8px;gap:4px}.th-side-actions .th-side-btn,.th-side-actions .th-mini-btn{font-size:8px;padding-inline:2px}.th-npc-dock{left:8px;right:8px}.th-npc-chip{padding-inline:7px}#nut-xe{left:114px;width:42px;height:42px}#nut-cham,#nut-msg{right:8px;width:42px;height:42px}}
@media (orientation:landscape) and (max-height:520px){#bieu-cam{display:none}#can{transform:scale(.82);transform-origin:bottom left}#th-pickup{bottom:76px}.th-side-actions{left:120px;right:12px;bottom:68px}.th-side-actions .th-side-btn,.th-side-actions .th-mini-btn{padding:6px 4px}.th-npc-dock{bottom:124px}}

/* Save-state controls: keep resume actions inside the start card and below the primary CTA. */
#th-save-controls{margin:10px auto 0;max-width:300px;text-align:center;color:#8b6a81;font-size:10px}
.th-save-state{min-height:16px;line-height:1.35}
.th-save-actions{display:flex;gap:7px;margin-top:7px;justify-content:center}
.th-save-actions button{min-height:36px;padding:7px 10px;border:1px solid rgba(190,92,128,.28);border-radius:999px;background:rgba(255,255,255,.72);color:#9c4e70;font:700 10px 'Be Vietnam Pro',sans-serif;touch-action:manipulation}
.th-save-actions button:first-child{background:#cb6b91;color:#fff;border-color:#cb6b91}
.th-save-actions button:active{transform:translateY(1px)}
@media(max-width:700px){#th-save-controls{max-width:86vw}.th-save-actions button{min-height:40px;padding-inline:13px;font-size:10px}}

/* Tour customization: keep preferences readable without competing with mobile controls. */
.bd-tour-settings{margin:.45rem 0;padding:.55rem .65rem;border:1px solid rgba(74,55,48,.16);border-radius:.9rem;background:rgba(255,251,240,.88);color:#4A3730}
.bd-tour-label{font:700 .68rem/1.2 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.35rem}
.bd-tour-speed{display:grid;grid-template-columns:repeat(3,1fr);gap:.3rem}
.bd-tour-speed button{min-height:38px;border:1px solid rgba(74,55,48,.18);border-radius:.65rem;background:#fff8e9;color:#4A3730;font:700 .67rem/1 system-ui,sans-serif;padding:.35rem .25rem;touch-action:manipulation}
.bd-tour-speed button.active{background:#5C7F62;color:#fff;border-color:#5C7F62;box-shadow:0 3px 0 rgba(74,55,48,.12)}
.bd-tour-fav-note{margin-top:.38rem;font:600 .66rem/1.3 system-ui,sans-serif;opacity:.72}
.khu-chon{position:relative}
.khu-chon .favorite{margin-left:auto;min-width:28px;min-height:28px;display:grid;place-items:center;color:#D98C4A;font-size:1rem;line-height:1;touch-action:manipulation}
@media(max-width:380px){.bd-tour-settings{padding:.48rem}.bd-tour-speed button{font-size:.59rem;min-height:36px}.bd-tour-fav-note{font-size:.6rem}}