/* ==========================================================================
 * THẺ HƯỚNG DẪN (Guide): nhỏ gọn nằm trên dock, không chặn quán.
 * Dải màu theo loại: chỉ đường = xanh dương, lần đầu gặp sự cố = cam.
 * ========================================================================== */
#guide-card { position: fixed; left: 50%; bottom: calc(var(--dock-h) + 10px); transform: translateX(-50%); z-index: 34; width: min(440px, calc(100vw - 20px)); padding: 0 0 8px; overflow: hidden;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 5px 0 var(--ink), 0 12px 24px rgba(0, 0, 0, .35); }
#guide-card[hidden] { display: none; }
#guide-card.pop-in { animation: guidein .28s cubic-bezier(.2, 1.5, .5, 1); }
@keyframes guidein { from { transform: translate(-50%, 18px); opacity: 0; } }
/* Thẻ hướng dẫn thế chỗ khung nhiệm vụ đang nằm trên dock */
body.guiding #quest-tracker { display: none; }
body.portrait #guide-card { width: calc(100vw - 16px); bottom: calc(var(--dock-h) + 8px); }
.gc-head { display: flex; align-items: center; gap: 9px; padding: 7px 8px 7px 10px; border-bottom: 3px solid var(--ink); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .14) 0 8px, transparent 8px 16px), linear-gradient(#ffa53d, #f07b12); }
#guide-card.is-step .gc-head { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .14) 0 8px, transparent 8px 16px), linear-gradient(#45a5f5, #1c79cf); }
.gc-ic { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; background: #fff; border: 2px solid var(--ink); border-radius: 10px; box-shadow: 0 2px 0 var(--ink); }
.gc-ic .pxi { height: 20px; }
.gc-ti { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.gc-ti small { font: 800 9.5px var(--display); letter-spacing: .8px; opacity: .92; }
.gc-ti b { font: 800 17px/1.15 var(--display); }
.gc-x { flex: 0 0 auto; width: 30px; height: 30px; border: 2px solid var(--ink); border-radius: 50%; background: #fff; color: var(--ink); font: 800 18px/1 var(--display); cursor: pointer; }
.gc-body { margin: 8px 12px 6px; font-size: 13.5px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.gc-btns { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 12px; }
.gc-btns .btn { flex: 1 1 auto; min-height: 40px; padding: 5px 12px; font-size: 14px; }
.gc-btns .btn-gray { flex: 0 0 auto; }
.gc-off { display: block; margin: 5px auto 0; font-size: 11px; color: var(--muted); }
/* Làm nổi bật thẻ đích sau khi dẫn tới (ví dụ thẻ nâng cấp máy lạnh) */
.guide-flash { animation: guideflash 1s ease-in-out 4; position: relative; z-index: 1; }
@keyframes guideflash { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 58, 0); } 50% { box-shadow: 0 0 0 5px #ffe14d, 0 0 18px 6px #ffd23a; } }
/* Sổ tay hướng dẫn (Menu → Hướng dẫn) */
.modal.guide-book { width: min(460px, 100%); }
.gb-auto { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; font-size: 13px; font-weight: 700; }
.gb-list { display: flex; flex-direction: column; gap: 8px; max-height: min(58vh, 480px); overflow-y: auto; margin-bottom: 10px; padding-right: 2px; }
.gb-row { display: flex; gap: 10px; padding: 8px 10px; background: #fff; border: 2px solid var(--ink); border-radius: 13px; }
.gb-row.done { background: #eaf7e6; }
.gb-row b { display: block; font: 800 15px/1.2 var(--display); }
.gb-row small { display: block; margin: 2px 0 6px; color: var(--ink-2); font-size: 12.5px; line-height: 1.4; }
.gb-go { display: flex; align-items: center; gap: 8px; }
.gb-go i { font-style: normal; font-size: 11px; color: var(--muted); }