/* =========================================================================
 * MÀU THƯƠNG HIỆU (v3.6.0) — đổi thương hiệu cho từng khách KHÔNG cần sửa JS.
 * Engine đọc các biến này qua getComputedStyle khi vẽ marker/con trỏ/icon khuyến mãi.
 * Ghi đè bằng CSS của site (Customizer › Additional CSS), ví dụ:
 *   .rkm-kiosk-container { --rkm-accent: #e91e63; --rkm-primary: #1a237e; }
 * Mặc định khai bằng :where() (specificity 0) để rule ghi đè của site LUÔN thắng,
 * bất kể thứ tự nạp CSS. Trình duyệt kiosk quá cũ không hiểu :where()/CSS variable
 * -> rule bị bỏ qua -> engine tự rơi về màu mặc định nướng trong JS (an toàn).
 * ========================================================================= */
:where(.rkm-kiosk-container) {
    --rkm-accent: #D7DE27;   /* điểm nhấn: vòng marker, con trỏ chạy */
    --rkm-primary: #4c5429;  /* màu chủ đạo: viền marker, mũi tên infoboard */
    --rkm-promo: #f5a623;    /* icon khuyến mãi "%" */
    --rkm-light: #ffffff;    /* nền sáng của marker/viền chữ */
}

/* =========================================================================
 * TẦNG 1: CẤU HÌNH HỆ VỎ (SYSTEM SHELL VIEWPORT LOCK)
 * Ép toàn bộ ứng dụng kiosk phải nằm trọn trong 1 màn hình, khử thanh cuộn.
 * ========================================================================= */
.rkm-kiosk-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: #ffffff !important;
    width: 100% !important;
    max-width: 100% !important;
    /* P18 Phase G: dùng dvh (chiều cao viewport ĐỘNG) cho di động — tránh lỗi 100vh bị thanh
       địa chỉ che mất đáy. Khai vh trước làm fallback cho trình duyệt cũ không hiểu dvh. */
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
    /* Độc lập theme (Betheme/Elementor): khử thừa kế font/line-height của theme cho khối kiosk. */
    font-family: 'Bai Jamjuree', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
    line-height: 1.4 !important;
}
/* Reset box-sizing cho mọi phần tử HTML overlay trong kiosk (không đụng phần tử SVG). */
.rkm-kiosk-container .rkm-native-html-ui,
.rkm-kiosk-container .rkm-native-html-ui *,
.rkm-kiosk-container .rkm-cluster,
.rkm-kiosk-container .rkm-toggle-bar,
.rkm-kiosk-container .rkm-toggle-item,
.rkm-kiosk-container .rkm-map-title,
.rkm-kiosk-container .rkm-numpad-modal * {
    box-sizing: border-box !important;
}

.rkm-map-canvas-wrapper {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
}

.rkm-map-canvas-wrapper svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

/* =========================================================================
 * TẦNG 1B: TIÊU ĐỀ BẢN ĐỒ (P18, v3)
 * Overlay HTML đặt/sửa trong trình sửa bản đồ, KHÔNG nằm trong file SVG nữa.
 * Mặc định trên-giữa; Phase D (kéo-thả) sẽ ghi đè vị trí qua inline style.
 * ========================================================================= */
.rkm-map-title {
    position: absolute !important;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9990;
    max-width: 90%;
    padding: 8px 22px;
    background: rgba(255, 255, 255, 0.92);
    color: #1a2307;
    font-family: 'Bai Jamjuree', sans-serif;
    font-size: clamp(18px, 2.4vw, 34px);
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    pointer-events: none;
    box-sizing: border-box;
}

/* =========================================================================
 * TẦNG 1C: CỤM UI ĐẶT VỊ TRÍ TỰ DO (P18, v3)
 * Khi editor đặt vị trí (kéo-thả), cụm bàn phím số / thanh chọn điểm được render thành overlay
 * HTML trên appShell tại toạ độ %, thay vì foreignObject trong SVG. Kích thước do JS chiếu từ
 * placeholder; vị trí left/top (%) cũng do JS đặt inline. CSS chỉ lo định vị tuyệt đối + lớp.
 * ========================================================================= */
#rkm-app-shell .rkm-cluster {
    position: absolute !important;
    z-index: 9985 !important;
    box-sizing: border-box !important;
}

/* =========================================================================
 * TẦNG 1D: BÀN PHÍM SỐ KIỂU DI ĐỘNG (P18, v3 — Phase E)
 * Modal bật lên khi bấm ô điểm; thanh chọn điểm rộng + canh giữa trên cùng.
 * ========================================================================= */
#rkm-app-shell .rkm-numpad-modal {
    position: absolute !important;
    inset: 0 !important;
    z-index: 9995 !important;
    align-items: center !important;
    justify-content: center !important;
}
#rkm-app-shell .rkm-numpad-modal-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.45) !important;
}
#rkm-app-shell .rkm-numpad-modal-panel {
    position: relative !important;
    z-index: 1 !important;
    width: 360px !important;
    max-width: 86vw !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
    padding: 16px !important;
    box-sizing: border-box !important;
}
/* Trong modal: cho bàn phím chiều cao cụ thể để % của display-box hoạt động. */
#rkm-app-shell .rkm-numpad-modal-panel .rkm-numpad-ui {
    height: 56vh !important;
    max-height: 440px !important;
    margin-top: 28px !important; /* chừa chỗ cho nút đóng ở góc, tránh đè lên ô hiển thị. */
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    padding: 0 !important;
}
#rkm-app-shell .rkm-numpad-modal-close {
    position: absolute !important;
    top: 4px !important;
    right: 8px !important;
    z-index: 20 !important; /* trên ô hiển thị (z-index 10) để bấm được. */
    width: 40px !important;
    height: 40px !important;
    border: none !important;
    background: transparent !important;
    font-size: 28px !important;
    line-height: 1 !important;
    color: #4c5429 !important;
    cursor: pointer !important;
}
/* Thanh chọn điểm rộng + canh giữa khi ở kiểu popup (không có bàn phím cố định chiếm chỗ). */
#rkm-app-shell.rkm-numpad-popup .rkm-cluster-infoboard {
    width: 60% !important;
    left: 20% !important;
    height: auto !important;
}
#rkm-app-shell.rkm-numpad-popup .rkm-cluster-infoboard .rkm-info-ui {
    height: auto !important;
}

/* =========================================================================
 * TẦNG 2: GIAO DIỆN HYBRID TRONG SVG (UI SHELL)
 * ========================================================================= */
.rkm-native-html-ui {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    font-family: 'Bai Jamjuree', sans-serif !important;
    pointer-events: auto !important;
    overflow: hidden !important;
}

.rkm-numpad-ui {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    border: 2px solid #4c5429 !important;
    border-radius: 16px !important;
    padding: 10px !important;
    box-shadow: 0 10px 25px rgba(76, 84, 41, 0.2) !important;
}

.rkm-display-box {
    margin-bottom: 8px !important;
    height: 20% !important;
    position: relative !important;
    z-index: 10 !important;
}

.rkm-display-box input {
    width: 100% !important;
    height: 100% !important;
    font-size: 22px !important;
    text-align: center !important;
    border: none !important;
    border-bottom: 3px solid #4c5429 !important;
    background: rgba(255, 255, 255, 0.6) !important;
    color: #1a2307 !important; 
    -webkit-text-fill-color: #1a2307 !important;
    font-weight: 900 !important;
    border-radius: 8px 8px 0 0 !important;
    outline: none !important;
    box-sizing: border-box !important;
}

.rkm-display-box input::placeholder {
    color: #8a936a !important;
    -webkit-text-fill-color: #8a936a !important;
    opacity: 0.8 !important;
}

.rkm-virtual-numpad {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    flex-grow: 1 !important;
}

.rkm-key {
    background: #ffffff !important;
    border: 1px solid rgba(76, 84, 41, 0.2) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
    color: #4c5429 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: all 0.1s ease !important;
}

.rkm-key:active {
    transform: translateY(2px) scale(0.95) !important;
    background: #4c5429 !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.rkm-key-clear { color: #e11d48 !important; }
.rkm-key-find { background: #4c5429 !important; color: #ffffff !important; border: none !important; }
.rkm-key-find:active { background: #363c1d !important; }

.rkm-info-ui {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid #4c5429 !important;
    border-radius: 12px !important;
    padding: 8px 14px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important; 
    justify-content: space-between !important;
    gap: 10px !important;
    box-shadow: 0 8px 20px rgba(76, 84, 41, 0.15) !important;
}

.rkm-info-col {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    background: #f4f5f0 !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    border: 2px solid transparent !important;
    transition: all 0.3s ease !important;
}

.rkm-info-col.rkm-focus-active {
    background: #e9ebd9 !important;
    border-color: #4c5429 !important;
    box-shadow: inset 0 0 8px rgba(76, 84, 41, 0.2) !important;
    transform: scale(1.02) !important;
}

.rkm-info-separator {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.rkm-info-label {
    font-weight: 700 !important;
    color: #888 !important;
    font-size: 11px !important;
    margin-bottom: 2px !important;
    text-transform: uppercase !important;
}

.rkm-info-val {
    font-weight: 900 !important;
    color: #4c5429 !important;
    font-size: 18px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* P19 (v3.7.0): box "Khoảng cách" / "Thời gian đi bộ" trong infoboard — cùng DÁNG với
   .rkm-info-col (tái dùng .rkm-info-label/.rkm-info-val bên trong) nhưng chỉ chiếm đúng
   bề rộng nội dung (flex:0) và không bấm được. Box chỉ TỒN TẠI khi bật công tắc + đã
   hiệu chuẩn — không có box thì flex:1 của 2 ô ĐI/ĐẾN tự giãn full như cũ. */
.rkm-info-metric {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    background: #f4f5f0 !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    cursor: default !important;
    white-space: nowrap !important;
}

/* =========================================================================
 * TẦNG 3: ĐỘNG CƠ CÁP QUANG ĐẬM NÉT (BOLD QUANTUM FLOW ENGINE V7.3)
 * [ĐIỀU CHỈNH]: Phóng to toàn diện kích cỡ các layer chỉ đường để tăng độ nhận diện.
 * ========================================================================= */
[id^="route__"] {
    fill: none !important;
    stroke: transparent !important;
    stroke-width: 14px !important; /* Mở rộng vùng tương tác đón chuột (Hitbox) */
}

/* 1. LỚP RÃNH ÂM CHÌM (BASE SHADOW) - Nền đổ bóng */
[id^="route__"].rkm-path-base {
    stroke: #4c5429 !important;
    stroke-dasharray: none !important; 
    stroke-width: 18px !important; /* [CẬP NHẬT]: Tăng từ 10px lên 18px tạo rãnh sâu rõ nét */
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    opacity: 0.14 !important; 
}

/* 2. LỚP LÕI SỢI CÁP CHÍNH (SOLID CORE) - Trả lại size ban đầu */
.rkm-path-core {
    fill: none !important;
    stroke: #4c5429 !important; 
    stroke-width: 6.5px !important; /* [YÊU CẦU]: Tăng từ 2.5px lên 6.5px giúp khôi phục độ dày dặn nguyên bản */
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    pointer-events: none !important;
    opacity: 0.95 !important;
}

/* 3. LỚP HẠT NĂNG LƯỢNG MÀU THƯƠNG HIỆU #D7DE27 (PHOTON FLOW) */
.rkm-path-flow {
    fill: none !important;
    stroke: #D7DE27 !important; 
    stroke-width: 7.5px !important; /* [YÊU CẦU]: Tăng từ 4px lên 7.5px để bao bọc và làm nổi bật lõi chỉ đường */
    stroke-dasharray: 12 42 !important; /* Nới rộng khoảng cách đứt khúc tương ứng với độ dày mới */
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    pointer-events: none !important;
    filter: drop-shadow(0px 0px 8px rgba(215, 222, 39, 0.95)) !important; 
    animation: rkmQuantumFlow 0.9s linear infinite !important;
}

@keyframes rkmQuantumFlow {
    from { stroke-dashoffset: 54; }
    to { stroke-dashoffset: 0; }
}

/* =========================================================================
 * HOẠT HỌA PHẢN HỒI ĐIỂM NÚT & HIỆU ỨNG AURORA HEARTBEAT SMOOTH
 * ========================================================================= */
[id^="node__"], [id^="_"] {
    transform-origin: center !important;
    transform-box: fill-box !important; 
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.2s ease !important;
}
[id^="node__"]:hover, [id^="_"]:hover { 
    transform: scale(1.45) !important; 
}

[id^="btn__sidebar__"] {
    transform-origin: center !important;
    transform-box: fill-box !important;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    cursor: pointer !important;
}
[id^="btn__sidebar__"]:hover {
    transform: scale(1.08) !important;
    filter: drop-shadow(0px 4px 8px rgba(76, 84, 41, 0.25)) !important;
}

/* ĐIỂM ĐÃ CHỌN: Tỏa hào quang xanh lá sáng thương hiệu */
[id^="node__"].start-selected, [id^="_"].start-selected,
[id^="node__"].end-selected, [id^="_"].end-selected {
    transform: scale(1.45) !important; 
    filter: drop-shadow(0px 0px 14px rgba(215, 222, 39, 0.95)) !important; 
}

/* VÒNG SÓNG TIM ĐẬP MỊN MÀNG & GỌN GÀNG (GIẢM 30% SIZE) */
.rkm-heartbeat-ring {
    transform-origin: center !important;
    transform-box: fill-box !important;
    filter: drop-shadow(0px 0px 8px rgba(215, 222, 39, 0.85)) !important;
    animation: rkmHeartbeatEngine 2.2s cubic-bezier(0.25, 1, 0.5, 1) infinite !important;
}

@keyframes rkmHeartbeatEngine {
    0% {
        transform: scale(0.9);
        opacity: 1;
        stroke-width: 5px;
    }
    40% {
        opacity: 0.45;
        stroke-width: 2.2px;
    }
    100% {
        transform: scale(2.2);
        opacity: 0;
        stroke-width: 0.1px;
    }
}

/* =========================================================================
 * UX PATCH — chỉ BỔ SUNG, không sửa các rule phía trên.
 * ========================================================================= */

/* (A) Lớp đường tô sáng & đoạn thẳng tổng hợp KHÔNG được chặn click vào node,
 *     để khách luôn bấm lại được điểm đi / điểm đến sau khi đã có lộ trình. */
[id^="route__"].rkm-path-base,
.rkm-path-core,
.rkm-path-flow,
.rkm-synth {
    pointer-events: none !important;
}

/* (B) Ô nhập số phòng: luôn hiển thị RÕ số đang nhập, chữ đậm màu đậm,
 *     đè mọi style của theme (BeTheme/Elementor) bằng độ ưu tiên cao hơn. */
#rkm-app-shell .rkm-display-box {
    min-height: 42px !important;
}
#rkm-app-shell #rkm-search-input,
#rkm-app-shell .rkm-display-box input {
    color: #1a2307 !important;
    -webkit-text-fill-color: #1a2307 !important;
    opacity: 1 !important;
    font-weight: 900 !important;
    font-size: 26px !important;
    letter-spacing: 2px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    background: rgba(255, 255, 255, 0.85) !important;
}

/* (C) Overlay chuyển tiếp khi đổi sang bản đồ liên kết (P6 cross-map routing).
 *     Phủ kín khung kiosk trong lúc tải SVG map đích để khách không thấy DOM thay đổi giật. */
#rkm-app-shell .rkm-crossmap-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(26, 35, 7, 0.82) !important;
    animation: rkm-crossmap-fade 0.25s ease-out;
}
#rkm-app-shell .rkm-crossmap-overlay-inner {
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 22px !important;
    text-align: center !important;
    padding: 18px 26px !important;
    line-height: 1.3 !important;
}
#rkm-app-shell .rkm-crossmap-overlay-label {
    margin-top: 8px !important;
    color: #D7DE27 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}
@keyframes rkm-crossmap-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* (D) Hộp tìm kiếm điểm đến (P7 POI search) — nằm trong placeholder__search của SVG. */
#rkm-app-shell .rkm-search-ui {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
}
#rkm-app-shell .rkm-poi-search-input {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 14px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1a2307 !important;
    -webkit-text-fill-color: #1a2307 !important;
    border: 2px solid #4c5429 !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    outline: none !important;
}
#rkm-app-shell .rkm-search-suggestions {
    display: none;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(100% + 4px) !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    background: #ffffff !important;
    border: 2px solid #4c5429 !important;
    border-radius: 10px !important;
    z-index: 9998 !important;
    box-shadow: 0 6px 18px rgba(26, 35, 7, 0.25) !important;
}
#rkm-app-shell .rkm-search-suggestion {
    padding: 12px 14px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1a2307 !important;
    cursor: pointer !important;
    border-bottom: 1px solid #e7ead6 !important;
}
#rkm-app-shell .rkm-search-suggestion:hover,
#rkm-app-shell .rkm-search-suggestion:active {
    background: #eef0df !important;
}
#rkm-app-shell .rkm-search-empty {
    padding: 12px 14px !important;
    font-size: 16px !important;
    color: #6b7250 !important;
    font-style: italic !important;
}

/* (E) Icon khuyến mãi tại node (P9) + popup. */
#rkm-app-shell .rkm-promo-icon-ring {
    animation: rkm-promo-pulse 1.6s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}
@keyframes rkm-promo-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}
#rkm-app-shell .rkm-promo-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 10000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(26, 35, 7, 0.55) !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}
#rkm-app-shell .rkm-promo-card {
    position: relative !important;
    max-width: 420px !important;
    width: 100% !important;
    max-height: 88% !important;
    overflow-y: auto !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    padding: 22px !important;
    box-shadow: 0 10px 30px rgba(26, 35, 7, 0.35) !important;
    text-align: center !important;
}
#rkm-app-shell .rkm-promo-close {
    position: absolute !important;
    top: 8px !important;
    right: 10px !important;
    border: none !important;
    background: transparent !important;
    font-size: 30px !important;
    line-height: 1 !important;
    color: #4c5429 !important;
    cursor: pointer !important;
}
#rkm-app-shell .rkm-promo-img {
    width: 100% !important;
    max-height: 220px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    margin-bottom: 14px !important;
}
#rkm-app-shell .rkm-promo-title {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #1a2307 !important;
    margin-bottom: 8px !important;
}
#rkm-app-shell .rkm-promo-detail {
    font-size: 16px !important;
    color: #3a4422 !important;
    line-height: 1.45 !important;
    margin-bottom: 16px !important;
    white-space: pre-line !important;
}
#rkm-app-shell .rkm-promo-cta {
    display: inline-block !important;
    padding: 12px 26px !important;
    background: #4c5429 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
}

/* (F) Thanh checkbox tuỳ chọn lối đi (P18, v3): gom "Ưu tiên lối không bậc thang" (P13) +
   "Điểm nổi bật" (scenic P10) vào 1 thanh, đặt NGAY DƯỚI cụm chọn điểm. Vị trí cụ thể (left/top)
   do JS tính theo .rkm-info-ui trong positionToggleBar(); CSS chỉ lo dáng + bố cục. */
#rkm-app-shell .rkm-toggle-bar {
    position: absolute !important;
    z-index: 9990 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
}
#rkm-app-shell .rkm-toggle-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 16px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    color: #1a2307 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border: 2px solid #4c5429 !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(26, 35, 7, 0.25) !important;
    user-select: none !important;
}
#rkm-app-shell .rkm-toggle-item input {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    cursor: pointer !important;
    accent-color: #4c5429 !important;
}

/* (G) Sponsored search (P11): nhãn "Đối tác" trong kết quả tìm kiếm. */
#rkm-app-shell .rkm-search-suggestion.rkm-sponsored {
    background: #fffae8 !important;
}
#rkm-app-shell .rkm-sponsor-badge {
    display: inline-block !important;
    margin-left: 8px !important;
    padding: 1px 8px !important;
    background: #f5a623 !important;
    color: #1a2307 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    border-radius: 999px !important;
    vertical-align: middle !important;
}

/* (H) Gợi ý "trên đường đi" (P11): banner mảnh nổi trên cùng giữa. */
#rkm-app-shell .rkm-onroute-banner {
    position: absolute !important;
    left: 50% !important;
    top: 14px !important;
    transform: translateX(-50%) !important;
    z-index: 9991 !important;
    max-width: 90% !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 9px 18px !important;
    background: rgba(76, 84, 41, 0.95) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 14px rgba(26, 35, 7, 0.35) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
#rkm-app-shell .rkm-onroute-cta {
    flex: none !important;
    padding: 5px 14px !important;
    background: #D7DE27 !important;
    color: #1a2307 !important;
    font-weight: 800 !important;
    border-radius: 999px !important;
    text-decoration: none !important;
}
/* (I) [P18 v3] Toggle "Ưu tiên lối không bậc thang" (P13) + "Điểm nổi bật" (P10) đã GOM vào
   .rkm-toggle-bar ở khối (F) phía trên — không còn chip rời .rkm-access-toggle / nút .rkm-scenic-btn. */

/* (J) QR tiếp tục + idle ads + voucher (P14). */
#rkm-app-shell .rkm-qr-panel {
    position: absolute !important;
    right: 18px !important;
    bottom: 18px !important;
    z-index: 9992 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 12px !important;
    background: #ffffff !important;
    border: 2px solid #4c5429 !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 18px rgba(26, 35, 7, 0.3) !important;
}
#rkm-app-shell .rkm-qr-caption {
    max-width: 150px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #1a2307 !important;
    text-align: center !important;
}
/* KHÔNG !important: lib qrcode.js (vendor) tự bật/tắt canvas/img bằng inline style để chỉ
   hiện 1 trong 2 (tránh hiện trùng 2 mã QR) — !important ở đây sẽ đè mất toggle đó. */
#rkm-app-shell .rkm-qr-code img,
#rkm-app-shell .rkm-qr-code canvas {
    display: block;
}
#rkm-app-shell .rkm-voucher-toast {
    position: absolute !important;
    left: 50% !important;
    bottom: 70px !important;
    transform: translateX(-50%) !important;
    z-index: 9991 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 18px !important;
    background: #1a2307 !important;
    color: #ffffff !important;
    font-size: 15px !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 14px rgba(26, 35, 7, 0.4) !important;
}
#rkm-app-shell .rkm-voucher-code {
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    color: #D7DE27 !important;
    font-size: 18px !important;
}
#rkm-app-shell .rkm-idle-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 10000 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 22px !important;
    background: rgba(26, 35, 7, 0.92) !important;
    cursor: pointer !important;
}
#rkm-app-shell .rkm-idle-card {
    width: min(70%, 520px) !important;
    max-height: 70% !important;
    overflow: hidden !important;
    padding: 26px !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    text-align: center !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}
#rkm-app-shell .rkm-idle-img {
    max-width: 100% !important;
    max-height: 280px !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
}
#rkm-app-shell .rkm-idle-title {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #1a2307 !important;
}
#rkm-app-shell .rkm-idle-detail {
    margin-top: 8px !important;
    font-size: 16px !important;
    color: #4c5429 !important;
}
#rkm-app-shell .rkm-idle-voucher {
    margin-top: 14px !important;
    font-size: 16px !important;
    color: #1a2307 !important;
}
#rkm-app-shell .rkm-idle-hint {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    opacity: 0.9 !important;
    animation: rkm-idle-pulse 1.6s ease-in-out infinite !important;
}
@keyframes rkm-idle-pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }

/* =========================================================================
 * TẦNG 9: TỐI ƯU DI ĐỘNG (P18, v3 — Phase G)
 * Màn hẹp: nút/ô đủ to để chạm (>=48px), chữ co giãn, modal bàn phím gần kín bề ngang.
 * Khuyến nghị: bản đồ dùng trên điện thoại nên đặt "Kiểu bàn phím số = popup" trong editor.
 * ========================================================================= */
@media (max-width: 768px) {
    /* Vùng chạm tối thiểu cho phím số. */
    #rkm-app-shell .rkm-key {
        min-height: 48px !important;
        font-size: 20px !important;
    }
    /* Ô ĐIỂM ĐI / ĐIỂM ĐẾN dễ chạm hơn. */
    #rkm-app-shell .rkm-info-col {
        min-height: 48px !important;
    }
    #rkm-app-shell .rkm-info-label { font-size: 12px !important; }
    #rkm-app-shell .rkm-info-val { font-size: 15px !important; }
    /* Checkbox tuỳ chọn: tăng vùng chạm, cho phép xuống dòng. */
    #rkm-app-shell .rkm-toggle-bar { max-width: 96% !important; }
    #rkm-app-shell .rkm-toggle-item {
        min-height: 44px !important;
        font-size: 13px !important;
        padding: 8px 12px !important;
    }
    #rkm-app-shell .rkm-toggle-item input { width: 22px !important; height: 22px !important; }
    /* Tiêu đề co lại trên màn nhỏ. */
    #rkm-app-shell .rkm-map-title {
        font-size: clamp(15px, 5vw, 22px) !important;
        padding: 6px 14px !important;
        max-width: 94% !important;
    }
    /* Modal bàn phím gần kín bề ngang + cao hơn để bấm thoải mái. */
    #rkm-app-shell .rkm-numpad-modal-panel {
        width: 92vw !important;
        max-width: 92vw !important;
    }
    #rkm-app-shell .rkm-numpad-modal-panel .rkm-numpad-ui {
        height: 64vh !important;
        max-height: 64vh !important;
    }
    #rkm-app-shell .rkm-numpad-modal-close { width: 48px !important; height: 48px !important; }
    /* Kiểu popup: thanh chọn điểm rộng gần kín, canh giữa. */
    #rkm-app-shell.rkm-numpad-popup .rkm-cluster-infoboard {
        width: 92% !important;
        left: 4% !important;
    }
}